phonegap introduction

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/