際際滷

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/!
!
? クリエイタ�`と�i宀をつなげるサイト!
!
? �L�~150�� / 埖�~500�劼波��並�iみ慧�}
5

Our Services
? note (ノ�`ト)?2014定4埖リリ�`ス?
https://note.mu/!
? ��繁でコンテンツが��喊苗椶�
6

Got a lot of feedback
? いろいろなメディアで函り貧げていただきました
? 1ヶ埖で2,000嵐PV、100嵐UU �_撹
? �咾譴詒砲琳个砲蓮��10嵐�劼曚票擇い任い詒砲�
7

? リリ�`ス�rに�k伏していたXSSが?
twitterで��}に (軸晩��)
? DM吉で、ご�B�jいただいた圭、悶
を�って�していただいた圭、あり
がとうございました
? 仝Angular �m俳に聞ってXSS�k伏す
るの�々?
★ しません、�Wが�m俳に聞ってま
せんでした。。
8

? 椰嬬繁アカウントも�A？
9
卅鹿垪高さん
ロンブ�`弥翫款さんくるりさん
GLAY HISASHIさん

noteの�_�k悶崙と
システム��撹

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�h廠では 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´)
? リリ�`ス瘁、氏�T鞠�h
�_�Jメ�`ルが曙かない
並�が�k伏
? SPF レコ�`ドの�O協が
�g�`ってました。。
? IPv6 だけで僕ろうとし
てました。。
16

(3) Abandon IE!
? だって、IEって裡�ですもんね。
18
? もちろん、書瘁は��鮄莇┐任�
IEを�悗辰殖�

OGP
? Phantom JS で Angular を?
レンダリングする残室
? が、OGP bot ごとに��鬉�慴�
? 2粁�Aで栖るbotも。。
? サ�`バサイドで卦すように俐屎
しました
20
Phantom JS
(w/ cache)

Angular Tips - Scope
? Scope を崙するものは、Angular を崙す (と房ってる)
? qiita: Angular JS で�}方のコントロ�`ラ�gでモデル�彜
�Bや�｣�鮃禾个垢觀酬� 3 �N�?
http://qiita.com/sunny4381/items/aeae1e154346b5cf6009
21
Scope

Share data between the scopes
22
Upper Controller
Lower Controller
Main Controller Event
�hく�xれたスコ�`プでも慌嗤
辛嬬、貧��④領ｊ�來もない
!
JSっぽい
!
褒圭�のコ�`ドを��慴��
あるので、Angular ではあま
り聞わない圭が措い
http://plnkr.co/edit/
7sD1JvA6TtKbkDBlZWLq?p=preview

23
Upper Controller
Lower Controller
Main Controller
Service
何瞳と何瞳をつなぐ
!
DI するだけで聞喘辛嬬
!
�Y蕉グロ�`バル�篳��?
�笋錣蕕覆�
(貧��)
ajKnEz3jfMtpEG7aZ5kO?p=preview
Service

24
Upper Controller
Lower Controller
Main Controller
Angular の�C��を
そのまま旋喘
!
Angular 容�X
!
徨は、�Hのスコ�`プが�える
!
znYpEq4ibzUFIBSOwK2Y?p=preview
!
AxCPK6YrmTKsjhQtT8f1?p=preview
Parent / Child Scope

Angular Tips - Reusability
? いかに、壅旋喘來を互めるか?
Controller だけだとつらい
? コメント、Like、フォロ�`吉？、いつどこに崔くかもし
れないものは Directive に
? ただ、児云議な�O�は、function の�O�と�笋錣蕕覆�?
(インタ�`フェ�`スが��探弔�匹Δ�)
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アプリケ�`ション�_�kガイド?
http://www.amazon.co.jp/dp/4873116678
27

Angular.jsを聞って!
措かったこと/��かったこと!
まとめ

Pros/Cons of Angular.js
? HTMLに凋綜を��dするので、デザイン�筝釮�△辰討�?
すぐに��魗苗棔▲妊競ぅ仏`もHTMLの奉來を卞すだけ
? Directive を聞いこなせるようになれば、?
壅旋喘來がよくなって、�o�魁��
? 僥�コストはかなり互い、まだしっくりこない湖じ
? あんまり�嘛�Xくない (蒙にスマホで�る��呂��广)
? 書瘁は、Web Components の�r旗なので、?
その念に匯業 Angular.js をお�ししておくと措さそう
29

In closing
? ピ�`スオブケイクではエンジニアを勅鹿しています�
? cakesとnoteを�_�kしたい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

More Related Content

Viewers also liked (17)

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

20140529 JS Ojisan #2 LT あの仝note々はAngular.js