PhoneGap Introduction

2,940 views

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,940
On SlideShare
0
From Embeds
0
Number of Embeds
1,432
Actions
Shares
0
Downloads
9
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

PhoneGap Introduction

  1. 1. Adobe PhoneGap Introduction ! ! Adobe Systems
  2. 2. 概要編
  3. 3. PhoneGapとは - HTML / CSS / JavaScript をラッピング Native Shell WebView
  4. 4. ネイティブ機能の呼び出し - OS固有の機能を共有API(JavaScript)でブリッジ - JavaScriptの知識でネイティブ機能の利用が可能 JavaScript OS
  5. 5. カメラ機能の呼び出し camera.getPicture navigator.camera.getPicture( onSuccess, // 第1引数:成功時のコールバック関数名 // 第2引数:失敗 or キャンセル時 onFail, [ cameraOptions ] // 第3引数:カメラオプション );
  6. 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. 7. PhoneGap 標準プラグイン - Android / iOS はフルサポート 加速度センサー GPS カメラ オーディオ コンパス ネットワーク 連絡帳 アラート通知 ファイルアクセス サウンド通知
  8. 8. サードパーティプラグイン - 強力なコミュニティによるプラグインが存在 § バーコードリーダー § アプリ内課金 § アプリ内ブラウザ表示 § デバイスからの通知 § iAd § プッシュ通知 § アプリケーション設定 § カレンダー § スクーンショット § … § 外部スクリーン https://github.com/phonegap/phonegap-plugins
  9. 9. PhoneGap API Explorer PhoneGap標準プラグインを試せるPhoneGapアプリ
  10. 10. My Heart Camera - PhoneGapで作られた写真加工アプリ - Adobe AppBox Awards 2013 ユーティリティ賞
  11. 11. 1. ローカルに全て準備 PhoneGap SDK ipa apk OTA xap wgz ipk
  12. 12. 2. アドビのクラウドを利用 PhoneGap SDK PhoneGap Build ipa apk OTA xap wgz ipk
  13. 13. 開発編
  14. 14. CLIで簡単に開発 CLI Command Line Interface コマンドラインだけど難しくないよ!
  15. 15. PhoneGapのインストール ※事前にNodeJSをインストール $ sudo npm install -g phonegap ※参考> http://phonegap.com/install/ これでCLIを使う準備は基本的にOK! ※全てローカル環境で開発する場合はスマホOS毎のSDKが別途必要 ※スマホOS毎のSDKを準備せずにお手軽開発したい場合は後述の
 「CLI + PhoneGap Buildでお手軽開発」を参照
  16. 16. 新規プロジェクト作成 CLIを使って新規プロジェクトを作成 $ phonegap create hello ※「hello」は、プロジェクトディレクトリ パッケージ名とアプリ名を指定して新規プロジェクトを
 作成する場合はコチラ↓ $ phonegap hello com.example.hello HelloWorld
  17. 17. 新規プロジェクト作成 作成された
 「hello」プロジェクト ※サンプルコードを自動生成してくれる ので、このまま次のステップのビルド& インストールをすればサンプルアプリを 作れます
  18. 18. ビルド&インストール CLIを使ってビルドとインストールを一括で実行 ※ MacにiOSデバイスを繋いでから実行 $ phonegap run ios ※MacがiOSデバイスを認識していない場合は、
 iOSシミュレーターに自動フォールバックする Androidの場合はこちらを参考> http://www.slideshare.net/fenomas1/phone-gap-quickstart
  19. 19. ※runオプションのエラー MacがiOSデバイスを認識しておらず、かつPhoneGap
 コマンドがiOSシミュレーターを見つけられない時に発生 以下の方法でiOSシミュレーターをインストール $ sudo npm install ios-sim -g ※参考> https://github.com/phonegap/ios-sim
  20. 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. 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. 22. 参照編
  23. 23. PhoneGapクイックスタート - http://www.slideshare.net/fenomas1/phone-gap-quickstart
  24. 24. PhoneGapのインストール - http://phonegap.com/install/
  25. 25. PhoneGap API リファレンス - http://docs.phonegap.com/
  26. 26. PhoneGap Build - https://build.phonegap.com/?locale=ja_JP
  27. 27. 「PhoneGap Buildの使い方」 - http://adobe.ly/1hDlQoI
  28. 28. Adobe AppBox - https://appbox.adobe-web.jp/

×