29
Adobe PhoneGap Introduction Adobe Systems

PhoneGap Introduction

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: PhoneGap Introduction

Adobe PhoneGap Introduction

!!

Adobe Systems

Page 2: PhoneGap Introduction

概要編

Page 3: PhoneGap Introduction

- HTML / CSS / JavaScript をラッピング

PhoneGapとは

Native Shell

WebView

Page 4: PhoneGap Introduction

ネイティブ機能の呼び出し- OS固有の機能を共有API(JavaScript)でブリッジ

- JavaScriptの知識でネイティブ機能の利用が可能

JavaScript

OS

Page 5: PhoneGap Introduction

navigator.camera.getPicture( onSuccess, onFail, [ cameraOptions ] );

camera.getPicture

カメラ機能の呼び出し

// 第1引数:成功時のコールバック関数名// 第2引数:失敗 or キャンセル時// 第3引数:カメラオプション

Page 6: PhoneGap Introduction

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

PhoneGap 標準プラグイン- Android / iOS はフルサポート

加速度センサー

カメラ

コンパス

連絡帳

ファイルアクセス

GPS

オーディオ

ネットワーク

アラート通知

サウンド通知

Page 8: PhoneGap Introduction

サードパーティプラグイン- 強力なコミュニティによるプラグインが存在

§ バーコードリーダー

§ アプリ内ブラウザ表示

§ iAd

§ アプリケーション設定

§ スクーンショット

§ 外部スクリーン

§ アプリ内課金

§ デバイスからの通知

§ プッシュ通知

§ カレンダー

§ …

https://github.com/phonegap/phonegap-plugins

Page 9: PhoneGap Introduction

PhoneGap API ExplorerPhoneGap標準プラグインを試せるPhoneGapアプリ

Page 10: PhoneGap Introduction

My Heart Camera- PhoneGapで作られた写真加工アプリ

- Adobe AppBox Awards 2013 ユーティリティ賞

Page 11: PhoneGap Introduction

ipa apk OTAxap wgz ipk

1. ローカルに全て準備

PhoneGap

SDK

Page 12: PhoneGap Introduction

ipa apk OTAxap wgz ipk

2. アドビのクラウドを利用

PhoneGap

SDK

PhoneGap Build

Page 13: PhoneGap Introduction

開発編

Page 14: PhoneGap Introduction

CLIで簡単に開発

CLICommand Line Interface

コマンドラインだけど難しくないよ!

Page 15: PhoneGap Introduction

PhoneGapのインストール

$ sudo npm install -g phonegap

これでCLIを使う準備は基本的にOK!

※参考> http://phonegap.com/install/

※事前にNodeJSをインストール

※全てローカル環境で開発する場合はスマホOS毎のSDKが別途必要※スマホOS毎のSDKを準備せずにお手軽開発したい場合は後述の 「CLI + PhoneGap Buildでお手軽開発」を参照

Page 16: PhoneGap Introduction

新規プロジェクト作成

$ phonegap create hello

パッケージ名とアプリ名を指定して新規プロジェクトを作成する場合はコチラ↓

$ phonegap hello com.example.hello HelloWorld

※「hello」は、プロジェクトディレクトリ

CLIを使って新規プロジェクトを作成

Page 17: PhoneGap Introduction

新規プロジェクト作成

作成された「hello」プロジェクト

※サンプルコードを自動生成してくれるので、このまま次のステップのビルド&インストールをすればサンプルアプリを作れます

Page 18: PhoneGap Introduction

ビルド&インストール

$ phonegap run ios

CLIを使ってビルドとインストールを一括で実行

※ MacにiOSデバイスを繋いでから実行

※MacがiOSデバイスを認識していない場合は、iOSシミュレーターに自動フォールバックする

Androidの場合はこちらを参考>http://www.slideshare.net/fenomas1/phone-gap-quickstart

Page 19: PhoneGap Introduction

※runオプションのエラー

以下の方法でiOSシミュレーターをインストール$ sudo npm install ios-sim -g

MacがiOSデバイスを認識しておらず、かつPhoneGapコマンドがiOSシミュレーターを見つけられない時に発生

※参考> https://github.com/phonegap/ios-sim

Page 20: PhoneGap Introduction

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

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

参照編

Page 23: PhoneGap Introduction

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

Page 24: PhoneGap Introduction

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

Page 25: PhoneGap Introduction

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

Page 26: PhoneGap Introduction

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

Page 27: PhoneGap Introduction

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

Page 28: PhoneGap Introduction

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

Page 29: PhoneGap Introduction