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

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

2018-01-01から1年間の記事一覧

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

出力ファイルは極力圧縮したい Vue.jsでのnpmビルド時に同時に圧縮 手順 サーバ側でgzipを読み込む設定にする 出力ファイルは極力圧縮したい Webサービスにおいて、コンテンツ内容や機能面の充実度が重要であることは言うまでもありませんが、ページのパフォ…

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

RepositoryにSQLを直接記入 パラメータ以外でコロンを使いたい 解決方法はエスケープ RepositoryにSQLを直接記入 Spring Data JPAでORマッパーでは書けないようなSQLを実行したい場合、Repositoryに直接構文を書きますよね。 そんな時、パラメータで変数の値…

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

Spring Data JPAでのOrderBy whereを指定しない場合、OrderByの前にByが必要 Spring Data JPAでのOrderBy Spring Data JPAでエンティティクラスにfindして複数のレコードを取得する場合、OrderByをつければ並び順を変更できることはご存知でしょうか? findB…

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

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

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

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

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

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

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

Entityオブジェクトのクローン クローンをしたいEntityクラスにCloneableインターフェースを実装 クローンメソッドの呼び出し Entityオブジェクトのクローン SpringBootで機能の実装をしている中で、Entityオブジェクトのクローンを作りたくなることはありま…

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

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

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

ブロックとは?チェーンとは? ブロックチェーンはデータを分散して管理している P2Pって具体的になに?どこで動いてるの? すべてのデータは公開されて誰でも見ることができる ビットコインを始めとした仮想通貨の登場により、名前を聞くことが多くなったブ…

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

formのイベントをエンターで発火 他のブラウザでは上手くいくのにsafariだと上手く送れない buttonのスタイルを確認 formのイベントをエンターで発火 Webサービスにおいて、入力した値を処理するためにformタグを使うことは多いでしょう。 <form> <input type="text"> <button>送信</button> </form> 基本的に…

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

XSSについて どうやってタグを入れられる? GETパラメータにスクリプトを入れる方法 POSTでスクリプトを埋め込まれる方法 まとめ XSSについて このページを閲覧している方ならご存知とは思いますが、まずはXSSについて超簡単に説明します。この事象は入力フ…

SPAサイトのCSRF対策

CSRF対策について CSRFとは? CSRFによる被害 通常のCSRF対策 SPAサイトのCSRF対策 方法1 リファラで判断 方法2 ログイン時に発行したトークンを照合 方法3 CORSと組み合わせてOriginをチェック CSRF対策について CSRFとは? このページに来られた方ならもう…

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

絵文字を保存したい MySQLの文字コードを変更 Spring Bootでデータベース接続時の文字コードを変更 まとめ 絵文字を保存したい スマホが普及してから絵文字を文中に入れるのはもはや普通のことですよね。 掲示板などでも絵文字を入力できるものは増えていま…

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

一般ユーザは、SFTPで特定のディレクトリのみしか触れないようにしたい ディレクトリの作成 ユーザとグループの作成 ディレクトリの権限変更 sshd_configを変更して操作権限を付与 まとめ 一般ユーザは、SFTPで特定のディレクトリのみしか触れないようにした…

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

値を配列でPOST 方法1 dataで定義する変数を配列で初期化してv-modelに設定 チェックボックスの例) 複数のテキストフォームがある時の例) 方法2 POSTする前に配列にまとめてしまう方法 チェックボックスの例) 複数のテキストフォームがある時の例) まとめ 値…

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

NULLをPOSTした時点でStringとして認識されてしまう 数値(Integer)型の項目で空の可能性がある場合 AjaxでPOSTする時の例 NULLをPOSTした時点でStringとして認識されてしまう Spring Bootにおけるフォームから値をPOSTする際の挙動になりますが、Integer型の…

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

amazlet(アマズレット)とは Amazonアソシエイトアカウントの作成 amazlet設定方法 まとめ amazlet(アマズレット)とは amazletというツールは、Amazonアソシエイトリンクを簡単に作成できる便利ツールです。 普段アソシエイトのリンクを作る場合、Amazonアソ…

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

オーバーレイの通常の設置方法 なんちゃってオーバーレイ なんちゃってオーバーレイの欠点 オーバーレイの通常の設置方法 webサイトでモーダルを使用する場合、併せて背景にオーバーレイを入れますよね。 オーバーレイの設置する方法は少々面倒です。 モーダ…

SpringBoot 開発環境で簡単SSL対応

開発環境でもSSL対応をする理由 開発環境でのSSL対応方法 証明書の作成 SpringBootで証明書の設定 端末で証明書を信頼 本番環境のSSL対応は? 開発環境でもSSL対応をする理由 最近のwebアプリケーションでは、SSL対応させることが当たり前になっていますよね…

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

Let's Encryptとは Nginx+TomcatのSSL設定 Let's Encryptのインストール certbot-autoでSSL証明書の取得と秘密鍵の生成 NginxのSSL設定 サーバ証明書と秘密鍵をpkcs12形式に変換 TomcatのSSL設定 まとめ Let's Encryptとは Let’s Encrypt(レッツ・エンクリプ…

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

DNS

お名前.comで取得したドメインをさくらのレンタルサーバへ向けるパターン ネームサーバをさくらのレンタルサーバに向かせる方法 ネームサーバはお名前.comのままにしてIPアドレスだけさくらのレンタルサーバに向かせる方法 お名前.comで取得したドメインをさ…

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

なぜNginxとTomcatを連携? ポートの開放 サーバ設定 MySQLのインストール Nginxのインストールと起動 Nginxのインストール confファイルを書き換えてリバースプロキシ設定 Nginxの起動・自動起動設定 JavaとTomcatのインストールと起動 JavaとTomcatのイン…

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

MySQL5.7のインストール 最新のリポジトリ追加 MySQLのインストール MySQLの起動 起動設定 初期パスワードの取得 初回ログインとパスワード再設定 まとめ MySQL5.7のインストール 今回はAWS(EC2)またはCentOS6のサーバにMySQL5.7をインストールする手順につ…

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

Spring Bootでのトランザクション設定方法 メソッドがpublicになっているか @RequestMappingをつけているコントローラ自体にアノテーションを付与していないか try~catchで囲まれているか 更新処理をするメソッドが直接呼ばれているか 継承されたメソッドの…

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

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

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

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

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

dataプロパティで配列の定義 変更する場合はspliceで置き換え 削除する場合もsplice 末尾に追加する場合は従来通りpushを使え 多次元配列はループなどで同様に変更可能 それぞれの配列の2番目(インデックスのキーが1)の値を変更する場合 dataプロパティで…

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

dataプロパティでオブジェクトの定義 変更する場合は$setで置き換え 配列中のオブジェクトはループなどで同様に変更可能 例1) 配列の2番目(インデックスのキーが1)の場合にvalueを変更する場合 例2) nameが「test2-Name」の場合にvalueを変更する場合 data…

ThymeleafでJavascriptエラー(SAXParseException)

Thymeleafでのorg.xml.sax.SAXParseException例外 解決方法1 「&」をエスケープ 解決方法2 エスケープしなくても使用できるようにコメントを挿入する Thymeleafでのorg.xml.sax.SAXParseException例外 Thymeleafは構文チェックが厳しく、Javascriptなどをそ…

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

Tomcatのインストールの仕方でCATALINA_OPTSの設定方法も異なる CATALINA_OPTSを設定する場面 Tomcatのインストール方法 wgetコマンドなどでソースコードをダウンロードしてからコンパイルする方法 yumでインストールする方法 Tomcatのインストールの仕方でC…