![C3.js
http://c3js.org/
• 横軸をシーケンシャルに補間してくれる
['x', '2013-01-01', '2013-01-03', '2013-01-08'],
[‘d1', 30, 100, 250],
[‘d2', 130, 200, 150]
NG](https://image.slidesharecdn.com/techtallmodernwebdev-141030235759-conversion-gate01/85/Web-20-320.jpg)
![C3.js
http://c3js.org/
• 横軸をシーケンシャルに補間してくれる
['x', '2013-01-01', '2013-01-03', '2013-01-08'],
[‘d1', 30, 100, 250],
[‘d2', 130, 200, 150]
OK](https://image.slidesharecdn.com/techtallmodernwebdev-141030235759-conversion-gate01/85/Web-21-320.jpg)
![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の読み込みもできる
• 帳票の結果をグラフ化するのに
も使えるかも](https://image.slidesharecdn.com/techtallmodernwebdev-141030235759-conversion-gate01/85/Web-22-320.jpg)
多分モダンなWebアプリ開発
- 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利用 ! •
- 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. 以上です ! コメントをどうぞ