Soumettre la recherche
Mettre en ligne
20140823 LL diver Angular.js で構築した note に関して
•
8 j'aime
•
3,618 vues
Shoei Takamaru
Suivre
20140823 LL diver angular.js で構築したnoteに関して/高丸 翔英 angular の魅力や苦労した点などを解説。
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 51
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
Spring Bootキャンプ @関ジャバ #kanjava_sbc
Spring Bootキャンプ @関ジャバ #kanjava_sbc
Toshiaki Maki
Grails 3.0先取り!? Spring Boot入門ハンズオン #jggug_boot
Grails 3.0先取り!? Spring Boot入門ハンズオン #jggug_boot
Toshiaki Maki
Spring4とSpring Bootで作る次世代Springアプリケーション #jjug #jsug
Spring4とSpring Bootで作る次世代Springアプリケーション #jjug #jsug
Toshiaki Maki
最近のSpringFramework2013 #jjug #jsug #SpringFramework
最近のSpringFramework2013 #jjug #jsug #SpringFramework
Toshiaki Maki
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Toshiaki Maki
Mojoliciousでつくる! Webアプリ入門
Mojoliciousでつくる! Webアプリ入門
Yusuke Wada
Webアプリのシナリオテスト自動化を運用に乗せるまでの10のステップ
Webアプリのシナリオテスト自動化を運用に乗せるまでの10のステップ
Naoki Iwami
【Camphor ×サイボウズ】selenium勉強会
【Camphor ×サイボウズ】selenium勉強会
Yuki Okada
Recommandé
Spring Bootキャンプ @関ジャバ #kanjava_sbc
Spring Bootキャンプ @関ジャバ #kanjava_sbc
Toshiaki Maki
Grails 3.0先取り!? Spring Boot入門ハンズオン #jggug_boot
Grails 3.0先取り!? Spring Boot入門ハンズオン #jggug_boot
Toshiaki Maki
Spring4とSpring Bootで作る次世代Springアプリケーション #jjug #jsug
Spring4とSpring Bootで作る次世代Springアプリケーション #jjug #jsug
Toshiaki Maki
最近のSpringFramework2013 #jjug #jsug #SpringFramework
最近のSpringFramework2013 #jjug #jsug #SpringFramework
Toshiaki Maki
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Toshiaki Maki
Mojoliciousでつくる! Webアプリ入門
Mojoliciousでつくる! Webアプリ入門
Yusuke Wada
Webアプリのシナリオテスト自動化を運用に乗せるまでの10のステップ
Webアプリのシナリオテスト自動化を運用に乗せるまでの10のステップ
Naoki Iwami
【Camphor ×サイボウズ】selenium勉強会
【Camphor ×サイボウズ】selenium勉強会
Yuki Okada
View customize pluginを使いこなす
View customize pluginを使いこなす
onozaty
ここが変わる!Unity 5のスマホ開発 ~アセットバンドル、ビルド、プラグイン~
ここが変わる!Unity 5のスマホ開発 ~アセットバンドル、ビルド、プラグイン~
MakotoItoh
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門
Shumpei Shiraishi
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
松田 千尋
Mojolicious+redisでチャットを作った
Mojolicious+redisでチャットを作った
Tetsuya Tatsumi
Angular2実践入門
Angular2実践入門
Shumpei Shiraishi
今流行りのウェブアプリ開発環境Yeoman
今流行りのウェブアプリ開発環境Yeoman
tomo_masakura
かわいい女の子になりたいんや! UE4の最新機能を使ってVTuberしてみた!
かわいい女の子になりたいんや! UE4の最新機能を使ってVTuberしてみた!
エピック・ゲームズ・ジャパン Epic Games Japan
Core Graphics on watchOS 2
Core Graphics on watchOS 2
Shuichi Tsutsumi
少人数開発でもクオリティを諦めない - エンジニア視点から見る少人数開発の極意 -
少人数開発でもクオリティを諦めない - エンジニア視点から見る少人数開発の極意 -
historia_Inc
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
yoshioka_cb
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
Yoshie Kaneno
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
エピック・ゲームズ・ジャパン Epic Games Japan
イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0
Okuno Kentaro
Java + React.jsでSever Side Rendering #reactjs_meetup
Java + React.jsでSever Side Rendering #reactjs_meetup
Toshiaki Maki
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェスト
Masahiko Asai
HTML5 開発環境の紹介
HTML5 開発環境の紹介
tomo_masakura
watchOS 2 新機能の細かい話
watchOS 2 新機能の細かい話
Shuichi Tsutsumi
UI/UX に影響の大きい watchOS 2 の新機能 3つ
UI/UX に影響の大きい watchOS 2 の新機能 3つ
Shuichi Tsutsumi
[予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦!
[予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦!
Jun-ichi Sakamoto
最近、リアルタイムWebが面白い
最近、リアルタイムWebが面白い
Narami Kiyokura
Contenu connexe
Tendances
View customize pluginを使いこなす
View customize pluginを使いこなす
onozaty
ここが変わる!Unity 5のスマホ開発 ~アセットバンドル、ビルド、プラグイン~
ここが変わる!Unity 5のスマホ開発 ~アセットバンドル、ビルド、プラグイン~
MakotoItoh
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門
Shumpei Shiraishi
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
松田 千尋
Mojolicious+redisでチャットを作った
Mojolicious+redisでチャットを作った
Tetsuya Tatsumi
Angular2実践入門
Angular2実践入門
Shumpei Shiraishi
今流行りのウェブアプリ開発環境Yeoman
今流行りのウェブアプリ開発環境Yeoman
tomo_masakura
かわいい女の子になりたいんや! UE4の最新機能を使ってVTuberしてみた!
かわいい女の子になりたいんや! UE4の最新機能を使ってVTuberしてみた!
エピック・ゲームズ・ジャパン Epic Games Japan
Core Graphics on watchOS 2
Core Graphics on watchOS 2
Shuichi Tsutsumi
少人数開発でもクオリティを諦めない - エンジニア視点から見る少人数開発の極意 -
少人数開発でもクオリティを諦めない - エンジニア視点から見る少人数開発の極意 -
historia_Inc
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
yoshioka_cb
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
Yoshie Kaneno
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
エピック・ゲームズ・ジャパン Epic Games Japan
イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0
Okuno Kentaro
Java + React.jsでSever Side Rendering #reactjs_meetup
Java + React.jsでSever Side Rendering #reactjs_meetup
Toshiaki Maki
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェスト
Masahiko Asai
HTML5 開発環境の紹介
HTML5 開発環境の紹介
tomo_masakura
watchOS 2 新機能の細かい話
watchOS 2 新機能の細かい話
Shuichi Tsutsumi
UI/UX に影響の大きい watchOS 2 の新機能 3つ
UI/UX に影響の大きい watchOS 2 の新機能 3つ
Shuichi Tsutsumi
Tendances
(20)
View customize pluginを使いこなす
View customize pluginを使いこなす
ここが変わる!Unity 5のスマホ開発 ~アセットバンドル、ビルド、プラグイン~
ここが変わる!Unity 5のスマホ開発 ~アセットバンドル、ビルド、プラグイン~
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
Mojolicious+redisでチャットを作った
Mojolicious+redisでチャットを作った
Angular2実践入門
Angular2実践入門
今流行りのウェブアプリ開発環境Yeoman
今流行りのウェブアプリ開発環境Yeoman
かわいい女の子になりたいんや! UE4の最新機能を使ってVTuberしてみた!
かわいい女の子になりたいんや! UE4の最新機能を使ってVTuberしてみた!
Core Graphics on watchOS 2
Core Graphics on watchOS 2
少人数開発でもクオリティを諦めない - エンジニア視点から見る少人数開発の極意 -
少人数開発でもクオリティを諦めない - エンジニア視点から見る少人数開発の極意 -
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
Megascansを使った効率化と楽しい絵作り ~Cutting-Edge Test Drive制作事例~
Megascansを使った効率化と楽しい絵作り ~Cutting-Edge Test Drive制作事例~
視聴者参加型のライブ動画を実現!GenvidをUE4に実装する方法 | UNREAL FEST EXTREME 2020 WINTER
視聴者参加型のライブ動画を実現!GenvidをUE4に実装する方法 | UNREAL FEST EXTREME 2020 WINTER
イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0
Java + React.jsでSever Side Rendering #reactjs_meetup
Java + React.jsでSever Side Rendering #reactjs_meetup
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェスト
HTML5 開発環境の紹介
HTML5 開発環境の紹介
watchOS 2 新機能の細かい話
watchOS 2 新機能の細かい話
UI/UX に影響の大きい watchOS 2 の新機能 3つ
UI/UX に影響の大きい watchOS 2 の新機能 3つ
En vedette
[予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦!
[予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦!
Jun-ichi Sakamoto
最近、リアルタイムWebが面白い
最近、リアルタイムWebが面白い
Narami Kiyokura
秒速一億円
秒速一億円
Shumpei Shiraishi
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
Shumpei Shiraishi
Introduction of "MarkdownPresenter"
Introduction of "MarkdownPresenter"
Jun-ichi Sakamoto
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
Shumpei Shiraishi
Reactive Programming
Reactive Programming
maruyama097
CLR/H#74 LT IT勉強会発表用イチオシツール
CLR/H#74 LT IT勉強会発表用イチオシツール
Jun-ichi Sakamoto
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
Shumpei Shiraishi
はじめにことばありき
はじめにことばありき
Shumpei Shiraishi
AngularJS 2.0 Jumpstart
AngularJS 2.0 Jumpstart
Filipe Falcão
20130921レジュメ2
20130921レジュメ2
Shumpei Shiraishi
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回勉強会ライトニングトーク
Jun-ichi Sakamoto
Gulp ことはじめ
Gulp ことはじめ
Kyohei Morimoto
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクト
Shumpei Shiraishi
TypeScript And ALM
TypeScript And ALM
Kazushi Kamegawa
Ohotech特盛#14 セッション4 予告編
Ohotech特盛#14 セッション4 予告編
Jun-ichi Sakamoto
Typescriptの中のこと(浅め)
Typescriptの中のこと(浅め)
Kazuhide Maruyama
変身×フランツ・カフカ
変身×フランツ・カフカ
Shumpei Shiraishi
En vedette
(20)
[予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦!
[予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦!
最近、リアルタイムWebが面白い
最近、リアルタイムWebが面白い
秒速一億円
秒速一億円
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
Introduction of "MarkdownPresenter"
Introduction of "MarkdownPresenter"
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
Reactive Programming
Reactive Programming
CLR/H#74 LT IT勉強会発表用イチオシツール
CLR/H#74 LT IT勉強会発表用イチオシツール
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
はじめにことばありき
はじめにことばありき
AngularJS 2.0 Jumpstart
AngularJS 2.0 Jumpstart
20130921レジュメ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...
More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトーク
More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトーク
Gulp ことはじめ
Gulp ことはじめ
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクト
TypeScript And ALM
TypeScript And ALM
Ohotech特盛#14 セッション4 予告編
Ohotech特盛#14 セッション4 予告編
Typescriptの中のこと(浅め)
Typescriptの中のこと(浅め)
変身×フランツ・カフカ
変身×フランツ・カフカ
Similaire à 20140823 LL diver Angular.js で構築した note に関して
20140529 JS Ojisan #2 LT あの「note」はAngular.js
20140529 JS Ojisan #2 LT あの「note」はAngular.js
Shoei Takamaru
20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru
20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru
Shoei Takamaru
Bitbucket pipelines を使ってみた話
Bitbucket pipelines を使ってみた話
makoto ikezoe
WebデザイナのためのjQuery入門。
WebデザイナのためのjQuery入門。
Yossy Taka
食べログのフロントエンドリプレース戦略
食べログのフロントエンドリプレース戦略
Tsuji Yuko
JobScheduler Code Reading
JobScheduler Code Reading
Shinobu Okano
PythonのGUI_2018 with NSEG
PythonのGUI_2018 with NSEG
Jun Okazaki
JavaScript Basic 02 jQuery
JavaScript Basic 02 jQuery
Yossy Taka
Js ojisan codereview-oppaijs
Js ojisan codereview-oppaijs
Kei Takahashi
Objective-Cプログラマのためのswift導入法
Objective-Cプログラマのためのswift導入法
Tomoki Hasegawa
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
Kentaro Matsumae
第3期キックオフ説明会+勉強会
第3期キックオフ説明会+勉強会
Shuhei Iitsuka
pairsでのAngularJS x TypeScript x e2e @めぐすた#1
pairsでのAngularJS x TypeScript x e2e @めぐすた#1
Takuma Morikawa
noteをAngularJSで構築した話
noteをAngularJSで構築した話
Kon Yuichi
システム開発を前進させるためのGradle導入法
システム開発を前進させるためのGradle導入法
Takuma Watabiki
Xcode で gulp を使うお話
Xcode で gulp を使うお話
Yoichiro Sakurai
Dockerで始める Java EE アプリケーション開発 for JJUG CCC 2017
Dockerで始める Java EE アプリケーション開発 for JJUG CCC 2017
Kohei Saito
a-blogcsm な寺子屋 2 in Okazaki
a-blogcsm な寺子屋 2 in Okazaki
Etsushi Ishii
ABC2012Spring 20120324
ABC2012Spring 20120324
Tak Inamori
oFの話題が殆ど出ない oF jp Summer Workout
oFの話題が殆ど出ない oF jp Summer Workout
Tsuubito Ishii
Similaire à 20140823 LL diver Angular.js で構築した note に関して
(20)
20140529 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 - スタートアップでこだわったこと - takamaru
Bitbucket pipelines を使ってみた話
Bitbucket pipelines を使ってみた話
WebデザイナのためのjQuery入門。
WebデザイナのためのjQuery入門。
食べログのフロントエンドリプレース戦略
食べログのフロントエンドリプレース戦略
JobScheduler Code Reading
JobScheduler Code Reading
PythonのGUI_2018 with NSEG
PythonのGUI_2018 with NSEG
JavaScript Basic 02 jQuery
JavaScript Basic 02 jQuery
Js ojisan codereview-oppaijs
Js ojisan codereview-oppaijs
Objective-Cプログラマのためのswift導入法
Objective-Cプログラマのためのswift導入法
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
第3期キックオフ説明会+勉強会
第3期キックオフ説明会+勉強会
pairsでのAngularJS x TypeScript x e2e @めぐすた#1
pairsでのAngularJS x TypeScript x e2e @めぐすた#1
noteをAngularJSで構築した話
noteをAngularJSで構築した話
システム開発を前進させるためのGradle導入法
システム開発を前進させるためのGradle導入法
Xcode で gulp を使うお話
Xcode で gulp を使うお話
Dockerで始める Java EE アプリケーション開発 for JJUG CCC 2017
Dockerで始める Java EE アプリケーション開発 for JJUG CCC 2017
a-blogcsm な寺子屋 2 in Okazaki
a-blogcsm な寺子屋 2 in Okazaki
ABC2012Spring 20120324
ABC2012Spring 20120324
oFの話題が殆ど出ない oF jp Summer Workout
oFの話題が殆ど出ない oF jp Summer Workout
20140823 LL diver Angular.js で構築した note に関して
1.
Angular.jsで構築した! noteに関して Shoei Takamaru (@takamario)
2.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Agenda • 自己紹介・サービス紹介 • Angular.jsの紹介 • Angular.jsを使って良かった点・苦労した点 • まとめ 2
3.
自己紹介
4.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Who are you? • 高丸 翔英 (たかまる しょうえい, @takamario)! • エンジニア (フロントエンド寄り?)! • 2014年1月 ピースオブケイク入社 4
5.
サービス紹介
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
14.
noteの開発体制と システム構成
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
16.
Angular.js
17.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Why Angular? • 使ってみたかったから!(70%) • SPAのUIに惹かれて (20%) • API層を結局作るので (10%) 17 最初の想い
18.
他にも フレームワークはある
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 は面倒
23.
そこで
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を付ける/移動する スピーディな開発
27.
でも
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 パフォーマンスが落ちてきている
39.
Angular まとめ
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
42.
最後に
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
Télécharger maintenant