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

webのエンジニアをやっており、日頃の開発で詰まったことや書き残しておきたいことを載せています。育児のイロハという育児サイト(https://ikujip.jp)の開発も行っているため、その開発で使用されている技術についても掲載しています。

Vue.jsでビルド時にgzipファイルを出力する方法

出力ファイルは極力圧縮したい Webサービスにおいて、コンテンツ内容や機能面の充実度が重要であることは言うまでもありませんが、ページのパフォーマンスも重要ですよね。 当然遅いより早い方が良いに決まっています。今回はパフォーマンス改善策の1つであ…

Spring Data JPAでパラメータ以外でコロンを使いたい

RepositoryにSQLを直接記入 Spring Data JPAでORマッパーでは書けないようなSQLを実行したい場合、Repositoryに直接構文を書きますよね。 そんな時、パラメータで変数の値を渡したい時はコロンで変数を指定しますよね。 例えば以下のidのように @Query(value…

Spring Data JPA のfind+OrderByで、No property desc foundエラー時の対処法

Spring Data JPAでのOrderBy Spring Data JPAでエンティティクラスにfindして複数のレコードを取得する場合、OrderByをつければ並び順を変更できることはご存知でしょうか? findByNameOrderById(Spring name) などとすれば、nameで絞り込んだ上で、idの降順…

Vue.jsのv-ifやv-forで無駄にタグを増やしたくない時はtemplateで代用するのが便利

Vue.jsでの分岐やループ処理 Vue.jsでは分岐やループ処理で、動的にタグを描画したい場面がありますよね。 例えばリストを動的に増やしたい時は、liタグにv-forを付与したり、ある文言が特定の条件を満たした時のみ表示させる場合はpタグにv-ifを付けたりな…

Spring Bootで実行SQLのログを取得する方法

アプリケーション開発でのSQLログ アプリケーションの開発をしている時、実行されたSQLのログを参照したい場面がありますよね。 想定外のSQLが実行されていないか確認したり、ボトルネックとなっているSQLを確認したりなど。 Spring BootではそのようなSQLの…

Vue.jsでURLの#(シャープ)を取り除く方法

URLの#(シャープ) Vue-cliでvue.jsのセットアップを行った時、開発環境のURLを叩くと後ろに#(シャープ)が付いてしまいます。http://localhost:8080と入力しても、http://localhost:8080/#/ となってしまいます。これはhashモードという状態で付くものであり…

Spring BootでEntityオブジェクトのクローンをしてみる

Entityオブジェクトのクローン SpringBootで機能の実装をしている中で、Entityオブジェクトのクローンを作りたくなることはありませんか?例えばコピー機能などを想像してみてください。 いちいちオブジェクトをnewして、同じ値を全てsetして保存する...そん…

SpringBootでローカルjarファイルをMavenで管理

ローカルjarファイルはどんな時に使う? 普段SpringBootで外部ライブラリを使う時、Mavenの設定ファイルであるpom.xmlを使う人が多いのではないでしょうか。Mavenのリポジトリにあり、誰でもインストールして使えるライブラリだとそのやり方で問題ないのです…

ブロックチェーンってなんだ?

ビットコインを始めとした仮想通貨の登場により、名前を聞くことが多くなったブロックチェーン。 ブロックとは?チェーンとは?果たしてこれはどんな仕組みで動いているのでしょう? そして従来までのサーバ管理システムに比べて、どんなメリットがあるので…

safariでエンターによるformのイベントがうまく発火しない時の対処法

formのイベントをエンターで発火 Webサービスにおいて、入力した値を処理するためにformタグを使うことは多いでしょう。 <form> <input type="text"> <button>送信</button> </form> 基本的に上記のような構造で、buttonをクリックすることでイベントを発火させることになりますが、上記の構造の場合はinputタ…

XSSってどうやって仕込まれる?

XSSについて このページを閲覧している方ならご存知とは思いますが、まずはXSSについて超簡単に説明します。この事象は入力フォームがある画面が狙われるものですが、Javascriptのタグを攻撃者によって画面上に埋め込まれ、ユーザ情報やcookieのセッションが…

SPAサイトのCSRF対策

CSRF対策について CSRFとは? このページに来られた方ならもう理解している方も多いとは思いますが、CSRFについて簡単に説明します。 CSRFはリクエスト強要(CSRF:Cross-site Request Forgery)という意味で、クロスサイト(Cross-site)の名の通り、正規のサイ…

Spring Boot + MySQLで絵文字を保存する

絵文字を保存したい スマホが普及してから絵文字を文中に入れるのはもはや普通のことですよね。 掲示板などでも絵文字を入力できるものは増えていますよね。Webアプリの開発者の中には絵文字を入力できるフォームを作りたいという人もいるのではないでしょう…

ユーザにSFTPの特定ディレクトリのみ操作できる権限を付与

一般ユーザは、SFTPで特定のディレクトリのみしか触れないようにしたい サーバのファイル操作を複数人で行うようなことは、エンジニアの現場ではよく起きることです。 そのような場合、全員が管理者権限を持ってしまうと、みんなが自由にサーバの設定を変え…

Vue.jsで配列の値をAPIでPOSTする方法

値を配列でPOST フォームでPOSTする項目数が決まっていない時、配列にして値をPOSTしたい場面があると思います。 例えばチェックボックスなんかは1つのnameに対して値の数は決まっていないものです。 また、テキストフォームであっても、入力フォームを追加…

Spring BootのFormクラスでIntegerの項目にNULLはPOSTできない

NULLをPOSTした時点でStringとして認識されてしまう Spring Bootにおけるフォームから値をPOSTする際の挙動になりますが、Integer型の変数にNULLを送信すると以下のようなエラーが発生してしまいます。 Failed to convert property value of type 'java.lang…

amazletでAmazonアソシエイトリンクを簡単作成!

amazlet(アマズレット)とは amazletというツールは、Amazonアソシエイトリンクを簡単に作成できる便利ツールです。 普段アソシエイトのリンクを作る場合、Amazonアソシエイトの管理ページにログインし、商品を検索してから貼り付けフォーマットを選んでから…

box-shadowを使ったなんちゃってオーバーレイ

モーダルを作成中する時には必須のオーバーレイ webサイトでモーダルを使用する場合、併せて背景にオーバーレイを入れますよね。 ピンと来ない方は以下のリンクからページに遷移してほしいのですが、例えばヘッダーの「ログイン」をクリックするとモーダルが…

SpringBoot 開発環境で簡単SSL対応

開発環境でもSSL対応をする理由 最近のwebアプリケーションでは、SSL対応させることが当たり前になっていますよね。 Let's Encryptなどもあり、無料で設定することもできるようになってきました。ただ、webアプリケーションによっては、SSL対応をしている場…

Nginx+TomcatでLet's EncryptのSSL設定

Let's Encryptとは Let’s Encrypt(レッツ・エンクリプト)は、アメリカの非営利団体であるISRG(Internet Security Research Group)が、すべてのWebサーバへの接続を暗号化することを目指したプロジェクトの一貫でサービスを提供しています。 SSLの設定に関わ…

お名前で取得したドメインをさくらのレンタルサーバに向ける設定

DNS

お名前.comで取得したドメインをさくらのレンタルサーバへ向けるパターン アプリケーションの運用にあたって、お名前.comで取得したドメインをさくらのレンタルサーバに向ける場合、大きく分けて2つのパターンがあります。 端的に言えば「ドメインをどのネー…

NginxとTomcatでリバースプロキシ連携

なぜNginxとTomcatを連携? Javaを動かす際のサーバ(ミドルウェア)としてTomcatはよく使われると思いますが、元々Java以外の言語を扱っていた方などは、Webサーバとしての細かい設定はApacheやNginxの方が慣れている場合がありますよね? そんな時はURLから…

AWS(EC2)・CentOS6にMySQL5.7をインストール・起動

MySQL5.7のインストール 今回はAWS(EC2)またはCentOS6のサーバにMySQL5.7をインストールする手順についてです。 基本的にサーバでは、デフォルトでMySQLが入っている場合などがありますが、自分でインストールをしなければいけない場合もあります。 その場合…

Spring Bootのトランザクションが効かない場合のチェック項目

Spring Bootでのトランザクション設定方法 Spring Bootでトランザクションを設定する方法としては、TransactionManagerを使う方法と@Transactionalというアノテーションを使う方法があります。 コード量の関係やメンテナンス性などを考慮しても後者を選んで…

AWS(EC2)でセキュリティグループの設定方法

AWS(EC2)のセキュリティグループ AWS(EC2)ではセキュリティグループというものを設定しますが、その名の通りセキュリティに関しての設定になります。 グループって何?って感じですが、設定したセキュリティは使い周りができるのです。 例えばWEBサーバでは…

AWS(EC2)でのサーバ構築とキーペア(鍵)を使ったSSH接続

AWS(EC2)でのサーバ構築 AWSでのEC2サーバ構築は非常に簡単にできます。 スペックは高くないですが、1年間の無料枠もあるのでLinuxの操作に慣れたいという方などは勉強がてら触ってみてはいかがでしょうか。Linuxの操作をするためにはSSH接続をする必要があ…

Vue.jsのdataプロパティで配列の変更はspliceで置き換えろ!

dataプロパティで配列の定義 ti-tomo-knowledge.hatenablog.comのページで、Vue.jsではdataプロパティの変更がリアクティブに変化すること、また、それを単なる変数ではなくオブジェクトでも実現させるための方法について説明しましたが、このページではdata…

Vue.jsのdataプロパティでオブジェクトの変更は$setで置き換えろ!

dataプロパティでオブジェクトの定義 Vue.jsでインスタンスを生成した際、dataオブジェクトに変数を定義した場合のリアクティブな動作についてはご存知だと思いますが、テンプレート内でdataオブジェクトに定義した変数を使用していた場合、変数の中身が変更…

ThymeleafでJavascriptエラー(SAXParseException)

Thymeleafでのorg.xml.sax.SAXParseException例外 Thymeleafは構文チェックが厳しく、Javascriptなどをそのまま文中に貼り付けると、以下のようなエラーが発生してしまいページが開けないことがあります。 org.xml.sax.SAXParseException: エンティティ"l"へ…

TomcatのインストールとCATALINA_OPTSの設定

Tomcatのインストールの仕方でCATALINA_OPTSの設定方法も異なる Java Servlet を動かすために必要なコンテナとしてよく使用されているTomcatですが、Linux環境にインストールする方法としては大きく2つあります。 それぞれの違いはご存知ですか? インストー…