More Related Content
Similar to 20140529 JS Ojisan #2 LT あの「note」はAngular.js (20)
20140529 JS Ojisan #2 LT あの「note」はAngular.js
- 3. Copyright © Piece of Cake, Inc. All Rights Reserved.
Who are you?
• 高丸 翔英 (たかまる しょうえい, @takamario)!
• エンジニア (フロントエンドサイド寄り?)!
• 2014年1月 ピースオブケイク入社
3
- 5. Copyright © Piece of Cake, Inc. All Rights Reserved.
Our Services
• デジタルコンテンツ配信プラットフォーム
Cakes (ケイクス) 2012年9月リリース
https://cakes.mu/!
!
• クリエイターと読者をつなげるサイト!
!
• 週額150円 / 月額500円で全記事読み放題
5
- 6. Copyright © Piece of Cake, Inc. All Rights Reserved.
Our Services
• note (ノート) 2014年4月リリース
https://note.mu/!
• 個人でコンテンツが販売可能に
6
- 7. Copyright © Piece of Cake, Inc. All Rights Reserved.
Got a lot of feedback
• いろいろなメディアで取り上げていただきました
• 1ヶ月で2,000万PV、100万UU 達成
• 売れる人の中には、月10万円ほど稼いでいる人も
7
- 8. Copyright © Piece of Cake, Inc. All Rights Reserved.
Got a lot of feedback
• リリース時に発生していたXSSが
twitterで話題に (即日対応)
• DM等で、ご連絡いただいた方、体
を張って試していただいた方、あり
がとうございました
• 「Angular 適切に使ってXSS発生す
るの?」
→ しません、僕が適切に使ってま
せんでした。。
8
- 9. Copyright © Piece of Cake, Inc. All Rights Reserved.
Got a lot of feedback
• 芸能人アカウントも続々
9
伊集院光さん
ロンブー田村淳さんくるりさん
GLAY HISASHIさん
- 11. Copyright © Piece of Cake, Inc. All Rights Reserved.
Our Dev Team and System
• CTO (SGP) x 1
• エンジニア (JPN) x 3 (自分含む)
• デザイナー (JPN) x 2
• iPhone App エンジニア (SGP) x 1
• and ディレクター (JPN)
• Ruby on Rails + Angular.js + MySQL +
Redis
• AWS (Staging環境では Heroku も)
• Github + HipChat + Jenkins 11
- 14. Copyright © Piece of Cake, Inc. All Rights Reserved.
Used Angular.js Lavishly!
• Rails (API) + Angular.js!
• まずは、ソース開いてみてください (笑)
• Batarang でデバッグ可能です
https://chrome.google.com/webstore/detail/angularjs-
batarang/ighdmehidhipcmcojjgiloacoafjmpfk
14
Angular.jsをふんだんに使った!
- 16. Copyright © Piece of Cake, Inc. All Rights Reserved.
IPv6 Only! (Mis-configuration…)
• リリース後、会員登録
確認メールが届かない
事象が発生
• SPF レコードの設定が
間違ってました。。
• IPv6 だけで送ろうとし
てました。。
16
- 18. Copyright © Piece of Cake, Inc. All Rights Reserved.
(3) Abandon IE!
• だって、IEって危険ですもんね。
18
• もちろん、今後は対応予定です
IEを斬った!
- 20. Copyright © Piece of Cake, Inc. All Rights Reserved.
OGP
• Phantom JS で Angular を
レンダリングする荒技
• が、OGP bot ごとに対応が必要
• 2段階で来るbotも。。
• サーバサイドで返すように修正
しました
20
Phantom JS
(w/ cache)
- 21. Copyright © Piece of Cake, Inc. All Rights Reserved.
Angular Tips - Scope
• Scope を制するものは、Angular を制す (と思ってる)
• qiita: Angular JS で複数のコントローラ間でモデル(状
態や値)を共有する方法 3 種類
http://qiita.com/sunny4381/items/aeae1e154346b5cf6009
21
Scope
- 22. Copyright © Piece of Cake, Inc. All Rights Reserved.
Share data between the scopes
22
Upper Controller
Lower Controller
Main Controller Event
遠く離れたスコープでも共有
可能、上書きの危険性もない
!
JSっぽい
!
双方向のコードを書く必要が
あるので、Angular ではあま
り使わない方が良い
http://plnkr.co/edit/
7sD1JvA6TtKbkDBlZWLq?p=preview
- 23. Copyright © Piece of Cake, Inc. All Rights Reserved.
Share data between the scopes
23
Upper Controller
Lower Controller
Main Controller
Service
部品と部品をつなぐ
!
DI するだけで使用可能
!
結局グローバル変数と
変わらない
(上書き注意)
http://plnkr.co/edit/
ajKnEz3jfMtpEG7aZ5kO?p=preview
Service
- 24. Copyright © Piece of Cake, Inc. All Rights Reserved.
Share data between the scopes
24
Upper Controller
Lower Controller
Main Controller
Angular の機構を
そのまま利用
!
Angular 推奨
!
子は、親のスコープが見える
!
http://plnkr.co/edit/
znYpEq4ibzUFIBSOwK2Y?p=preview
!
http://plnkr.co/edit/
AxCPK6YrmTKsjhQtT8f1?p=preview
Parent / Child Scope
- 25. Copyright © Piece of Cake, Inc. All Rights Reserved.
Angular Tips - Reusability
• いかに、再利用性を高めるか
Controller だけだとつらい
• コメント、Like、フォロー等々、いつどこに置くかもし
れないものは Directive に
• ただ、基本的な設計は、function の設計と変わらない
(インターフェースが汎用的かどうか)
25
Directive / Service
- 26. Copyright © Piece of Cake, Inc. All Rights Reserved.
Angular Tips - Libraries
• angular-ui/bootstrap
https://github.com/angular-ui/bootstrap
• angular-ui/ui-router
https://github.com/angular-ui/ui-router
• danialfarid/angular-file-upload
https://github.com/danialfarid/angular-file-upload
26
- 27. Copyright © Piece of Cake, Inc. All Rights Reserved.
Angular Tips - Books
• ng-book
https://www.ng-book.com/
!
• AngularJSアプリケーション開発ガイド
http://www.amazon.co.jp/dp/4873116678
27
- 29. Copyright © Piece of Cake, Inc. All Rights Reserved.
Pros/Cons of Angular.js
• HTMLに命令を記載するので、デザイン変更があっても
すぐに対応可能、デザイナーもHTMLの属性を移すだけ
• Directive を使いこなせるようになれば、
再利用性がよくなって、無敵、感動
• 学習コストはかなり高い、まだしっくりこない感じ
• あんまり動作軽くない (特にスマホで見る場合は顕著)
• 今後は、Web Components の時代なので、
その前に一度 Angular.js をお試ししておくと良さそう
29
- 31. Copyright © Piece of Cake, Inc. All Rights Reserved.
In closing
• ピースオブケイクではエンジニアを募集しています!
• cakesとnoteを開発したいJavaScriptエンジニアさん大
募集!
https://www.wantedly.com/projects/7198
• noteのiOS/Androidアプリをつくりたいエンジニアさん
大募集!
https://www.wantedly.com/projects/7199
31