Enviar búsqueda
Cargar
HTML5ハイブリッド アプリ開発実践編
•
92 recomendaciones
•
20,119 vistas
Monaca
Seguir
Denunciar
Compartir
Denunciar
Compartir
1 de 64
Descargar ahora
Descargar para leer sin conexión
Recomendados
Monacaでつくるハイブリッドアプリ
Monacaでつくるハイブリッドアプリ
Monaca
ハイブリットソーシャルゲームの現場
ハイブリットソーシャルゲームの現場
Shota Suzuki
いまさら聞けない!HTML5超入門
いまさら聞けない!HTML5超入門
Monaca
HTML5×Monacaプログラミング教育事例セミナー・ワークショップ資料
HTML5×Monacaプログラミング教育事例セミナー・ワークショップ資料
アシアル株式会社
Ionicでハイブリッドアプリ入門①
Ionicでハイブリッドアプリ入門①
Tomokatsu Iguchi
20120413 nestakabaneworkshop
20120413 nestakabaneworkshop
Yoichiro Sakurai
Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅
Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅
アシアル株式会社
企画者が押さえておきたいHtml5アプリ開発の要点
企画者が押さえておきたいHtml5アプリ開発の要点
Monaca
Recomendados
Monacaでつくるハイブリッドアプリ
Monacaでつくるハイブリッドアプリ
Monaca
ハイブリットソーシャルゲームの現場
ハイブリットソーシャルゲームの現場
Shota Suzuki
いまさら聞けない!HTML5超入門
いまさら聞けない!HTML5超入門
Monaca
HTML5×Monacaプログラミング教育事例セミナー・ワークショップ資料
HTML5×Monacaプログラミング教育事例セミナー・ワークショップ資料
アシアル株式会社
Ionicでハイブリッドアプリ入門①
Ionicでハイブリッドアプリ入門①
Tomokatsu Iguchi
20120413 nestakabaneworkshop
20120413 nestakabaneworkshop
Yoichiro Sakurai
Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅
Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅
アシアル株式会社
企画者が押さえておきたいHtml5アプリ開発の要点
企画者が押さえておきたいHtml5アプリ開発の要点
Monaca
Onsen UIが目指すもの
Onsen UIが目指すもの
アシアル株式会社
WordPress APIで作るモバイルアプリ
WordPress APIで作るモバイルアプリ
アシアル株式会社
スキスキIonic
スキスキIonic
Kon Yuichi
~新しい着回しと出会おう~ 『XZ(クローゼット)』 を支える技術 -Cordova編-
~新しい着回しと出会おう~ 『XZ(クローゼット)』 を支える技術 -Cordova編-
Shinichiro Yoshida
Angular でもっとAPIファースト・もっとモダンデザインなWebアプリケーションを作ろう!
Angular でもっとAPIファースト・もっとモダンデザインなWebアプリケーションを作ろう!
CData Software Japan
smartFXにおけるApache Cordovaの活用について
smartFXにおけるApache Cordovaの活用について
剛志 森田
Spa のための web サーバ構築ノウハウ
Spa のための web サーバ構築ノウハウ
Kazuhiro Kotsutsumi
5分で分かるmonaca pressproject(草案)
5分で分かるmonaca pressproject(草案)
Yuki Okamoto
Cordova (PhoneGap) で始める、スマホアプリ開発
Cordova (PhoneGap) で始める、スマホアプリ開発
Kenichi Inoue
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
Shumpei Shiraishi
Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』
Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』
Futomi Hatano
Web Speech API で2時間で作れる?ブラウザロボット
Web Speech API で2時間で作れる?ブラウザロボット
Hirokazu Egashira
Monacaによるモバイルアプリ開発ことはじめ
Monacaによるモバイルアプリ開発ことはじめ
アシアル株式会社
HTML5でteratailが喋った!
HTML5でteratailが喋った!
Shohei Tai
kintone 連携スマホアプリの開発・配布体験
kintone 連携スマホアプリの開発・配布体験
アシアル株式会社
Web エンジニアのためのWeb エンジニアのためのロボットアームの API を考えてみる
Web エンジニアのためのWeb エンジニアのためのロボットアームの API を考えてみる
Futomi Hatano
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Shin Ogata
Monaca+Onsen UIで作るアプリ事始め
Monaca+Onsen UIで作るアプリ事始め
Kenichi Inoue
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
アシアル株式会社
WEBがネイティブに勝つために - kaumoCTOMeetup(いっちマン)
WEBがネイティブに勝つために - kaumoCTOMeetup(いっちマン)
icchiman
Apache Module
Apache Module
Tomohiro Ikebe
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1
Nishida Kansuke
Más contenido relacionado
La actualidad más candente
Onsen UIが目指すもの
Onsen UIが目指すもの
アシアル株式会社
WordPress APIで作るモバイルアプリ
WordPress APIで作るモバイルアプリ
アシアル株式会社
スキスキIonic
スキスキIonic
Kon Yuichi
~新しい着回しと出会おう~ 『XZ(クローゼット)』 を支える技術 -Cordova編-
~新しい着回しと出会おう~ 『XZ(クローゼット)』 を支える技術 -Cordova編-
Shinichiro Yoshida
Angular でもっとAPIファースト・もっとモダンデザインなWebアプリケーションを作ろう!
Angular でもっとAPIファースト・もっとモダンデザインなWebアプリケーションを作ろう!
CData Software Japan
smartFXにおけるApache Cordovaの活用について
smartFXにおけるApache Cordovaの活用について
剛志 森田
Spa のための web サーバ構築ノウハウ
Spa のための web サーバ構築ノウハウ
Kazuhiro Kotsutsumi
5分で分かるmonaca pressproject(草案)
5分で分かるmonaca pressproject(草案)
Yuki Okamoto
Cordova (PhoneGap) で始める、スマホアプリ開発
Cordova (PhoneGap) で始める、スマホアプリ開発
Kenichi Inoue
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
Shumpei Shiraishi
Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』
Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』
Futomi Hatano
Web Speech API で2時間で作れる?ブラウザロボット
Web Speech API で2時間で作れる?ブラウザロボット
Hirokazu Egashira
Monacaによるモバイルアプリ開発ことはじめ
Monacaによるモバイルアプリ開発ことはじめ
アシアル株式会社
HTML5でteratailが喋った!
HTML5でteratailが喋った!
Shohei Tai
kintone 連携スマホアプリの開発・配布体験
kintone 連携スマホアプリの開発・配布体験
アシアル株式会社
Web エンジニアのためのWeb エンジニアのためのロボットアームの API を考えてみる
Web エンジニアのためのWeb エンジニアのためのロボットアームの API を考えてみる
Futomi Hatano
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Shin Ogata
Monaca+Onsen UIで作るアプリ事始め
Monaca+Onsen UIで作るアプリ事始め
Kenichi Inoue
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
アシアル株式会社
WEBがネイティブに勝つために - kaumoCTOMeetup(いっちマン)
WEBがネイティブに勝つために - kaumoCTOMeetup(いっちマン)
icchiman
La actualidad más candente
(20)
Onsen UIが目指すもの
Onsen UIが目指すもの
WordPress APIで作るモバイルアプリ
WordPress APIで作るモバイルアプリ
スキスキIonic
スキスキIonic
~新しい着回しと出会おう~ 『XZ(クローゼット)』 を支える技術 -Cordova編-
~新しい着回しと出会おう~ 『XZ(クローゼット)』 を支える技術 -Cordova編-
Angular でもっとAPIファースト・もっとモダンデザインなWebアプリケーションを作ろう!
Angular でもっとAPIファースト・もっとモダンデザインなWebアプリケーションを作ろう!
smartFXにおけるApache Cordovaの活用について
smartFXにおけるApache Cordovaの活用について
Spa のための web サーバ構築ノウハウ
Spa のための web サーバ構築ノウハウ
5分で分かるmonaca pressproject(草案)
5分で分かるmonaca pressproject(草案)
Cordova (PhoneGap) で始める、スマホアプリ開発
Cordova (PhoneGap) で始める、スマホアプリ開発
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』
Leading the way to W3C TPAC 2015 『HTML5 関連の API の現状とこれから』
Web Speech API で2時間で作れる?ブラウザロボット
Web Speech API で2時間で作れる?ブラウザロボット
Monacaによるモバイルアプリ開発ことはじめ
Monacaによるモバイルアプリ開発ことはじめ
HTML5でteratailが喋った!
HTML5でteratailが喋った!
kintone 連携スマホアプリの開発・配布体験
kintone 連携スマホアプリの開発・配布体験
Web エンジニアのためのWeb エンジニアのためのロボットアームの API を考えてみる
Web エンジニアのためのWeb エンジニアのためのロボットアームの API を考えてみる
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Monaca+Onsen UIで作るアプリ事始め
Monaca+Onsen UIで作るアプリ事始め
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
WEBがネイティブに勝つために - kaumoCTOMeetup(いっちマン)
WEBがネイティブに勝つために - kaumoCTOMeetup(いっちマン)
Destacado
Apache Module
Apache Module
Tomohiro Ikebe
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1
Nishida Kansuke
実践Sass 前編
実践Sass 前編
Azusa Tomita
15分でわかるAWSクラウドで コスト削減できる理由
15分でわかるAWSクラウドで コスト削減できる理由
Yasuhiro Horiuchi
jQuery Mobile入門
jQuery Mobile入門
Shumpei Shiraishi
スタートアップ立ち上げマニュアル
スタートアップ立ち上げマニュアル
Takaya Shinozuka
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
Nishida Kansuke
サルでもわかるHTML5超入門
サルでもわかるHTML5超入門
tomo kaneko
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
SwapSkills
HTML5, きちんと。
HTML5, きちんと。
Masataka Yakura
Sass 超入門
Sass 超入門
Michinari Odajima
Destacado
(11)
Apache Module
Apache Module
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1
実践Sass 前編
実践Sass 前編
15分でわかるAWSクラウドで コスト削減できる理由
15分でわかるAWSクラウドで コスト削減できる理由
jQuery Mobile入門
jQuery Mobile入門
スタートアップ立ち上げマニュアル
スタートアップ立ち上げマニュアル
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
サルでもわかるHTML5超入門
サルでもわかるHTML5超入門
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
HTML5, きちんと。
HTML5, きちんと。
Sass 超入門
Sass 超入門
Similar a HTML5ハイブリッド アプリ開発実践編
ICT ERA+ABC 2012東北講演
ICT ERA+ABC 2012東北講演
Monaca
20120316 designerworkshoppublished
20120316 designerworkshoppublished
Yoichiro Sakurai
Html5超入門
Html5超入門
Monaca
事例で学ぶHTML5スマフォアプリ開発セミナー
事例で学ぶHTML5スマフォアプリ開発セミナー
Monaca
Webエンジニアによるスマートフォンアプリ開発
Webエンジニアによるスマートフォンアプリ開発
takeuchi-tk
HTML5時代のwebクリエイターに必要なこと
HTML5時代のwebクリエイターに必要なこと
Masakazu Muraoka
JavaScript祭りLTでmonacaを紹介
JavaScript祭りLTでmonacaを紹介
Yuki Okamoto
最近のWeb関連技術の動向あれこれ
最近のWeb関連技術の動向あれこれ
dsuke Takaoka
Sharoid Service Menu
Sharoid Service Menu
sharoid
iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発
iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発
アシアル株式会社
リモートデバッグツール Weinerをつかってみた
リモートデバッグツール Weinerをつかってみた
Masakazu Muraoka
ハイブリッドアプリ開発最前線から見たHtml5の理想と現実
ハイブリッドアプリ開発最前線から見たHtml5の理想と現実
Monaca
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
Tsutomu Ogasawara
mBaaS/C4SA howto
mBaaS/C4SA howto
史識 川原
開発事例に学ぶHtml5アプリのポイント
開発事例に学ぶHtml5アプリのポイント
Monaca
これからのNOTESモバイルアプリはこう作れ
これからのNOTESモバイルアプリはこう作れ
Mitsuru Katoh
Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方
Masakazu Muraoka
HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向
Shumpei Shiraishi
YJTC18 A-1 大規模サーバの戦略
YJTC18 A-1 大規模サーバの戦略
Yahoo!デベロッパーネットワーク
Phone gap+javascriptスマホアプリ開発(入門編)
Phone gap+javascriptスマホアプリ開発(入門編)
Monaca
Similar a HTML5ハイブリッド アプリ開発実践編
(20)
ICT ERA+ABC 2012東北講演
ICT ERA+ABC 2012東北講演
20120316 designerworkshoppublished
20120316 designerworkshoppublished
Html5超入門
Html5超入門
事例で学ぶHTML5スマフォアプリ開発セミナー
事例で学ぶHTML5スマフォアプリ開発セミナー
Webエンジニアによるスマートフォンアプリ開発
Webエンジニアによるスマートフォンアプリ開発
HTML5時代のwebクリエイターに必要なこと
HTML5時代のwebクリエイターに必要なこと
JavaScript祭りLTでmonacaを紹介
JavaScript祭りLTでmonacaを紹介
最近のWeb関連技術の動向あれこれ
最近のWeb関連技術の動向あれこれ
Sharoid Service Menu
Sharoid Service Menu
iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発
iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発
リモートデバッグツール Weinerをつかってみた
リモートデバッグツール Weinerをつかってみた
ハイブリッドアプリ開発最前線から見たHtml5の理想と現実
ハイブリッドアプリ開発最前線から見たHtml5の理想と現実
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
mBaaS/C4SA howto
mBaaS/C4SA howto
開発事例に学ぶHtml5アプリのポイント
開発事例に学ぶHtml5アプリのポイント
これからのNOTESモバイルアプリはこう作れ
これからのNOTESモバイルアプリはこう作れ
Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方
HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向
YJTC18 A-1 大規模サーバの戦略
YJTC18 A-1 大規模サーバの戦略
Phone gap+javascriptスマホアプリ開発(入門編)
Phone gap+javascriptスマホアプリ開発(入門編)
Más de Monaca
クロスプラットフォーム開発を可能にするMonaca
クロスプラットフォーム開発を可能にするMonaca
Monaca
展示会出展を成功させるたった一つのこと
展示会出展を成功させるたった一つのこと
Monaca
クロスプラットフォーム開発を可能にするMonacaとそのセキュリティ対策
クロスプラットフォーム開発を可能にするMonacaとそのセキュリティ対策
Monaca
LT「料金プラン改定後のMonacaについて」
LT「料金プラン改定後のMonacaについて」
Monaca
クロスプラットフォーム活用のポイント
クロスプラットフォーム活用のポイント
Monaca
US Meetup Tour
US Meetup Tour
Monaca
New things about Cordova 4.0
New things about Cordova 4.0
Monaca
Cordova and PhoneGap Insights
Cordova and PhoneGap Insights
Monaca
120分聞けばドヤ顔で語れる apache cordova スーパー勉強会
120分聞けばドヤ顔で語れる apache cordova スーパー勉強会
Monaca
はやわかりHTML5ハイブリッドアプリ開発事情
はやわかりHTML5ハイブリッドアプリ開発事情
Monaca
Using PhoneGap to develop incredible HTML5 hybrid mobile apps
Using PhoneGap to develop incredible HTML5 hybrid mobile apps
Monaca
How to make Twitter app with PhoneGap/Cordova
How to make Twitter app with PhoneGap/Cordova
Monaca
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
Monaca
高いUXをハイブリッド開発で実現するためのポイント
高いUXをハイブリッド開発で実現するためのポイント
Monaca
LODチャレンジデー オープンデータを利用したサンプルアプリ
LODチャレンジデー オープンデータを利用したサンプルアプリ
Monaca
第6回LODチャレンジデー Monaca紹介資料
第6回LODチャレンジデー Monaca紹介資料
Monaca
Android Bazaar Conference講演資料「Onsen UIデビュー!」
Android Bazaar Conference講演資料「Onsen UIデビュー!」
Monaca
Monacaで簡単スマートフォンアプリ開発体験講座
Monacaで簡単スマートフォンアプリ開発体験講座
Monaca
事例で解説するハイブリッドアプリ開発のポイント
事例で解説するハイブリッドアプリ開発のポイント
Monaca
HTML5 クロスプラットフォームアプリ開発の現実解
HTML5 クロスプラットフォームアプリ開発の現実解
Monaca
Más de Monaca
(20)
クロスプラットフォーム開発を可能にするMonaca
クロスプラットフォーム開発を可能にするMonaca
展示会出展を成功させるたった一つのこと
展示会出展を成功させるたった一つのこと
クロスプラットフォーム開発を可能にするMonacaとそのセキュリティ対策
クロスプラットフォーム開発を可能にするMonacaとそのセキュリティ対策
LT「料金プラン改定後のMonacaについて」
LT「料金プラン改定後のMonacaについて」
クロスプラットフォーム活用のポイント
クロスプラットフォーム活用のポイント
US Meetup Tour
US Meetup Tour
New things about Cordova 4.0
New things about Cordova 4.0
Cordova and PhoneGap Insights
Cordova and PhoneGap Insights
120分聞けばドヤ顔で語れる apache cordova スーパー勉強会
120分聞けばドヤ顔で語れる apache cordova スーパー勉強会
はやわかりHTML5ハイブリッドアプリ開発事情
はやわかりHTML5ハイブリッドアプリ開発事情
Using PhoneGap to develop incredible HTML5 hybrid mobile apps
Using PhoneGap to develop incredible HTML5 hybrid mobile apps
How to make Twitter app with PhoneGap/Cordova
How to make Twitter app with PhoneGap/Cordova
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
高いUXをハイブリッド開発で実現するためのポイント
高いUXをハイブリッド開発で実現するためのポイント
LODチャレンジデー オープンデータを利用したサンプルアプリ
LODチャレンジデー オープンデータを利用したサンプルアプリ
第6回LODチャレンジデー Monaca紹介資料
第6回LODチャレンジデー Monaca紹介資料
Android Bazaar Conference講演資料「Onsen UIデビュー!」
Android Bazaar Conference講演資料「Onsen UIデビュー!」
Monacaで簡単スマートフォンアプリ開発体験講座
Monacaで簡単スマートフォンアプリ開発体験講座
事例で解説するハイブリッドアプリ開発のポイント
事例で解説するハイブリッドアプリ開発のポイント
HTML5 クロスプラットフォームアプリ開発の現実解
HTML5 クロスプラットフォームアプリ開発の現実解
HTML5ハイブリッド アプリ開発実践編
1.
HTML5ハイブリッド アプリ開発実践編 クロスプラットフォーム開発で ハマりがちなポイントを解説
アシアル株式会社 久保田光則 URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 1
2.
自己紹介
• 久保田光則 @anatoo • アシアル株式会社 • UI&UXデザイナー兼 ソフトウェアエンジニア URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 2
3.
会社紹介 • アシアル株式会社 • HTML5、UI&UX、スマートフォン、 PHP、etc...
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 3
4.
今回の話 • HTML5で作るハイブリッドアプリっ て実際どうなの?
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 4
5.
ハイブリッドアプリとは • 通常のアプリと同様にストアから
インストールできる • 普通のアプリのように見えるが、 中身の部分はHTML5で実装されている URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 5
6.
ハイブリッドアプリ ネイティブアプリ
ハイブリッドアプリ Objective-C HTML5 JavaScript or Java CSS アプリ アプリ URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 6
7.
どうして注目されているのか? • iPhoneとAndroid、まじめに両プラッ トフォームに対応すると大変
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 7
8.
AndroidとiOS両対応は大変 • プログラミング言語が違う • 開発環境が違う •
開発ノウハウが違う • 用意されているUIが違う • 両方できる開発者は希少 URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 8
9.
そこでハイブリッドアプリ • HTML5でアプリ開発 • ワンソースでクロスプラットフォーム
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 9
10.
いいところ • ウェブ開発者のノウハウが活かせる • ワンソースでマルチプラットフォーム
対応 => 開発効率化 • HTML5からネイティブの機能を呼び 出せる URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 10
11.
国内国外の事例 • cookpad • 名刺管理アプリEight •
Wikipedia • はてなスペース • LinkedIn • etc... URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 11
12.
ハイブリッドアプリ興隆はこれから • 2016年には業務向けアプリの 50%がハイブリッドアプリになると いう予測も。 • 米Gartner調べ
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 12
13.
ただし良いことばかりではない • 何も考えずにハイブリッドアプリを作 ると・・・?
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 13
14.
よくありがちな失敗 • なんかショボイアプリになった・・・ • UIがイケてない・・・ •
反応速度が遅い・・・ • なんか落ちる・・・ URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 14
15.
失敗例: Facebook • HTML5で作っていたものをネイティブ
へ移行 • 動作が重かったり落ちたりと不評だった • 「HTML5に賭けたのは失敗」 • by ザッカーバーグCEO URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 15
16.
失敗の理由 • スキル・ノウハウの不足 • ウェブサイトと同じように実装している •
HTML5で実装すべきでないところを実 装している • モバイル特有の事情を考慮していない URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 16
17.
失敗パターンを避けるための • 前提、知識、ノウハウ、話します。
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 17
18.
ハイブリッドアプリの作り方
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 18
19.
ハイブリッドアプリの作り方 • フレームワークを利用
• PhoneGap • MonacaFramework • Triana • Trigger.io • もしくは自前で用意 URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 19
20.
フレームワーク? • HTML5で記述したものをAndroidや iOSのアプリとして包んでくれるもの •
JSからネイティブの機能を呼び出すイ ンターフェイスを提供 URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 20
21.
フレームワーク?
ハイブリッドアプリ HTML5 フレームワーク モバイルOS(iOS, Android URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 21
22.
フレームワークの選定ポイント • ネイティブの機能をJSから使うか? •
具体的にどんなネイティブの機能を使うか? • 信頼出来ないHTMLを読み込むか? 今回はPhoneGapの場合をお話します URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 22
23.
PhoneGap • 最もメジャーなハイブリッドアプリフレー ムワーク
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 23
24.
PhoneGapがやってくれること HTML5から呼び出せるネイティブAPIの提供。 • ファイルストレージ • カメラ、コンパス、加速度センサー •
コンタクトリスト • 位置情報取得 • ネットワーク URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 24
25.
その他プラグイン プラグイン導入で、その他の機能も使える • Bluetooth通信 •
Androidのインテント • ChildBrowser - アプリ内ブラウザ • 日付選択UI • GPS、NFC、SMS、Bonjour、etc... URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 25
26.
さらに 自分でPhoneGapプラグインを実装すると、 • 重たい処理はネイティブで書く • 特定の画面はネイティブで書く
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 26
27.
開発方針
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 27
28.
どちらにまず合わせる? • AndroidよりもiOSのほうがはるかに動きが滑
らか&軽い • まずは、Androidでまともに動くことを確認し てiOSでも確認する • 逆だと、Androidで重すぎて使い物にならな くなる事態が発生する URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 28
29.
何をどっちで実装する? • HTML5は万能ではない
• パフォーマンス上無理っぽい所も。 • どんなものをHTML5で実装できる? • どんなものをネイティブで実装する? URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 29
30.
これを判断するために • あらかじめHTML5が不得意な部分を
検証&理解しておく • 不得意な部分はネイティブで実装して 補う URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 30
31.
長短
高度なグラフィック処 理、リアルタイム処 開発速度、学習コス 理、端末性能を活か ト、クロスプラット す、メモリ節約、OS フォーム性 最新機能 ネイティブ ⃝ × HTML5 × ⃝ URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 31
32.
両方の長所をうまく活用する • なんでもHTML5でやるのではない • HTML5とネイティブの短所を上手く 補いあう形にする
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 32
33.
実際に開発する際のノウハウ
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 33
34.
前準備は終わり • ここからは、実装する際の細かいノウ ハウを話していきます
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 34
35.
デバッグ • Firebugみたいなインスペクタを モバイルで使うには?
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 35
36.
iOSの場合 • Safariのリモートインスペクターを 利用する
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 36
37.
Androidの場合 • weinreを利用する
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 37
38.
アニメーション • JavaScriptで直接アニメーションする
と大変遅い • CSSアニメーションを使う URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 38
39.
CSSアニメーションのやり方 • dom.style.webkitAnimation • dom.style.webkitTransition •
dom.style.webkitTransform アニメーション関連のプロパティを JavaScriptから操作する URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 39
40.
注意点: iOSでは • iOSでは、webkitTransformスタイル
に、translate2dやtranslateXなどを使う とちらつくので、translate3dを使う URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 40
41.
アニメーションにはGPUを活用 • 大切 • 描画の速さ・滑らかさが段違い •
以下の呪文を使うとGPUでの描画が有効に • -webkit-transform-style: preserve-3d; URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 41
42.
GPUが効いてるかどうか確かめる • iOSの場合
• GPUオーバードローのオプションを 付けてiOSシミュレータ起動 • Androidの場合 • 開発者向けオプションで「GPU オーバードローを有効にする」がつ いている端末を利用 URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 42
43.
例
$ export CA_COLOR_OPAQUE=1 $ open (iOS simulaterのパス) URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 43
44.
ツールバーをネイティブにする • ツールバーやタブバーなどはネイティブ • 中身のみHTML5で記述する •
簡単にアプリっぽくなる URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 44
45.
例
ネイティブ HTML5 ネイティブ URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 45
46.
遷移アニメーションはネイティブで
• 画面を遷移する際のアニメーションにも ネイティブを使うとアプリらしくなる • CSSアニメーションでやると まだ若干重たい URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 46
47.
MonacaFrameworkを使う • PhoneGapを拡張したフレームワーク • ネイティブのUIをJSで制御 •
オープンソース • http://github.com/monaca URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 47
48.
viewportを利用する • モバイルでのHTML5特有の概念 • どの端末でも同じような見た目にするの に必要
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 48
49.
タップイベントの扱い • モバイルでJavaScriptからclickイベントを利用 すると、200ms程度の遅延が発生
• Aタグでも同様なので使わないようにする • tappable.jsのようなタップイベントを検知でき るライブラリを使う https://github.com/cheeaun/tappable URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 49
50.
tappable.jsがやること
• モバイルだと、タッチを扱うための イベントが発行される • touchstart, touchmove, touchend • tappable.jsではこれを補足してタッ プを関知 URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 50
51.
jQueryの代わりにzepto.jsを使う • jQueryのAPIと互換性を持つ • モバイル用に最適化
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 51
52.
画面の傾きを取る • window.orientation
• その時の画面の傾きが入る URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 52
53.
画面の傾きを検知する • window.orientationをsetIntervalで監視 する
• orientationChangeイベントは ポータビリティが低い URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 53
54.
JS/CSSは圧縮しておく • CSSはYUI Compressor等使う •
JSはUgilifyJS等使う • 圧縮して起動を早くする URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 54
55.
気をつけるバグ • orientationの扱い • Android4でcssのorientationがおかしい •
Android4系でassetsから512回読み込 みで落ちるバグ • 開発してみて初めて遭遇するバグ URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 55
56.
セキュリティ • XSSには気をつける
• ネイティブの機能を呼び出せるため • iframeで信頼出来ないURLを呼び出す 際も気をつける URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 56
57.
まとめ
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 57
58.
ハイブリッドアプリは銀の弾丸ではない • レスポンスの遅いアプリができあがる • よく落ちる不安定なアプリが出来上がる •
開発効率が却って悪くなる このような失敗パターンを避けるには? URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 58
59.
実装の切り分け • 何をHTML5で実装するべきか? • 何をネイティブで実装するべきか? •
ネイティブとHTML5の欠点を補い合 うようにする • HTML5だけでやらない URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 59
60.
モバイル特有のノウハウを理解する • PCには無い事情を把握する •
viewport, タッチイベント, orientation • 貧弱なスペックでもなるべく軽く • GPUを活用, CSSアニメーション, リソースの節約 • 各OSのバグを把握する URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 60
61.
お知らせ
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 61
62.
ブース紹介 • B-13でブースを出しています • 話した技術やノウハウはMonacaで使 われています。
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 62
63.
エンジニア、デザイナー募集中! • アシアル株式会社では、エンジニアやデザ
イナーを募集しています。 • 気になる人は僕かブースにいる人に声かけ てください。 URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 63
64.
ご清聴ありがとうございました
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 64
Descargar ahora