More Related Content
Similar to Phone gap+javascriptスマホアプリ開発(入門編) (20)
Phone gap+javascriptスマホアプリ開発(入門編)
- 2. 自己紹介
田中正裕 (たなかまさひろ)
masahiro@asial.co.jp
大学2年生の時にアシアル株式会社を設立、
そのまま代表取締役社長として今に至る。
もともと小学生の時にパソコンを触ったことがきっかけで、
生きている時間の大半をプログラミングして過ごす。東京大
学工学部を卒業、アシアルの事業に忙しくなったため同大学
院を中退。
代表取締役社長として対外的な活動を行いつつ、各プロジェ
クトではコーディングやマネジメントなども担当。
- 4. PhoneGapの扱う範囲
UI/UX
UI設計
ユーザー
エクスペリエンス
HTML5 CSS3
Objective-C
Android Java
クライアント JavaScript
レイヤー
PhoneGap
ミドルレイヤー
PHP Node.js
サーバーレイヤー
MySQL
インフラ
ハードウェア
クラウド
Linux
IaaS
インフラ
- 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)
- 9. HTML5かネイティブか。
“企業としての最大の失敗は http://fb.html5isready.com/
ネイティブアプリではなく
HTML5に賭けすぎたことで
す。時期尚早でした。”と話
した。“iOSアプリにしたら、
利用者のフィードの消費が2
倍になりました。”
“Facebookモバイルアプリケー
ションの動作が遅いのはHTML5の
せいなんかじゃない。 我々は現代
のスマートフォンのブラウザーの
能力やHTML5の豊な能力を知って
いました。”
- 11. HTML5の利点と弱点
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使えない。
• イバラの道。情報量が少なく、仕様変更も多々あり。
•ネイティブと比較できるのは当面先。。。
- 17. Cordova、PhoneGapとは?
オープンソースのハイブリッドアプリ開発ライブラリー
Apacheプロジェクトで開発・メンテナンスされている
PhoneGapが標準でサポートする機能
機能 説明
加速度センサー 端末に内蔵された加速度センサーを読み取り、端
末の傾きを取得する
カメラ 端末のカメラやアルバムにアクセスし、写真を取
得する
ビデオキャプチャー ビデオを録画する
オーディオ録音・再 オーディオを録音したり、再生する
生
コンパス 端末の向きを方位情報として取得する
接続状態確認 OSのネットワーク接続状態を取得する
アドレス帳 OSの連絡帳にアクセスし、情報の入出力を行う
デバイス情報 デバイスのモデル名や端末IDなどの取得や、OS情
報を取得する
ハードウェアボタン Android端末の持つ各種ボタンに対するイベントを
取得する
ファイルシステム OSのファイルシステムにアクセスし、ファイルの
入出力を行う
• Adobe Systems社によりリリースされた際の製品名 GPS GPSセンサーにアクセスし、現在の緯度経度を取
• さまざまなアドビ製ツールとの連携が可能 得する
国際化 OSの利用言語や各種ロケール情報を参照する
バイブレーター バイブレーターを実行する
スプラッシュ操作 起動時に表示されるスプラッシュ画面を制御する
SQLデータベース SQLデータベースにアクセスする
- 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サイトからサインアッ
トがあれば簡単に開発でき
ンストールする プするだけで開発できる
る
- 32. そもそもこれは何?
on
「Monaca」アプリをDLしてログインしてください
メールアドレス: 20130420@monaca.mobi
パスワード: 20130420
- 33. jQuery Mobileを組み込んだデモ
転送
開発 実機で動作
=私 =皆さんのデバッガー
「Monaca」アプリをDLしてログインしてください
メールアドレス: 20130420@monaca.mobi
パスワード: 20130420
- 35. PhoneGapの情報源
コミュニティ
• PhoneGap Blog (USA)
• PhoneGapユーザーグループ
ドキュメント
• マニュアル(日本語版は2.2まで、鋭意翻訳中…)
• 各種Webの記事(ITProやThinkITで連載中)
- 36. まとめ
• jQuery Mobileだけでは、どうしても「jQM臭」
がするアプリになってしまう
• でも、業務利用やサクッと作る場合には便利
• HTML5だけでUIに優れたアプリを作れるよう
になるのは、もう少し先の話かな。