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.

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

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

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

  • Login to see the comments

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. ありがとうございました

×