Submit Search
Upload
Phone gap+javascriptスマホアプリ開発(入門編)
•
14 likes
•
5,620 views
Monaca
Follow
2013/04/20 スマートフォンアプリ開発 勉強会 @ 福岡 での講演資料 http://atnd.org/events/37573#comments
Read less
Read more
Report
Share
Report
Share
1 of 37
Recommended
クロスプラットフォーム開発入門
クロスプラットフォーム開発入門
minazou67
Web is the Platform
Web is the Platform
dynamis
Cordovaの最近ホットな話題と地雷をまとめて紹介
Cordovaの最近ホットな話題と地雷をまとめて紹介
アシアル株式会社
cordova/electronの構造を知る
cordova/electronの構造を知る
Yasuharu Seki
HTML5ハイブリッドアプリ開発のベストプラクティス
HTML5ハイブリッドアプリ開発のベストプラクティス
アシアル株式会社
Introduction to web development 1
Introduction to web development 1
hideaki honda
Monacaでつくるハイブリッドアプリ
Monacaでつくるハイブリッドアプリ
Monaca
HTML5スマートフォン業務アプリ開発セミナー(応用)テキストの抜粋
HTML5スマートフォン業務アプリ開発セミナー(応用)テキストの抜粋
Staffnet_Inc
Recommended
クロスプラットフォーム開発入門
クロスプラットフォーム開発入門
minazou67
Web is the Platform
Web is the Platform
dynamis
Cordovaの最近ホットな話題と地雷をまとめて紹介
Cordovaの最近ホットな話題と地雷をまとめて紹介
アシアル株式会社
cordova/electronの構造を知る
cordova/electronの構造を知る
Yasuharu Seki
HTML5ハイブリッドアプリ開発のベストプラクティス
HTML5ハイブリッドアプリ開発のベストプラクティス
アシアル株式会社
Introduction to web development 1
Introduction to web development 1
hideaki honda
Monacaでつくるハイブリッドアプリ
Monacaでつくるハイブリッドアプリ
Monaca
HTML5スマートフォン業務アプリ開発セミナー(応用)テキストの抜粋
HTML5スマートフォン業務アプリ開発セミナー(応用)テキストの抜粋
Staffnet_Inc
企画者が押さえておきたいHtml5アプリ開発の要点
企画者が押さえておきたいHtml5アプリ開発の要点
Monaca
中規模Androidアプリ開発の過程に生じた問題と対策の紹介
中規模Androidアプリ開発の過程に生じた問題と対策の紹介
NilOne Ltd.
Single-page application
Single-page application
Fumio SAGAWA
HTML5 in Firefox4
HTML5 in Firefox4
dynamis
いまさら聞けない!HTML5超入門
いまさら聞けない!HTML5超入門
Monaca
【17-A-1】Mobile Future Conference開会のご挨拶/世界へ挑むDeNAの「X-border」「X-device」戦略
【17-A-1】Mobile Future Conference開会のご挨拶/世界へ挑むDeNAの「X-border」「X-device」戦略
Developers Summit
Dev camp2012jpn day2special
Dev camp2012jpn day2special
Katsuhito Katoh
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める ...
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める ...
Developer Camp 2012 Japan Fall
ソニーでElectronアプリをリリースしてみた
ソニーでElectronアプリをリリースしてみた
Yasuharu Seki
Pure Web Apps
Pure Web Apps
dynamis
モダンWeb開発ワークショップ
モダンWeb開発ワークショップ
Staffnet_Inc
Visual Studio 2015 を使用した Cordova アプリの開発
Visual Studio 2015 を使用した Cordova アプリの開発
Osamu Monoe
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
Tsutomu Ogasawara
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Shin Ogata
NSA NB委員会セミナー「モバイルアプリ開発業務におけるmonacaの活用」
NSA NB委員会セミナー「モバイルアプリ開発業務におけるmonacaの活用」
アシアル株式会社
エンタープライズ・モバイルアプリにおける ハイブリッドアプリ開発
エンタープライズ・モバイルアプリにおける ハイブリッドアプリ開発
日本Cordovaユーザー会
もっと良くなるHTMLアプリケーション設計と実装
もっと良くなるHTMLアプリケーション設計と実装
Mitsue-Links
20140902 HTML5プロフェッショナル認定試験対策講座
20140902 HTML5プロフェッショナル認定試験対策講座
leverages_event
事例で解説するハイブリッドアプリ開発のポイント
事例で解説するハイブリッドアプリ開発のポイント
Monaca
はやわかりHTML5ハイブリッドアプリ開発事情
はやわかりHTML5ハイブリッドアプリ開発事情
Monaca
HTML5 クロスプラットフォームアプリ開発の現実解
HTML5 クロスプラットフォームアプリ開発の現実解
Monaca
Webエンジニアによるスマートフォンアプリ開発
Webエンジニアによるスマートフォンアプリ開発
takeuchi-tk
More Related Content
What's hot
企画者が押さえておきたいHtml5アプリ開発の要点
企画者が押さえておきたいHtml5アプリ開発の要点
Monaca
中規模Androidアプリ開発の過程に生じた問題と対策の紹介
中規模Androidアプリ開発の過程に生じた問題と対策の紹介
NilOne Ltd.
Single-page application
Single-page application
Fumio SAGAWA
HTML5 in Firefox4
HTML5 in Firefox4
dynamis
いまさら聞けない!HTML5超入門
いまさら聞けない!HTML5超入門
Monaca
【17-A-1】Mobile Future Conference開会のご挨拶/世界へ挑むDeNAの「X-border」「X-device」戦略
【17-A-1】Mobile Future Conference開会のご挨拶/世界へ挑むDeNAの「X-border」「X-device」戦略
Developers Summit
Dev camp2012jpn day2special
Dev camp2012jpn day2special
Katsuhito Katoh
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める ...
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める ...
Developer Camp 2012 Japan Fall
ソニーでElectronアプリをリリースしてみた
ソニーでElectronアプリをリリースしてみた
Yasuharu Seki
Pure Web Apps
Pure Web Apps
dynamis
モダンWeb開発ワークショップ
モダンWeb開発ワークショップ
Staffnet_Inc
Visual Studio 2015 を使用した Cordova アプリの開発
Visual Studio 2015 を使用した Cordova アプリの開発
Osamu Monoe
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
Tsutomu Ogasawara
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Shin Ogata
NSA NB委員会セミナー「モバイルアプリ開発業務におけるmonacaの活用」
NSA NB委員会セミナー「モバイルアプリ開発業務におけるmonacaの活用」
アシアル株式会社
エンタープライズ・モバイルアプリにおける ハイブリッドアプリ開発
エンタープライズ・モバイルアプリにおける ハイブリッドアプリ開発
日本Cordovaユーザー会
もっと良くなるHTMLアプリケーション設計と実装
もっと良くなるHTMLアプリケーション設計と実装
Mitsue-Links
20140902 HTML5プロフェッショナル認定試験対策講座
20140902 HTML5プロフェッショナル認定試験対策講座
leverages_event
事例で解説するハイブリッドアプリ開発のポイント
事例で解説するハイブリッドアプリ開発のポイント
Monaca
はやわかりHTML5ハイブリッドアプリ開発事情
はやわかりHTML5ハイブリッドアプリ開発事情
Monaca
What's hot
(20)
企画者が押さえておきたいHtml5アプリ開発の要点
企画者が押さえておきたいHtml5アプリ開発の要点
中規模Androidアプリ開発の過程に生じた問題と対策の紹介
中規模Androidアプリ開発の過程に生じた問題と対策の紹介
Single-page application
Single-page application
HTML5 in Firefox4
HTML5 in Firefox4
いまさら聞けない!HTML5超入門
いまさら聞けない!HTML5超入門
【17-A-1】Mobile Future Conference開会のご挨拶/世界へ挑むDeNAの「X-border」「X-device」戦略
【17-A-1】Mobile Future Conference開会のご挨拶/世界へ挑むDeNAの「X-border」「X-device」戦略
Dev camp2012jpn day2special
Dev camp2012jpn day2special
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める ...
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める ...
ソニーでElectronアプリをリリースしてみた
ソニーでElectronアプリをリリースしてみた
Pure Web Apps
Pure Web Apps
モダンWeb開発ワークショップ
モダンWeb開発ワークショップ
Visual Studio 2015 を使用した Cordova アプリの開発
Visual Studio 2015 を使用した Cordova アプリの開発
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
NSA NB委員会セミナー「モバイルアプリ開発業務におけるmonacaの活用」
NSA NB委員会セミナー「モバイルアプリ開発業務におけるmonacaの活用」
エンタープライズ・モバイルアプリにおける ハイブリッドアプリ開発
エンタープライズ・モバイルアプリにおける ハイブリッドアプリ開発
もっと良くなるHTMLアプリケーション設計と実装
もっと良くなるHTMLアプリケーション設計と実装
20140902 HTML5プロフェッショナル認定試験対策講座
20140902 HTML5プロフェッショナル認定試験対策講座
事例で解説するハイブリッドアプリ開発のポイント
事例で解説するハイブリッドアプリ開発のポイント
はやわかりHTML5ハイブリッドアプリ開発事情
はやわかりHTML5ハイブリッドアプリ開発事情
Similar to Phone gap+javascriptスマホアプリ開発(入門編)
HTML5 クロスプラットフォームアプリ開発の現実解
HTML5 クロスプラットフォームアプリ開発の現実解
Monaca
Webエンジニアによるスマートフォンアプリ開発
Webエンジニアによるスマートフォンアプリ開発
takeuchi-tk
Html5 seminar 1_pac
Html5 seminar 1_pac
1PAC. INC.
Firefox OS - Blaze Your Own Path
Firefox OS - Blaze Your Own Path
dynamis
Phone gap
Phone gap
Tomoyuki Kashiro
これからのNOTESモバイルアプリはこう作れ
これからのNOTESモバイルアプリはこう作れ
Mitsuru Katoh
HTML5でできるカメラアプリを実際に体験しよう
HTML5でできるカメラアプリを実際に体験しよう
Hideki Akiba
デバイス WebAPI設計の進め方
デバイス WebAPI設計の進め方
Device WebAPI Consortium
Sharoid Service Menu
Sharoid Service Menu
sharoid
【デブサミ関西2014】Web技術で作るエンタープライズアプリ
【デブサミ関西2014】Web技術で作るエンタープライズアプリ
アシアル株式会社
PhoneGapでWebアプリをスマホアプリ化
PhoneGapでWebアプリをスマホアプリ化
Takashi Okamoto
HTML5 with PhoneGap
HTML5 with PhoneGap
Kazuya Hiruma
Xamarin 概要 2014年08月版
Xamarin 概要 2014年08月版
Yoshito Tabuchi
Universal Appとは? -デバイスに依存しないアプリケーション開発-
Universal Appとは? -デバイスに依存しないアプリケーション開発-
Takaaki Suzuki
Try Firefox OS
Try Firefox OS
dynamis
みなさんがHtml5をやらなくていい3つの理由
みなさんがHtml5をやらなくていい3つの理由
Masakazu Muraoka
C#でのクロスプラットフォーム モバイル開発環境 Xamarin のご紹介
C#でのクロスプラットフォーム モバイル開発環境 Xamarin のご紹介
Yoshito Tabuchi
Windows Phoneで始める拡張現実の世界
Windows Phoneで始める拡張現実の世界
Akira Hatsune
Web標準化 (W3C) とHTML5の状況 Remix
Web標準化 (W3C) とHTML5の状況 Remix
Yasuhisa Hasegawa
ハイブリッドアプリ開発最前線から見たHtml5の理想と現実
ハイブリッドアプリ開発最前線から見たHtml5の理想と現実
Monaca
Similar to Phone gap+javascriptスマホアプリ開発(入門編)
(20)
HTML5 クロスプラットフォームアプリ開発の現実解
HTML5 クロスプラットフォームアプリ開発の現実解
Webエンジニアによるスマートフォンアプリ開発
Webエンジニアによるスマートフォンアプリ開発
Html5 seminar 1_pac
Html5 seminar 1_pac
Firefox OS - Blaze Your Own Path
Firefox OS - Blaze Your Own Path
Phone gap
Phone gap
これからのNOTESモバイルアプリはこう作れ
これからのNOTESモバイルアプリはこう作れ
HTML5でできるカメラアプリを実際に体験しよう
HTML5でできるカメラアプリを実際に体験しよう
デバイス WebAPI設計の進め方
デバイス WebAPI設計の進め方
Sharoid Service Menu
Sharoid Service Menu
【デブサミ関西2014】Web技術で作るエンタープライズアプリ
【デブサミ関西2014】Web技術で作るエンタープライズアプリ
PhoneGapでWebアプリをスマホアプリ化
PhoneGapでWebアプリをスマホアプリ化
HTML5 with PhoneGap
HTML5 with PhoneGap
Xamarin 概要 2014年08月版
Xamarin 概要 2014年08月版
Universal Appとは? -デバイスに依存しないアプリケーション開発-
Universal Appとは? -デバイスに依存しないアプリケーション開発-
Try Firefox OS
Try Firefox OS
みなさんがHtml5をやらなくていい3つの理由
みなさんがHtml5をやらなくていい3つの理由
C#でのクロスプラットフォーム モバイル開発環境 Xamarin のご紹介
C#でのクロスプラットフォーム モバイル開発環境 Xamarin のご紹介
Windows Phoneで始める拡張現実の世界
Windows Phoneで始める拡張現実の世界
Web標準化 (W3C) とHTML5の状況 Remix
Web標準化 (W3C) とHTML5の状況 Remix
ハイブリッドアプリ開発最前線から見たHtml5の理想と現実
ハイブリッドアプリ開発最前線から見たHtml5の理想と現実
More from 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
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
HTML5ハイブリッド アプリ開発実践編
HTML5ハイブリッド アプリ開発実践編
Monaca
ICT ERA+ABC 2012東北講演
ICT ERA+ABC 2012東北講演
Monaca
事例で学ぶHTML5スマフォアプリ開発セミナー
事例で学ぶHTML5スマフォアプリ開発セミナー
Monaca
More from 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 スーパー勉強会
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ハイブリッド アプリ開発実践編
ICT ERA+ABC 2012東北講演
ICT ERA+ABC 2012東北講演
事例で学ぶHTML5スマフォアプリ開発セミナー
事例で学ぶHTML5スマフォアプリ開発セミナー
Phone gap+javascriptスマホアプリ開発(入門編)
1.
PhoneGap + JavaScript スマフォアプリ開発(入門編)
2013年4月20日 スマートフォンアプリ開発勉強会 アシアル株式会社 田中正裕 ※ 後で資料を公開して、ATNDにURLを貼っておきます
2.
自己紹介 田中正裕 (たなかまさひろ)
masahiro@asial.co.jp 大学2年生の時にアシアル株式会社を設立、 そのまま代表取締役社長として今に至る。 もともと小学生の時にパソコンを触ったことがきっかけで、 生きている時間の大半をプログラミングして過ごす。東京大 学工学部を卒業、アシアルの事業に忙しくなったため同大学 院を中退。 代表取締役社長として対外的な活動を行いつつ、各プロジェ クトではコーディングやマネジメントなども担当。
3.
アシアル株式会社紹介 アシアル株式会社は、これまで培ってきたサーバーサイド技術をもとに、 HTML5やJavaScriptといったクライアント技術を高い次元で組み合わせ、 優れたユーザーエクスペリエンスを持つアプリケーションを提案します。
アシアルブログ 企業サイト 不定期で弊社エンジニアやデザイナーが興味の 弊社が開発・販売している各種製品やサービ ある技術テーマを配信します。 スへのリンク、スクールの情報などが掲載さ れています。
4.
PhoneGapの扱う範囲
UI/UX UI設計 ユーザー エクスペリエンス HTML5 CSS3 Objective-C Android Java クライアント JavaScript レイヤー PhoneGap ミドルレイヤー PHP Node.js サーバーレイヤー MySQL インフラ ハードウェア クラウド Linux IaaS インフラ
5.
第1章 PhoneGapの何が良いの?
6.
PhoneGapを使うと…
HTML5(+JavaScript、CSS)で スマホのネイティブアプリが作れます。 「ハイブリッドアプリ」 と言います
7.
HTML5はHTMLの最新バージョン
HTML 5.0 HTML2.0 HTML3.2 HTML4.0 HTML1.0 1995年 1997年 1997年~ 2008年 ドラフト 2014年正式勧告予定 「Snapshot版」 XHTML1.0 2000年 「HTML Living Standard版」 → WHATWG (Apple・Mozilla・Opera)
8.
モバイル分野で先行するHTML5 スマートデバイス分野ではHTML5がすでにスタンダード iPhoneやAndroidなど、スマートデバイスでは早くからHTML5を標準サポート
ぜんぶPhoneGapで対応 一方、PC向けWebサイトのHTML5対応はこれから Internet Explorer 10で本格的にサポート Firefox、Chrome、Safariは 早い段階でHTML5対応 CSS3だけで作成した「ドラえもん」 shopdd.blog51.fc2.com/blog-entry-932.html 日本におけるブラウザーシェア 2012年11月
9.
HTML5かネイティブか。 “企業としての最大の失敗は
http://fb.html5isready.com/ ネイティブアプリではなく HTML5に賭けすぎたことで す。時期尚早でした。”と話 した。“iOSアプリにしたら、 利用者のフィードの消費が2 倍になりました。” “Facebookモバイルアプリケー ションの動作が遅いのはHTML5の せいなんかじゃない。 我々は現代 のスマートフォンのブラウザーの 能力やHTML5の豊な能力を知って いました。”
10.
HTML5の利点と弱点
出典: Developer Economics 2013
11.
HTML5の利点と弱点
HTML5を選択した理由 ・クロスプラットフォームのコード 移植性 ・低コスト開発 ・クロススクリーンのコード移植性 ・学習コストの低さ ・オープンソース ・リーチ(検索エンジンなど) ・開発コミュニティーの充実
12.
HTML5の利点と弱点 HTML5のネイティブと比べた弱点 ・ネイティブAPIが利用不可 ・より優れた開発環境 ・HTML5最適化された端末が無い ・より優れたデバッグ環境 ・迅速な標準化
13.
HTML5で埋まらないギャップ クロスプラットフォーム技術としてHTML5が主流だが、デバイス性能 を最大限に発揮することは困難
NFCやカメラなどの端末機能や、3Dアニメーションなどは ネイティブアプリでないと開発できない 開発の難易度 デバイスの特殊な機能を用いたい場合 • Bluetooth通信 • デバイス内のファイル読み書き クロスプラット OS独自機能の活 フォーム 用 • NFCとか OSの機能を用いたい場合 • プッシュ通信 メンテナンス性 端末性能の発揮 • GameCenterやPassbookなどへの対応 • ホーム画面のウィジェット ハードウェア能力を最大限用いたい場合 HTML5アプリ(Web) ネイティブアプリ • 高度なアニメーション(3D、OpenGL等) • ポインターによる高速演算など
14.
ハイブリッドアプリの登場
HTML5を内部の WebView (ブラウザ) で実行 メリット: • HTML/CSS/JavaScriptでモバイルOSにアプリを提供できる(クロスプラットフォーム性) • 端末にアプリをインストールできるため、ローカルで動作可能 • デバイスの機能(カメラ、ファイル読み書き…etc)にアクセス可能 デメリット: • 実行速度は各OSのブラウザーと同じぐらい。ただしiOSではNitro使えない。 • イバラの道。情報量が少なく、仕様変更も多々あり。 •ネイティブと比較できるのは当面先。。。
15.
ハイブリッド化を後押しするもの BYOD・コンシューマライゼーションへの適用性 『2016年には、企業向けアプリの50%以上はハイブリッドアプリとなるだろう』
-2013年2月4日、Gartner 低コスト・RADなソリューションとしての開発手法 プロトタイプと本開発を一気に進められる Windows 8、Firefox OS、Tizenなどの新プラットフォームにおいても、ハ イブリッドアプリを低コストに移植可能 新しいプラットフォームは、ネイティブでHTML5アプリが動作する
16.
ハイブリッドアプリの例 (アシアル実績) auヘッドライン
名刺管理: Eight テレ朝動画アプリ シューズファインダー KDDI株式会社 © 三三株式会社 © 株式会社テレビ朝日 © 株式会社アシックス
17.
Cordova、PhoneGapとは?
オープンソースのハイブリッドアプリ開発ライブラリー Apacheプロジェクトで開発・メンテナンスされている PhoneGapが標準でサポートする機能 機能 説明 加速度センサー 端末に内蔵された加速度センサーを読み取り、端 末の傾きを取得する カメラ 端末のカメラやアルバムにアクセスし、写真を取 得する ビデオキャプチャー ビデオを録画する オーディオ録音・再 オーディオを録音したり、再生する 生 コンパス 端末の向きを方位情報として取得する 接続状態確認 OSのネットワーク接続状態を取得する アドレス帳 OSの連絡帳にアクセスし、情報の入出力を行う デバイス情報 デバイスのモデル名や端末IDなどの取得や、OS情 報を取得する ハードウェアボタン Android端末の持つ各種ボタンに対するイベントを 取得する ファイルシステム OSのファイルシステムにアクセスし、ファイルの 入出力を行う • Adobe Systems社によりリリースされた際の製品名 GPS GPSセンサーにアクセスし、現在の緯度経度を取 • さまざまなアドビ製ツールとの連携が可能 得する 国際化 OSの利用言語や各種ロケール情報を参照する バイブレーター バイブレーターを実行する スプラッシュ操作 起動時に表示されるスプラッシュ画面を制御する SQLデータベース SQLデータベースにアクセスする
18.
PhoneGap Build
PhoneGap Build: クラウドビルドサービス
19.
PhoneGapの仕組み
GPS HTML5/JavaScript/CSS3 ネイティブコード アプリのパッケージ内 カメラ サーバーとの通信は Webアプリではアクセスでき Ajaxの技術を応用 ない各種ネイティブAPIを実 行できる 連絡帳など
20.
PhoneGapアプリの特徴
HTML5アプリ PhoneGapアプリ ネイティブアプリ 開発言語 HTML5とJavaScript Objective-CやJava JavaScriptから Webブラウザーが備える 端末やOSが持つすべての 機能 ネイティブの機能を 機能のみ利用可能 機能を利用可能 呼び出せる 通常のWeb開発環境 XcodeやEclipseといったOSごとの開発環境 開発環境 エディタ、Dreamweaver等 (もしくはMonacaやPhoneGap Build) ○ × クロスプラットフォーム 同じJavaScriptコードを流用可 開発言語自体が異なる △ ○ ◎ 実行速度 Webブラウザーが実行エン ソースコードを端末上に保 OSが直接実行する ジン 存することが可能 × ◎ オフライン対応 キャッシュを用いて一部オ 端末内にプログラムが配置 フライン対応も可能 Webサイトにアクセス アプリの配布方法 マーケットの登録が原則 マーケットへの登録は不可 ネイティブ部分はマーケッ アップデートのたびにマー サーバーから配信するため ト経由の更新。HTML5部分 メンテナンス方法 ケット登録。更新はユー 常に最新状態をキープ可能 は任意のタイミングで更新 ザー次第 可能
21.
他の開発手法との違い
PhoneGap Titanium Unity 3D Webアプリ HTML5、CSS3、 HTML5、CSS3、 開発言語 JavaScript JavaScript / C# JavaScript JavaScript XCodeや Dreamweaverや 開発環境 Titanium Studio 独自環境 Eclipse エディター マーケットへの ○ ○ ○ × 配布 ネイティブ対応 ○ ○ ○ × アプリ実行速度 △ ○ ○ × Webアプリをネ JavaScriptでア ゲームアプリ開 ブラウザー上で 目的 イティブ化 プリ開発 発環境 動作
22.
PhoneGapアプリの開発環境
DreamWeaver/Bracket+PG Eclipse、XCode Monaca Platform Build Webプロフェッショナル向 ネイティブ開発者向け 初心者、入門者向け 無料! け App Storeからデバッガーを シミュレーターもしくは実 PhoneGap Buildを使うと実 ダウンロードして実機で確 機で確認 機にインストール可能 認、ビルド機能も搭載 対応製品+PGBuildアカウン 各OSのSDKをローカルにイ Webサイトからサインアッ トがあれば簡単に開発でき ンストールする プするだけで開発できる る
23.
JavaScriptフレームワーク PhoneGapではユーザーインターフェース機能は提供されないた め、別途HTML5対応のモバイルUIライブラリーを用意する。
24.
第2章 PhoneGapでHello World
25.
用意するもの(Android版) Android SDKをインストールしたPC
Android端末(もしくはエミュレータ) Eclipse (Android SDKに同梱) PhoneGap SDK
26.
デモ with PhoneGap for
Android
27.
いかがでしたか? ある程度ネイティブアプリ開発の知識が必要にな ります。 また、当然ですがiPhone版はXcodeを使って別に 作る必要あり。
28.
第3章 jQuery Mobileを使ってアプリっぽく
29.
祝☆jQuery 2.0リリース jQuery 2.0のリリースで、IE6~8対応は切り捨てら れました。その分、コード量が少なくなり、パ フォーマンスもUPしています
30.
jQuery Mobileとは? jQueryの上に作られた、モバイルアプリのUIを提 供するためのライブラリー。一般的なスマホのUI を、HTML5とjQueryの機能で描画できる。 PhoneGapと組み合わるだけでなく、一般のWeb に対して利用することも可能。
31.
次に作るアプリ jQuery Mobileを使った簡単な写真撮影アプリ 実際に皆さんのスマホ上で動かしてみるので、 「Monaca」というアプリをインストールして、下 記のIDとパスワードでログインしてください。
メールアドレス: 20130420@monaca.mobi パスワード: 20130420 こんなアイコン
32.
そもそもこれは何?
on 「Monaca」アプリをDLしてログインしてください メールアドレス: 20130420@monaca.mobi パスワード: 20130420
33.
jQuery Mobileを組み込んだデモ
転送 開発 実機で動作 =私 =皆さんのデバッガー 「Monaca」アプリをDLしてログインしてください メールアドレス: 20130420@monaca.mobi パスワード: 20130420
34.
デモ with jQuery Mobile
on Monaca
35.
PhoneGapの情報源 コミュニティ •
PhoneGap Blog (USA) • PhoneGapユーザーグループ ドキュメント • マニュアル(日本語版は2.2まで、鋭意翻訳中…) • 各種Webの記事(ITProやThinkITで連載中)
36.
まとめ •
jQuery Mobileだけでは、どうしても「jQM臭」 がするアプリになってしまう • でも、業務利用やサクッと作る場合には便利 • HTML5だけでUIに優れたアプリを作れるよう になるのは、もう少し先の話かな。
37.
ご清聴ありがとうございました