Soumettre la recherche
Mettre en ligne
20140529 JS Ojisan #2 LT あの「note」はAngular.js
•
12 j'aime
•
2,398 vues
Shoei Takamaru
Suivre
20140529 JS Ojisan #2 LT あの「note」はAngular.js
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 32
Recommandé
かすたむ!
かすたむ!
鈴木 安美
JSと仲良くなるための心得
JSと仲良くなるための心得
鈴木 安美
JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2
JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2
pandeiro245
Java script関数コールの追跡
Java script関数コールの追跡
Keiichi Kobayashi
JSとKinectさん
JSとKinectさん
鈴木 安美
みんなが調べないJS調べてみた JSオジサン#2
みんなが調べないJS調べてみた JSオジサン#2
Kenichi Kanai
設計は相談だ
設計は相談だ
鈴木 安美
君よ知るや JScript.NET
君よ知るや JScript.NET
彰 村地
Recommandé
かすたむ!
かすたむ!
鈴木 安美
JSと仲良くなるための心得
JSと仲良くなるための心得
鈴木 安美
JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2
JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2
pandeiro245
Java script関数コールの追跡
Java script関数コールの追跡
Keiichi Kobayashi
JSとKinectさん
JSとKinectさん
鈴木 安美
みんなが調べないJS調べてみた JSオジサン#2
みんなが調べないJS調べてみた JSオジサン#2
Kenichi Kanai
設計は相談だ
設計は相談だ
鈴木 安美
君よ知るや JScript.NET
君よ知るや JScript.NET
彰 村地
テスト用ライブラリ power-assert
テスト用ライブラリ power-assert
Takuto Wada
JSオジサン openframeworks emscripten
JSオジサン openframeworks emscripten
minoru nakanou
Amigo De Verdad Gardfield
Amigo De Verdad Gardfield
huehue 1
economische en maatschappelijke relevantie van het intermediair
economische en maatschappelijke relevantie van het intermediair
Fred de Jong
Ragain Sess1 102209
Ragain Sess1 102209
SAME 2009 California Water Conference
Weight Loss - Golden Rules for nutrition
Weight Loss - Golden Rules for nutrition
Will Perry
Harger GECLB4/02C
Harger GECLB4/02C
savomir
A Warfor Your Soul Fellowship 091209
A Warfor Your Soul Fellowship 091209
Diane Mathis
Types of storage
Types of storage
Ryon Whyte
холодные звонки 2-3
холодные звонки 2-3
Евгений Божко
презентация электронного курса э.ф.
презентация электронного курса э.ф.
1084school
Framework for Online Learning
Framework for Online Learning
Atul Pant
China synthetic fiber mfg. industry profile cic282 sample pages
China synthetic fiber mfg. industry profile cic282 sample pages
Beijing Zeefer Consulting Ltd.
Compare Nation Food Prices
Compare Nation Food Prices
Shaikhani.
Sortida colliure estiu 2011
Sortida colliure estiu 2011
Natzaret
sintaxis de las funciones en excel 2013
sintaxis de las funciones en excel 2013
Diego bejarano
The Great Gospel of John, Book 12
The Great Gospel of John, Book 12
Simona P
Administracion de medicamentos
Administracion de medicamentos
angela martinez
20140823 LL diver Angular.js で構築した note に関して
20140823 LL diver Angular.js で構築した note に関して
Shoei Takamaru
20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru
20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru
Shoei Takamaru
noteをAngularJSで構築した話
noteをAngularJSで構築した話
Kon Yuichi
Bitbucket pipelines を使ってみた話
Bitbucket pipelines を使ってみた話
makoto ikezoe
Contenu connexe
En vedette
テスト用ライブラリ power-assert
テスト用ライブラリ power-assert
Takuto Wada
JSオジサン openframeworks emscripten
JSオジサン openframeworks emscripten
minoru nakanou
Amigo De Verdad Gardfield
Amigo De Verdad Gardfield
huehue 1
economische en maatschappelijke relevantie van het intermediair
economische en maatschappelijke relevantie van het intermediair
Fred de Jong
Ragain Sess1 102209
Ragain Sess1 102209
SAME 2009 California Water Conference
Weight Loss - Golden Rules for nutrition
Weight Loss - Golden Rules for nutrition
Will Perry
Harger GECLB4/02C
Harger GECLB4/02C
savomir
A Warfor Your Soul Fellowship 091209
A Warfor Your Soul Fellowship 091209
Diane Mathis
Types of storage
Types of storage
Ryon Whyte
холодные звонки 2-3
холодные звонки 2-3
Евгений Божко
презентация электронного курса э.ф.
презентация электронного курса э.ф.
1084school
Framework for Online Learning
Framework for Online Learning
Atul Pant
China synthetic fiber mfg. industry profile cic282 sample pages
China synthetic fiber mfg. industry profile cic282 sample pages
Beijing Zeefer Consulting Ltd.
Compare Nation Food Prices
Compare Nation Food Prices
Shaikhani.
Sortida colliure estiu 2011
Sortida colliure estiu 2011
Natzaret
sintaxis de las funciones en excel 2013
sintaxis de las funciones en excel 2013
Diego bejarano
The Great Gospel of John, Book 12
The Great Gospel of John, Book 12
Simona P
Administracion de medicamentos
Administracion de medicamentos
angela martinez
En vedette
(18)
テスト用ライブラリ power-assert
テスト用ライブラリ power-assert
JSオジサン openframeworks emscripten
JSオジサン openframeworks emscripten
Amigo De Verdad Gardfield
Amigo De Verdad Gardfield
economische en maatschappelijke relevantie van het intermediair
economische en maatschappelijke relevantie van het intermediair
Ragain Sess1 102209
Ragain Sess1 102209
Weight Loss - Golden Rules for nutrition
Weight Loss - Golden Rules for nutrition
Harger GECLB4/02C
Harger GECLB4/02C
A Warfor Your Soul Fellowship 091209
A Warfor Your Soul Fellowship 091209
Types of storage
Types of storage
холодные звонки 2-3
холодные звонки 2-3
презентация электронного курса э.ф.
презентация электронного курса э.ф.
Framework for Online Learning
Framework for Online Learning
China synthetic fiber mfg. industry profile cic282 sample pages
China synthetic fiber mfg. industry profile cic282 sample pages
Compare Nation Food Prices
Compare Nation Food Prices
Sortida colliure estiu 2011
Sortida colliure estiu 2011
sintaxis de las funciones en excel 2013
sintaxis de las funciones en excel 2013
The Great Gospel of John, Book 12
The Great Gospel of John, Book 12
Administracion de medicamentos
Administracion de medicamentos
Similaire à 20140529 JS Ojisan #2 LT あの「note」はAngular.js
20140823 LL diver Angular.js で構築した note に関して
20140823 LL diver Angular.js で構築した note に関して
Shoei Takamaru
20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru
20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru
Shoei Takamaru
noteをAngularJSで構築した話
noteをAngularJSで構築した話
Kon Yuichi
Bitbucket pipelines を使ってみた話
Bitbucket pipelines を使ってみた話
makoto ikezoe
食べログのフロントエンドリプレース戦略
食べログのフロントエンドリプレース戦略
Tsuji Yuko
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
Kentaro Matsumae
FutureSync 世界の開発者とコラボしよう
FutureSync 世界の開発者とコラボしよう
ichikaway
Dev opschef
Dev opschef
Yusuke Ando
SORACOM UGの運営メンバーになってみませんか?
SORACOM UGの運営メンバーになってみませんか?
Ken'ichirou Kimura
JobScheduler Code Reading
JobScheduler Code Reading
Shinobu Okano
人気番組との戦い! Javaシステムのパフォーマンスチューニング奮闘記
人気番組との戦い! Javaシステムのパフォーマンスチューニング奮闘記
心 谷本
Our Track to Modern Angular #2
Our Track to Modern Angular #2
Yuta Shimizu
さくらのひやおろし
さくらのひやおろし
法林浩之
EC-CUBEをEngineYardで動かそう!
EC-CUBEをEngineYardで動かそう!
Chihiro Adachi
Objective-Cプログラマのためのswift導入法
Objective-Cプログラマのためのswift導入法
Tomoki Hasegawa
Kinect kihonnoki
Kinect kihonnoki
Kaoru NAKAMURA
第3期キックオフ説明会+勉強会
第3期キックオフ説明会+勉強会
Shuhei Iitsuka
おすすめインフラ! for スタートアップ
おすすめインフラ! for スタートアップ
Koichiro Sumi
バイキング流UE4活用術 ~BPとお別れするまでの18ヶ月~
バイキング流UE4活用術 ~BPとお別れするまでの18ヶ月~
エピック・ゲームズ・ジャパン Epic Games Japan
UE4におけるエフェクトの為のエンジン改造事例
UE4におけるエフェクトの為のエンジン改造事例
エピック・ゲームズ・ジャパン Epic Games Japan
Similaire à 20140529 JS Ojisan #2 LT あの「note」はAngular.js
(20)
20140823 LL diver Angular.js で構築した note に関して
20140823 LL diver Angular.js で構築した note に関して
20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru
20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru
noteをAngularJSで構築した話
noteをAngularJSで構築した話
Bitbucket pipelines を使ってみた話
Bitbucket pipelines を使ってみた話
食べログのフロントエンドリプレース戦略
食べログのフロントエンドリプレース戦略
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
FutureSync 世界の開発者とコラボしよう
FutureSync 世界の開発者とコラボしよう
Dev opschef
Dev opschef
SORACOM UGの運営メンバーになってみませんか?
SORACOM UGの運営メンバーになってみませんか?
JobScheduler Code Reading
JobScheduler Code Reading
人気番組との戦い! Javaシステムのパフォーマンスチューニング奮闘記
人気番組との戦い! Javaシステムのパフォーマンスチューニング奮闘記
Our Track to Modern Angular #2
Our Track to Modern Angular #2
さくらのひやおろし
さくらのひやおろし
EC-CUBEをEngineYardで動かそう!
EC-CUBEをEngineYardで動かそう!
Objective-Cプログラマのためのswift導入法
Objective-Cプログラマのためのswift導入法
Kinect kihonnoki
Kinect kihonnoki
第3期キックオフ説明会+勉強会
第3期キックオフ説明会+勉強会
おすすめインフラ! for スタートアップ
おすすめインフラ! for スタートアップ
バイキング流UE4活用術 ~BPとお別れするまでの18ヶ月~
バイキング流UE4活用術 ~BPとお別れするまでの18ヶ月~
UE4におけるエフェクトの為のエンジン改造事例
UE4におけるエフェクトの為のエンジン改造事例
Dernier
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Hiroshi Tomioka
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
Dernier
(12)
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
20140529 JS Ojisan #2 LT あの「note」はAngular.js
1.
JSオジサン #2 LT! あの「note」はAngular.js Shoei
Takamaru (@takamario)
2.
自己紹介
3.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Who are you? • 高丸 翔英 (たかまる しょうえい, @takamario)! • エンジニア (フロントエンドサイド寄り?)! • 2014年1月 ピースオブケイク入社 3
4.
サービス紹介
5.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Our Services • デジタルコンテンツ配信プラットフォーム Cakes (ケイクス) 2012年9月リリース https://cakes.mu/! ! • クリエイターと読者をつなげるサイト! ! • 週額150円 / 月額500円で全記事読み放題 5
6.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Our Services • note (ノート) 2014年4月リリース https://note.mu/! • 個人でコンテンツが販売可能に 6
7.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Got a lot of feedback • いろいろなメディアで取り上げていただきました • 1ヶ月で2,000万PV、100万UU 達成 • 売れる人の中には、月10万円ほど稼いでいる人も 7
8.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Got a lot of feedback • リリース時に発生していたXSSが twitterで話題に (即日対応) • DM等で、ご連絡いただいた方、体 を張って試していただいた方、あり がとうございました • 「Angular 適切に使ってXSS発生す るの?」 → しません、僕が適切に使ってま せんでした。。 8
9.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Got a lot of feedback • 芸能人アカウントも続々 9 伊集院光さん ロンブー田村淳さんくるりさん GLAY HISASHIさん
10.
noteの開発体制と システム構成
11.
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 • AWS (Staging環境では Heroku も) • Github + HipChat + Jenkins 11
12.
noteが起こした 革新的アクション
13.
その1
14.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Used Angular.js Lavishly! • Rails (API) + Angular.js! • まずは、ソース開いてみてください (笑) • Batarang でデバッグ可能です https://chrome.google.com/webstore/detail/angularjs- batarang/ighdmehidhipcmcojjgiloacoafjmpfk 14 Angular.jsをふんだんに使った!
15.
その2
16.
Copyright © Piece
of Cake, Inc. All Rights Reserved. IPv6 Only! (Mis-configuration…) • リリース後、会員登録 確認メールが届かない 事象が発生 • SPF レコードの設定が 間違ってました。。 • IPv6 だけで送ろうとし てました。。 16
17.
その3
18.
Copyright © Piece
of Cake, Inc. All Rights Reserved. (3) Abandon IE! • だって、IEって危険ですもんね。 18 • もちろん、今後は対応予定です IEを斬った!
19.
Angular Tips
20.
Copyright © Piece
of Cake, Inc. All Rights Reserved. OGP • Phantom JS で Angular を レンダリングする荒技 • が、OGP bot ごとに対応が必要 • 2段階で来るbotも。。 • サーバサイドで返すように修正 しました 20 Phantom JS (w/ cache)
21.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Angular Tips - Scope • Scope を制するものは、Angular を制す (と思ってる) • qiita: Angular JS で複数のコントローラ間でモデル(状 態や値)を共有する方法 3 種類 http://qiita.com/sunny4381/items/aeae1e154346b5cf6009 21 Scope
22.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Share data between the scopes 22 Upper Controller Lower Controller Main Controller Event 遠く離れたスコープでも共有 可能、上書きの危険性もない ! JSっぽい ! 双方向のコードを書く必要が あるので、Angular ではあま り使わない方が良い http://plnkr.co/edit/ 7sD1JvA6TtKbkDBlZWLq?p=preview
23.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Share data between the scopes 23 Upper Controller Lower Controller Main Controller Service 部品と部品をつなぐ ! DI するだけで使用可能 ! 結局グローバル変数と 変わらない (上書き注意) http://plnkr.co/edit/ ajKnEz3jfMtpEG7aZ5kO?p=preview Service
24.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Share data between the scopes 24 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
25.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Angular Tips - Reusability • いかに、再利用性を高めるか Controller だけだとつらい • コメント、Like、フォロー等々、いつどこに置くかもし れないものは Directive に • ただ、基本的な設計は、function の設計と変わらない (インターフェースが汎用的かどうか) 25 Directive / Service
26.
Copyright © Piece
of Cake, Inc. All Rights Reserved. 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-file-upload https://github.com/danialfarid/angular-file-upload 26
27.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Angular Tips - Books • ng-book https://www.ng-book.com/ ! • AngularJSアプリケーション開発ガイド http://www.amazon.co.jp/dp/4873116678 27
28.
Angular.jsを使って! 良かったこと/悪かったこと! まとめ
29.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Pros/Cons of Angular.js • HTMLに命令を記載するので、デザイン変更があっても すぐに対応可能、デザイナーもHTMLの属性を移すだけ • Directive を使いこなせるようになれば、 再利用性がよくなって、無敵、感動 • 学習コストはかなり高い、まだしっくりこない感じ • あんまり動作軽くない (特にスマホで見る場合は顕著) • 今後は、Web Components の時代なので、 その前に一度 Angular.js をお試ししておくと良さそう 29
30.
最後に
31.
Copyright © Piece
of Cake, Inc. All Rights Reserved. In closing • ピースオブケイクではエンジニアを募集しています! • cakesとnoteを開発したいJavaScriptエンジニアさん大 募集! https://www.wantedly.com/projects/7198 • noteのiOS/Androidアプリをつくりたいエンジニアさん 大募集! https://www.wantedly.com/projects/7199 31
32.
Thank you for
listening!