PhoneGapの超概要とPhoneGap 3からサポートされた便利な開発ツールであるCLI（Command-Line Interface）の簡単な説明を紹介しています。

1. Adobe PhoneGap
Introduction
!
!
Adobe Systems

2. 概要編

3. PhoneGapとは
- HTML / CSS / JavaScript をラッピング
Native Shell
WebView

4. ネイティブ機能の呼び出し
- OS固有の機能を共有API（JavaScript）でブリッジ
- JavaScriptの知識でネイティブ機能の利用が可能
JavaScript
OS

5. カメラ機能の呼び出し
camera.getPicture
navigator.camera.getPicture(
onSuccess,
// 第1引数：成功時のコールバック関数名
// 第2引数：失敗 or キャンセル時
onFail,
[ cameraOptions ] // 第3引数：カメラオプション
);

6. サンプルコード
HTML
<button onclick=”capturePhoto()”>撮影</button>
<img id=”myImage” src=”” />
JavaScript
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;
}

7. PhoneGap 標準プラグイン
- Android / iOS はフルサポート
加速度センサー
GPS
カメラ
オーディオ
コンパス
ネットワーク
連絡帳
アラート通知
ファイルアクセス
サウンド通知

8. サードパーティプラグイン
- 強力なコミュニティによるプラグインが存在
§
バーコードリーダー
§
アプリ内課金
§
アプリ内ブラウザ表示
§
デバイスからの通知
§
iAd
§
プッシュ通知
§
アプリケーション設定
§
カレンダー
§
スクーンショット
§
…
§
外部スクリーン
https://github.com/phonegap/phonegap-plugins

9. PhoneGap API Explorer
PhoneGap標準プラグインを試せるPhoneGapアプリ

10. My Heart Camera
- PhoneGapで作られた写真加工アプリ
- Adobe AppBox Awards 2013 ユーティリティ賞

11. 1. ローカルに全て準備
PhoneGap
SDK
ipa
apk
OTA
xap
wgz
ipk

12. 2. アドビのクラウドを利用
PhoneGap
SDK
PhoneGap Build
ipa
apk
OTA
xap
wgz
ipk

13. 開発編

14. CLIで簡単に開発
CLI
Command Line Interface
コマンドラインだけど難しくないよ！

15. PhoneGapのインストール
※事前にNodeJSをインストール
$ sudo npm install -g phonegap
※参考> http://phonegap.com/install/
これでCLIを使う準備は基本的にOK!
※全てローカル環境で開発する場合はスマホOS毎のSDKが別途必要
※スマホOS毎のSDKを準備せずにお手軽開発したい場合は後述の
「CLI + PhoneGap Buildでお手軽開発」を参照

16. 新規プロジェクト作成
CLIを使って新規プロジェクトを作成
$ phonegap create hello
※「hello」は、プロジェクトディレクトリ
パッケージ名とアプリ名を指定して新規プロジェクトを
作成する場合はコチラ↓
$ phonegap hello com.example.hello HelloWorld

17. 新規プロジェクト作成
作成された
「hello」プロジェクト
※サンプルコードを自動生成してくれる
ので、このまま次のステップのビルド&
インストールをすればサンプルアプリを
作れます

18. ビルド&インストール
CLIを使ってビルドとインストールを一括で実行
※ MacにiOSデバイスを繋いでから実行
$ phonegap run ios
※MacがiOSデバイスを認識していない場合は、
iOSシミュレーターに自動フォールバックする
Androidの場合はこちらを参考>
http://www.slideshare.net/fenomas1/phone-gap-quickstart

19. ※runオプションのエラー
MacがiOSデバイスを認識しておらず、かつPhoneGap
コマンドがiOSシミュレーターを見つけられない時に発生
以下の方法でiOSシミュレーターをインストール
$ sudo npm install ios-sim -g
※参考> https://github.com/phonegap/ios-sim

20. CLI + PhoneGap Buildでお手軽開発
ローカルにOS毎のSDKを準備する必要がない！
$ phonegap remote build ios
※事前に http://build.phonegap.com にアカウントを作成
（Adobe ID or GitHubアカウントでもOK）
※事前に http://build.phonegap.com にiOS証明書を登録
参考> 「PhoneGap Buildの使い方」- Adobe Developer Connection
http://www.adobe.com/jp/devnet/phonegap/articles/phonegap_build_instructions.html

21. 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]
- remote [command]
phonegap/build
- help [command]
- version
development on local system
development in cloud with
output usage information
output version number

22. 参照編

23. PhoneGapクイックスタート
- http://www.slideshare.net/fenomas1/phone-gap-quickstart

24. PhoneGapのインストール
- http://phonegap.com/install/

25. PhoneGap API リファレンス
- http://docs.phonegap.com/

26. PhoneGap Build
- https://build.phonegap.com/?locale=ja_JP

27. 「PhoneGap Buildの使い方」
- http://adobe.ly/1hDlQoI

28. Adobe AppBox
- https://appbox.adobe-web.jp/