Phone gap + monaca

9

Click here to load reader

description

2013/09/07の "Android × HTML5 in Fukuoka" でLTした際の資料です。

Transcript of Phone gap + monaca

Page 1: Phone gap + monaca

PhoneGap + MonacaHTML5でクロスプラットフォームアプリをつくる

1

Page 2: Phone gap + monaca

自己紹介

• akimicyu

• フリーランスSE

• Android屋、Java屋、DB屋、OO厨

2

Page 3: Phone gap + monaca

PhoneGapとは• クロスプラットフォームなモバイルアプリ開発フレームワーク

• 開発には、HTML5/CSS/JavaScriptを使用

• カメラ/GPSなどの端末機能にJavaScriptのAPIでアクセスできる

• 要は「Android/iOS両対応なアプリが簡単に書ける」といった感じ

3

Page 4: Phone gap + monaca

Monacaとは• PhoneGap開発をもっと楽にするためのサービス

• ブラウザベースのIDE

• デバッガ

• バックエンド

• http://monaca.mobi/

4

Page 5: Phone gap + monaca

デモ

5

Page 6: Phone gap + monaca

触ってみた感想• 利点

• 簡単なアプリであれば、HTML5/CSS/JavaScriptのみでかなりの部分まで書けて楽(PhoneGap)

• WebベースのIDEやMonacaデバッガといった開発環境が非常に楽(Monaca)

• 課題点

• 性能面、特にレスポンス性能を求めだすと面倒そう

• ネイティブでプラグインをゴリゴリ書き出すと面倒そう

6

Page 7: Phone gap + monaca

(例) 検討のタイミング• 業務系のAndroidアプリを作るはずが、iOS版も作ることになってしまった

• スマホ向けのWebアプリを作っていたのに、電波が届かない地域でも利用できるように対応して欲しいとか無茶な要件が入ってきた(マスタデータの確実な自動更新とかは、プッシュ通知系の機能がないと無理)

• HTML5で作ってたカジュアルゲームをGoogle play

やApp Storeに乗せてお小遣いを稼ぎたい

7

Page 8: Phone gap + monaca

まとめ

• 手軽にクロスプラットフォームアプリを作りたいなら、PhoneGap + Monacaはいい選択

• 特に、Web系の業務システム開発では重宝する場面が多いはず

8

Page 9: Phone gap + monaca

参考URL

• PhoneGap API リファレンス

• http://docs.phonegap.com/jp/2.2.0/index.html

• Monacaドキュメント

• http://docs.monaca.mobi/ja/

• かつや先生のPhoneGap講座

• http://phonegap-fan.com/school/

9