WEBアプリ開発
実践Tips共有会
Spring Securityを使った一般的なログイン機構の実装
方法
今回のサンプルでは、Ajaxによってログイン処理を行い、認証
方法はデータベースに保存されているユーザーIDとパスワード
との突合によるものとします。
Spring Securityを使った一般的なログイン機構の実装
方法
ポイント
•@EnableWebSecurity
•フォーム認証を有効化
•デフォルトのログインフォームを抑制
•ログインの成功/失敗でJSONを返す
•DB or APIのユーザー情報で認証
•ユーザーの権限に応じた表示切り分け
Springでメールを送る方法
ポイント
•spring-boot-starter-mail(JavaMailSenderと
MimeMessageHelper)を利用してシンプルかつ日本語対応
•テンプレートエンジン(Thymeleaf)はBean定義の順序と
Bean定義名に気をつける
•開発環境のメール送信は、docker環境でmailcatcherを使う
自動テストでデータベースにメモリDBを使う手順
データベース接続を伴うテストコードの実行時にメモリDB(
H2Database)を使うと、早くて安上がりですね。
H2DatabaseはMySQLモードやPostgreSQLモードなどを搭載して
いるので、テストコードで利用するのに最適。
自動テストでデータベースにメモリDBを使う手順
ポイント
•テスト用の設定を作成(application-test.propertiesとか)
•テスト用の抽象クラスを用意して、プロファイルを固定
•テスト用のタイムゾーン設定を忘れずに。
•おまけ:MySQLもdocker使うと簡単
リソースファイルのキャッシュとバージョニングをい
い感じにする手順
検索エンジンが重要なファクターになるプロダクトだと
GoogleのPageSpeed Insightsとかで高得点を目指したい。
ポイント
•WebMvcConfigurerの実装を提供
•静的リソースをハンドリングする際に、キャッシュとバージ
ョニングの設定を追加
•Viewエンジンで静的リソースパスをバージョン付きパスにす
るためのフィルタを設定
コントローラーでのバリデーションエラーをハンドリ
ングする方法
ポイント
•フォーム送信の場合は、Controllerにformの@ModelAttribute
なメソッドを1つ(他に@ModelAttributeは付けない)
•formの変数名はクラス名に合わせるのが安定(Controller上も
Thymeleaf上も)
•API実装の場合は2パターンのいずれか
•フォーム送信と同様、メソッド内に閉じた処理
•@RestControllerAdviceでResponseEntityExceptionHandler
を継承して、グローバルに共通にハンドリングする
materialize-cssをwebpack環境で使う方法
ポイント
•expose-loaderでjQueryを解決してあげる(実行時エラー)
•MaterializeCssのフォントパス設定とWebpackのローダー設定
を組み合わせてフォントを解決してあげる(コンパイルエラ
ー)
•scssファイルを作って、materialize.scssをimportする
•xxx-cliで生成されたWebpack設定ファイルを理解せずに使い
続けると後で苦しむ
Vue.jsでChart.js使ってグラフを描画する手順
ポイント - Vue.jsのコンポーネント
•単一コンポーネントファイル(*.vue)で書いてvue-loaderを噛
ませる
•但し、scriptファイルは別ファイルにしてインポートしたほ
うがIDEフレンドリー
•babel-loaderを噛ませれば、vue-loaderが勝手にES6を解釈し
てくれる
Vue.jsでChart.js使ってグラフを描画する手順
ポイント - Vue.jsのコンポーネント(続き)
•クラススタイルで書く
•vue-class-componentを使う
•vue-loaderが勝手にやってるbabel-loaderの利用部分をカス
タムする必要がある
Vue.jsでChart.js使ってグラフを描画する手順
ポイント - Chart.jsを使う
•描画はvueのライフサイクルを意識(mounted以降でやる)
•描画対象の特定は、id指定ではなく、$refs経由でcanvasのコ
ンテキストを取得&指定する
•データ更新は、vueのwatchにてchat.jsのupdate()をコールす
る
セッション情報をRedisにJSON形式で格納する手順
ポイント
•@EnableRedisHttpSessionでSpring Session + Redisを有効化(
Redis保存期間を指定)
•設定ファイルでsessionのストア先を設定
•Redis:springSessionDefaultRedisSerializer
•Cookie:CookieSerializer
•確認はMedisが便利

Webアプリ開発実践tips共有会