noteを
AngularJSで構築した話
株式会社ピースオブケイク 今 雄一 (@konpyu)

自己紹介
• KON Yuichi (@konpyu)!
• Engineer in Piece of Cake, Inc.
since 2013/8!
• Love Angular

Agenda
• noteについて
• Why Angular?
• 使ってみて感じたn個のこと
• Angular in future

note

note
• Tumblr + Gumroad + Medium
• クリエイターが、テキスト、画像、サウンド、動
画を簡単に作れる、販売できる。
• ファンとつながることが出来る
• （僕も一攫千金（note長者）を狙っています）

開発の規模感
• Rails 4.1 + nginx + MySQL + AngularJS
• coffeeで6500Lくらい
• 14 Controller, 33 Service, 31 Directive

開発の規模感
• エンジニア3名、デザイン + コーディング 2名
• 開発期間: 2013/12∼2014/4/7

Why Angular?
• アプリ化を見据え、APIベースで構築したい
• UX重視. 画面遷移を極力無くしたい
• jQueryは使いたくない
• 自由度が低いため決定しないといけないことが
少ない（後述）

AngularJS
使ってみて感じたn個のこと

学習コストの高さ
directive
$service
$scope
$route
isolate scope
custom filter
$provider
学ぶべき概念がやたら多い
$factory $apply
ng-bind
$setViewValue
ng-maxlength
$resource
$compier
$state
promiss $q
transclude
$broadcast
dependency injection
html5mode
$digest
jqLite
two way data binding
$location
$interpolate
$watch
$cookie
$on
angular expression
1

学習コストの高さ
• Builtin DirectiveやControllerの使い方など、
Dot installで学べる所位までは簡単
• Custom Directive/Filter/Validation, Service
などそこから先が複雑（しかし、覚えないとあ
まりAngularの恩恵はない）
1

Two way data binding
$scope.user.is_follow = true で即反映
DOMを直接いじらなくて良い安心感
2
↑ CLICK

本当に驚いたのはアプリケーションの行数が1万7千行から
わずか1,500行にまで減ったことに対してです。
フロントエンドのコードは1万7千行に達していた頃、開発
メンバーの1人Misko Heveryが大胆な発言をしました。彼が
趣味で作成していたオープンソースのライブラリを使えば、
プロジェクト全体のコードを2週間ですべて書き換えられる
というのです
Angular創世の小話
- AngularJS開発ガイドより
2

注意点
2
• パフォーマンスに影響が出やすい
• dirty-checking
→ scope内の変数について、特定のタイミングで前の値と
比較し、変化があればDOM書き換え
→ $digest loop と呼ぶ
• (1) 比較する変数を少なくする (2) 比較処理を軽くする
• 参考
http://qiita.com/zoetro/items/5156aef51222e81dd022

構成に悩まなくてよい
・Backbone.jsは使わないの?
・Angularは縛りが強く、何処に何を書くべきかが
最初から決まっている → 楽
Controller
Directive
Service
HTML
3

Service, Directiveが勘所
• 極力ServiceとDirectiveに処理を追い出す。Fat Controller化するの
を避ける。
4
• Directive: HTMLに宣言的指定を加える事でDOMの機能を拡張
• Service: 共通処理をまとめるためのSingletonオブジェクト

Directive
HTML
Directive
クリックするとフォローできる機
能をAタグに付加
関連付けるDirectiveを指定
4

Directive
• Directiveに切っておけば、followableを任意のDOMのattributeに指
定するだけで、フォロー機能が使いまわせる。
→ Controllerに書くと移植時にはコピペが必要
• Directiveは基本的にA（Attribute）で作る。テンプレも含めてコンポー
ネント化したい時はE（Element）に。
• 外部ライブラリは大体Directiveの形で提供されている
ex) OnsenUI, Angular-Bootstrap, Angular-UI
4

Directive
• noteでのユースケース
→ クリックするとフォローする
→ コメント欄
→ ノート購入モーダル
→ Tw/Fbへのシェア
その他多用
4

Service
Service
Controller
認証ロジックをService
に追い出す
DIしてControllerから
利用
4

Service
• 要はjsのオブジェクト
• 異なるController間の値の受け渡しにも使える
• 必要なときに、DIで注入する
• noteでのユースケース
→ タイトルタグの置き換え
→ ツイート用文言の生成
→ XHRでのAPIアクセスを隠
→ オートページャのためにスクロール位置を監視
→ タイムラインデータの保存 etc
4

どこまでWAFに仕事をさせるか
• WebApp高速化の基本 → Appサーバになるべく仕事をさせない
• Angularは静的HTMLとAPIがあればブラウザでHTMLを生成できる。
Appサーバーでビューを出力する処理は必須ではない
Viewの生成コストは安くない↑
5

どこまでWAFに仕事をさせるか
• いろいろな条件との兼ね合い
• 単純にRailsに慣れている
• 極力Railsの開発支援機構に頼って開発効率を上げたかったので, Rails側
でHTMLを生成している
→ Haml, Sass, Coffee,minifyを透過的に扱える（sprockets)
→ デザイナーもRailsを使っている
• 理想は静的にhtmlを吐いてnginxで配信
5

SEO対策がめんどくさい
• クローラは、Angularによるレンダリング前のHTMLしか取得できない
• PhantomJSでレンダリング後のHTMLを返していた
→ たまにPhantomのプロセスが暴走. そもそも処理が重い
→ JSレンダリング用のSaaSはお高い.
!
• UserAgentでbotからのアクセスか否かを判定
→ botも色々あるのでキリがない
6

現状
6
OGPとタイトルを
Railsで静的生成
するだけ
基本的にPhantom
は使わない
googlebotだけ
PhantomJSで対応
正しい内容を返さ
ないとランクに影響

貧弱なルーティング
• $routeはURLに応じて<ng-view></ng-view>内でレンダリングする
HTMLとControllerを切り替えてくれる
7

貧弱なルーティング
7
• ng-viewの入れ子, 並列に複
数設置ができない
→ ui-routerを使う（とい
うか使わざるを得ない）

貧弱なルーティング
7
•
• routeが切り替わるとControllerを破棄して作りなおしちゃう
→ 前のControllerのデータを保存しない
→ ブラウザバックで戻った時に、もう一度構築し直す必要がある
→ 前の$scopeの内容を適当なServiceに逃しておく → たるい
・ex) タイムラインを沢山ページングして下まで掘る → ある記事に飛ぶ
→ ブラバする → タイムライン消えてる → F○ck!

セキュリティ
• 基本的には自動的にエスケープされる
→ ng-bind ( {{ hoge }} )
→ ng-href
→ ng-src
→ ng-style
8

セキュリティ
• CSRF対策
→ cookieにXSRF-TOKENをセットする
→ XSRF-TOKENがセットされているなら、$httpでXHRする際、
AngularがX-Xsrf-TokenをHeaderに付けてリクエストしてくれる
→ API側でそれをチェック
8
• http://stackoverflow.com/questions/8781937/rails-api-
authentication-sanity-check-and-advise

ライブラリ
• 外部ライブラリの充実度はフレームワーク選定の判断材料
• Angularはフルスタック. ビルトインの状態でもかなり充実している.
ex) promise, filter
• jQueryの資産を使いたい時は、Directiveでラップする
→ すでにgithubに結構UPされている
9

noteの場合
• Angular-Bootstrap
http://angular-ui.github.io/bootstrap/
• ui-router
https://github.com/angular-ui/ui-router
• angular-file-upload
https://github.com/danialfarid/angular-file-upload
• angular-loading-bar
http://chieffancypants.github.io/angular-loading-bar/
9

未来の話

バージョン
1.2 1.3 2.0
stable これから
使うなら
開発中 ← NEW
↑noteはこれ

3/18 Angular 2.0 Announced

2系の気になる変更点
• 複雑すぎるDirectiveの仕様を簡素に
→ 用途に応じてAPIを分ける
→ Decorator / Template / Component
• $routeの機能強化
→ シンプルなユースケースしか想定してなかったので綻びが
→ 複数・入れ子に対応/ 認証機能を提供 / 状態の保存
• Object.observe()で変更検知を高速化
• デザインノートを読むと1系の課題感が良くわかるのでオススメ

まとめ
• 学習コストは高い。dot installに されないように
• コード量は減らせる。2 way data binding素晴らしい
• DirectiveとServiceが重要です
• SEOめんどい。基本的には静的生成させるのが楽
• RailsはAPIだけ、viewは関与しないのが理想ではある
• はやく2系のAngularを触りたい

Have a happy angular life!
ご清聴ありがとうございました

• 公式ブログ
http://blog.angularjs.org/
• Googleでの活用事例
http://www.funnyant.com/using-angularjs-at-google-with-rhys-bret-bowen/
• Angular 2.0のドラフト（1系の設計思想を知る上でも有用）
https://docs.google.com/document/d/
1I3UC0RrgCh9CKrLxeE4sxwmNSBl3oSXQGt9g3KZnTJI/edit
• Angular 2.0 週次開発MTG議事録
https://docs.google.com/document/d/
150lerb1LmNLuau_a_EznPV1I1UHMTbEl61t4hZ7ZpS0/edit
• Angular Style Guide
https://github.com/mgechev/angularjs-style-guide
参考ドキュメント

参考ドキュメント
AngularJS
アプリケーション開発ガイド
Mastering Web Application
Development with AngularJS
オライリーから出た日本語の入門書。最初の1冊に。
サンプルアプリの例が充実