angular X designer - デザイナからみたAngularJS #ten1club

9,496 views
9,922 views

Published on

http://connpass.com/event/6910/ で発表した資料です。

http://ofsilvers.hatenablog.com/entry/ten1club-1 でブログ書いてるよ。

Published in: Technology
0 Comments
18 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,496
On SlideShare
0
From Embeds
0
Number of Embeds
6,242
Actions
Shares
0
Downloads
5
Comments
0
Likes
18
Embeds 0
No embeds

No notes for slide

angular X designer - デザイナからみたAngularJS #ten1club

  1. 1. AngularJS x designer デザイナからみたAngularJS 2014/07/11 天下一クライアントサイドJS MV*フレームワーク武道会 @silver_s / silvers
  2. 2. で デザイナ(※)にアプリを作ってもらったはなし ※ 主に画像作る人 HTML, CSSはある程度書ける javascriptは触ったことない
  3. 3. 背景 • 株式会社モバイルファクトリー • ソーシャルゲームの開発 ! エンジニア ! デザイナ perl html js css img design 1.javascriptもデザインも両方で きる人が少ない! 2.エンジニアが頑張ってjavascript 書く! 3.デザイナがHTMLとCSSを書いて デザイン当てる!  _人人人人人人_  > 動かない! <   Y^Y^Y^Y^Y^ ̄
  4. 4. そうだ、 にしよう
  5. 5. AngularJS • MVW (Model-View-Whatever) • モデルとコントローラーが疎 • javascriptのロジックを書かなくてもなんか動く • 設計や実装の自由度が低い • ググれば「Stack Overflow」が出てくる 公式ドキュメント
  6. 6. デザイナからみたAngularJS •Model(Service, Factory) •なんか難しいのでエンジニアにおまかせ! •View •RouterがURLとView&Controllerの対応表代わり!分かりやすい! (Backbone時代は分割されすぎててよくわからなかった) •Contoller •基本$scopeに突っ込むだけ!どんなデータがあるのか分かりやすい! よくわからなければng-init使ってFIXME書いておくとエンジニアがい い感じにJSに移植してくれる
  7. 7. 素晴らしいところ
  8. 8. 素晴らしい #1 幅広く面倒見てくれる • フルスタック • backboneみたいに薄いのは拡張しやすいけど、いじ るとなると読まないといけない • 単品で十分いい感じのができる • ライブラリ同士の相性とか気にしなくていい • angularさんが内部で何やってるか知らなくてもなんか 扱える
  9. 9. 素晴らしい #2 htmlだけでもなんかいい感じ • <%= IF %>とか書かなくていい • 普通にHTML書いている感覚 • ngRepeat, ngIf, ngShow, … <ul> <li ng-repeat= item in items >{{item.name}}</li> </ul>
  10. 10. 素晴らしい #3 ngClick, ngTouch, ngAnimate, ngClass • 表現力が増す! • こういう条件でこういう表示にしたい • ここをタップでこういう動きにしたい • が、デザイナだけで可能 <div ng-swipe-left= next() ng-swipe-right= prev() ng-click= showDetail() > <!̶ 切り替えたいやつ。バナーとか ̶> </div>
  11. 11. 素晴らしい #4 自作directive • エンジニアが用意してくれる • なんか新しいタグが増えた気分 • オレオレHTML6だ!! • デザイナは利用するだけ
  12. 12. つらいところ
  13. 13. つらい #1 何してるかわからない • 内部のロジック知りたいなと思うと、暗黒を目にする • 死ぬのはエンジニアなので気にしない • 特殊なことやりたいなと思うと、暗黒を目にする • 死ぬのはエンジニアなので気にしない
  14. 14. まとめ
  15. 15. まとめ • デザイナがメインで開発するならAngularJS • 触ってもらった感じBackboneよりAngularJSの評判が 良い&学習が早い • javascript未経験者でもVC部分は難なくいじれた • 複雑なところはいい感じに隠蔽してくれる • ngAnimate, ngClassの虜!
  16. 16. ありがとうございました

×