Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

377 views

Published on

D3の勉強会資料

Published in: Engineering
  • Be the first to comment

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

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

×