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