phonegapでハイブリッド開発 for firefox os

© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

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用のconfig.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/

Internet