Weitere ähnliche Inhalte
Ähnlich wie 20140823 LL diver Angular.js で構築した note に関して (20)
Kürzlich hochgeladen (12)
20140823 LL diver Angular.js で構築した note に関して
- 2. Copyright © Piece of Cake, Inc. All Rights Reserved.
Agenda
• 自己紹介・サービス紹介
• Angular.jsの紹介
• Angular.jsを使って良かった点・苦労した点
• まとめ
2
- 4. Copyright © Piece of Cake, Inc. All Rights Reserved.
Who are you?
• 高丸 翔英 (たかまる しょうえい, @takamario)!
• エンジニア (フロントエンド寄り?)!
• 2014年1月 ピースオブケイク入社
4
- 6. Copyright © Piece of Cake, Inc. All Rights Reserved.
Our Services
• デジタルコンテンツ配信プラットフォーム
Cakes (ケイクス) 2012年9月リリース
https://cakes.mu/!
!
• クリエイターと読者をつなげるサイト!
!
• 週額150円 / 月額500円で全記事読み放題
6
- 7. Copyright © Piece of Cake, Inc. All Rights Reserved.
Our Services
• note (ノート) 2014年4月リリース
https://note.mu/!
• 個人でコンテンツが100円から販売可能
7
- 8. Copyright © Piece of Cake, Inc. All Rights Reserved.
Got a lot of feedback
• いろいろなメディアで取り上げていただきました
• リリース1ヶ月で2,000万PV、100万UU 達成
• 売れる人の中には、月10万円ほど稼いでいる人も
8
- 9. Copyright © Piece of Cake, Inc. All Rights Reserved.
Got a lot of feedback
• リリース時に発生していたXSSが
twitterで話題に (即日対応)
• DM等で、ご連絡いただいた方、体
を張って試していただいた方、あり
がとうございました
• 「Angular 適切に使ってXSS発生す
るの?」
→ しません、僕が適切に使ってま
せんでした。。
9
- 10. Copyright © Piece of Cake, Inc. All Rights Reserved.
Got a lot of feedback
• 2014年7月30日 ワールドビジネスサテライト
http://www.tv-tokyo.co.jp/mv/wbs/newsl/post_71737/
• 2014年8月5日 エンジニアtype
http://engineer.typemag.jp/article/sadoshimavskato
10
- 11. Copyright © Piece of Cake, Inc. All Rights Reserved.
Got a lot of feedback
• 芸能人アカウントも続々
11
伊集院光さん
ロンブー田村淳さんくるりさん
GLAY HISASHIさん
- 12. Copyright © Piece of Cake, Inc. All Rights Reserved.
News
• くるり公式ファンクラブ
純情息子がnoteに移行
• 会報、オフショット、
チケット先行予約案内など
すべてがnote上で!
12
- 13. Copyright © Piece of Cake, Inc. All Rights Reserved.
News
• 山本さほさんのマンガ
岡崎に捧ぐがヒット!
https://note.mu/sahoobb/m/
m6d7f0f032e74
• 80年代生まれの人に
多く共感される
• 今後は一般の方の作品が
爆発的に売れる可能性も!
13
- 15. 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 + ElasticSearch
• AWS
• Github + HipChat + Jenkins 15
- 17. Copyright © Piece of Cake, Inc. All Rights Reserved.
Why Angular?
• 使ってみたかったから!(70%)
• SPAのUIに惹かれて (20%)
• API層を結局作るので (10%)
17
最初の想い
- 19. Copyright © Piece of Cake, Inc. All Rights Reserved.
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って
こんなに簡単だけど
結果、煩雑になる
- 20. Copyright © Piece of Cake, Inc. All Rights Reserved.
jQuery pros/cons
• 超簡単
20
良い所
悪い所
• フレームワークじゃない
• ルールがないから、煩雑になる
- 21. Copyright © Piece of Cake, Inc. All Rights Reserved.
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>
よりオブジェクトっぽい使い方
- 22. Copyright © Piece of Cake, Inc. All Rights Reserved.
Backbone pros/cons
• 正統派、JSっぽい
• 軽い、導入しやすい
• フレームワークを使うことで、開発ルールが決まる
22
良い所
悪い所
• イベントのバインディングが面倒
• Getter / Setter は面倒
- 24. Copyright © Piece of Cake, Inc. All Rights Reserved.
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');
};
}
]);
- 25. Copyright © Piece of Cake, Inc. All Rights Reserved.
Angular.js
25
注目すべき点
• HTMLがそのままテンプレートに
• インラインでイベントバインディング(ng-click等)
インラインでviewとmodelのバインディング(ng-model)
• Model 側であった変更が、View に伝わる
View 側であった変更が、Model に伝わる
(2-way Data binding)
- 26. Copyright © Piece of Cake, Inc. All Rights Reserved.
The 1st Month of Development
• あ、意外と書けるかも、HTMLにコード書くっていいね
• 2 way-binding マジ楽
コード書いてないけど、勝手にここの値も変わってくれるし
26
Controller を作り、ModelとViewを対応させるのは簡単
デザイナーがHTMLを作成/修正
エンジニアがng-xxxxを付ける/移動する
スピーディな開発
- 28. Copyright © Piece of Cake, Inc. All Rights Reserved.
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 に移すべき
- 29. Copyright © Piece of Cake, Inc. All Rights Reserved.
The 2nd Month of Development
• そういえば、AngularってDirectivesってあるじゃん
• すげえ、属性つけるだけでちゃんと動いてくれるよ!
• これ、つまり controller に書かなくて良くない!?
• 使いまわせるね
29
Directives
- 30. Copyright © Piece of Cake, Inc. All Rights Reserved.
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
- 31. Copyright © Piece of Cake, Inc. All Rights Reserved.
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 をうまく共有するためには
引数をうまく使うこと
- 32. Copyright © Piece of Cake, Inc. All Rights Reserved.
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>’
};
});
- 33. Copyright © Piece of Cake, Inc. All Rights Reserved.
The 3rd Month of Development
• そういえば、他のブラウザは? (みんなChrome使用)
• Firefox:ちょいバグあるぐらい
• Safari:割と動いてる
• IE:え、IE?
33
テスト真っ最中、バグは多い。。
- 35. Copyright © Piece of Cake, Inc. All Rights Reserved.
TextNote Editor
35
• Mediumライクな
WYSIWYGエディタ
(contenteditable)
• 生JS
MVCじゃなくて、DOM
いじりばっかり
• クロスブラウザ対応難
しい
- 36. Copyright © Piece of Cake, Inc. All Rights Reserved.
The 3rd Month of Development
• ボットのためにJS動かさないとね
• Google と Yahoo! と Bing と?
• Facebook?
• はてな?Pocket?
36
SEO対策は?
- 37. Copyright © Piece of Cake, Inc. All Rights Reserved.
OGP
• 初期には、
Phantom JS で Angular を
レンダリングする荒技を検討
• が、OGP bot ごとに対応が必要
• 2段階で来るbotも。。
• サーバサイドで返すように修正
しました
37
Phantom JS
(w/ cache)
- 38. Copyright © Piece of Cake, Inc. All Rights Reserved.
Recently
• scope が watch しなければいけない対象が増えると
Angular は極端に遅くなる
(例:Infinite Pager でもっと見る)
• 高速化に関して (@konpyu)
http://www.slideshare.net/KonYuichi/speeding-up-
angularjs
38
パフォーマンスが落ちてきている
- 40. Copyright © Piece of Cake, Inc. All Rights Reserved.
Angular Pros/Cons
• HTML + JS の開発は速い(気がする)、noteリリースはAngularのおかげ
• 2 Way Data Binding は幸せになれる
• 学習コストは突然高くなる
マスターするならscopeとdirectiveの理解を集中的に
• Phantom JS で OGPは荒業よ
• ある程度に行くとパフォーマンスチューニングが必要
• IE は 名称が変わります
40
- 41. Copyright © Piece of Cake, Inc. All Rights Reserved.
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
- 43. Copyright © Piece of Cake, Inc. All Rights Reserved.
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
- 45. Copyright © Piece of Cake, Inc. All Rights Reserved.
Appendix - Scope
• Scope を制するものは、Angular を制す (と思ってる)
• qiita: Angular JS で複数のコントローラ間でモデル(状
態や値)を共有する方法 3 種類
http://qiita.com/sunny4381/items/aeae1e154346b5cf6009
45
Scope
- 46. Copyright © Piece of Cake, Inc. All Rights Reserved.
Appendix - Scope
46
Upper Controller
Lower Controller
Main Controller Event
遠く離れたスコープでも共有
可能、上書きの危険性もない
!
JSっぽい
!
双方向のコードを書く必要が
あるので、Angular ではあま
り使わない方が良い
http://plnkr.co/edit/
7sD1JvA6TtKbkDBlZWLq?p=preview
- 47. Copyright © Piece of Cake, Inc. All Rights Reserved.
Appendix - Scope
47
Upper Controller
Lower Controller
Main Controller
Service
部品と部品をつなぐ
!
DI するだけで使用可能
!
結局グローバル変数と
変わらない
(上書き注意)
http://plnkr.co/edit/
ajKnEz3jfMtpEG7aZ5kO?p=preview
Service
- 48. Copyright © Piece of Cake, Inc. All Rights Reserved.
Appendix - Scope
48
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
- 49. Copyright © Piece of Cake, Inc. All Rights Reserved.
Appendix - Reusability
• いかに、再利用性を高めるか
Controller だけだとつらい
• コメント、Like、フォロー等々、いつどこに置くかもし
れないものは Directive に
• ただ、基本的な設計は、function の設計と変わらない
(インターフェースが汎用的かどうか)
49
Directive / Service
- 50. Copyright © Piece of Cake, Inc. All Rights Reserved.
Appendix - 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
50
- 51. Copyright © Piece of Cake, Inc. All Rights Reserved.
Appendix - Books
• ng-book
https://www.ng-book.com/
!
• AngularJSアプリケーション開発ガイド
http://www.amazon.co.jp/dp/4873116678
51