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アプリ開発 
M3 TechTalk #32 2014/10/31 
中村 貴志
Webアプリの構成要素 
• 開発環境 
• IntelliJ IDEA 
! 
• サーバー 
• SkinnyFramework 
• Scala 
• Scalatra 
• Scalate 
• ScalikeJDBC 
• Sentr...
IntelliJ IDEA
IntelliJ IDEA 
• Eclipseと比較 
• EclipseのScalaはビルドが重すぎて使い物にならない 
• Eclipseに比べて総合的に軽い 
• 1プロジェクト=1ウインドウ 
! 
• 英単語のスペルチェックが便利 ...
SkinnyFramework 
http://skinny-framework.org/ 
• 瀬良さん作のScalaによるWebフレームワーク 
• Scala自体がLL的な表記で書きやすい 
• 文字列、配列、Hash、Tuppleなどの...
SkinnyFramework 
http://skinny-framework.org/ 
• Scalatra : サーブレット周り 
• 通常のservlet機能(web.xml)を使える 
• 既存のサーブレットフィルタを利用 
可能 ...
SkinnyFramework 
http://skinny-framework.org/ 
• 利点 
• 通常のwebフレームワークが分かれば普通 
• 瀬良さんに聞けば分かる 
• ScalikeJDBCも瀬良さんはコミッタ 
• 必要が...
logback + janino 
http://logback.qos.ch/manual/configuration.html#conditional 
• janino : 軽量Javaコンパイラ 
• logback.xml中にif文で...
logback + MDC 
(Mapped Diagnostic Contexts) 
http://logback.qos.ch/manual/mdc.html 
• スレッド中のログ出力に共通 
の値を出力できる 
• 1リクエスト内の処...
Sentry 
• エラーログ記録Webサービス 
• メール通知を代行してくれる 
• logback、log4jにAppenderを設定するだけ 
• 指定のログレベルでログ出力をするだけなので簡単 
• Serviceクラスやユーティリテ...
AngularJS 
• SPA(Single Page Application)を想定したJavaScriptフレームワーク 
• v1.2系がIE7は非対応、IE8は辛うじて動く(IE8向けの注意点がある) 
• v1.3系(最近リリース)...
AngularJS 
• 今回はSPAにはしなかった 
• IE8などの古いブラウザでの動きが心配 
• アクセスのトラッキングを独自に検討したくなかった 
(EOP、GA) 
! 
• おすすめ学習方法 
• code-school Angu...
karma + jasmine 
• AngularJSの標準テスト機能 
• karma : テストランナー 
• jasmine : テストフレームワーク (= junit,spec) 
• protractor : seleniumでのテ...
jshint 
• JavaScriptの静的解析 
• Eclipseでwarningを出してくれる感じ 
• コードの書き方がぶれない。 
• 文字列は「”」or「'」を統一など 
• 「;」忘れを指摘 
• など 
• gruntにテスト...
grunt 
• フロントエンド開発でのタスクランナー 
• Javaでいうant・maven、Rubyでいうrake 
• CoffeeやSASSなどのコードを変換するタスクに使う 
• Markdownをhtml化するのに使ったりもできる ...
grunt 
• grunt live によるモックサーバーが便利 
• node.jsベースのhttpサーバーが起動 
• WebAPIのスタブを静的ファイルとして用意できる 
• ソースを保存すると自動でブラウザがリロード 
• 同時にjs...
bower 
• JavaScript、CSSのライブラリ管理ツール 
• Javaでいう maven、Rubyでいうgem、PerlでいうPCL 
• 依存関係を自動で解釈してファイルを取得してくれる 
• リソースの依存関係が明確になる 
...
bower 
% cat bower.json 
{ 
"name": "myappp", 
"version": "0.0.0", 
! 
"dependencies": { 
"jquery-ui": "~1.11.2" 
} 
} 
! ...
C3.js 
http://c3js.org/ 
• D3.jsをベースにしたJavaScriptでのグラフライブラリ 
• きれいで動きのあるグラフが簡単に作れる
C3.js 
http://c3js.org/ 
• 横軸をシーケンシャルに補間してくれる 
['x', '2013-01-01', '2013-01-03', '2013-01-08'], 
[‘d1', 30, 100, 250], 
[‘...
C3.js 
http://c3js.org/ 
• 横軸をシーケンシャルに補間してくれる 
['x', '2013-01-01', '2013-01-03', '2013-01-08'], 
[‘d1', 30, 100, 250], 
[‘...
C3.js 
http://c3js.org/ 
chart = c3.generate({ 
data: { 
url: '/data/c3_test.json', 
mimeType: 'json' 
}, 
keys: { 
x: 'na...
VD作業にGit利用 
• SourceTreeを使ってもらった 
• 初期の構成はこちらで準備 
• コンフリクトなどが起きたらEngで対応 
• gruntのモック起動用のWindows batchを作っておく
VD作業にGit利用 
• VDで使うブランチは1つだけ 
• VD作業の区切りでEngがdevelopにマージした後に、 
design用ブランチを進める 
• VD作業では、pull → 修正 → commit → pushを繰り返すのみ ...
まとめ 
• IntelliJ:Eclipseから乗り換えたい 
• SkinnyFramework:いいよ 
• logback:機能知らなすぎた… 
• grunt:覚えると便利 
• AngularJS:なかなかいい 
• c3.js:使...
以上です 
! 
コメントをどうぞ
Upcoming SlideShare
Loading in …5
×

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

3,713 views

Published on

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

Published in: Technology
  • Be the first to comment

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

  1. 1. 多分モダンなWebアプリ開発 M3 TechTalk #32 2014/10/31 中村 貴志
  2. 2. Webアプリの構成要素 • 開発環境 • IntelliJ IDEA ! • サーバー • SkinnyFramework • Scala • Scalatra • Scalate • ScalikeJDBC • Sentry • logback + janino, MDC • フロント • AngularJS • karma + jasmine • jshint • grunt • bower • C3.js • VD作業にGit利用 ! •
  3. 3. IntelliJ IDEA
  4. 4. IntelliJ IDEA • Eclipseと比較 • EclipseのScalaはビルドが重すぎて使い物にならない • Eclipseに比べて総合的に軽い • 1プロジェクト=1ウインドウ ! • 英単語のスペルチェックが便利 • 複数形も加味、キャメルケースでの単語区切りで判定 • Vim化プラグインもある • IdeaVim http://plugins.jetbrains.com/plugin/164
  5. 5. SkinnyFramework http://skinny-framework.org/ • 瀬良さん作のScalaによるWebフレームワーク • Scala自体がLL的な表記で書きやすい • 文字列、配列、Hash、Tuppleなどのリテラルが便利 • コレクションの操作がやりやすい • SkinnyはいくつかのOSSを寄り集めて構成されている • Scalatra / Scalate / ScalikeJDBC / ScalaTest etc…
  6. 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. 7. SkinnyFramework http://skinny-framework.org/ • 利点 • 通常のwebフレームワークが分かれば普通 • 瀬良さんに聞けば分かる • ScalikeJDBCも瀬良さんはコミッタ • 必要があればPullRequestすれば取り込まれる • 欠点 • コントローラの種類が色々あるので計画的に作成が必要 • 利用が少ないため未成熟な機能もある ! • Qiita記事をどうぞ • http://qiita.com/tags/skinnyframework
  8. 8. logback + janino http://logback.qos.ch/manual/configuration.html#conditional • janino : 軽量Javaコンパイラ • logback.xml中にif文での 分岐を記載できる • 環境ごとの差異を 1ファイルに記載できる # 本番用ログ出力モードで起動 % java -DlogEnv=prod ~~
  9. 9. logback + MDC (Mapped Diagnostic Contexts) http://logback.qos.ch/manual/mdc.html • スレッド中のログ出力に共通 の値を出力できる • 1リクエスト内の処理ログに ユーザIDなどを出力できる
  10. 10. Sentry • エラーログ記録Webサービス • メール通知を代行してくれる • logback、log4jにAppenderを設定するだけ • 指定のログレベルでログ出力をするだけなので簡単 • Serviceクラスやユーティリティ処理のエラー時に 無理矢理メールを送る必要なし • Httpリクエストを記録するためのServletListenerがある • 導入方法の詳細は、社内wikiで。
  11. 11. AngularJS • SPA(Single Page Application)を想定したJavaScriptフレームワーク • v1.2系がIE7は非対応、IE8は辛うじて動く(IE8向けの注意点がある) • v1.3系(最近リリース)は IE9以降のみ対応 ! • データバインドが柔軟 • JSオブジェクトの操作と画面制御を分けて考えやすい • 役割を分けてモジュール分割しやすい • Controller(メイン)、Service(ロジック)、Directive(表示制御)など • モジュールごとにUnitTestを記述しやすい • jQueryと組み合わせるので、jQueryの資源が使えるかも
  12. 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. 13. karma + jasmine • AngularJSの標準テスト機能 • karma : テストランナー • jasmine : テストフレームワーク (= junit,spec) • protractor : seleniumでのテスト(使っていない) ! • テスト結果をjunitと同じ形式で出力できるので、 Jenkinsとも組み合わせられる
  14. 14. jshint • JavaScriptの静的解析 • Eclipseでwarningを出してくれる感じ • コードの書き方がぶれない。 • 文字列は「”」or「'」を統一など • 「;」忘れを指摘 • など • gruntにテスト結果をjunitと同じ形式で出力できるので、 Jenkinsとも組み合わせられる
  15. 15. grunt • フロントエンド開発でのタスクランナー • Javaでいうant・maven、Rubyでいうrake • CoffeeやSASSなどのコードを変換するタスクに使う • Markdownをhtml化するのに使ったりもできる • ファイルの更新をトリガとして処理を行うことができる 15
  16. 16. grunt • grunt live によるモックサーバーが便利 • node.jsベースのhttpサーバーが起動 • WebAPIのスタブを静的ファイルとして用意できる • ソースを保存すると自動でブラウザがリロード • 同時にjshintとUnitテストが実行される ! • VD作業はこのモック起動で確認 • すごくやりやすかったと好評 16
  17. 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. 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. 19. C3.js http://c3js.org/ • D3.jsをベースにしたJavaScriptでのグラフライブラリ • きれいで動きのあるグラフが簡単に作れる
  20. 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. 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. 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. 23. VD作業にGit利用 • SourceTreeを使ってもらった • 初期の構成はこちらで準備 • コンフリクトなどが起きたらEngで対応 • gruntのモック起動用のWindows batchを作っておく
  24. 24. VD作業にGit利用 • VDで使うブランチは1つだけ • VD作業の区切りでEngがdevelopにマージした後に、 design用ブランチを進める • VD作業では、pull → 修正 → commit → pushを繰り返すのみ develop design
  25. 25. まとめ • IntelliJ:Eclipseから乗り換えたい • SkinnyFramework:いいよ • logback:機能知らなすぎた… • grunt:覚えると便利 • AngularJS:なかなかいい • c3.js:使える
  26. 26. 以上です ! コメントをどうぞ

×