phonegapで作るハイブリッドアプリケーション
DESCRIPTION
2012.5.17 渋谷ヒカリエのDeNAオフィスで行われた「HTML5とか勉強会」でのPhoneGapのプレゼン資料です。 スライド中のイラストは、PhoneGapウェブサイトのものを利用しています。TRANSCRIPT
タチゾノ マサヒコ
12年5月17日木曜日
タチゾノマサヒコ
•最初は、組み込みソフトウェア・エンジニア
•ウェブのスピード感に憧れて業種チェンジ→ナタリー
•DeNAで海外版mobage→ngCore
•現在は、再びウェブメディアのお仕事
12年5月17日木曜日
アジェンダ
•ウェブアプリか、ネイティブアプリか？•ハイブリッドアプリという選択肢•PhoneGapのご紹介•サンプルアプリケーション
12年5月17日木曜日
ウェブアプリか、ネイティブアプリか?
12年5月17日木曜日
ウェブアプリの良いところ
•色んなプラットフォームに対応しやすい。•アップデートが簡単。•HTML/CSS/JavaScriptなど、ウェブの技術が使える。
12年5月17日木曜日
ウェブアプリの弱いところ
•App Store/Google Playが使えない。•→ 課金を自前で実装、集客が大変。•カメラ、傾きセンサー、アドレス帳などスマホ固有の機能が利用できない。
12年5月17日木曜日
ネイティブアプリの良いところ
•Objective-C/Java/C++で開発。•カメラ／センサー／ローカルファイルなど、システム機能をフルで活用できる。パフォーマンス最大化。
•アプリストアを通じて集客が可能。課金システムも利用できる。
12年5月17日木曜日
ネイティブアプリの弱いところ
•Objective-C/Java/C++で開発。•開発が大変。•プラットフォーム毎に開発が必要。•iOSでApp Storeを使う場合など、審査が必要でアップデートに時間がかかる。
12年5月17日木曜日
まとめると
•アプリ形式でないと色々厳しい。•が、ネイティブで開発するのは単一プラットフォームでも大変だし、横展開はもっと大変。
12年5月17日木曜日
ハイブリッドアプリという選択肢
12年5月17日木曜日
ハイブリッドアプリとは？
•ネイティブアプリ上に配置されたWebViewで、HTML/CSS/JavaScriptで記述されたアプリケーションを動かす。
•単体アプリとして提供されるので、ネイティブアプリと同じようにアプリストアで配布可能。
•1ソースで多くのプラットフォームに対応。12年5月17日木曜日
そこで、PHONEGAP
12年5月17日木曜日
PHONEGAP(APACHE CORDOVA)•WebViewをベースに、各種プラットフォーム上で動くアプリとして「ラップ」する。
•JavaScriptから、ネイティブAPIへのブリッジを提供。
•Adobeが買収し、現在はオープンソースプロジェクトとして運営をしながら、DreamweaverなどのAdobe製品との連携を行っている。
12年5月17日木曜日
対応プラットフォーム
12年5月17日木曜日
ネイティブAPIサポート
• Accelerometer
• Camera
• Capture
• Compass
• Connection
• Contacts
• Device
• Events
• File
• Geolocation
• Media
• Notification
• Storage
12年5月17日木曜日
ネイティブAPIサポート
• UIウィジェットは無い。
• プラットフォームによっては、サポートされないものもある。
12年5月17日木曜日
PHONEGAPプラグイン
• PhoneGapに機能追加を行える。
• ネイティブ実装も含めることができる。
• 公開されているプラグインは、必ずしも全てのプラットフォームをサポートしていない。
• Twitterプラグイン
• Facebookプラグイン
• Notificationプラグイン
• MapKitプラグイン
• などなど
12年5月17日木曜日
PHONEGAPベースのアプリケーション
12年5月17日木曜日
TINY TERRORS12年5月17日木曜日
WIKIPEDIA12年5月17日木曜日
コードサンプル
12年5月17日木曜日
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>
12年5月17日木曜日
ACCELERATOR APIfunction 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);
12年5月17日木曜日
PHONEGAP BUILD12年5月17日木曜日
PHONEGAP BUILD
•PhoneGapベースのアプリケーション書き出しを行ってくれるウェブサービス。
•HTML, CSS, JavaScriptをアップロードすると、各プラットフォーム向けバイナリが書き出される。
•githubと連携可能。12年5月17日木曜日
ビルド設定画面12年5月17日木曜日
ビルド中画面12年5月17日木曜日
DREAMWEAVER連携
12年5月17日木曜日
DREAMWEAVER連携
•Adobe Dreamweaver CS6で、モバイル向けテンプレートでサイトを作成。
•Dreamweaverから、PhoneGap Buildを使って、各種プラットフォーム向けバイナリを生成・ダウンロード可能。
12年5月17日木曜日
DREAMWEAVER編集画面
12年5月17日木曜日
DREAMWEAVERからのビルド
12年5月17日木曜日
ANDROIDエミュレータで起動
12年5月17日木曜日
まとめ
12年5月17日木曜日
まとめ
•PhoneGapはHTML5ベース。•UIは、JavaScript/CSSを使って自前でなんとかする。•サポートしているプラットフォームが多い。•PhoneGap Builderを使える。•ウェブサイトをベースに、アプリにも展開するような用途に向きそう。
12年5月17日木曜日
ご静聴ありがとうございました
•Twitter: @mshk
•Tumblr: http://mshkb.tumblr.com/
•WWDC 2012行きます！
12年5月17日木曜日
参考URL
•PhoneGap: http://phonegap.com/
•PhoneGap Plugins: https://github.com/phonegap/phonegap-plugins
•PhoneGap App Gallery: http://phonegap.com/apps
12年5月17日木曜日