20140529 JS Ojisan #2 LT あの「note」はAngular.js

JSオジサン #2 LT!
あの「note」はAngular.js
Shoei Takamaru (@takamario)

Copyright © Piece of Cake, Inc. All Rights Reserved.
Who are you?
• 高丸翔英 (たかまるしょうえい, @takamario)!
• エンジニア (フロントエンドサイド寄り？)!
• 2014年1月ピースオブケイク入社
3

Our Services
• デジタルコンテンツ配信プラットフォーム 
Cakes (ケイクス) 2012年9月リリース 
https://cakes.mu/!
!
• クリエイターと読者をつなげるサイト!
!
• 週額150円 / 月額500円で全記事読み放題
5

Our Services
• note (ノート) 2014年4月リリース 
https://note.mu/!
• 個人でコンテンツが販売可能に
6

Got a lot of feedback
• いろいろなメディアで取り上げていただきました
• 1ヶ月で2,000万PV、100万UU 達成
• 売れる人の中には、月10万円ほど稼いでいる人も
7

• リリース時に発生していたXSSが 
twitterで話題に (即日対応)
• DM等で、ご連絡いただいた方、体
を張って試していただいた方、あり
がとうございました
• 「Angular 適切に使ってXSS発生す
るの？」 
→ しません、僕が適切に使ってま
せんでした。。
8

• 芸能人アカウントも続々
9
伊集院光さん
ロンブー田村淳さんくるりさん
GLAY HISASHIさん

noteの開発体制と
システム構成

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

noteが起こした 
革新的アクション

Used Angular.js Lavishly!
• Rails (API) + Angular.js!
• まずは、ソース開いてみてください (笑)
• Batarang でデバッグ可能です 
https://chrome.google.com/webstore/detail/angularjs-
batarang/ighdmehidhipcmcojjgiloacoafjmpfk
14
Angular.jsをふんだんに使った！

IPv6 Only! (Mis-conﬁguration…)
• リリース後、会員登録
確認メールが届かない
事象が発生
• SPF レコードの設定が
間違ってました。。
• IPv6 だけで送ろうとし
てました。。
16

(3) Abandon IE!
• だって、IEって危険ですもんね。
18
• もちろん、今後は対応予定です
IEを斬った！

OGP
• Phantom JS で Angular を 
レンダリングする荒技
• が、OGP bot ごとに対応が必要
• 2段階で来るbotも。。
• サーバサイドで返すように修正
しました
20
Phantom JS
(w/ cache)

Angular Tips - Scope
• Scope を制するものは、Angular を制す (と思ってる)
• qiita: Angular JS で複数のコントローラ間でモデル（状
態や値）を共有する方法 3 種類 
http://qiita.com/sunny4381/items/aeae1e154346b5cf6009
21
Scope

Share data between the scopes
22
Upper Controller
Lower Controller
Main Controller Event
遠く離れたスコープでも共有
可能、上書きの危険性もない
!
JSっぽい
!
双方向のコードを書く必要が
あるので、Angular ではあま
り使わない方が良い
http://plnkr.co/edit/
7sD1JvA6TtKbkDBlZWLq?p=preview

23
Upper Controller
Lower Controller
Main Controller
Service
部品と部品をつなぐ
!
DI するだけで使用可能
!
結局グローバル変数と 
変わらない
(上書き注意)
ajKnEz3jfMtpEG7aZ5kO?p=preview
Service

24
Upper Controller
Lower Controller
Main Controller
Angular の機構を
そのまま利用
!
Angular 推奨
!
子は、親のスコープが見える
!
znYpEq4ibzUFIBSOwK2Y?p=preview
!
AxCPK6YrmTKsjhQtT8f1?p=preview
Parent / Child Scope

Angular Tips - Reusability
• いかに、再利用性を高めるか 
Controller だけだとつらい
• コメント、Like、フォロー等々、いつどこに置くかもし
れないものは Directive に
• ただ、基本的な設計は、function の設計と変わらない 
(インターフェースが汎用的かどうか)
25
Directive / Service

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-ﬁle-upload 
https://github.com/danialfarid/angular-ﬁle-upload
26

Angular Tips - Books
• ng-book 
https://www.ng-book.com/
!
• AngularJSアプリケーション開発ガイド 
http://www.amazon.co.jp/dp/4873116678
27

Angular.jsを使って!
良かったこと/悪かったこと!
まとめ

Pros/Cons of Angular.js
• HTMLに命令を記載するので、デザイン変更があっても 
すぐに対応可能、デザイナーもHTMLの属性を移すだけ
• Directive を使いこなせるようになれば、 
再利用性がよくなって、無敵、感動
• 学習コストはかなり高い、まだしっくりこない感じ
• あんまり動作軽くない (特にスマホで見る場合は顕著)
• 今後は、Web Components の時代なので、 
その前に一度 Angular.js をお試ししておくと良さそう
29

In closing
• ピースオブケイクではエンジニアを募集しています！
• cakesとnoteを開発したいJavaScriptエンジニアさん大
募集！ 
https://www.wantedly.com/projects/7198
• noteのiOS/Androidアプリをつくりたいエンジニアさん
大募集！ 
https://www.wantedly.com/projects/7199
31

20140529 JS Ojisan #2 LT あの「note」はAngular.js

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (18)

Similar to 20140529 JS Ojisan #2 LT あの「note」はAngular.js

Similar to 20140529 JS Ojisan #2 LT あの「note」はAngular.js (20)

Recently uploaded

Recently uploaded (14)

20140529 JS Ojisan #2 LT あの「note」はAngular.js