親バカエンジニアのナレッジ帳

webのエンジニアをやっており、日頃の開発で詰まったことや書き残しておきたいことを載せています。

Nuxtのソース表示でcssが全部出力されないようにする方法

Nuxtでソースの表示 ブラウザ上からページのソースを見ることができますが(Chromeで「ページのソースを表示」を実行する)Nuxtでソースを表示させた時にデフォルトの設定だとCSSが全部出力されませんか? 本来見たい部分までひたすらスクロールして大変な思…

Vue.jsではjavascript:void(0)をなくそう

aタグのイベント javascriptでは数々のイベントを設置するもの。 ホバーした時、スクロールした時、、、など色々パターンはありますが、特に多いのはクリック時のイベントではないでしょうか。 そして大体それらはaタグに設置されますよね。ただ、aタグには…

Javaのファイル読み込みメソッドを整理

ファイルを読み込む処理 例えばcsvファイルなど、ファイルの内容を読み込んで処理をすることがありますよね。そんな時にFileInputStreamやらInputStreamReaderやらBufferedReaderを使う必要があるのですが、初見だと何がなにやらさっぱりですよね。そんなメ…

Spring Bootの起動が遅いので試行錯誤した話

コンパイル言語の宿命 Spring Bootに限らずJava等コンパイル言語の宿命ですが、ちょっとした変更でもいちいちコンパイルが必要になりますよね。 そうして開発効率の悪さを感じてしまいます。 ※もちろんコンパイル言語は実行時のパフォーマンスに安定感がある…

Vue.jsから開発モードでクロスドメインのアクセス

開発時のVueとサーバサイドのポート番号 VueでサーバサイドのAPIを使用する開発をしており、サーバサイドのサーバも起動させている場合、Vueとサーバサイドのポート番号は異なることと思います。 Vueで「npm run dev」コマンドを使用して開発している場合、…

Spring Boot のCORS対策

CORSとは? 通常Webページでは、同一生成元ポリシー(Same Origin Policy)によってWebページを生成したドメイン以外へのHTTPリクエストができません。 しかし、外部リソースから情報を取得してページ内で表示したいというニーズは当然のようにあり、CORSとい…

Nuxtの$axiosにおけるgetと$getの違い

Nuxtで使用する$axios SPAサイトではガンガン行う非同期通信、その中でもaxiosは良く使われると思いますが、 Nuxtの場合はnuxt-community/axios-moduleのモジュールを使うことが一般的でしょう。注意したいのが、何も考えずに $axios.$get とやると、いつも…

VueやNuxtで消えないdefault child route のWARNING

routerでchildrenを設定していると表示されるWARNING VueやNuxtでは、routerの設定でchildrenを使うと構造的に見やすいルーティングを生成できますよね。 ただし、以下のような一件問題なさそうなルーティングを書いた場合、WARNINGが表示されてしまいます。…

Nuxtではデフォルトで.gitファイルが配置される

Nuxtのインストール後のディレクトリ構成 yarnやnpmでnuxtをインストールした後のディレクトリ構成は以下になります。Project ┣ .git ┣ .nuxt ┣ node_modules ┣ assets ┣ components ┣ layouts ┣ pages ┣ store ┣ static ┣ plugins ┣ middleware ┣ nuxt.conf…

Nuxtでfunction()から始まるようなJavascript構文を呼び出し

function()から始まるような構文 サイト制作でJavascriptのライブラリを使う昨今、サイト表示時点で外部にアクセスするような、 function()から始まるような構文を使うことはよくありますよね。 例えば流入数を計測するためのお決まりのタグや、Typekitなど…

SpringBootのFormバリデーションで、Listを使って別々の項目に同じチェック

SpringBootのFormで使われるList SpringBootのFormバリデーションで独自バリデーションを作成し、 適用している人にとってはよく見かけるListですが、これの使い道は知ってますか?例) public @interface List { TestValidate[] value(); } 一例ですが、例…

ステートレスの場合のセッションハイジャック対策

セッションハイジャックとは ハイジャックという言葉は、輸送機関などが強奪される時に使用される言葉ですが、web業界でも使用されます。 それがセッションハイジャック。 セッションハイジャックについてはググればいくらでも出てくるので詳細な説明は省き…

Entityの@ManyToOneでCascadeオプションの使い道

Entityの@ManyToOne あるEntity(エンティティ)に対してフィールドを設定した時に、 Entityとフィールドが多対一の関係にある時に使用します。 このあたりの説明は長くなるので、詳細を知りたい人はぐぐって調べてみてください。ただ@ManyToOneを付けるだけ…

RailsでAPI用のアプリを作成(POST処理編)

APIのPOST処理を実行 前回は以下の記事のように、RailsでAPIを使用してGET処理を行いました。 ti-tomo-knowledge.hatenablog.com今回はPOST処理の方を行い、データの保存まで行いたいと思います。 最終的に実行したいAPIコマンドは以下になります。 curl -X …

RailsでAPI用のアプリを作成(GET処理編)

APIモードでアプリを作成 前回の内容 ti-tomo-knowledge.hatenablog.com前回Railsをセットアップして起動させるところまで進めましたが、今回は主にAPI用でRailsを使いたいので、GET処理をするAPIを作ってみたいと思います。(POST処理は次回) 今回は再度API…

WP All Exportのプラグインで、ZipArchiveクラスが見つからないよ〜

ZipArchiveクラスが見つからないよエラー wordpressのプラグインで、WP All Exportを使用した時、以下のエラーメッセージが画面の上に表示されて困った人はいませんか? ZipArchiveクラスがサーバで見つかりません。 Webホスティングプロバイダーにお問い合…

MacでRailsを10分で起動!爆速セットアップ!

環境構築も爆速に! 開発効率に定評のあるRailsですが、環境構築も爆速にできてしまう点に特徴があります。 今回はMacでの説明になりますが、一気にやってしまいましょう!インストールでは、Rubyのバージョンを管理するためにrbenvと、rbenvのプラグインでr…

Nuxt.jsでプロジェクトを作成してみた

Nuxt.jsとは? Nuxt.jsとは、Vueアプリケーションを作成するフレームワークです。 通常のVue.jsの開発で頻繁に使用する以下の機能を最初から含んでいます。・Vue 2 ・Vue Router ・Vuex ・Vue Server Renderer ・vue-metaなんと言っても「Vue Server Rendere…

AWSでのメール送信でタイムアウトが頻繁に発生

SpringBoot + EC2の構成で、メール送信エラーが頻発 SpringBoot + EC2のアプリケーションでメルマガ機能を作成していましたが、どうにもメール送信が途中で止まってしまうということで、ログを確認すると以下のようなエラーログが頻発していました。 要はタ…

MySQLで、先頭だけ大文字にしたい

先頭だけ大文字に MySQLのあるカラムについてアルファベットなどが登録されている場合に、先頭だけ大文字に変換して取得する方法です。 例えば英単語を保存しているカラムからデータを取得したい場合など、使う場面はまぁまぁあると思います。 UPPERとLOWER…

さくらのメールサーバの容量を個別にチェックして通知メールを送信

メールサーバの容量チェック 以前会社でさくらのメールサーバを運用していた時、1人で大量に容量を使いすぎないように、定期的にチェックして容量が大きい人は容量を空けてもらう依頼を出していた時がありました。 毎日目視でチェックするのはしんどかったの…

気になる技術は即実施せよ!

新技術が飛び交うエンジニア業界 Webの業界はとにかく進化が早く、エンジニア業界も次々と新しい技術が出てきますね。 私は情報収集をする場合に気をつけていることとして、ただひたすら数多く情報をインプットするということは避けるようにしています。触り…

computedを利用してVuexのstoreをwatch

storeの変更を検知したいパターン Vue.jsでは状態を管理するのに便利なVuexのstoreですが、storeの値が変更されたタイミングでイベントを実行したくなる場面はありませんか?例えば別なコンポーネントで、非同期で値を取得するAPIを実行し、その結果をstore…

@Columnのlengthやnullableでエラー検知してくれない

Spring Bootのバリデーション Spring Bootでは、フォームやエンティティクラスにおいて、アノテーションによる入力値チェックが可能なことはご存知でしょう。一応このブログ内でもフォームのバリデーションについては記しているので参考までにSpring BootでB…

はてなブログのAMPページで記事ごとに手動でAdsenseを設置!

はてなブログのAMPページ はてなブログでは、有料アカウントであるPROになるとページをAMPに対応させることができます。 AMPページは高速にページを表示することが可能で、ユーザにとってすぐに情報を見れるような仕組みでありSEOにも効果がある(対応しない…

Spring BootをIDEを使わずコマンドで実行

開発環境でのSpring Bootの実行 でも記載している通り、Spring Bootは開発環境だとIDEなどで簡単に設定することが可能です。 ちょっとの設定でいつでも停止や実行ができるので楽ですよね。 ブレークポイントで止めながらデバッグをしたい場合にも便利です。…

Tomcat+Nginx+Spring Bootで画像アップロードサイズを変更する方法

画像アップロード時には最大ファイルサイズが存在する ファイルアップでは、サーバにファイルを保存するわけですが、ファイルサイズに上限はあります。 アプリによっては容量の大きなファイルをアップロードする場面もありますので、その上限が小さいと不都…

object-fit-imagesをVue.jsで実装

object-fit 画像を綺麗にトリミングしてくれるcssのプロパティにobject-fitがありますよね。 大きさが均一ではない多くの画像を扱うサービスでは非常に有用なプロパティです。 そんなobject-fitですが、全てのブラウザに対応できていないことが欠点ですね。I…

SIerとして働くことの何が嫌だったのか…SIerを辞めた理由と私が経験した業界事情

今回は技術のお話ではありません! いつもは技術的なことをたらたらと記事にしているのですが、今回は技術のお話ではありません。 今回は私の過去のSIer時代の業務内容について、また、SIerを退職した話を書きたいと思います。なぜ過去の話を書きたくなった…

Tomcatのログファイルを整理せよ!

Tomcatのデフォルトのログ設定 タイトルの通りですが、今回はTomcatのログファイルに関する設定についてです。 Tomcatはデフォルトの設定のままでは多くのログファイルを出力します。 ただ、中には運用上不要なものが多く、ログを出しっぱなしだとファイル数…