• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
PhoneGapで作るハイブリッドアプリケーション
 

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

on

  • 15,934 views

2012.5.17 渋谷ヒカリエのDeNAオフィスで行われた「HTML5とか勉強会」でのPhoneGapのプレゼン資料です。 ...

2012.5.17 渋谷ヒカリエのDeNAオフィスで行われた「HTML5とか勉強会」でのPhoneGapのプレゼン資料です。

スライド中のイラストは、PhoneGapウェブサイトのものを利用しています。

Statistics

Views

Total Views
15,934
Views on SlideShare
14,038
Embed Views
1,896

Actions

Likes
24
Downloads
117
Comments
0

10 Embeds 1,896

http://mshkb.tumblr.com 1827
http://tomiserver.mydns.jp 17
http://s.deeeki.com 14
http://d.hatena.ne.jp 10
http://tumblrmap.com 9
https://twitter.com 9
https://si0.twimg.com 5
http://us-w1.rockmelt.com 2
http://webcache.googleusercontent.com 2
http://translate.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    PhoneGapで作るハイブリッドアプリケーション PhoneGapで作るハイブリッドアプリケーション Presentation 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日木曜日
    • そこで、PHONEGAP12年5月17日木曜日
    • PHONEGAP (APACHE CORDOVA) • WebViewをベースに、各種プラットフォーム上で 動くアプリとして「ラップ」する。 • JavaScriptから、ネイティブAPIへのブリッジを 提供。 • Adobeが買収し、現在はオープンソースプロジェ クトとして運営をしながら、Dreamweaverなど のAdobe製品との連携を行っている。12年5月17日木曜日
    • 対応プラットフォーム12年5月17日木曜日
    • ネイティブAPIサポート • Accelerometer • Events • Camera • File • Capture • Geolocation • Compass • Media • Connection • Notification • Contacts • Storage • Device12年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 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);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/apps12年5月17日木曜日