Submit Search
Upload
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
•
202 likes
•
50,245 views
アシアル株式会社
Follow
ng-japan(http://ngjapan.org)での発表資料です。
Read less
Read more
Software
Report
Share
Report
Share
1 of 90
Download now
Download to read offline
Recommended
Onsen UIが目指すもの
Onsen UIが目指すもの
アシアル株式会社
【eLV勉強会】AngularJSでのモバイルフロントエンド開発
【eLV勉強会】AngularJSでのモバイルフロントエンド開発
Hiroyuki Kusu
Angular jsの継続的なバージョンアップ
Angular jsの継続的なバージョンアップ
Kazuyoshi Tsuchiya
Ionicでハイブリッドアプリ入門①
Ionicでハイブリッドアプリ入門①
Tomokatsu Iguchi
noteをAngularJSで構築した話
noteをAngularJSで構築した話
Kon Yuichi
最新UIフレームワーク Onsen UI2でカッコイイWordPress連携アプリを作る方法
最新UIフレームワーク Onsen UI2でカッコイイWordPress連携アプリを作る方法
アシアル株式会社
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Shin Ogata
Onsen UI 2.0とUIライブラリの未来
Onsen UI 2.0とUIライブラリの未来
アシアル株式会社
Recommended
Onsen UIが目指すもの
Onsen UIが目指すもの
アシアル株式会社
【eLV勉強会】AngularJSでのモバイルフロントエンド開発
【eLV勉強会】AngularJSでのモバイルフロントエンド開発
Hiroyuki Kusu
Angular jsの継続的なバージョンアップ
Angular jsの継続的なバージョンアップ
Kazuyoshi Tsuchiya
Ionicでハイブリッドアプリ入門①
Ionicでハイブリッドアプリ入門①
Tomokatsu Iguchi
noteをAngularJSで構築した話
noteをAngularJSで構築した話
Kon Yuichi
最新UIフレームワーク Onsen UI2でカッコイイWordPress連携アプリを作る方法
最新UIフレームワーク Onsen UI2でカッコイイWordPress連携アプリを作る方法
アシアル株式会社
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Shin Ogata
Onsen UI 2.0とUIライブラリの未来
Onsen UI 2.0とUIライブラリの未来
アシアル株式会社
スキスキIonic
スキスキIonic
Kon Yuichi
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
Shumpei Shiraishi
Web標準技術でiOS、Android両対応アプリを開発
Web標準技術でiOS、Android両対応アプリを開発
アシアル株式会社
Monaca+Onsen UIで作るアプリ事始め
Monaca+Onsen UIで作るアプリ事始め
Kenichi Inoue
【ABC2014Spring LT】AngularJSでWEBアプリ開発
【ABC2014Spring LT】AngularJSでWEBアプリ開発
Hiroyuki Kusu
今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました
Mitsuru Ogawa
Angular2
Angular2
Kenichi Kanai
ネイティブとHTML5を スマートに連携させる設計と 実装のノウハウについて
ネイティブとHTML5を スマートに連携させる設計と 実装のノウハウについて
Kazuaki Hidaka
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化
Toshio Ehara
Directiveで実現できたこと
Directiveで実現できたこと
Kon Yuichi
Html5/JSモバイルアプリ最前線
Html5/JSモバイルアプリ最前線
アシアル株式会社
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
Mitsuru Ogawa
AngularJS入門の巻
AngularJS入門の巻
Toshio Ehara
Angular js開発事例
Angular js開発事例
Shun Takeyama
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
Mizuho Sakamaki
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェスト
Masahiko Asai
Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅
Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅
アシアル株式会社
WEBがネイティブに勝つために - kaumoCTOMeetup(いっちマン)
WEBがネイティブに勝つために - kaumoCTOMeetup(いっちマン)
icchiman
イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0
Okuno Kentaro
smartFXにおけるApache Cordovaの活用について
smartFXにおけるApache Cordovaの活用について
剛志 森田
ng-japan 2015 TypeScript+AngularJS 1.3
ng-japan 2015 TypeScript+AngularJS 1.3
Masahiro Wakame
フロントエンドのツール Yeoman を勘違いしていた
フロントエンドのツール Yeoman を勘違いしていた
girigiribauer
More Related Content
What's hot
スキスキIonic
スキスキIonic
Kon Yuichi
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
Shumpei Shiraishi
Web標準技術でiOS、Android両対応アプリを開発
Web標準技術でiOS、Android両対応アプリを開発
アシアル株式会社
Monaca+Onsen UIで作るアプリ事始め
Monaca+Onsen UIで作るアプリ事始め
Kenichi Inoue
【ABC2014Spring LT】AngularJSでWEBアプリ開発
【ABC2014Spring LT】AngularJSでWEBアプリ開発
Hiroyuki Kusu
今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました
Mitsuru Ogawa
Angular2
Angular2
Kenichi Kanai
ネイティブとHTML5を スマートに連携させる設計と 実装のノウハウについて
ネイティブとHTML5を スマートに連携させる設計と 実装のノウハウについて
Kazuaki Hidaka
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化
Toshio Ehara
Directiveで実現できたこと
Directiveで実現できたこと
Kon Yuichi
Html5/JSモバイルアプリ最前線
Html5/JSモバイルアプリ最前線
アシアル株式会社
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
Mitsuru Ogawa
AngularJS入門の巻
AngularJS入門の巻
Toshio Ehara
Angular js開発事例
Angular js開発事例
Shun Takeyama
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
Mizuho Sakamaki
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェスト
Masahiko Asai
Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅
Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅
アシアル株式会社
WEBがネイティブに勝つために - kaumoCTOMeetup(いっちマン)
WEBがネイティブに勝つために - kaumoCTOMeetup(いっちマン)
icchiman
イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0
Okuno Kentaro
smartFXにおけるApache Cordovaの活用について
smartFXにおけるApache Cordovaの活用について
剛志 森田
What's hot
(20)
スキスキIonic
スキスキIonic
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
Web標準技術でiOS、Android両対応アプリを開発
Web標準技術でiOS、Android両対応アプリを開発
Monaca+Onsen UIで作るアプリ事始め
Monaca+Onsen UIで作るアプリ事始め
【ABC2014Spring LT】AngularJSでWEBアプリ開発
【ABC2014Spring LT】AngularJSでWEBアプリ開発
今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました
Angular2
Angular2
ネイティブとHTML5を スマートに連携させる設計と 実装のノウハウについて
ネイティブとHTML5を スマートに連携させる設計と 実装のノウハウについて
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化
Directiveで実現できたこと
Directiveで実現できたこと
Html5/JSモバイルアプリ最前線
Html5/JSモバイルアプリ最前線
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
AngularJS入門の巻
AngularJS入門の巻
Angular js開発事例
Angular js開発事例
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェスト
Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅
Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅
WEBがネイティブに勝つために - kaumoCTOMeetup(いっちマン)
WEBがネイティブに勝つために - kaumoCTOMeetup(いっちマン)
イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0
smartFXにおけるApache Cordovaの活用について
smartFXにおけるApache Cordovaの活用について
Viewers also liked
ng-japan 2015 TypeScript+AngularJS 1.3
ng-japan 2015 TypeScript+AngularJS 1.3
Masahiro Wakame
フロントエンドのツール Yeoman を勘違いしていた
フロントエンドのツール Yeoman を勘違いしていた
girigiribauer
3分でわかるangular js
3分でわかるangular js
Shin Adachi
Alt01-LT
Alt01-LT
Yuta Hiroto
初心者 × AngularJS × TypeScript
初心者 × AngularJS × TypeScript
Yuta Matsumura
忙しい人のためのBackbone.jsとAngular.js入門
忙しい人のためのBackbone.jsとAngular.js入門
Toshiaki Maki
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
silvers ofsilvers
デザイナーとの協業を本気で考える
デザイナーとの協業を本気で考える
kwatch
Angularを利用しよう
Angularを利用しよう
AfiruPain NaokiSoga
Angularモダンweb開発セミナー紹介 20170923
Angularモダンweb開発セミナー紹介 20170923
Staffnet_Inc
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
Yuji Nojima
TypeScriptで快適javascript
TypeScriptで快適javascript
AfiruPain NaokiSoga
Viewers also liked
(12)
ng-japan 2015 TypeScript+AngularJS 1.3
ng-japan 2015 TypeScript+AngularJS 1.3
フロントエンドのツール Yeoman を勘違いしていた
フロントエンドのツール Yeoman を勘違いしていた
3分でわかるangular js
3分でわかるangular js
Alt01-LT
Alt01-LT
初心者 × AngularJS × TypeScript
初心者 × AngularJS × TypeScript
忙しい人のためのBackbone.jsとAngular.js入門
忙しい人のためのBackbone.jsとAngular.js入門
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
デザイナーとの協業を本気で考える
デザイナーとの協業を本気で考える
Angularを利用しよう
Angularを利用しよう
Angularモダンweb開発セミナー紹介 20170923
Angularモダンweb開発セミナー紹介 20170923
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
TypeScriptで快適javascript
TypeScriptで快適javascript
Similar to AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
アプリのUXを磨くベスト・プラクティス
アプリのUXを磨くベスト・プラクティス
Yuichi Kato
これからiPhoneアプリを作ってみたいけど、プログラミング知識のない方へ!ワンコインセミナーでその一歩を踏み出してみよう!
これからiPhoneアプリを作ってみたいけど、プログラミング知識のない方へ!ワンコインセミナーでその一歩を踏み出してみよう!
Yoshinori Kobayashi
我が家のフロントエンド開発事情
我が家のフロントエンド開発事情
Naoki Yamada
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
Satoru Yamaguchi
Android webブラウザのhtml5対応状況
Android webブラウザのhtml5対応状況
Masakazu Muraoka
「Camelog」Android開発秘話
「Camelog」Android開発秘話
Shoya Tsukada
Web開発の 今までとこれから
Web開発の 今までとこれから
Shinichi Takahashi
嗚呼、素晴らしき哉 MonoTouch
嗚呼、素晴らしき哉 MonoTouch
hIDDENxv
Html5 js waffle
Html5 js waffle
kujirahand kujira
SketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケ
Asami Yamamoto
はやわかりHTML5ハイブリッドアプリ開発事情
はやわかりHTML5ハイブリッドアプリ開発事情
Monaca
ABC 2012 spring
ABC 2012 spring
Takeaki Tada
JavaScript祭りLTでmonacaを紹介
JavaScript祭りLTでmonacaを紹介
Yuki Okamoto
Abc2013 spring appinventorユーザー会
Abc2013 spring appinventorユーザー会
Takeaki Tada
ユーザーの心に刺ささるためには - UX実践編 -
ユーザーの心に刺ささるためには - UX実践編 -
Midori Hirose
Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~
Atsushi Harada
Mobile cloudnight 2015/11/11
Mobile cloudnight 2015/11/11
YUSUKE MORIZUMI
HTML5とか勉強会#48 ionic
HTML5とか勉強会#48 ionic
Kenichi Kanai
App inventorで想いを形に
App inventorで想いを形に
Takeaki Tada
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
takaaya
Similar to AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
(20)
アプリのUXを磨くベスト・プラクティス
アプリのUXを磨くベスト・プラクティス
これからiPhoneアプリを作ってみたいけど、プログラミング知識のない方へ!ワンコインセミナーでその一歩を踏み出してみよう!
これからiPhoneアプリを作ってみたいけど、プログラミング知識のない方へ!ワンコインセミナーでその一歩を踏み出してみよう!
我が家のフロントエンド開発事情
我が家のフロントエンド開発事情
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
Android webブラウザのhtml5対応状況
Android webブラウザのhtml5対応状況
「Camelog」Android開発秘話
「Camelog」Android開発秘話
Web開発の 今までとこれから
Web開発の 今までとこれから
嗚呼、素晴らしき哉 MonoTouch
嗚呼、素晴らしき哉 MonoTouch
Html5 js waffle
Html5 js waffle
SketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケ
はやわかりHTML5ハイブリッドアプリ開発事情
はやわかりHTML5ハイブリッドアプリ開発事情
ABC 2012 spring
ABC 2012 spring
JavaScript祭りLTでmonacaを紹介
JavaScript祭りLTでmonacaを紹介
Abc2013 spring appinventorユーザー会
Abc2013 spring appinventorユーザー会
ユーザーの心に刺ささるためには - UX実践編 -
ユーザーの心に刺ささるためには - UX実践編 -
Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~
Mobile cloudnight 2015/11/11
Mobile cloudnight 2015/11/11
HTML5とか勉強会#48 ionic
HTML5とか勉強会#48 ionic
App inventorで想いを形に
App inventorで想いを形に
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
More from アシアル株式会社
MonacaとEducation活動の紹介
MonacaとEducation活動の紹介
アシアル株式会社
PWA 4 Business
PWA 4 Business
アシアル株式会社
Monacaによるモバイルアプリ開発ことはじめ
Monacaによるモバイルアプリ開発ことはじめ
アシアル株式会社
kintone 連携スマホアプリの開発・配布体験
kintone 連携スマホアプリの開発・配布体験
アシアル株式会社
JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)
JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)
アシアル株式会社
書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)
書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)
アシアル株式会社
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド第2弾(体験版)
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド第2弾(体験版)
アシアル株式会社
Onsen UI 2 開発における JS フレームワーク衝突事例集
Onsen UI 2 開発における JS フレームワーク衝突事例集
アシアル株式会社
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド(体験版)
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド(体験版)
アシアル株式会社
Cordovaの特徴と開発手法概要
Cordovaの特徴と開発手法概要
アシアル株式会社
Onsen UI の最近とこれから 〜 国内サポートはじめました
Onsen UI の最近とこれから 〜 国内サポートはじめました
アシアル株式会社
Monaca事例から学ぶHTML5モバイルアプリの活用ポイント
Monaca事例から学ぶHTML5モバイルアプリの活用ポイント
アシアル株式会社
Gartner summit 2016
Gartner summit 2016
アシアル株式会社
モバイル用Webフレームワーク最前線
モバイル用Webフレームワーク最前線
アシアル株式会社
Monacaソリューションセミナー20160621
Monacaソリューションセミナー20160621
アシアル株式会社
20160308seminar2
20160308seminar2
アシアル株式会社
Nifty cloud mbaas
Nifty cloud mbaas
アシアル株式会社
創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀ
創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀ
アシアル株式会社
HTML5ハイブリッドアプリ開発で拓くビジネスチャンス
HTML5ハイブリッドアプリ開発で拓くビジネスチャンス
アシアル株式会社
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンス
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンス
アシアル株式会社
More from アシアル株式会社
(20)
MonacaとEducation活動の紹介
MonacaとEducation活動の紹介
PWA 4 Business
PWA 4 Business
Monacaによるモバイルアプリ開発ことはじめ
Monacaによるモバイルアプリ開発ことはじめ
kintone 連携スマホアプリの開発・配布体験
kintone 連携スマホアプリの開発・配布体験
JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)
JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)
書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)
書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド第2弾(体験版)
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド第2弾(体験版)
Onsen UI 2 開発における JS フレームワーク衝突事例集
Onsen UI 2 開発における JS フレームワーク衝突事例集
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド(体験版)
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド(体験版)
Cordovaの特徴と開発手法概要
Cordovaの特徴と開発手法概要
Onsen UI の最近とこれから 〜 国内サポートはじめました
Onsen UI の最近とこれから 〜 国内サポートはじめました
Monaca事例から学ぶHTML5モバイルアプリの活用ポイント
Monaca事例から学ぶHTML5モバイルアプリの活用ポイント
Gartner summit 2016
Gartner summit 2016
モバイル用Webフレームワーク最前線
モバイル用Webフレームワーク最前線
Monacaソリューションセミナー20160621
Monacaソリューションセミナー20160621
20160308seminar2
20160308seminar2
Nifty cloud mbaas
Nifty cloud mbaas
創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀ
創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀ
HTML5ハイブリッドアプリ開発で拓くビジネスチャンス
HTML5ハイブリッドアプリ開発で拓くビジネスチャンス
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンス
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンス
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
1.
Angularと Onsen UIで作る 最高のHTML5 ハイブリッドアプリ ng-japan 2015年3月21日 アシアル株式会社
久保田光則
2.
久保田光則 - @anatoo - アシアル株式会社所属 -
UI/UXデザイナー兼 ソフトウェアエンジニア - Onsen UIリード開発者
3.
好評発売中! - 最近になって韓国語版も翻訳出版されます
4.
話すこと Onsen UIテーマ:
5.
http://onsen.io
6.
Onsen UI - HTML5ハイブリッドアプリ用のUIフレームワーク -
Angularをベースにしています - iOS, Androidをサポートしています - 高速な動作性がウリです - なんてことを説明しててもつまらないですよね。
7.
本当に話すこと - HTML5ハイブリッドアプリとは? - ハイブリッドアプリ開発にどんな問題があるのか? -
なぜAngularとOnsen UIが必要なのか? - 少しだけOnsen UIの紹介
8.
HTML5ハイブリッドアプリとは
9.
ネイティブアプリ - Objective-CやJavaなど、そのOSの流儀で実装 - いわゆる普通のアプリ Java or Objective-C Java or Objective-C アプリ
10.
ウェブアプリ - ブラウザで動作する - 要するにただのウェブページ
11.
HTML5ハイブリッドアプリ - アプリとして動作 - 内部の実装にHTML5をつかっている アプリ ネイティブ層 HTML5
12.
仕組み アプリ HTML 読み込み WebView
13.
HTML5ハイブリッドアプリの 何が良いのか?
14.
クロスプラットフォーム性 Android iOS
15.
ウェブの知識が活かせる
16.
ストアでの配布 - 外見は普通のアプリなので、ストアで配布可能
17.
ネイティブの機能の呼び出し Android / iOS OS
API
18.
Cordovaについて - ハイブリッドアプリ用フレームワーク - 昔はPhoneGapという名前だった http://cordova.apache.org
19.
Cordovaがやってくれること - HTML5をアプリ内部にパッケージ化 - OSとのAPIのやり取りを一本化
20.
Cordovaの提供するプラグイン ‣ さらにCordovaプラグインの 仕組みを使えばこれ以外のことも可能 ファイルストレージ、カメラ、コンパス 加速度センサー、コンタクトリスト、 位置情報取得、ネットワーク、Bluetooth通信、 Androidのインテント、アプリ内ブラウザ、 GPS、NFC、etc…
21.
「HTML5でモバイルアプリが作れるんです ね、やったー」
22.
こうして数多くのフロントエンド開発者が HTML5ハイブリッドアプリに 取り組んでいくことになった…
23.
結果 - 数年程度前の出来事 - いったいなにが起こった?
24.
最も有名な失敗例 「HTML5に けたのは失敗」 Facebook ザッカーバーグCEO -
HTML5で記述したfacebookアプリを ネイティブで書きなおす 2012年9月11日 TechCrunch Disrupt SF 2012より
25.
数年前に比べて現在状況は 好転してきた - 端末スペックの向上 - CPU、メモリ共に一昔前のノートPCとほぼ同じに -
AndroidでのWebViewのChromiumの採用 - 利用できるHTML5 APIの増加 - Android2.3系のシェアの低下 - CrossWalkの登場 - Android5からのAndroid System WebViewの導入 - HTML5ハイブリッドアプリの事例の増加 - BYODの一般化により
26.
好転を表すシグナル - Rails作者のDHHによるHTML5ハイブリッドアプリ評
27.
しかしそれでも - HTML5ハイブリッド アプリは遅い! - ネイティブに比べると 使い物にならない! -
昔の体験が・・・ 画像出典: ヒストリエ
28.
問題
29.
直接の問題 - パフォーマンスや安定性が悪い - UIコンポーネントをいちいち作らないといけない
30.
パフォーマンスに関する答え チューニングすればいいじゃん!
31.
- 今ではハイブリッドアプリは十分速く動作する - だから勝手にチューニングすればいい、と思ってた
32.
得られた知見 - フロントエンド開発者の多くは、 HTML・CSS・JSの書き方だけしかわかっていない ことがわかった
33.
- 多くの開発者はより素早く描画するための チューニング方法を知らない
34.
レンダリングの仕組み
35.
効率的なチューニング - まずは、どこがボトルネックになっているのかを知 る - インスペクタのTimelineタブで計測 -
AndroidではChrome、 iOSではSafariのインスペクタを利用
36.
- インスペクタのTimelineタブで計測 - AndroidではChrome、iOSではSafariのインスペ クタを利用
37.
インスペクタのTimelineタブで取れるカテゴリ Loading Scripting Rendering Painting }1frame 描画が始まって終わるまでが1frame これを16ms以下に抑えれば最高
38.
ボトルネックがどこにあるかで チューニングもまた変わってくる
39.
1. Loading - リソースの読み込みやパース -
ハイブリッドアプリではウェブアプリよりも ここが消費する時間は短い - リソースがローカルにすでにあるから
40.
2. Scripting - JavaScriptの実行時間 -
純粋な計算は速い。基本的に問題にならない。 - ただし、canvasへの描画やディスクI/Oが発生し たりリフローを同期的に強制するコードなどは遅 い
41.
Scriptingがボトルネックだったら? - 話は簡単 - Profilesタブでさらにどのコードが重いのかを見る
42.
- Bottom UpのSelf欄が重要
43.
3. Rendering - Rendering
- レイアウト処理 - Recalculate Style - 要素に当たるCSSルールの計算 - Layout - Render Treeの生成
44.
Recalculate Style -
要素のスタイルの計算 - 個別のDOM要素に対して、当たるスタイルを計算 する - CSS OMを参照して、DOM要素の数 x CSSルール の数分マッチング処理が走る - 重たいCSSの書き方を減らす - 使っていないCSSのルールは消す
45.
Layout - RenderTreeの生成 -
全てのDOMのレイアウト情報を計算 - 計算された結果の視覚的なオブジェクト のツリーがRenderTree
46.
4. Painting - Painting
- 描画処理 - Paint - Display List(ChromiumだとSkiaへの命 令)の生成 - Rasterize - Display Listの実行してピクセル化 - Composite Layers - レイヤの合成
47.
雑多なチューニングテクニック小話
48.
translate3d(0, 0, 0)が速いのはなぜ? -
GPUで描画されるから? - 半分正解だが半分間違っている - transform CSSプロパティを変更しても、 Composite Layersのみが起こるから - つまり、同時に別処理でLayoutを引き起こしたり すると台無し
49.
どのCSSプロパティを変更すると何が起こる? - 要素の大きさが変わるような場合 Layoutから処理が始まる - transformやopacityだとComposite
Layersのみ走る - CSSプロパティによって変更で何が起こるか違う - 詳しくはCSS Triggersでググるんだ!
50.
DOMリークを防ぐ - DOM要素が誤って参照されたまま開放されない - 見た目よりも深刻 -
detached DOMツリーとそれに参照されている リソースが全てリークする - iOS, Androidだとメモリスワッピングが弱く設計 されている
51.
reflowを起こさないようにする - 画像のサイズは必ず指定する - 一度DOMツリーから切り離して操作する -
offsetHeightやgetBoundingClientRect()を呼び 出しつつstyleを変更するみたいなコードをループ で書くと地獄
52.
GPUバウンド - CPUよりもGPUの方で時間がかかっている状態 - Rasterize後にテクスチャとしてGPUのVRAMに転 送 -
Composite Layers - GPUへの転送や合成がCPU時間よりも時間がかかっ ていればGPUバウンド
53.
GPUバウンドなページを作る - 大きな領域を持つ要素にtransform: translate3d(0, 0,
0)を当ててたくさん生成してア ニメーションさせる - Rasterize時にGPUにテクスチャとして転送される - 転送や合成に時間がかかるようになる - GPUのVRAMへのbandwidthが分かれば 転送にかかる時間の理論値が割り出せる
54.
省略 - スライドが150ページ超えそうなので省略。
55.
チューニングの罠
56.
ただし - こういったチューニングの大部分は レンダリングエンジンの実装に依存している - どうしてもわからない時はWebKitやChromiumの コードを読むしか無い
57.
ふと我に帰る瞬間 - なぜ単にHTML5でアプリ書きたいだけなのに 私はChromiumのコードを読んでいるのか? - なぜ単にCSS書いてるだけなのに私は GPUのVRAMへの転送速度を気にしなければなら ないのか?
58.
- ここまでチューニングする余裕がアプリ開発中にある のだろうか? - こういったチューニングを全て把握することを全ての 開発者に求めて良いのだろうか? 否!!
59.
何かがおかしい - ごく一部の人間でないと高速なHTML5ハイブリッ ドアプリは開発できないのだろうか? - ユーザがアプリの構築そのものにフォーカスできな いのだろうか?
60.
ハイブリッドアプリ開発から見た 今のHTML5の課題 - アプリケーションアーキテクチャの構築方法の不在 - チューニングされて高速に動作するUI基盤が無い ?
61.
iOS UIKit アプリ Objective-C/Swift Android View System アプリ Java iOSアプリ Androidアプリ
62.
ネイティブだとUIフレームワークがある - そのOSに必要なUIが全て っている -
開発者はUIフレームワークが裏で何をやっているか 気にしなくても良い - すぐにアプリを開発し始められる - これに対してHTML5ハイブリッドアプリでは?
63.
WebView&Cordova ! アプリ iOS/Android HTML5ハイブリッドアプリ
64.
- アプリの開発者が何もかも考えなければならない! リストビューはどうやって実装すれば? 画面遷移の管理はどうすれば ジェスチャを扱うにはどうすれば良い? MVCフレームワークには何を使おう? アプリが遅いけどチューニングってどうやるの? CSSは最初から書いていく iOSのSwitchってどうやって実装するの viewportの設定ってどうやればいいの? DOMの数が巨大になるとどれぐらい重くなるんだろう? Bootstrapって使っていいのかな? 実装すれば? CSSの設計規約って何がいいのかな?fpsはどれぐらいを目標にすればいいんだろう? 描画の速度ってCIやテストで回せるっけ?
65.
無いもの - 使うだけで高速に描画されるUIキット - アプリケーションアーキテクチャを形作るもの
66.
Onsen UI
67.
- 開発者が、アプリの開発そのものに フォーカスできるようにする。
68.
Angularをベースにして構築 - HTMLを拡張して、アプリも記述可能にしてくれる - 大規模なアプリでも耐えられるアーキテクチャ -
DIコンテナ、サービス、コントローラ、フィルタ等
69.
Custom Elements - HTMLを記述するだけでUIを構築できる <ons-page
class=“first-page”> <ons-toolbar> <div class=“center”>Toolbar Title</div> </ons-toolbar> <div> <p>Page Contents</p> <ons-button ng-click=“foo()”> MyButton </ons-button> </div> </ons-page>
70.
CSSによるテーマ - Adobeの超高速CSSフレームワークtopcoatをベースに構築 - CSSメタ言語にStylusを利用 -
設計規約はBEMを採用
71.
http://components.onsen.io/ - ウェブ上で簡単に色をカスタマイズできるテーマローラも完備
72.
Onsen UIのコンポーネント群 - チューニングにより高速に動作
73.
ons-navigator - 画面遷移と遷移アニメーションを管理する <ons-navigator class=“first-page”> <ons-toolbar> <div
class=“center”>Toolbar Title</div> </ons-toolbar> <div> <p>Page Contents</p> <ons-button ng-click=“foo()”> MyButton </ons-button> </div> </ons-navigator>
74.
- ページをスタックで管理する - 画面遷移を司るコンポーネント page1.html page2.html page1.html pushPage()
popPage() page1.html
75.
ons-pull-hook - いわゆるpull-to-refreshを実装できるコンポーネント <ons-page> <ons-pull-hook ng-action="load($done)"> Pull
to refresh </ons-pull-hook> <ons-list> ... </ons-list> </ons-page>
76.
- pull-to-refreshの例
77.
ons-lazy-repeat - 数千数万のDOM要素のライフサイクルを管理 - いわゆる無限リストが簡単に実装できる <ul> <li
ons-lazy-repeat=“lazyRepeatDelegate”> … </li> </ul>
78.
- 画面に必要な分だけ表示するので高速 - AndroidやiOSのリストビューと同等のことが可能 隠れたら アンロード 表示しそうなら ロード
79.
ons-sliding-menu要素 - スライディングメニュー、ドロワーメニューを表現
80.
ons-alert-dialog要素 - HTMLで表現されたアラートダイアログ
81.
ons-popover要素 - 吹き出しを表現するコンポーネント
82.
ons-carousel要素 - 置くだけでカルーセルのUIを表現
83.
Onsen UIが目指すもの
84.
- だれでもHTML5で高速に動作する モバイルアプリを作ることができる世界
85.
- UIをどのようにチューニングするか、 ではなくアプリの本質的機能の開発に フォーカスするための基盤
86.
Onsen UI 2.0
87.
- Material Designsサポート -
Angular2サポート
88.
最後に
89.
開発者募集 - アシアル株式会社では一緒にOnsen UIを開発して くれるエンジニアを募集しています
90.
ご清聴ありがとうございました
Download now