AngularJS と Ameba コミュニティサービス フロントエンド開発の相性の良さについて

1. Angularで
Amebaコミュニティサービス開発
アメーバ事業本部
フロントエンドディベロッパー 五藤 佑典

2. 自己紹介
@ygoto3_
ygoto3.com
フロントエンドディベロッパー @

3. http://simplog.jp/
ぜひお使いください！

4. Amebaコミュニティサービス
開発の特徴
フロントは比較的少人数（２、3人）で開発
フロント専任じゃない人も開発
SP版とPC版を平行運用・開発している
サービス横断で似たUIを実装することが多い

5. AngularとAmebaコミュニティサービスは
相性が良いんです

6. AngularとAmebaコミュニティサービスの
相性の良さ
フロントエンドの複数人開発に効く
SP版とPC版の平行運用・開発に効く
横軸展開に効く

7. フロントエンドの
複数人開発に効きます

8. フロントエンド４人体制
マークアップ
得意
マークアップ
得意
サーバサイド
self 得意

9. 小さなコンポーネントを
たくさん作ってモジュール量産
infinite
scroll
lazyload
google
analytics
button-follow
modal

10. <si-button-follow></si-button-follow>
<img si-lazyload=“tn.img” />
<ul ng-repeat=“item in list”
si-infinite-scroll=“addItem()”>
<li>{{item.name}}</li>
</ul>
<a href=“photo.img” si-modal>
<img lazyload=“photo.img” />
</a>
マークアップの感覚で
がしがし実装

11. １ストーリーに対して分業しやすい
テンプレート作成
共通コンポーネント作成
コントローラーで繋げる
平行開発しやすい

12. フロントの開発手順を共有しやすい
1. ここは Controller で～～作る
2. この処理は Service で～～作る
3. この処理は Filter を作る
4. ここの処理は～～という Directive と組み合わせる
Angular特有の概念も多いが、それゆえに共通言語が増え、
実装手順の示し方が明確になる。

13. SP版とPC版の
平行運用・開発に効きます

14. PC版開発からジョイン
Angular導入
PC版リリース後は
SP版と平行運用

15. PC版に入ってるあのモジュールを
SP版に入れましょう！
すぐリリースしましょう！
Producer

16. SP版とPC版で同じモジュールを実装
UIデザインが違うだけでロジックはほぼ同じ

17. photo by Melissa Ann Barrett

18. JS
PC tmpl SP tmpl
DOMを直接いじらない利点を活かしてJSは１ソース
（テンプレートだけ別々）

19. Browserifyで必要なモジュールだけ各々require
SPとPCでコントローラー部分に多少の差異が
出ることがあるが、
基礎コントローラーを作って各々angular.extend()
してやるとコードの差異は最小限

20. 横軸展開に効きます

21. Angularと横軸展開
AnuglarJS人気なおかげで
Angularを使う新規サービスが増えてきた
Amebaサービス横断で同じようなUIを
実装をすることも多い
今まで同様の実装を各々のサービスで
実装してきた

22. AngularJS Working Group 活動中
• Ameba でよくあるパターン
の共有モジュール化
• 勉強会したり、欲しい機能を
列挙して、開発中
• 誰かが実装した機能をモジュー
ルとして共有しやすい場に

23. 余談

24. 途中から導入しても怖くない

25. ラッキーだった点
SP版はほぼjQueryだけで開発していたので、
とてもピュア
マルチページアプリケーション
サーバサイドのAPIの設計がイケてた
とはいえ、既存のサービスにAngular入れるのはそこそこ大変。。

26. jQueryとは併用する
jqLiteではなくjQueryを使う
jQueryに慣れた開発者はjqLiteだけだとじわりと
辛い

27. jQueryとは併用する
jQueryで書かれた既存処理を
ディレクティブでラップする
既存のコードをできる限り再利用
ディレクティブでラップしておいてあげれば綺麗に
Angularに組み込める

28. jQueryとは併用する
jQueryでDOMを生成している箇所を
$compileする処理に置き換える
カスタムディレクティブなどを組み込むときにコン
パイルされないので

29. 既存処理とAngularの連携
既存処理との連携も少なくない
新規モジュール用のスコープを直接取る
ルートスコープを取得してブロードキャストする
ng-appを設定する要素を無闇に変えない

30. photo by LeonArts.at