20140823 LL diver Angular.js で構築した note に関して

Angular.jsで構築した!noteに関してShoei Takamaru (@takamario)

Copyright © Piece of Cake, Inc. All Rights Reserved.

Agenda

• 自己紹介・サービス紹介

• Angular.jsの紹介

• Angular.jsを使って良かった点・苦労した点

• まとめ

2

自己紹介


Who are you?

• 高丸翔英 (たかまるしょうえい, @takamario)!

• エンジニア (フロントエンド寄り？)!

• 2014年1月ピースオブケイク入社

4

https://twitter.com/takamario

サービス紹介


Our Services

• デジタルコンテンツ配信プラットフォームCakes (ケイクス)　2012年9月リリースhttps://cakes.mu/!

!

• クリエイターと読者をつなげるサイト!

!

• 週額150円 / 月額500円で全記事読み放題

6

https://cakes.mu/


Our Services

• note (ノート)　2014年4月リリース https://note.mu/!

• 個人でコンテンツが100円から販売可能

7

https://note.mu/


Got a lot of feedback• いろいろなメディアで取り上げていただきました

• リリース1ヶ月で2,000万PV、100万UU 達成

• 売れる人の中には、月10万円ほど稼いでいる人も

8


Got a lot of feedback• リリース時に発生していたXSSが

twitterで話題に (即日対応)

• DM等で、ご連絡いただいた方、体を張って試していただいた方、ありがとうございました

• 「Angular 適切に使ってXSS発生するの？」→ しません、僕が適切に使ってませんでした。。

9


Got a lot of feedback• 2014年7月30日ワールドビジネスサテライト

http://www.tv-tokyo.co.jp/mv/wbs/newsl/post_71737/

• 2014年8月5日エンジニアtypehttp://engineer.typemag.jp/article/sadoshimavskato

10

http://www.tv-tokyo.co.jp/mv/wbs/newsl/post_71737/

http://engineer.typemag.jp/article/sadoshimavskato


Got a lot of feedback

• 芸能人アカウントも続々

11

伊集院光さん

ロンブー田村淳さんくるりさん

GLAY HISASHIさん

https://note.mu/hikaruijuin

https://note.mu/atsushilonboo

https://note.mu/quruli

https://note.mu/hisashi


News

• くるり公式ファンクラブ純情息子がnoteに移行

• 会報、オフショット、チケット先行予約案内などすべてがnote上で！

12


News

• 山本さほさんのマンガ岡崎に捧ぐがヒット！https://note.mu/sahoobb/m/m6d7f0f032e74

• 80年代生まれの人に多く共感される

• 今後は一般の方の作品が爆発的に売れる可能性も！

13

https://note.mu/sahoobb/m/m6d7f0f032e74

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 + ElasticSearch

• AWS

• Github + HipChat + Jenkins 15

Angular.js


Why Angular?

•使ってみたかったから！(70%)

• SPAのUIに惹かれて (20%)

• API層を結局作るので (10%)

17

最初の想い

他にもフレームワークはある


jQuery

19

$('button.like-button').click(function(){ // Call `Like` API $.ajax() .done(function(){ $(this).addClass('active'); });});

$('input.comment-form') .keypress(function(e){ // Press Enter then submit if (e.which === 13) $.ajax(); // Comment API});

jQueryってこんなに簡単だけど結果、煩雑になる


jQuery pros/cons

• 超簡単

20

良い所

悪い所

• フレームワークじゃない

• ルールがないから、煩雑になる


Backbone.js

21

var Like = Backbone.Model.extend({ url: '/like'});!var LikeButton = Backbone.View.extend({ el: $('button.like-button'),! events: { 'click button.like-button': 'addLike' },! addLike: function() { Like.save(); $(this.el).addClass('active'); }});

<script type=“text/template" id=“tmpl-like-button"> <button class=“like-button"> スキ </button></script>

よりオブジェクトっぽい使い方


Backbone pros/cons

• 正統派、JSっぽい

• 軽い、導入しやすい

• フレームワークを使うことで、開発ルールが決まる

22

良い所

悪い所• イベントのバインディングが面倒

• Getter / Setter は面倒

そこで


Angular.js

24

<div class="note" ng-controller="NoteCtrl"> <div class="datetime">{{ note.published_at | date:'yyyy/MM/dd'}}</div> <p class="talk">{{ note.body }}</p>! <button class="like-button" ng-click="likeNote()">! <div class="comment"> <input class="comment-form" ng-model="comment"> </div></div>

var noteApp = angular.module('noteApp',[]);!myApp.controller('NoteCtrl', [ '$scope', function($scope, $http) { $scope.likeNote = function() { $http.post('like'); }; }]);


Angular.js

25

注目すべき点• HTMLがそのままテンプレートに

• インラインでイベントバインディング(ng-click等)インラインでviewとmodelのバインディング(ng-model)

• Model 側であった変更が、View に伝わるView 側であった変更が、Model に伝わる(2-way Data binding)


The 1st Month of Development

• あ、意外と書けるかも、HTMLにコード書くっていいね

• 2 way-binding マジ楽コード書いてないけど、勝手にここの値も変わってくれるし

26

Controller を作り、ModelとViewを対応させるのは簡単

デザイナーがHTMLを作成／修正

エンジニアがng-xxxxを付ける／移動する

スピーディな開発

でも


Fat controller

28

var noteApp = angular.module('noteApp',[]);myApp.controller('NoteCtrl', [‘$scope', function($scope) { $scope.method1 = function() { // do something }; $scope.method2 = function() { // do something }; $scope.method3 = function() { // do something }; $scope.method4 = function() { // do something }; $scope.method5 = function() { // do something }; ・・・ }]);

メソッドずらり。。重複してるメソッドも散財。。

→ Services や Directives に移すべき


The 2nd Month of Development

• そういえば、AngularってDirectivesってあるじゃん

• すげえ、属性つけるだけでちゃんと動いてくれるよ！

• これ、つまり controller に書かなくて良くない！？

• 使いまわせるね

29

Directives


Directives (restrict: ‘A’)

30

<div class="note" ng-controller="NoteCtrl"> <div class="datetime">{{note.published_at | date:'yyyy/MM/dd'}}</div> <p class="talk">{{note.body}}</p>! <button class="like-button" like-button likable=“note”>! <div class="comment"> <input class="comment-form" comment-form commentable=“note” enter-submit> </div></div>

noteApp.directive('likeButton', function() { return { restrict: 'A', scope: { likable: ‘=' }, link: function(scope, element, attrs) { element.click(function(){}); } };});

Directives

DirectivesDirectives Directives

Directives


Directives (restrict: ‘A’)

31

<div class="note" ng-controller="NoteCtrl"> <div class="datetime">{{note.published_at | date:'yyyy/MM/dd'}}</div> <p class="talk">{{note.body}}</p>! <button class="like-button" like-button likable=“note”>! <div class="comment"> <input class="comment-form" comment-form commentable=“note” enter-submit> </div></div>

関数名引数のイメージcontroller と directive の scope をうまく共有するためには

引数をうまく使うこと


Directives (restrict: ‘E’)

32

<note-card note="note"> <datetime format="yyyy/MM/dd"> <p class="talk">{{note.body}}</p> <like-button likable="note">! <comment-form commentable=“note”></note-card>

独自のタグが使える

noteApp.directive('likeButton', function() { return { restrict: 'E', template: ‘<button class=“like-button”></button>’ };});


The 3rd Month of Development

• そういえば、他のブラウザは？ (みんなChrome使用)

• Firefox：ちょいバグあるぐらい

• Safari：割と動いてる

• IE：え、IE？

33

テスト真っ最中、バグは多い。。


What’s IE?

34

IEを斬る！！


TextNote Editor

35

• MediumライクなWYSIWYGエディタ(contenteditable)

• 生JSMVCじゃなくて、DOMいじりばっかり

• クロスブラウザ対応難しい


The 3rd Month of Development

• ボットのためにJS動かさないとね

• Google と Yahoo! と Bing と？

• Facebook？

• はてな？Pocket？

36

SEO対策は？


OGP

• 初期には、Phantom JS で Angular をレンダリングする荒技を検討

• が、OGP bot ごとに対応が必要

• 2段階で来るbotも。。

• サーバサイドで返すように修正しました

37

Phantom JS (w/ cache)


Recently

• scope が watch しなければいけない対象が増えると Angular は極端に遅くなる(例：Infinite Pager でもっと見る)

• 高速化に関して (@konpyu)http://www.slideshare.net/KonYuichi/speeding-up-angularjs

38

パフォーマンスが落ちてきている

https://twitter.com/konpyu

http://www.slideshare.net/KonYuichi/speeding-up-angularjs

Angular まとめ


Angular Pros/Cons

• HTML + JS の開発は速い(気がする)、noteリリースはAngularのおかげ

• 2 Way Data Binding は幸せになれる

• 学習コストは突然高くなるマスターするならscopeとdirectiveの理解を集中的に

• Phantom JS で OGPは荒業よ

• ある程度に行くとパフォーマンスチューニングが必要

• IE は名称が変わります

40


Future of JS• DHH は JS MVCフレームワーク嫌いらしい

http://signalvnoise.com/posts/3697-server-generated-javascript-responses

• HTML/JS分離の時代から、HTML + JSの部品の時代

• Google さんの時代

• Polymer → 部品化、再利用性の向上

• Dart → JSのパフォーマンス向上

• HTTP2.0 (SPDY) → セキュア、つなぎっぱ

• Wear → どこでも、どのデバイスでも41

最後に


We’re hiring!

• ピースオブケイクではエンジニアを募集しています！

• cakesとnoteを支えるサーバーサイドエンジニアを募集！https://www.wantedly.com/projects/9689

• cakesとnoteを開発したいJavaScriptエンジニアさん大募集！https://www.wantedly.com/projects/7198

• noteのiOS/Androidアプリをつくりたいエンジニアさん大募集！https://www.wantedly.com/projects/7199

43

https://www.wantedly.com/projects/9689



Thank you for listening!


Appendix - Scope

• Scope を制するものは、Angular を制す (と思ってる)

• qiita: Angular JS で複数のコントローラ間でモデル（状態や値）を共有する方法 3 種類http://qiita.com/sunny4381/items/aeae1e154346b5cf6009

45

Scope

http://qiita.com/sunny4381/items/aeae1e154346b5cf6009


Appendix - Scope

46

Upper Controller

Lower Controller

Main Controller Event

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

http://plnkr.co/edit/7sD1JvA6TtKbkDBlZWLq?p=preview


Appendix - Scope

47

Upper Controller

Lower Controller

Main Controller

Service

部品と部品をつなぐ !DI するだけで使用可能 !結局グローバル変数と変わらない (上書き注意) http://plnkr.co/edit/ajKnEz3jfMtpEG7aZ5kO?p=preview

Service

http://plnkr.co/edit/ajKnEz3jfMtpEG7aZ5kO?p=preview


Appendix - Scope

48

Upper Controller

Lower Controller

Main ControllerAngular の機構をそのまま利用 !Angular 推奨 !子は、親のスコープが見える !http://plnkr.co/edit/znYpEq4ibzUFIBSOwK2Y?p=preview !http://plnkr.co/edit/AxCPK6YrmTKsjhQtT8f1?p=preview

Parent / Child Scope

http://plnkr.co/edit/znYpEq4ibzUFIBSOwK2Y?p=preview

http://plnkr.co/edit/AxCPK6YrmTKsjhQtT8f1?p=preview


Appendix - Reusability

• いかに、再利用性を高めるか Controller だけだとつらい

• コメント、Like、フォロー等々、いつどこに置くかもしれないものは Directive に

• ただ、基本的な設計は、function の設計と変わらない (インターフェースが汎用的かどうか)

49

Directive / Service


Appendix - Libraries

• angular-ui/bootstraphttps://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

50

https://github.com/angular-ui/bootstrap

https://github.com/angular-ui/ui-router

https://github.com/danialfarid/angular-file-upload


Appendix - Books

• ng-book https://www.ng-book.com/

!

• AngularJSアプリケーション開発ガイドhttp://www.amazon.co.jp/dp/4873116678

51

https://www.ng-book.com/

http://www.amazon.co.jp/dp/4873116678

Technology

20140823 LL diver Angular.js で構築した note に関して