SlideShare a Scribd company logo
1 of 18
Download to read offline
AngularJS とモバイル
ng-mtg#3 AngularJS 勉強会
1周年記念!
about me
金井 健一
フリーランス(フロントエンド時々その他)
AngularJS Japan User Group 管理人
Web先端技術味見部 副部長
can_i_do_web
Kenichi Kanai
まず聞いてみる
● AngularJS 触ったことがある
● AngularJS を業務で使っている
● AngularJS をモバイルで使っている
● 使ってみたいけど、モバイルが…
アジェンダ
● AngularJS はモバイルに向いてない!?
● AngularJS をモバイルで使うには?
● デモなど
AngularJS はモバイルに向いてない!?
向いてないという街の声
・ファイルサイズが大きい
・双方向バインディングとか処理重い
・Angularってモバイル向いてないんでしょ?(風評
被害)
ファイルサイズが大きい
実際はこんな感じ
● uncompressed 493KB
● minified 81KB
● minified + gzip 30.6KB
他のMVCフレームワークと比べる
uncompressed minified minified + gzip
spine 31 4.1 2.4
backbone 58 19 7.4
knockout 174 40 14
AngularJS 493 81 30.6
ember 842 204 56
[ 単位 = KB ]
かない調べ
双方向バインディングって処理重い?
モデル100個とか定義しなければ大丈夫!
AngularJS をモバイルで使うには?
AngularJS をモバイルで使うには?
● WEBアプリ
→ minified + gzip ( CDN も考慮 )
● モバイル向けアプリ
→ インストール型アプリに同梱
→もちろんWEBアプリと同等の対応で問題 な
ければOK
ちょっと試してみた
試してみた
簡単なフォームのデモをモバイルでも見れるように
してみた
● いたって普通の入力フォーム
● 50個入力があるフォーム
● 50個入力があるフォーム + $watch
   あれ?全然平気なんだけど・・・
(負荷足りてない?やり方微妙?)
まとめ
まとめ
● ファイルサイズについては気にしすぎかも・・・
(ブラウザキャッシュされたら他のフレームワー
クより強力)
● インストール型のアプリなら全然問題なし
● モバイル向けのAPIはもう少しあるといいのかも
しれない
結論
 使いたかったら使っちゃおう!!
ご清聴ありがとうございました。

More Related Content

What's hot

エンジニアじゃなくてもAngularJS×milkcocoaでチャットアプリが1時間!? 非エンジニアから見たAngularJSの感動するポイント3つ
エンジニアじゃなくてもAngularJS×milkcocoaでチャットアプリが1時間!? 非エンジニアから見たAngularJSの感動するポイント3つエンジニアじゃなくてもAngularJS×milkcocoaでチャットアプリが1時間!? 非エンジニアから見たAngularJSの感動するポイント3つ
エンジニアじゃなくてもAngularJS×milkcocoaでチャットアプリが1時間!? 非エンジニアから見たAngularJSの感動するポイント3つ
Yusaku Kinoshita
 
日曜プログラマーとigoogle先生
日曜プログラマーとigoogle先生日曜プログラマーとigoogle先生
日曜プログラマーとigoogle先生
Yuusuke Takeuchi
 

What's hot (20)

STORES.jp x AngularJS
STORES.jp x AngularJSSTORES.jp x AngularJS
STORES.jp x AngularJS
 
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
 
イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0
 
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
普段Reactを触ってる僕が Angularを触ってみた感想を共有する普段Reactを触ってる僕が Angularを触ってみた感想を共有する
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
 
非エンジニアが MENstackでWebアプリをつくった話 #nodejs
非エンジニアが MENstackでWebアプリをつくった話 #nodejs非エンジニアが MENstackでWebアプリをつくった話 #nodejs
非エンジニアが MENstackでWebアプリをつくった話 #nodejs
 
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
 
【eLV勉強会】AngularJSでのモバイルフロントエンド開発
【eLV勉強会】AngularJSでのモバイルフロントエンド開発【eLV勉強会】AngularJSでのモバイルフロントエンド開発
【eLV勉強会】AngularJSでのモバイルフロントエンド開発
 
今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました
 
CSS Living StyleGuide
CSS Living StyleGuideCSS Living StyleGuide
CSS Living StyleGuide
 
Angularおじさんの1年
Angularおじさんの1年Angularおじさんの1年
Angularおじさんの1年
 
エンジニアじゃなくてもAngularJS×milkcocoaでチャットアプリが1時間!? 非エンジニアから見たAngularJSの感動するポイント3つ
エンジニアじゃなくてもAngularJS×milkcocoaでチャットアプリが1時間!? 非エンジニアから見たAngularJSの感動するポイント3つエンジニアじゃなくてもAngularJS×milkcocoaでチャットアプリが1時間!? 非エンジニアから見たAngularJSの感動するポイント3つ
エンジニアじゃなくてもAngularJS×milkcocoaでチャットアプリが1時間!? 非エンジニアから見たAngularJSの感動するポイント3つ
 
日曜プログラマーとigoogle先生
日曜プログラマーとigoogle先生日曜プログラマーとigoogle先生
日曜プログラマーとigoogle先生
 
Front-end package managers
Front-end package managersFront-end package managers
Front-end package managers
 
Angular2
Angular2Angular2
Angular2
 
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
 
STORES.jpのそだてかた
STORES.jpのそだてかたSTORES.jpのそだてかた
STORES.jpのそだてかた
 
Riot.jsと仲良くなるための僕的tips
Riot.jsと仲良くなるための僕的tipsRiot.jsと仲良くなるための僕的tips
Riot.jsと仲良くなるための僕的tips
 
angular1脳で見るangular2
angular1脳で見るangular2angular1脳で見るangular2
angular1脳で見るangular2
 
One-time Binding & $digest
One-time Binding & $digestOne-time Binding & $digest
One-time Binding & $digest
 
いい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみたいい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみた
 

Viewers also liked

บุคคลสำคัญของบางกอก
บุคคลสำคัญของบางกอกบุคคลสำคัญของบางกอก
บุคคลสำคัญของบางกอก
nearary
 
TRiO SSS Enrollment Orientation
TRiO SSS Enrollment Orientation TRiO SSS Enrollment Orientation
TRiO SSS Enrollment Orientation
fmorado
 
บุคคลสำคัญของบางกอก
บุคคลสำคัญของบางกอกบุคคลสำคัญของบางกอก
บุคคลสำคัญของบางกอก
nearary
 
Parent Curriculum Coffee August 2012
Parent Curriculum Coffee August 2012Parent Curriculum Coffee August 2012
Parent Curriculum Coffee August 2012
aprilrism1
 
друге життя
друге життядруге життя
друге життя
Andrey Hrutba
 
Dec. 2012 newsletter final
Dec. 2012 newsletter finalDec. 2012 newsletter final
Dec. 2012 newsletter final
aprilrism1
 

Viewers also liked (19)

Bergwald 12-11-2013
Bergwald 12-11-2013Bergwald 12-11-2013
Bergwald 12-11-2013
 
Nov 2102 newsletter final
Nov 2102 newsletter finalNov 2102 newsletter final
Nov 2102 newsletter final
 
Grade 4 September 2012 newsletter
Grade 4 September 2012 newsletterGrade 4 September 2012 newsletter
Grade 4 September 2012 newsletter
 
Resume
ResumeResume
Resume
 
บุคคลสำคัญของบางกอก
บุคคลสำคัญของบางกอกบุคคลสำคัญของบางกอก
บุคคลสำคัญของบางกอก
 
Druge_jittya
Druge_jittyaDruge_jittya
Druge_jittya
 
риб бизнес лекция укр
риб бизнес лекция укрриб бизнес лекция укр
риб бизнес лекция укр
 
Animated1
Animated1Animated1
Animated1
 
TRiO SSS Enrollment Orientation
TRiO SSS Enrollment Orientation TRiO SSS Enrollment Orientation
TRiO SSS Enrollment Orientation
 
We nemen je mee
We nemen je meeWe nemen je mee
We nemen je mee
 
บุคคลสำคัญของบางกอก
บุคคลสำคัญของบางกอกบุคคลสำคัญของบางกอก
บุคคลสำคัญของบางกอก
 
Parent Curriculum Coffee August 2012
Parent Curriculum Coffee August 2012Parent Curriculum Coffee August 2012
Parent Curriculum Coffee August 2012
 
друге життя
друге життядруге життя
друге життя
 
วิธีการสอนตามระเบียบขั้นตอนทางวิทยาศาสตร์
วิธีการสอนตามระเบียบขั้นตอนทางวิทยาศาสตร์วิธีการสอนตามระเบียบขั้นตอนทางวิทยาศาสตร์
วิธีการสอนตามระเบียบขั้นตอนทางวิทยาศาสตร์
 
味見部紹介 LT
味見部紹介 LT味見部紹介 LT
味見部紹介 LT
 
HTML5とか勉強会#48 ionic
HTML5とか勉強会#48 ionicHTML5とか勉強会#48 ionic
HTML5とか勉強会#48 ionic
 
初学者向けセミナー資料
初学者向けセミナー資料初学者向けセミナー資料
初学者向けセミナー資料
 
SEDENO, M.DHERIBERTO. VISITS SOUTH AMERICA, Part 1
SEDENO, M.DHERIBERTO. VISITS SOUTH AMERICA, Part 1SEDENO, M.DHERIBERTO. VISITS SOUTH AMERICA, Part 1
SEDENO, M.DHERIBERTO. VISITS SOUTH AMERICA, Part 1
 
Dec. 2012 newsletter final
Dec. 2012 newsletter finalDec. 2012 newsletter final
Dec. 2012 newsletter final
 

Similar to Ng mtg#3

Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~
Atsushi Harada
 
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Takuya Ueda
 

Similar to Ng mtg#3 (20)

Angular#Kanazawa
Angular#KanazawaAngular#Kanazawa
Angular#Kanazawa
 
20161125 米田 angular_jsを触ってみた
20161125 米田 angular_jsを触ってみた20161125 米田 angular_jsを触ってみた
20161125 米田 angular_jsを触ってみた
 
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
 
LIGでのDocker活用
LIGでのDocker活用LIGでのDocker活用
LIGでのDocker活用
 
AngularJS 概説
AngularJS 概説AngularJS 概説
AngularJS 概説
 
AngularJSについて
AngularJSについてAngularJSについて
AngularJSについて
 
Enterprise x AngularJS
Enterprise x AngularJSEnterprise x AngularJS
Enterprise x AngularJS
 
AngularJSでwebアプリを作ってみた!(2014/6/8 GDGKobe)
AngularJSでwebアプリを作ってみた!(2014/6/8 GDGKobe)AngularJSでwebアプリを作ってみた!(2014/6/8 GDGKobe)
AngularJSでwebアプリを作ってみた!(2014/6/8 GDGKobe)
 
Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~
 
Nodeにしましょう
NodeにしましょうNodeにしましょう
Nodeにしましょう
 
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリAngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
 
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェストAngular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェスト
 
我が家のフロントエンド開発事情
我が家のフロントエンド開発事情我が家のフロントエンド開発事情
我が家のフロントエンド開発事情
 
今からでも遅くない! 2から始めるangular js
今からでも遅くない! 2から始めるangular js今からでも遅くない! 2から始めるangular js
今からでも遅くない! 2から始めるangular js
 
MLCT#12 使われる機能目指して 測ったり試したり
MLCT#12 使われる機能目指して 測ったり試したりMLCT#12 使われる機能目指して 測ったり試したり
MLCT#12 使われる機能目指して 測ったり試したり
 
ネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConViewネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConView
 
「Camelog」Android開発秘話
「Camelog」Android開発秘話「Camelog」Android開発秘話
「Camelog」Android開発秘話
 
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
 
Isomorphic Architecture & Interface
Isomorphic Architecture & InterfaceIsomorphic Architecture & Interface
Isomorphic Architecture & Interface
 
ngJapan報告会
ngJapan報告会ngJapan報告会
ngJapan報告会
 

More from Kenichi Kanai

More from Kenichi Kanai (16)

techfeed_ng-japan2019
techfeed_ng-japan2019techfeed_ng-japan2019
techfeed_ng-japan2019
 
ng-japan2019_techfeed_LT
ng-japan2019_techfeed_LTng-japan2019_techfeed_LT
ng-japan2019_techfeed_LT
 
Angular CLI
Angular CLIAngular CLI
Angular CLI
 
はじめてのAngular2
はじめてのAngular2はじめてのAngular2
はじめてのAngular2
 
pick up ng-conf
pick up ng-confpick up ng-conf
pick up ng-conf
 
Angular1.5.5
Angular1.5.5Angular1.5.5
Angular1.5.5
 
New Features in Angular 1.5
New Features in Angular 1.5New Features in Angular 1.5
New Features in Angular 1.5
 
ngTeratail
ngTeratailngTeratail
ngTeratail
 
はじめてのAngular2
はじめてのAngular2はじめてのAngular2
はじめてのAngular2
 
Web先端技術味見部
Web先端技術味見部Web先端技術味見部
Web先端技術味見部
 
Angular1&2
Angular1&2Angular1&2
Angular1&2
 
angularJS in 10ish minutes
angularJS in 10ish minutesangularJS in 10ish minutes
angularJS in 10ish minutes
 
HTML5 ビギナーのための AngularJS
HTML5 ビギナーのための AngularJSHTML5 ビギナーのための AngularJS
HTML5 ビギナーのための AngularJS
 
HTML5入門 for 頭がヤバい人向け
HTML5入門 for 頭がヤバい人向けHTML5入門 for 頭がヤバい人向け
HTML5入門 for 頭がヤバい人向け
 
みんなが調べないJS調べてみた JSオジサン#2
みんなが調べないJS調べてみた JSオジサン#2みんなが調べないJS調べてみた JSオジサン#2
みんなが調べないJS調べてみた JSオジサン#2
 
AngularJS 入門
AngularJS 入門AngularJS 入門
AngularJS 入門
 

Ng mtg#3