http://connpass.com/event/6910/ で発表した資料です。 http://ofsilvers.hatenablog.com/entry/ten1club-1 でブログ書いてるよ。

1. AngularJS x designer
デザイナからみたAngularJS
2014/07/11
天下一クライアントサイドJS MV*フレームワーク武道会
@silver_s / silvers

2. で
デザイナ(※)にアプリを作ってもらったはなし
※
主に画像作る人
HTML, CSSはある程度書ける
javascriptは触ったことない

3. 背景
• 株式会社モバイルファクトリー
• ソーシャルゲームの開発
!
エンジニア
!
デザイナ
perl
html
js
css
img
design
1.javascriptもデザインも両方で
きる人が少ない！
2.エンジニアが頑張ってjavascript
書く！
3.デザイナがHTMLとCSSを書いて
デザイン当てる！
＿人人人人人人＿
＞ 動かない！ ＜
Y^Y^Y^Y^Y^￣

4. そうだ、 にしよう

5. AngularJS
• MVW (Model-View-Whatever)
• モデルとコントローラーが疎
• javascriptのロジックを書かなくてもなんか動く
• 設計や実装の自由度が低い
• ググれば「Stack Overflow」が出てくる
公式ドキュメント

6. デザイナからみたAngularJS
•Model（Service, Factory）
•なんか難しいのでエンジニアにおまかせ！
•View
•RouterがURLとView&Controllerの対応表代わり！分かりやすい！
（Backbone時代は分割されすぎててよくわからなかった）
•Contoller
•基本$scopeに突っ込むだけ！どんなデータがあるのか分かりやすい！
よくわからなければng-init使ってFIXME書いておくとエンジニアがい
い感じにJSに移植してくれる

7. 素晴らしいところ

8. 素晴らしい #1
幅広く面倒見てくれる
• フルスタック
• backboneみたいに薄いのは拡張しやすいけど、いじ
るとなると読まないといけない
• 単品で十分いい感じのができる
• ライブラリ同士の相性とか気にしなくていい
• angularさんが内部で何やってるか知らなくてもなんか
扱える

9. 素晴らしい #2
htmlだけでもなんかいい感じ
• <%= IF %>とか書かなくていい
• 普通にHTML書いている感覚
• ngRepeat, ngIf, ngShow, …
<ul>
<li ng-repeat= item in items >{{item.name}}</li>
</ul>

10. 素晴らしい #3
ngClick, ngTouch, ngAnimate, ngClass
• 表現力が増す！
• こういう条件でこういう表示にしたい
• ここをタップでこういう動きにしたい
• が、デザイナだけで可能
<div ng-swipe-left= next() ng-swipe-right= prev() ng-click= showDetail() >
<!̶ 切り替えたいやつ。バナーとか ̶>
</div>

11. 素晴らしい #4
自作directive
• エンジニアが用意してくれる
• なんか新しいタグが増えた気分
• オレオレHTML6だ！！
• デザイナは利用するだけ

12. つらいところ

13. つらい #1
何してるかわからない
• 内部のロジック知りたいなと思うと、暗黒を目にする
• 死ぬのはエンジニアなので気にしない
• 特殊なことやりたいなと思うと、暗黒を目にする
• 死ぬのはエンジニアなので気にしない

14. まとめ

15. まとめ
• デザイナがメインで開発するならAngularJS
• 触ってもらった感じBackboneよりAngularJSの評判が
良い＆学習が早い
• javascript未経験者でもVC部分は難なくいじれた
• 複雑なところはいい感じに隠蔽してくれる
• ngAnimate, ngClassの虜！

16. ありがとうございました