狠狠撸

? 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Con?dential.
PhoneGapでハイブリッド開発 for Firefox OS
Andy Hall?開発エバンジェリスト、アドビジャパン

だれだこいつ
@fenomas
§?? 日本在住歴もFlash歴も十ん年
§?? 物理学専攻 → ウェブ制作 → Flash開発 → アドビで色々
§?? 現在の肩書がテクニカルエバンジェリスト
§?? 興味はデザインとコードをまたぐところ
§?? カタコトでゴメンね
§?? ゲーム好き、などなど

まずは
ハイブリッドアプリ
の開発について。

Hybridアプリは箱です。

Hybridアプリは箱です。
HTML, JS,
CSS など
ネイティブの
シェルアプリ
(WebViewを実装)

ハイブリッドの
メリットは大きい。

Firefox OS
メリット１：クロスプラットフォーム

Dreamweaver Muse
メリット2：デザインツールなど

ツールの入手はCreative Cloudから
creative.adobe.com/

ハイブリッドの
難点の２つ：

Hybridアプリ難点
１．純HTML5からデバイス機能に
?アクセス出来なかったりする
CameraRoll
(または、出来るけどAPIが
デバイス毎に変わる)

Hybridアプリ難点
２．プラットフォーム毎に
箱の作り方が変わる

PhoneGapとは、
難点を解決してくれる
ハイブリッド開発
フレームワークのこと。

PhoneGapの由来
iPhoneDevCampで始まった (2009)
ニトビ社にて作られ
アドビ社にて買収され (2011)

PhoneGapの特徴
無料
オープンソース
（Apache Cordovaとして）

PhoneGapアプリって
どんなもの？

BBC Olympics

Zombie Jombie

Untappd

PhoneGapアプリ
の開発について

Webコンテンツから
始めます。

> sudo npm install
–g cordova

> cordova create
appFolder com.hoge.app HogeApp

> cd appFolder

箱はこれ！
適当に
上書きしよう。
(後、Firefox OS用の
con?g.xmlの追加など)

> cordova platform add firefoxos
> cordova prepare firefoxos

FFOSアプリ

> cordova platform add android
> cordova run android
ほかに build、install

デバイス機能を
使うには
プラグイン使います。

実機
アプリ (HTML)
プラグイン設計
実機実機
プラグイン

実機
アプリ (HTML)
プラグイン設計
実機実機
navigator.vibrate()
プラグイン
ネイティブAPI
ネイティブAPI
ネイティブAPI

> cordova plugin add
org.apache.cordova.device-motion

まとめ：

ご清聴ありがとうございました！
phonegap.com/
html.adobe.com/jp
@fenomas
aphall.com/

PhoneGapでハイブリッド開発 for Firefox OS