多分モダンなWebアプリ開発

Transcript

• 1. 多分モダンなWebアプリ開発 M3 TechTalk #32 2014/10/31 中村 貴志
• 2. Webアプリの構成要素 • 開発環境 • IntelliJ IDEA ! • サーバー • SkinnyFramework • Scala • Scalatra • Scalate • ScalikeJDBC • Sentry • logback + janino, MDC • フロント • AngularJS • karma + jasmine • jshint • grunt • bower • C3.js • VD作業にGit利用 ! •
• 3. IntelliJ IDEA
• 4. IntelliJ IDEA • Eclipseと比較 • EclipseのScalaはビルドが重すぎて使い物にならない • Eclipseに比べて総合的に軽い • １プロジェクト＝１ウインドウ ! • 英単語のスペルチェックが便利 • 複数形も加味、キャメルケースでの単語区切りで判定 • Vim化プラグインもある • IdeaVim http://plugins.jetbrains.com/plugin/164
• 5. SkinnyFramework http://skinny-framework.org/ • 瀬良さん作のScalaによるWebフレームワーク • Scala自体がLL的な表記で書きやすい • 文字列、配列、Hash、Tuppleなどのリテラルが便利 • コレクションの操作がやりやすい • SkinnyはいくつかのOSSを寄り集めて構成されている • Scalatra ／ Scalate ／ ScalikeJDBC ／ ScalaTest etc…
• 6. SkinnyFramework http://skinny-framework.org/ • Scalatra : サーブレット周り • 通常のservlet機能(web.xml)を使える • 既存のサーブレットフィルタを利用 可能 • CRUD、REST-API、AngularJS向け 機能あり • JSON、XMLでのレスポンスに対応 • 独自バリデーション機能 ! • Scalate : テンプレートエンジン • テンプレートもScala ! ! ! • ScalikeJDBC: DB周り • ORM • SQL Query Builder • 素のSQL文を記載することもできる • 複数DB接続に対応 • モデルのタイムスタンプ、 楽観ロック機能がある ! • ScalaTest: テスト • 単体・コントローラ・インテグレー ションテスト • DB周りのテストで試験によりデータ が生成されてしまう •
• 7. SkinnyFramework http://skinny-framework.org/ • 利点 • 通常のwebフレームワークが分かれば普通 • 瀬良さんに聞けば分かる • ScalikeJDBCも瀬良さんはコミッタ • 必要があればPullRequestすれば取り込まれる • 欠点 • コントローラの種類が色々あるので計画的に作成が必要 • 利用が少ないため未成熟な機能もある ! • Qiita記事をどうぞ • http://qiita.com/tags/skinnyframework
• 8. logback + janino http://logback.qos.ch/manual/configuration.html#conditional • janino : 軽量Javaコンパイラ • logback.xml中にif文での 分岐を記載できる • 環境ごとの差異を １ファイルに記載できる # 本番用ログ出力モードで起動 % java -DlogEnv=prod ～～
• 9. logback + MDC (Mapped Diagnostic Contexts) http://logback.qos.ch/manual/mdc.html • スレッド中のログ出力に共通 の値を出力できる • １リクエスト内の処理ログに ユーザIDなどを出力できる
• 10. Sentry • エラーログ記録Webサービス • メール通知を代行してくれる • logback、log4jにAppenderを設定するだけ • 指定のログレベルでログ出力をするだけなので簡単 • Serviceクラスやユーティリティ処理のエラー時に 無理矢理メールを送る必要なし • Httpリクエストを記録するためのServletListenerがある • 導入方法の詳細は、社内wikiで。
• 11. AngularJS • SPA(Single Page Application)を想定したJavaScriptフレームワーク • v1.2系がIE7は非対応、IE8は辛うじて動く(IE8向けの注意点がある) • v1.3系(最近リリース)は IE9以降のみ対応 ! • データバインドが柔軟 • JSオブジェクトの操作と画面制御を分けて考えやすい • 役割を分けてモジュール分割しやすい • Controller(メイン)、Service(ロジック)、Directive(表示制御)など • モジュールごとにUnitTestを記述しやすい • jQueryと組み合わせるので、jQueryの資源が使えるかも
• 12. AngularJS • 今回はSPAにはしなかった • IE8などの古いブラウザでの動きが心配 • アクセスのトラッキングを独自に検討したくなかった （EOP、GA） ! • おすすめ学習方法 • code-school AngularJS http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro ! • 書籍「AngularJS リファレンス」 の紹介記事 http://qiita.com/namutaka/items/bc34a22e00b1032ec351
• 13. karma + jasmine • AngularJSの標準テスト機能 • karma : テストランナー • jasmine : テストフレームワーク (= junit,spec) • protractor : seleniumでのテスト(使っていない) ! • テスト結果をjunitと同じ形式で出力できるので、 Jenkinsとも組み合わせられる
• 14. jshint • JavaScriptの静的解析 • Eclipseでwarningを出してくれる感じ • コードの書き方がぶれない。 • 文字列は「”」or「'」を統一など • 「;」忘れを指摘 • など • gruntにテスト結果をjunitと同じ形式で出力できるので、 Jenkinsとも組み合わせられる
• 15. grunt • フロントエンド開発でのタスクランナー • Javaでいうant・maven、Rubyでいうrake • CoffeeやSASSなどのコードを変換するタスクに使う • Markdownをhtml化するのに使ったりもできる • ファイルの更新をトリガとして処理を行うことができる 15
• 16. grunt • grunt live によるモックサーバーが便利 • node.jsベースのhttpサーバーが起動 • WebAPIのスタブを静的ファイルとして用意できる • ソースを保存すると自動でブラウザがリロード • 同時にjshintとUnitテストが実行される ! • VD作業はこのモック起動で確認 • すごくやりやすかったと好評 16
• 17. bower • JavaScript、CSSのライブラリ管理ツール • Javaでいう maven、Rubyでいうgem、PerlでいうPCL • 依存関係を自動で解釈してファイルを取得してくれる • リソースの依存関係が明確になる • grunt プラグイン (grunt-bower-task) • 取得したファイルなどを決まった規則で配置できる • 外部リソースの管理をルール化できる ! • 参考記事 • http://yosuke-furukawa.hatenablog.com/entry/2013/06/01/173308 • http://yosuke-furukawa.hatenablog.com/entry/2013/06/04/085537
• 18. bower % cat bower.json { "name": "myappp", "version": "0.0.0", ! "dependencies": { "jquery-ui": "~1.11.2" } } ! % bower install jquery-ui#1.11.2 bower_components/jquery-ui "## jquery#2.1.1 ! jquery#2.1.1 bower_components/jquery ! % grunt bower:install Running "bower:install" (bower) task >> Cleaned target dir app/vendor >> Installed bower packages >> Copied packages to app/vendor ! Done, without errors. ! ! % find app/vendor/ -type f ! app/vendor/jquery-ui/jquery-ui.js app/vendor/jquery/jquery.js ! ! ! !
• 19. C3.js http://c3js.org/ • D3.jsをベースにしたJavaScriptでのグラフライブラリ • きれいで動きのあるグラフが簡単に作れる
• 20. C3.js http://c3js.org/ • 横軸をシーケンシャルに補間してくれる ['x', '2013-01-01', '2013-01-03', '2013-01-08'], [‘d1', 30, 100, 250], [‘d2', 130, 200, 150] NG
• 21. C3.js http://c3js.org/ • 横軸をシーケンシャルに補間してくれる ['x', '2013-01-01', '2013-01-03', '2013-01-08'], [‘d1', 30, 100, 250], [‘d2', 130, 200, 150] OK
• 22. C3.js http://c3js.org/ chart = c3.generate({ data: { url: '/data/c3_test.json', mimeType: 'json' }, keys: { x: 'name', value: ['upload', 'download'], } }); /data/c3_test.json • JSONからグラフが作れる [ {name: 'aaa', upload: 800, download: 500}, {name: 'bbb', upload: 600, download: 600}, {name: 'ccc', upload: 400, download: 800}, {name: 'ddd', upload: 400, download: 750} ] • DBからMapの配列でデータを取得 してJSON化するだけで使える • csvの読み込みもできる • 帳票の結果をグラフ化するのに も使えるかも
• 23. VD作業にGit利用 • SourceTreeを使ってもらった • 初期の構成はこちらで準備 • コンフリクトなどが起きたらEngで対応 • gruntのモック起動用のWindows batchを作っておく
• 24. VD作業にGit利用 • VDで使うブランチは１つだけ • VD作業の区切りでEngがdevelopにマージした後に、 design用ブランチを進める • VD作業では、pull → 修正 → commit → pushを繰り返すのみ develop design
• 25. まとめ • IntelliJ：Eclipseから乗り換えたい • SkinnyFramework：いいよ • logback：機能知らなすぎた… • grunt：覚えると便利 • AngularJS：なかなかいい • c3.js：使える
• 26. 以上です ! コメントをどうぞ