phonegap introduction
DESCRIPTION
PhoneGapの超概要とPhoneGap 3からサポートされた便利な開発ツールであるCLI(Command-Line Interface)の簡単な説明を紹介しています。TRANSCRIPT
![Page 1: PhoneGap Introduction](https://reader035.vdocuments.net/reader035/viewer/2022081403/5565fb42d8b42a20158b547f/html5/thumbnails/1.jpg)
Adobe PhoneGap Introduction
!!
Adobe Systems
![Page 2: PhoneGap Introduction](https://reader035.vdocuments.net/reader035/viewer/2022081403/5565fb42d8b42a20158b547f/html5/thumbnails/2.jpg)
概要編
![Page 3: PhoneGap Introduction](https://reader035.vdocuments.net/reader035/viewer/2022081403/5565fb42d8b42a20158b547f/html5/thumbnails/3.jpg)
- HTML / CSS / JavaScript をラッピング
PhoneGapとは
Native Shell
WebView
![Page 4: PhoneGap Introduction](https://reader035.vdocuments.net/reader035/viewer/2022081403/5565fb42d8b42a20158b547f/html5/thumbnails/4.jpg)
ネイティブ機能の呼び出し- OS固有の機能を共有API(JavaScript)でブリッジ
- JavaScriptの知識でネイティブ機能の利用が可能
JavaScript
OS
![Page 5: PhoneGap Introduction](https://reader035.vdocuments.net/reader035/viewer/2022081403/5565fb42d8b42a20158b547f/html5/thumbnails/5.jpg)
navigator.camera.getPicture( onSuccess, onFail, [ cameraOptions ] );
camera.getPicture
カメラ機能の呼び出し
// 第1引数:成功時のコールバック関数名// 第2引数:失敗 or キャンセル時// 第3引数:カメラオプション
![Page 6: PhoneGap Introduction](https://reader035.vdocuments.net/reader035/viewer/2022081403/5565fb42d8b42a20158b547f/html5/thumbnails/6.jpg)
function capturePhoto() { navigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.DATA_URL }); }
function onSuccess(imageData) { var image = document.getElementById('myImage'); image.src = "data:image/jpeg;base64," + imageData; }
<button onclick=”capturePhoto()”>撮影</button> <img id=”myImage” src=”” />
HTML
JavaScript
サンプルコード
![Page 7: PhoneGap Introduction](https://reader035.vdocuments.net/reader035/viewer/2022081403/5565fb42d8b42a20158b547f/html5/thumbnails/7.jpg)
PhoneGap 標準プラグイン- Android / iOS はフルサポート
加速度センサー
カメラ
コンパス
連絡帳
ファイルアクセス
GPS
オーディオ
ネットワーク
アラート通知
サウンド通知
![Page 8: PhoneGap Introduction](https://reader035.vdocuments.net/reader035/viewer/2022081403/5565fb42d8b42a20158b547f/html5/thumbnails/8.jpg)
サードパーティプラグイン- 強力なコミュニティによるプラグインが存在
§ バーコードリーダー
§ アプリ内ブラウザ表示
§ iAd
§ アプリケーション設定
§ スクーンショット
§ 外部スクリーン
§ アプリ内課金
§ デバイスからの通知
§ プッシュ通知
§ カレンダー
§ …
https://github.com/phonegap/phonegap-plugins
![Page 9: PhoneGap Introduction](https://reader035.vdocuments.net/reader035/viewer/2022081403/5565fb42d8b42a20158b547f/html5/thumbnails/9.jpg)
PhoneGap API ExplorerPhoneGap標準プラグインを試せるPhoneGapアプリ
![Page 10: PhoneGap Introduction](https://reader035.vdocuments.net/reader035/viewer/2022081403/5565fb42d8b42a20158b547f/html5/thumbnails/10.jpg)
My Heart Camera- PhoneGapで作られた写真加工アプリ
- Adobe AppBox Awards 2013 ユーティリティ賞
![Page 11: PhoneGap Introduction](https://reader035.vdocuments.net/reader035/viewer/2022081403/5565fb42d8b42a20158b547f/html5/thumbnails/11.jpg)
ipa apk OTAxap wgz ipk
1. ローカルに全て準備
PhoneGap
SDK
![Page 12: PhoneGap Introduction](https://reader035.vdocuments.net/reader035/viewer/2022081403/5565fb42d8b42a20158b547f/html5/thumbnails/12.jpg)
ipa apk OTAxap wgz ipk
2. アドビのクラウドを利用
PhoneGap
SDK
PhoneGap Build
![Page 13: PhoneGap Introduction](https://reader035.vdocuments.net/reader035/viewer/2022081403/5565fb42d8b42a20158b547f/html5/thumbnails/13.jpg)
開発編
![Page 14: PhoneGap Introduction](https://reader035.vdocuments.net/reader035/viewer/2022081403/5565fb42d8b42a20158b547f/html5/thumbnails/14.jpg)
CLIで簡単に開発
CLICommand Line Interface
コマンドラインだけど難しくないよ!
![Page 15: PhoneGap Introduction](https://reader035.vdocuments.net/reader035/viewer/2022081403/5565fb42d8b42a20158b547f/html5/thumbnails/15.jpg)
PhoneGapのインストール
$ sudo npm install -g phonegap
これでCLIを使う準備は基本的にOK!
※参考> http://phonegap.com/install/
※事前にNodeJSをインストール
※全てローカル環境で開発する場合はスマホOS毎のSDKが別途必要※スマホOS毎のSDKを準備せずにお手軽開発したい場合は後述の 「CLI + PhoneGap Buildでお手軽開発」を参照
![Page 16: PhoneGap Introduction](https://reader035.vdocuments.net/reader035/viewer/2022081403/5565fb42d8b42a20158b547f/html5/thumbnails/16.jpg)
新規プロジェクト作成
$ phonegap create hello
パッケージ名とアプリ名を指定して新規プロジェクトを作成する場合はコチラ↓
$ phonegap hello com.example.hello HelloWorld
※「hello」は、プロジェクトディレクトリ
CLIを使って新規プロジェクトを作成
![Page 17: PhoneGap Introduction](https://reader035.vdocuments.net/reader035/viewer/2022081403/5565fb42d8b42a20158b547f/html5/thumbnails/17.jpg)
新規プロジェクト作成
作成された「hello」プロジェクト
※サンプルコードを自動生成してくれるので、このまま次のステップのビルド&インストールをすればサンプルアプリを作れます
![Page 18: PhoneGap Introduction](https://reader035.vdocuments.net/reader035/viewer/2022081403/5565fb42d8b42a20158b547f/html5/thumbnails/18.jpg)
ビルド&インストール
$ phonegap run ios
CLIを使ってビルドとインストールを一括で実行
※ MacにiOSデバイスを繋いでから実行
※MacがiOSデバイスを認識していない場合は、iOSシミュレーターに自動フォールバックする
Androidの場合はこちらを参考>http://www.slideshare.net/fenomas1/phone-gap-quickstart
![Page 19: PhoneGap Introduction](https://reader035.vdocuments.net/reader035/viewer/2022081403/5565fb42d8b42a20158b547f/html5/thumbnails/19.jpg)
※runオプションのエラー
以下の方法でiOSシミュレーターをインストール$ sudo npm install ios-sim -g
MacがiOSデバイスを認識しておらず、かつPhoneGapコマンドがiOSシミュレーターを見つけられない時に発生
※参考> https://github.com/phonegap/ios-sim
![Page 20: PhoneGap Introduction](https://reader035.vdocuments.net/reader035/viewer/2022081403/5565fb42d8b42a20158b547f/html5/thumbnails/20.jpg)
CLI + PhoneGap Buildでお手軽開発
$ phonegap remote build ios
※事前に http://build.phonegap.com にiOS証明書を登録
ローカルにOS毎のSDKを準備する必要がない!
http://www.adobe.com/jp/devnet/phonegap/articles/phonegap_build_instructions.html参考> 「PhoneGap Buildの使い方」- Adobe Developer Connection
※事前に http://build.phonegap.com にアカウントを作成(Adobe ID or GitHubアカウントでもOK)
![Page 21: PhoneGap Introduction](https://reader035.vdocuments.net/reader035/viewer/2022081403/5565fb42d8b42a20158b547f/html5/thumbnails/21.jpg)
CLIのオプション- create <path> create a phonegap project
- build <platform> build a specific platform
- install <platform> install a specific platform
- run <platform> build and install a specific platform
- local [command] development on local system
- remote [command] development in cloud with phonegap/build
- help [command] output usage information
- version output version number
![Page 22: PhoneGap Introduction](https://reader035.vdocuments.net/reader035/viewer/2022081403/5565fb42d8b42a20158b547f/html5/thumbnails/22.jpg)
参照編
![Page 23: PhoneGap Introduction](https://reader035.vdocuments.net/reader035/viewer/2022081403/5565fb42d8b42a20158b547f/html5/thumbnails/23.jpg)
PhoneGapクイックスタート- http://www.slideshare.net/fenomas1/phone-gap-quickstart
![Page 29: PhoneGap Introduction](https://reader035.vdocuments.net/reader035/viewer/2022081403/5565fb42d8b42a20158b547f/html5/thumbnails/29.jpg)