PhoneGapで作るハイブリッドアプリケーション

タチゾノマサヒコ

12年5月17日木曜日

タチゾノマサヒコ

• 最初は、組み込みソフトウェア・エンジニア

• ウェブのスピード感に憧れて業種チェンジ→ナタリー

• DeNAで海外版mobage→ngCore

• 現在は、再びウェブメディアのお仕事


アジェンダ

• ウェブアプリか、ネイティブアプリか？
• ハイブリッドアプリという選択肢
• PhoneGapのご紹介
• サンプルアプリケーション

ウェブアプリか、
ネイティブアプリか?


ウェブアプリの良いところ

• 色んなプラットフォームに対応しやすい。
• アップデートが簡単。
• HTML/CSS/JavaScriptなど、ウェブの
技術が使える。


ウェブアプリの弱いところ

• App Store/Google Playが使えない。
• → 課金を自前で実装、集客が大変。
• カメラ、傾きセンサー、アドレス帳などスマホ
固有の機能が利用できない。


ネイティブアプリの良いところ

• Objective-C/Java/C++で開発。
• カメラ／センサー／ローカルファイルなど、シ
ステム機能をフルで活用できる。パフォーマン
ス最大化。

• アプリストアを通じて集客が可能。課金システ
ムも利用できる。


ネイティブアプリの弱いところ

• Objective-C/Java/C++で開発。
• 開発が大変。
• プラットフォーム毎に開発が必要。
• iOSでApp Storeを使う場合など、審査が必
要でアップデートに時間がかかる。


まとめると

• アプリ形式でないと色々厳しい。
• が、ネイティブで開発するのは単一プラット
フォームでも大変だし、横展開はもっと大変。


ハイブリッドアプリ
という選択肢


ハイブリッドアプリとは？

• ネイティブアプリ上に配置されたWebView
で、HTML/CSS/JavaScriptで記述され
たアプリケーションを動かす。

• 単体アプリとして提供されるので、ネイティブ
アプリと同じようにアプリストアで配布可能。

• 1ソースで多くのプラットフォームに対応。

そこで、PHONEGAP


PHONEGAP
(APACHE CORDOVA)
• WebViewをベースに、各種プラットフォーム上で
動くアプリとして「ラップ」する。

• JavaScriptから、ネイティブAPIへのブリッジを
提供。

• Adobeが買収し、現在はオープンソースプロジェ
クトとして運営をしながら、Dreamweaverなど
のAdobe製品との連携を行っている。


対応プラットフォーム


ネイティブAPIサポート

• Accelerometer • Events
• Camera • File
• Capture • Geolocation
• Compass • Media
• Connection • Notiﬁcation
• Contacts • Storage
• Device

ネイティブAPIサポート

• UIウィジェットは無い。
• プラットフォームによっては、サポートされないものもある。


PHONEGAPプラグイン

• PhoneGapに機能追加を • Twitterプラグイン
行える。
• Facebookプラグイン
• ネイティブ実装も含めるこ • Notiﬁcationプラグイン
とができる。

• 公開されているプラグイン • MapKitプラグイン
は、必ずしも全てのプラッ • などなど
トフォームをサポートして
いない。


PHONEGAPベースの
アプリケーション


TINY TERRORS

WIKIPEDIA

コードサンプル


CAMERA API
<html>

<script type="text/javascript" charset="utf-8">
navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
destinationType: Camera.DestinationType.FILE_URI });

function onSuccess(imageURI) {
var image = document.getElementById('myImage');
image.src = imageURI;
}

function onFail(message) {
alert('Failed because: ' + message);
}
</script>

<img style="display:none;width:60px;height:60px;" id="myImage" src="" />

</html>


ACCELERATOR API
function onSuccess(acceleration) {
alert('Acceleration X: ' + acceleration.x + 'n' +
'Acceleration Y: ' + acceleration.y + 'n' +
'Acceleration Z: ' + acceleration.z + 'n' +
'Timestamp: ' + acceleration.timestamp + 'n');
};

function onError() {
alert('onError!');
};

navigator.accelerometer.getCurrentAcceleration(onSuccess,
onError);


PHONEGAP BUILD

PHONEGAP BUILD

• PhoneGapベースのアプリケーション書き出
しを行ってくれるウェブサービス。

• HTML, CSS, JavaScriptをアップロード
すると、各プラットフォーム向けバイナリが書
き出される。

• githubと連携可能。

ビルド設定画面

ビルド中画面

DREAMWEAVER連携


DREAMWEAVER連携

• Adobe Dreamweaver CS6で、モバイル
向けテンプレートでサイトを作成。

• Dreamweaverから、PhoneGap Build
を使って、各種プラットフォーム向けバイナリ
を生成・ダウンロード可能。


DREAMWEAVER編集画面


DREAMWEAVERからのビルド


ANDROIDエミュレータで起動


まとめ


まとめ

• PhoneGapはHTML5ベース。
• UIは、JavaScript/CSSを使って自前でなん
とかする。
• サポートしているプラットフォームが多い。
• PhoneGap Builderを使える。
• ウェブサイトをベースに、アプリにも展開するよ
うな用途に向きそう。


ご静聴ありがとうございました

• Twitter: @mshk

• Tumblr: http://mshkb.tumblr.com/

• WWDC 2012行きます！


参考URL

• PhoneGap: http://phonegap.com/

• PhoneGap Plugins: https://github.com/
phonegap/phonegap-plugins

• PhoneGap App Gallery: http://
phonegap.com/apps


PhoneGapで作るハイブリッドアプリケーション

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie PhoneGapで作るハイブリッドアプリケーション

Ähnlich wie PhoneGapで作るハイブリッドアプリケーション (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (8)

PhoneGapで作るハイブリッドアプリケーション