[&] Webapp Workflow & Yeoman

Chrome Tech Talk
--------------------
ウェブアプリケーション開発のワークフローと Yeoman
（ Webapp Workflow & Yeoman ）（講演者:Paul Irish）

発表スライド
https://dl.dropbox.com/u/39519/talks/tok-workflow/index.html#1

Web App を楽しく構築することに関して話していきます。
Yeomen についての話をします。

最初に質問いたします。
JSHint または JSLint を使っていますか？
テスト用、デプロイ用に自動化をしていますか？
Yeoman, Codekit などを使っていますか？

今現在のトレンドとして登場していきているのは、
ブラウザの互換性など細かいことに集中するよりは、
ツールを整備することで対応するものです。

Your shell
Yeomen
Testing
Style iteration
Devtools tricks
Rainbows!

●Your Shell
OS X のデフォルトのターミナル画面です。とても汚いです！
シェルをもっと魅力的なものにしましょう！
github.com/paulirish/dotfiles/../.bash_prompt
この方がカラーがあるのでみやすいし、
どのブランチに居るのかがわかります。

レポジトリで変更がある場合の表示とか、
リモートサーバーにログインすると、どのサーバーにログインしているか分かります。
このタブの方にもタイトルがついていて、どこにいるのかわかりやすいです。

dotfiles.github.com
のコミュニティで自分の好きなものを選んで使ってみてください。

Dotfiles: 好きなものとしては
ジャンプするための z
instant webserver 用の server
色づけする cat

git にコミットするごとに自分の写真を撮る機能とか！（笑
これを動画にしてみました！

Time lapse of my git commits from Aaron Forsander on Vimeo.

Deploy on push
git にプッシュするのは、ワークフロー上良いきっかけです。
ssh key をサーバーに展開すると、deploy.php という小さなスクリプトを
作ることができます。
サービスフックが加えられます。
したがって、その後は、プッシュをするごとに、なにかさせることができます。

そうやって、
開発者フローをさらに改善していくことができます。

●Yeoman の紹介
Webアプリを作る上で、より魅力ある形で、
楽しくそれをすることができる、フレームワークが Yeomen です。

Yeomen で利用可能にしているもおは、
Sass, Coffescript で、オーサリングすることができます。
AMD, ECMAScript のシンタックスもサポートしています。
Bootstrap, HTML5, Mocha nado.

Yeomen のデモ
% yeomen init
いくつかの質問に答えていきます。
Twitter Bootstrap を含めるか？
Requires JS, など。
依存関係をサポートしたファイルができます。

% yeomen server
実際に動いているところをみることができます。
% yeomen subl
% subl app

サイト用の CSSをオーサリングしているところです。
ファイルを変更すると、すぐに変更が反映されます。



もう少し複雑なものも

●Package management
パッケージ管理したいとうのが yeoman で解決したいことのひとつです
つまり JS を使えばできるわけですが、依存関係を解決できれば、
より高いレベルのパッケージができるわけです。

Yeomen でバックボーンパッケージを検索しています。
backbone.rpc というのを選びます。
これは、パッケージを見にいって、ソースの依存関係を見て、アプリの中に取り込みます。
ある一つの依存関係が期限切れになった場合、通知してくれるメリットがあります。
ご覧のように、古いバージョンをインストールしようとすると、新しいバージョンがあることを
知らせてくれます。

いちいち、いろんな全てのブログやツイートをトラッキングしなくても、
ツールの方で、新しいバージョンを知らせてくれます。

もうひとつ、Generators という機能があります。
特定のモデルやコントローラ、ビュー、
タブレットでプロジェクトを作ることができます。
ビルトインサポートが入っていて、非常に良く使われるJSライブラリが入っています。
新しいコントローラを加えたい場合は、
コマンドを入力すると、テストスクリプトも含めて必要なファイルを作ってくれます。
Unit テストをすぐにスタートすることができます。
Angular とYeomen が連携して機能します。

JavaScript を変更して保存すると、ページが更新されます。
新しい素晴らしいものを加えることが簡単にできます。
かなり短時間で、インタラクションが完成します。

Yeomen のまとめ。




安定性、テストをすることができ、アプリケーションを構築し、テストを繰り返すことができる。
ビルドスクリプトで何が走っているかみることができます。

Yeomen 0.9.4 が最新バージョンです。
http://yeoman.io/

●Testing
テストの話を細かくしていきます。
Testing your unit tests
ブラウザの中でテストを走らせます。
ブラウザの中でテストスイートしてテストを完了させることができます。
コマンドラインでフィードバックが帰ってきます。

興味深いこととしては、モバイルのテストの時に、必ずしもモバイルの端末が無い時もあります。
エミュレートされたモバイルブラウザ、シミュレーター上のブラウザでテストすることができます。
bunyip というツールを使って、ユニットテストもできます。
http://ryanseddon.github.com/bunyip/
ブラウザ完結するテストができ、各プラットフォームでどうなのかができます。

十分に楽しみながらテストするのが重要です
テスト中はコマンドラインに mocha-NyanCat が表示されます（笑

●Style Interation
CSS を統合するいくつかの例を紹介します。
Sass + LiveReload を使っている人？？
Saas でやれば、オリジナルのソースに戻すこともできます。
エクスペリメンタルのサポートを ONにすると、
Chrome Developer Tools の中で変更することができ、すぐにフィードバックが得られます。
非常に便利で、ミックスすることもできます。

●JavaScript の IDEである WebStorm を紹介します。
HTMLを見て行く、選択したエレメントが、Chrome ブラウザ上で確認できます。
変更したところを、すぐにブラウザで見ることができます。

自分にとって便利なツールを選びましょう！
setup というコミュニティがあります。
http://setapp.me/

開発することだけではなく、良い環境を作るのも仕事。
同じことを繰り返していて、面倒ならば、だれかが便利な手法を使っているはず。
だれもしていなかったら、自分でやろう。

Styled Console Messages
console.log() は一般的なものですが、それに CSS を加えることができます。
スタイルによって、黒くすることもできますし、
コンソールログで表示することができます！！