SlideShare una empresa de Scribd logo
1 de 51
Descargar para leer sin conexión
Angular.jsで構築した!
noteに関して
Shoei Takamaru (@takamario)
Copyright © Piece of Cake, Inc. All Rights Reserved.
Agenda
• 自己紹介・サービス紹介
• Angular.jsの紹介
• Angular.jsを使って良かった点・苦労した点
• まとめ
2
自己紹介
Copyright © Piece of Cake, Inc. All Rights Reserved.
Who are you?
• 高丸 翔英 (たかまる しょうえい, @takamario)!
• エンジニア (フロントエンド寄り?)!
• 2014年1月 ピースオブケイク入社
4
サービス紹介
Copyright © Piece of Cake, Inc. All Rights Reserved.
Our Services
• デジタルコンテンツ配信プラットフォーム

Cakes (ケイクス) 2012年9月リリース

https://cakes.mu/!
!
• クリエイターと読者をつなげるサイト!
!
• 週額150円 / 月額500円で全記事読み放題
6
Copyright © Piece of Cake, Inc. All Rights Reserved.
Our Services
• note (ノート) 2014年4月リリース

https://note.mu/!
• 個人でコンテンツが100円から販売可能
7
Copyright © Piece of Cake, Inc. All Rights Reserved.
Got a lot of feedback
• いろいろなメディアで取り上げていただきました
• リリース1ヶ月で2,000万PV、100万UU 達成
• 売れる人の中には、月10万円ほど稼いでいる人も
8
Copyright © Piece of Cake, Inc. All Rights Reserved.
Got a lot of feedback
• リリース時に発生していたXSSが

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

→ しません、僕が適切に使ってま
せんでした。。
9
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
Copyright © Piece of Cake, Inc. All Rights Reserved.
Got a lot of feedback
• 芸能人アカウントも続々
11
伊集院光さん
ロンブー田村淳さんくるりさん
GLAY HISASHIさん
Copyright © Piece of Cake, Inc. All Rights Reserved.
News
• くるり公式ファンクラブ

純情息子がnoteに移行
• 会報、オフショット、

チケット先行予約案内など

すべてがnote上で!
12
Copyright © Piece of Cake, Inc. All Rights Reserved.
News
• 山本さほさんのマンガ

岡崎に捧ぐがヒット!

https://note.mu/sahoobb/m/
m6d7f0f032e74
• 80年代生まれの人に

多く共感される
• 今後は一般の方の作品が

爆発的に売れる可能性も!
13
noteの開発体制と
システム構成
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
Angular.js
Copyright © Piece of Cake, Inc. All Rights Reserved.
Why Angular?
• 使ってみたかったから!(70%)
• SPAのUIに惹かれて (20%)
• API層を結局作るので (10%)
17
最初の想い
他にも
フレームワークはある
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って
こんなに簡単だけど
結果、煩雑になる
Copyright © Piece of Cake, Inc. All Rights Reserved.
jQuery pros/cons
• 超簡単
20
良い所
悪い所
• フレームワークじゃない
• ルールがないから、煩雑になる
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>
よりオブジェクトっぽい使い方
Copyright © Piece of Cake, Inc. All Rights Reserved.
Backbone pros/cons
• 正統派、JSっぽい
• 軽い、導入しやすい
• フレームワークを使うことで、開発ルールが決まる
22
良い所
悪い所
• イベントのバインディングが面倒
• Getter / Setter は面倒
そこで
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');	
};	
}	
]);
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)
Copyright © Piece of Cake, Inc. All Rights Reserved.
The 1st Month of Development
• あ、意外と書けるかも、HTMLにコード書くっていいね
• 2 way-binding マジ楽

コード書いてないけど、勝手にここの値も変わってくれるし
26
Controller を作り、ModelとViewを対応させるのは簡単
デザイナーがHTMLを作成/修正
エンジニアがng-xxxxを付ける/移動する
スピーディな開発
でも
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 に移すべき
Copyright © Piece of Cake, Inc. All Rights Reserved.
The 2nd Month of Development
• そういえば、AngularってDirectivesってあるじゃん
• すげえ、属性つけるだけでちゃんと動いてくれるよ!
• これ、つまり controller に書かなくて良くない!?
• 使いまわせるね
29
Directives
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
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 をうまく共有するためには
引数をうまく使うこと
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>’	
};	
});
Copyright © Piece of Cake, Inc. All Rights Reserved.
The 3rd Month of Development
• そういえば、他のブラウザは? (みんなChrome使用)
• Firefox:ちょいバグあるぐらい
• Safari:割と動いてる
• IE:え、IE?
33
テスト真っ最中、バグは多い。。
Copyright © Piece of Cake, Inc. All Rights Reserved.
What’s IE?
34
IEを斬る!!
Copyright © Piece of Cake, Inc. All Rights Reserved.
TextNote Editor
35
• Mediumライクな
WYSIWYGエディタ

(contenteditable)
• 生JS

MVCじゃなくて、DOM
いじりばっかり
• クロスブラウザ対応難
しい
Copyright © Piece of Cake, Inc. All Rights Reserved.
The 3rd Month of Development
• ボットのためにJS動かさないとね
• Google と Yahoo! と Bing と?
• Facebook?
• はてな?Pocket?
36
SEO対策は?
Copyright © Piece of Cake, Inc. All Rights Reserved.
OGP
• 初期には、

Phantom JS で Angular を

レンダリングする荒技を検討
• が、OGP bot ごとに対応が必要
• 2段階で来るbotも。。
• サーバサイドで返すように修正
しました
37
Phantom JS
(w/ cache)
Copyright © Piece of Cake, Inc. All Rights Reserved.
Recently
• scope が watch しなければいけない対象が増えると

Angular は極端に遅くなる

(例:Infinite Pager でもっと見る)
• 高速化に関して (@konpyu)

http://www.slideshare.net/KonYuichi/speeding-up-
angularjs
38
パフォーマンスが落ちてきている
Angular まとめ
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
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
最後に
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
Thank you for listening!
Copyright © Piece of Cake, Inc. All Rights Reserved.
Appendix - Scope
• Scope を制するものは、Angular を制す (と思ってる)
• qiita: Angular JS で複数のコントローラ間でモデル(状
態や値)を共有する方法 3 種類

http://qiita.com/sunny4381/items/aeae1e154346b5cf6009
45
Scope
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
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
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
Copyright © Piece of Cake, Inc. All Rights Reserved.
Appendix - Reusability
• いかに、再利用性を高めるか

Controller だけだとつらい
• コメント、Like、フォロー等々、いつどこに置くかもし
れないものは Directive に
• ただ、基本的な設計は、function の設計と変わらない

(インターフェースが汎用的かどうか)
49
Directive / Service
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
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

Más contenido relacionado

La actualidad más candente

View customize pluginを使いこなす
View customize pluginを使いこなすView customize pluginを使いこなす
View customize pluginを使いこなすonozaty
 
ここが変わる!Unity 5のスマホ開発  ~アセットバンドル、ビルド、プラグイン~
ここが変わる!Unity 5のスマホ開発  ~アセットバンドル、ビルド、プラグイン~ここが変わる!Unity 5のスマホ開発  ~アセットバンドル、ビルド、プラグイン~
ここが変わる!Unity 5のスマホ開発  ~アセットバンドル、ビルド、プラグイン~MakotoItoh
 
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門Shumpei Shiraishi
 
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分松田 千尋
 
Mojolicious+redisでチャットを作った
Mojolicious+redisでチャットを作ったMojolicious+redisでチャットを作った
Mojolicious+redisでチャットを作ったTetsuya Tatsumi
 
今流行りのウェブアプリ開発環境Yeoman
今流行りのウェブアプリ開発環境Yeoman今流行りのウェブアプリ開発環境Yeoman
今流行りのウェブアプリ開発環境Yeomantomo_masakura
 
Core Graphics on watchOS 2
Core Graphics on watchOS 2Core Graphics on watchOS 2
Core Graphics on watchOS 2Shuichi Tsutsumi
 
少人数開発でもクオリティを諦めない - エンジニア視点から見る少人数開発の極意 -
少人数開発でもクオリティを諦めない - エンジニア視点から見る少人数開発の極意 -少人数開発でもクオリティを諦めない - エンジニア視点から見る少人数開発の極意 -
少人数開発でもクオリティを諦めない - エンジニア視点から見る少人数開発の極意 -historia_Inc
 
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話yoshioka_cb
 
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・Yoshie Kaneno
 
Megascansを使った効率化と楽しい絵作り ~Cutting-Edge Test Drive制作事例~
Megascansを使った効率化と楽しい絵作り ~Cutting-Edge Test Drive制作事例~Megascansを使った効率化と楽しい絵作り ~Cutting-Edge Test Drive制作事例~
Megascansを使った効率化と楽しい絵作り ~Cutting-Edge Test Drive制作事例~historia_Inc
 
視聴者参加型のライブ動画を実現!GenvidをUE4に実装する方法 | UNREAL FEST EXTREME 2020 WINTER
視聴者参加型のライブ動画を実現!GenvidをUE4に実装する方法 | UNREAL FEST EXTREME 2020 WINTER視聴者参加型のライブ動画を実現!GenvidをUE4に実装する方法 | UNREAL FEST EXTREME 2020 WINTER
視聴者参加型のライブ動画を実現!GenvidをUE4に実装する方法 | UNREAL FEST EXTREME 2020 WINTERエピック・ゲームズ・ジャパン Epic Games Japan
 
イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0Okuno Kentaro
 
Java + React.jsでSever Side Rendering #reactjs_meetup
Java + React.jsでSever Side Rendering #reactjs_meetupJava + React.jsでSever Side Rendering #reactjs_meetup
Java + React.jsでSever Side Rendering #reactjs_meetupToshiaki Maki
 
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェストAngular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェストMasahiko Asai
 
HTML5 開発環境の紹介
HTML5 開発環境の紹介HTML5 開発環境の紹介
HTML5 開発環境の紹介tomo_masakura
 
watchOS 2 新機能の細かい話
watchOS 2 新機能の細かい話watchOS 2 新機能の細かい話
watchOS 2 新機能の細かい話Shuichi Tsutsumi
 
UI/UX に影響の大きい watchOS 2 の新機能 3つ
UI/UX に影響の大きい watchOS 2 の新機能 3つUI/UX に影響の大きい watchOS 2 の新機能 3つ
UI/UX に影響の大きい watchOS 2 の新機能 3つShuichi Tsutsumi
 

La actualidad más candente (20)

View customize pluginを使いこなす
View customize pluginを使いこなすView customize pluginを使いこなす
View customize pluginを使いこなす
 
ここが変わる!Unity 5のスマホ開発  ~アセットバンドル、ビルド、プラグイン~
ここが変わる!Unity 5のスマホ開発  ~アセットバンドル、ビルド、プラグイン~ここが変わる!Unity 5のスマホ開発  ~アセットバンドル、ビルド、プラグイン~
ここが変わる!Unity 5のスマホ開発  ~アセットバンドル、ビルド、プラグイン~
 
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門
 
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
 
Mojolicious+redisでチャットを作った
Mojolicious+redisでチャットを作ったMojolicious+redisでチャットを作った
Mojolicious+redisでチャットを作った
 
Angular2実践入門
Angular2実践入門Angular2実践入門
Angular2実践入門
 
今流行りのウェブアプリ開発環境Yeoman
今流行りのウェブアプリ開発環境Yeoman今流行りのウェブアプリ開発環境Yeoman
今流行りのウェブアプリ開発環境Yeoman
 
かわいい女の子になりたいんや! UE4の最新機能を使ってVTuberしてみた!
かわいい女の子になりたいんや! UE4の最新機能を使ってVTuberしてみた!かわいい女の子になりたいんや! UE4の最新機能を使ってVTuberしてみた!
かわいい女の子になりたいんや! UE4の最新機能を使ってVTuberしてみた!
 
Core Graphics on watchOS 2
Core Graphics on watchOS 2Core Graphics on watchOS 2
Core Graphics on watchOS 2
 
少人数開発でもクオリティを諦めない - エンジニア視点から見る少人数開発の極意 -
少人数開発でもクオリティを諦めない - エンジニア視点から見る少人数開発の極意 -少人数開発でもクオリティを諦めない - エンジニア視点から見る少人数開発の極意 -
少人数開発でもクオリティを諦めない - エンジニア視点から見る少人数開発の極意 -
 
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
 
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
 
Megascansを使った効率化と楽しい絵作り ~Cutting-Edge Test Drive制作事例~
Megascansを使った効率化と楽しい絵作り ~Cutting-Edge Test Drive制作事例~Megascansを使った効率化と楽しい絵作り ~Cutting-Edge Test Drive制作事例~
Megascansを使った効率化と楽しい絵作り ~Cutting-Edge Test Drive制作事例~
 
視聴者参加型のライブ動画を実現!GenvidをUE4に実装する方法 | UNREAL FEST EXTREME 2020 WINTER
視聴者参加型のライブ動画を実現!GenvidをUE4に実装する方法 | UNREAL FEST EXTREME 2020 WINTER視聴者参加型のライブ動画を実現!GenvidをUE4に実装する方法 | UNREAL FEST EXTREME 2020 WINTER
視聴者参加型のライブ動画を実現!GenvidをUE4に実装する方法 | UNREAL FEST EXTREME 2020 WINTER
 
イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0
 
Java + React.jsでSever Side Rendering #reactjs_meetup
Java + React.jsでSever Side Rendering #reactjs_meetupJava + React.jsでSever Side Rendering #reactjs_meetup
Java + React.jsでSever Side Rendering #reactjs_meetup
 
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェストAngular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェスト
 
HTML5 開発環境の紹介
HTML5 開発環境の紹介HTML5 開発環境の紹介
HTML5 開発環境の紹介
 
watchOS 2 新機能の細かい話
watchOS 2 新機能の細かい話watchOS 2 新機能の細かい話
watchOS 2 新機能の細かい話
 
UI/UX に影響の大きい watchOS 2 の新機能 3つ
UI/UX に影響の大きい watchOS 2 の新機能 3つUI/UX に影響の大きい watchOS 2 の新機能 3つ
UI/UX に影響の大きい watchOS 2 の新機能 3つ
 

Destacado

[予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦!
[予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦![予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦!
[予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦!Jun-ichi Sakamoto
 
最近、リアルタイムWebが面白い
最近、リアルタイムWebが面白い最近、リアルタイムWebが面白い
最近、リアルタイムWebが面白いNarami Kiyokura
 
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んでShumpei Shiraishi
 
Introduction of "MarkdownPresenter"
Introduction of "MarkdownPresenter"Introduction of "MarkdownPresenter"
Introduction of "MarkdownPresenter"Jun-ichi Sakamoto
 
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んでShumpei Shiraishi
 
Reactive Programming
Reactive ProgrammingReactive Programming
Reactive Programmingmaruyama097
 
CLR/H#74 LT IT勉強会発表用イチオシツール
CLR/H#74 LT IT勉強会発表用イチオシツールCLR/H#74 LT IT勉強会発表用イチオシツール
CLR/H#74 LT IT勉強会発表用イチオシツールJun-ichi Sakamoto
 
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んでイラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んでShumpei Shiraishi
 
はじめにことばありき
はじめにことばありきはじめにことばありき
はじめにことばありきShumpei Shiraishi
 
AngularJS 2.0 Jumpstart
AngularJS 2.0 JumpstartAngularJS 2.0 Jumpstart
AngularJS 2.0 JumpstartFilipe Falcão
 
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...Akira Inoue
 
More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトーク
More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトークMore Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトーク
More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトークJun-ichi Sakamoto
 
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクトHTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクトShumpei Shiraishi
 
Ohotech特盛#14 セッション4 予告編
Ohotech特盛#14 セッション4 予告編Ohotech特盛#14 セッション4 予告編
Ohotech特盛#14 セッション4 予告編Jun-ichi Sakamoto
 
Typescriptの中のこと(浅め)
Typescriptの中のこと(浅め)Typescriptの中のこと(浅め)
Typescriptの中のこと(浅め)Kazuhide Maruyama
 
変身×フランツ・カフカ
変身×フランツ・カフカ変身×フランツ・カフカ
変身×フランツ・カフカShumpei Shiraishi
 

Destacado (20)

[予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦!
[予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦![予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦!
[予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦!
 
最近、リアルタイムWebが面白い
最近、リアルタイムWebが面白い最近、リアルタイムWebが面白い
最近、リアルタイムWebが面白い
 
秒速一億円
秒速一億円秒速一億円
秒速一億円
 
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
 
Introduction of "MarkdownPresenter"
Introduction of "MarkdownPresenter"Introduction of "MarkdownPresenter"
Introduction of "MarkdownPresenter"
 
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
 
Reactive Programming
Reactive ProgrammingReactive Programming
Reactive Programming
 
CLR/H#74 LT IT勉強会発表用イチオシツール
CLR/H#74 LT IT勉強会発表用イチオシツールCLR/H#74 LT IT勉強会発表用イチオシツール
CLR/H#74 LT IT勉強会発表用イチオシツール
 
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んでイラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
 
はじめにことばありき
はじめにことばありきはじめにことばありき
はじめにことばありき
 
AngularJS 2.0 Jumpstart
AngularJS 2.0 JumpstartAngularJS 2.0 Jumpstart
AngularJS 2.0 Jumpstart
 
20130921レジュメ2
20130921レジュメ220130921レジュメ2
20130921レジュメ2
 
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
 
More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトーク
More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトークMore Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトーク
More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトーク
 
Gulp ことはじめ
Gulp ことはじめGulp ことはじめ
Gulp ことはじめ
 
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクトHTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクト
 
TypeScript And ALM
TypeScript And ALMTypeScript And ALM
TypeScript And ALM
 
Ohotech特盛#14 セッション4 予告編
Ohotech特盛#14 セッション4 予告編Ohotech特盛#14 セッション4 予告編
Ohotech特盛#14 セッション4 予告編
 
Typescriptの中のこと(浅め)
Typescriptの中のこと(浅め)Typescriptの中のこと(浅め)
Typescriptの中のこと(浅め)
 
変身×フランツ・カフカ
変身×フランツ・カフカ変身×フランツ・カフカ
変身×フランツ・カフカ
 

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

20140529 JS Ojisan #2 LT あの「note」はAngular.js
20140529 JS Ojisan #2 LT あの「note」はAngular.js20140529 JS Ojisan #2 LT あの「note」はAngular.js
20140529 JS Ojisan #2 LT あの「note」はAngular.jsShoei Takamaru
 
20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru
20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru
20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaruShoei Takamaru
 
Bitbucket pipelines を使ってみた話
Bitbucket pipelines を使ってみた話Bitbucket pipelines を使ってみた話
Bitbucket pipelines を使ってみた話makoto ikezoe
 
WebデザイナのためのjQuery入門。
WebデザイナのためのjQuery入門。WebデザイナのためのjQuery入門。
WebデザイナのためのjQuery入門。Yossy Taka
 
食べログのフロントエンドリプレース戦略
食べログのフロントエンドリプレース戦略食べログのフロントエンドリプレース戦略
食べログのフロントエンドリプレース戦略Tsuji Yuko
 
JobScheduler Code Reading
JobScheduler Code ReadingJobScheduler Code Reading
JobScheduler Code ReadingShinobu Okano
 
PythonのGUI_2018 with NSEG
PythonのGUI_2018 with NSEGPythonのGUI_2018 with NSEG
PythonのGUI_2018 with NSEGJun Okazaki
 
JavaScript Basic 02 jQuery
JavaScript Basic 02 jQueryJavaScript Basic 02 jQuery
JavaScript Basic 02 jQueryYossy Taka
 
Js ojisan codereview-oppaijs
Js ojisan codereview-oppaijsJs ojisan codereview-oppaijs
Js ojisan codereview-oppaijsKei Takahashi
 
Objective-Cプログラマのためのswift導入法
Objective-Cプログラマのためのswift導入法Objective-Cプログラマのためのswift導入法
Objective-Cプログラマのためのswift導入法Tomoki Hasegawa
 
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話Kentaro Matsumae
 
第3期キックオフ説明会+勉強会
第3期キックオフ説明会+勉強会 第3期キックオフ説明会+勉強会
第3期キックオフ説明会+勉強会 Shuhei Iitsuka
 
pairsでのAngularJS x TypeScript x e2e @めぐすた#1
pairsでのAngularJS x TypeScript x e2e @めぐすた#1 pairsでのAngularJS x TypeScript x e2e @めぐすた#1
pairsでのAngularJS x TypeScript x e2e @めぐすた#1 Takuma Morikawa
 
noteをAngularJSで構築した話
noteをAngularJSで構築した話noteをAngularJSで構築した話
noteをAngularJSで構築した話Kon Yuichi
 
システム開発を前進させるためのGradle導入法
システム開発を前進させるためのGradle導入法システム開発を前進させるためのGradle導入法
システム開発を前進させるためのGradle導入法Takuma Watabiki
 
Xcode で gulp を使うお話
Xcode で gulp を使うお話Xcode で gulp を使うお話
Xcode で gulp を使うお話Yoichiro Sakurai
 
Dockerで始める Java EE アプリケーション開発 for JJUG CCC 2017
Dockerで始める Java EE アプリケーション開発 for JJUG CCC 2017Dockerで始める Java EE アプリケーション開発 for JJUG CCC 2017
Dockerで始める Java EE アプリケーション開発 for JJUG CCC 2017Kohei Saito
 
a-blogcsm な寺子屋 2 in Okazaki
a-blogcsm な寺子屋 2 in Okazakia-blogcsm な寺子屋 2 in Okazaki
a-blogcsm な寺子屋 2 in OkazakiEtsushi Ishii
 
ABC2012Spring 20120324
ABC2012Spring 20120324ABC2012Spring 20120324
ABC2012Spring 20120324Tak Inamori
 
oFの話題が殆ど出ない oF jp Summer Workout
oFの話題が殆ど出ない oF jp Summer WorkoutoFの話題が殆ど出ない oF jp Summer Workout
oFの話題が殆ど出ない oF jp Summer WorkoutTsuubito Ishii
 

Similar a 20140823 LL diver Angular.js で構築した note に関して (20)

20140529 JS Ojisan #2 LT あの「note」はAngular.js
20140529 JS Ojisan #2 LT あの「note」はAngular.js20140529 JS Ojisan #2 LT あの「note」はAngular.js
20140529 JS Ojisan #2 LT あの「note」はAngular.js
 
20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru
20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru
20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru
 
Bitbucket pipelines を使ってみた話
Bitbucket pipelines を使ってみた話Bitbucket pipelines を使ってみた話
Bitbucket pipelines を使ってみた話
 
WebデザイナのためのjQuery入門。
WebデザイナのためのjQuery入門。WebデザイナのためのjQuery入門。
WebデザイナのためのjQuery入門。
 
食べログのフロントエンドリプレース戦略
食べログのフロントエンドリプレース戦略食べログのフロントエンドリプレース戦略
食べログのフロントエンドリプレース戦略
 
JobScheduler Code Reading
JobScheduler Code ReadingJobScheduler Code Reading
JobScheduler Code Reading
 
PythonのGUI_2018 with NSEG
PythonのGUI_2018 with NSEGPythonのGUI_2018 with NSEG
PythonのGUI_2018 with NSEG
 
JavaScript Basic 02 jQuery
JavaScript Basic 02 jQueryJavaScript Basic 02 jQuery
JavaScript Basic 02 jQuery
 
Js ojisan codereview-oppaijs
Js ojisan codereview-oppaijsJs ojisan codereview-oppaijs
Js ojisan codereview-oppaijs
 
Objective-Cプログラマのためのswift導入法
Objective-Cプログラマのためのswift導入法Objective-Cプログラマのためのswift導入法
Objective-Cプログラマのためのswift導入法
 
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
 
第3期キックオフ説明会+勉強会
第3期キックオフ説明会+勉強会 第3期キックオフ説明会+勉強会
第3期キックオフ説明会+勉強会
 
pairsでのAngularJS x TypeScript x e2e @めぐすた#1
pairsでのAngularJS x TypeScript x e2e @めぐすた#1 pairsでのAngularJS x TypeScript x e2e @めぐすた#1
pairsでのAngularJS x TypeScript x e2e @めぐすた#1
 
noteをAngularJSで構築した話
noteをAngularJSで構築した話noteをAngularJSで構築した話
noteをAngularJSで構築した話
 
システム開発を前進させるためのGradle導入法
システム開発を前進させるためのGradle導入法システム開発を前進させるためのGradle導入法
システム開発を前進させるためのGradle導入法
 
Xcode で gulp を使うお話
Xcode で gulp を使うお話Xcode で gulp を使うお話
Xcode で gulp を使うお話
 
Dockerで始める Java EE アプリケーション開発 for JJUG CCC 2017
Dockerで始める Java EE アプリケーション開発 for JJUG CCC 2017Dockerで始める Java EE アプリケーション開発 for JJUG CCC 2017
Dockerで始める Java EE アプリケーション開発 for JJUG CCC 2017
 
a-blogcsm な寺子屋 2 in Okazaki
a-blogcsm な寺子屋 2 in Okazakia-blogcsm な寺子屋 2 in Okazaki
a-blogcsm な寺子屋 2 in Okazaki
 
ABC2012Spring 20120324
ABC2012Spring 20120324ABC2012Spring 20120324
ABC2012Spring 20120324
 
oFの話題が殆ど出ない oF jp Summer Workout
oFの話題が殆ど出ない oF jp Summer WorkoutoFの話題が殆ど出ない oF jp Summer Workout
oFの話題が殆ど出ない oF jp Summer Workout
 

Último

The 86th National Convention of IPSJ (Student Encouragement Award))
The 86th National Convention of IPSJ (Student Encouragement Award))The 86th National Convention of IPSJ (Student Encouragement Award))
The 86th National Convention of IPSJ (Student Encouragement Award))yoshidakids7
 
IGDA Japan SIG Audio #22 オンラインセミナー VRの知る.pdf
IGDA Japan SIG Audio #22 オンラインセミナー VRの知る.pdfIGDA Japan SIG Audio #22 オンラインセミナー VRの知る.pdf
IGDA Japan SIG Audio #22 オンラインセミナー VRの知る.pdfIGDA Japan SIG-Audio
 
00001_test_automation_portfolio_20240313
00001_test_automation_portfolio_2024031300001_test_automation_portfolio_20240313
00001_test_automation_portfolio_20240313ssuserf8ea02
 
チームで開発するための環境を整える
チームで開発するための環境を整えるチームで開発するための環境を整える
チームで開発するための環境を整えるonozaty
 
バイオリンの運弓動作計測による初心者と経験者の差異分析
バイオリンの運弓動作計測による初心者と経験者の差異分析バイオリンの運弓動作計測による初心者と経験者の差異分析
バイオリンの運弓動作計測による初心者と経験者の差異分析sugiuralab
 
JAWS DAYS 2024 E-3 ランチにまつわるちょっといい話 〜給食がない町の小中学生に温かい昼食を〜
JAWS DAYS 2024 E-3 ランチにまつわるちょっといい話 〜給食がない町の小中学生に温かい昼食を〜JAWS DAYS 2024 E-3 ランチにまつわるちょっといい話 〜給食がない町の小中学生に温かい昼食を〜
JAWS DAYS 2024 E-3 ランチにまつわるちょっといい話 〜給食がない町の小中学生に温かい昼食を〜Naomi Yamasaki
 
SIG-AUDIO 2024 Vol.02 オンラインセミナー 「必殺使音人(ひっさつしおとにん)カットシーンを成敗せよ」
SIG-AUDIO 2024 Vol.02 オンラインセミナー 「必殺使音人(ひっさつしおとにん)カットシーンを成敗せよ」SIG-AUDIO 2024 Vol.02 オンラインセミナー 「必殺使音人(ひっさつしおとにん)カットシーンを成敗せよ」
SIG-AUDIO 2024 Vol.02 オンラインセミナー 「必殺使音人(ひっさつしおとにん)カットシーンを成敗せよ」IGDA Japan SIG-Audio
 
AWS Lambdaと AWS API Gatewayを使ったREST API作り
AWS Lambdaと AWS API Gatewayを使ったREST API作りAWS Lambdaと AWS API Gatewayを使ったREST API作り
AWS Lambdaと AWS API Gatewayを使ったREST API作りiPride Co., Ltd.
 
キンドリル_ネットワーク自動化成熟度診断サービス ご紹介資料 2024年3月版
キンドリル_ネットワーク自動化成熟度診断サービス ご紹介資料 2024年3月版キンドリル_ネットワーク自動化成熟度診断サービス ご紹介資料 2024年3月版
キンドリル_ネットワーク自動化成熟度診断サービス ご紹介資料 2024年3月版Takayuki Nakayama
 
キャラで動かすGPT ~GPTsでどんな感じに作っているとか考えていることとか~
キャラで動かすGPT ~GPTsでどんな感じに作っているとか考えていることとか~キャラで動かすGPT ~GPTsでどんな感じに作っているとか考えていることとか~
キャラで動かすGPT ~GPTsでどんな感じに作っているとか考えていることとか~honeshabri
 
これからはじめるAnsible - Ansible Night Tokyo 2024
これからはじめるAnsible - Ansible Night Tokyo 2024これからはじめるAnsible - Ansible Night Tokyo 2024
これからはじめるAnsible - Ansible Night Tokyo 2024Hideki Saito
 
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。iPride Co., Ltd.
 

Último (12)

The 86th National Convention of IPSJ (Student Encouragement Award))
The 86th National Convention of IPSJ (Student Encouragement Award))The 86th National Convention of IPSJ (Student Encouragement Award))
The 86th National Convention of IPSJ (Student Encouragement Award))
 
IGDA Japan SIG Audio #22 オンラインセミナー VRの知る.pdf
IGDA Japan SIG Audio #22 オンラインセミナー VRの知る.pdfIGDA Japan SIG Audio #22 オンラインセミナー VRの知る.pdf
IGDA Japan SIG Audio #22 オンラインセミナー VRの知る.pdf
 
00001_test_automation_portfolio_20240313
00001_test_automation_portfolio_2024031300001_test_automation_portfolio_20240313
00001_test_automation_portfolio_20240313
 
チームで開発するための環境を整える
チームで開発するための環境を整えるチームで開発するための環境を整える
チームで開発するための環境を整える
 
バイオリンの運弓動作計測による初心者と経験者の差異分析
バイオリンの運弓動作計測による初心者と経験者の差異分析バイオリンの運弓動作計測による初心者と経験者の差異分析
バイオリンの運弓動作計測による初心者と経験者の差異分析
 
JAWS DAYS 2024 E-3 ランチにまつわるちょっといい話 〜給食がない町の小中学生に温かい昼食を〜
JAWS DAYS 2024 E-3 ランチにまつわるちょっといい話 〜給食がない町の小中学生に温かい昼食を〜JAWS DAYS 2024 E-3 ランチにまつわるちょっといい話 〜給食がない町の小中学生に温かい昼食を〜
JAWS DAYS 2024 E-3 ランチにまつわるちょっといい話 〜給食がない町の小中学生に温かい昼食を〜
 
SIG-AUDIO 2024 Vol.02 オンラインセミナー 「必殺使音人(ひっさつしおとにん)カットシーンを成敗せよ」
SIG-AUDIO 2024 Vol.02 オンラインセミナー 「必殺使音人(ひっさつしおとにん)カットシーンを成敗せよ」SIG-AUDIO 2024 Vol.02 オンラインセミナー 「必殺使音人(ひっさつしおとにん)カットシーンを成敗せよ」
SIG-AUDIO 2024 Vol.02 オンラインセミナー 「必殺使音人(ひっさつしおとにん)カットシーンを成敗せよ」
 
AWS Lambdaと AWS API Gatewayを使ったREST API作り
AWS Lambdaと AWS API Gatewayを使ったREST API作りAWS Lambdaと AWS API Gatewayを使ったREST API作り
AWS Lambdaと AWS API Gatewayを使ったREST API作り
 
キンドリル_ネットワーク自動化成熟度診断サービス ご紹介資料 2024年3月版
キンドリル_ネットワーク自動化成熟度診断サービス ご紹介資料 2024年3月版キンドリル_ネットワーク自動化成熟度診断サービス ご紹介資料 2024年3月版
キンドリル_ネットワーク自動化成熟度診断サービス ご紹介資料 2024年3月版
 
キャラで動かすGPT ~GPTsでどんな感じに作っているとか考えていることとか~
キャラで動かすGPT ~GPTsでどんな感じに作っているとか考えていることとか~キャラで動かすGPT ~GPTsでどんな感じに作っているとか考えていることとか~
キャラで動かすGPT ~GPTsでどんな感じに作っているとか考えていることとか~
 
これからはじめるAnsible - Ansible Night Tokyo 2024
これからはじめるAnsible - Ansible Night Tokyo 2024これからはじめるAnsible - Ansible Night Tokyo 2024
これからはじめるAnsible - Ansible Night Tokyo 2024
 
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
 

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 テスト真っ最中、バグは多い。。
  • 34. Copyright © Piece of Cake, Inc. All Rights Reserved. What’s IE? 34 IEを斬る!!
  • 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
  • 44. Thank you for listening!
  • 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