PhoneGapでWebアプリをスマホアプリ化
9 likes3,563 views
オープンソースカンファレンス2012TokyoFall PhoneGapでWebアプリをスマホアプリ化
PhoneGapでWebアプリをスマホアプリ化
- 1. オープンソースカンファレンス 2012 Tokyo Fall PhoneGap で Web アプリをスマホアプリ化 2012/9/8 日本 jQuery Mobile ユーザー会 岡本隆史
- 2. 自己紹介 ● いつもにこにこあなたの書架に這いよる混沌 ( エンジニア ) です。 書きました！！
- 3. その他代表作
- 4. 斜め上行くエンジニア
- 5. スマートフォンにおける Web アプリの課題 ● HTML+JavaScript の表現力が高まったと言って も、 Apple Store や Google Play でアプリ売って儲 けれない、、、 ● カメラや加速度センサーはデバイス毎に Web ブラウ ザのサポート状況が違って使えたり使えなかったりす るし、、、 ● そもそも、電話帳とかと連携したり、バイブ機能を 使ったりできないし、、、
- 6. そんなときは ● PhoneGap で解決！！
- 7. PhoneGap の特徴 ● HTML/JavaScript でスマートフォンネイティ ブのアプリが作れる (AppStore 、 Google Play へ登録可 ) ● Web ブラウザだけじゃ利用できない機能が HTML/JavaScript で使える ● プラグインにより機能を拡張可
- 8. Mozilla のアンケート結果 Which frameworks do you use to convert apps to native apps?
- 9. PhoneGap の歴史 暦 概要 2008 サンフランスシスコで開催された iPhoneDevCamp 2008 で産声をあげる 2009/4/2 Web 2.0 Conference で People's Choice Award を受賞 2009/10/7 PhoneGap で作成されたアプリが Apple に認定される 2011/4/11 PhoneGap に対応した DreamWeaver CS5.5 がリリース 2011/8/31 PhoneGap 1.0.0 リリース 2011/10/4 Adobe により開発元の Nitobi Software が買収 2011/11/22 コードが Apache に寄付され Apache Callback と名前付けら れ、 PhoneGap1.2 としてリリースされる。 2012/3/6 PhoneGap1.5 がリリースされ、 Callback から Cordova と名前が変更され る。
- 10. PhoneGap と Cordova の関係 Safari PhoneGap レンダリングエ ンジン 将来的には ＋ α で製品化 +JavaScript を Apache に入れれ OSS 化 ないものを追加 WebKit Cordova
- 11. PhoneGap のイメージ図 電話帳 コンパス メディア処理 ファイル イベント処理 加速度 Web SQL Web Storage 通知 www.icondrawer.com ストレージ
- 12. アーキテクチャ Java 開発者が アプリケーション HTML CSS Script 実装する部分 プラットフォーム共通 PhoneGap API (JavaScript) の JavaScript API プラットフォーム固有 PhoneGapLib DroidGap WP7GapClassLib のフレームワーク実装 iOS Android Windows Phone PhoneGap がプラットフォーム間の差を吸収
- 13. プロジェクトの作り方 (iOS) 準備 ● Mac に XCode をインストール ● Cordova の配布に含まれる Cordova-2.0.0.dmg を Mac にインストール ( ～ 2.0) iOS 用プロジェクトの作成 – XCode で Cordova based Application を選択してプロ ジェクトを作成 – www ディレクトリに HTML/JavaScript を実装
- 14. プロジェクトの作り方 (Android) 準備 ● Eclipse をインストール ● Android SDK をインストール ● Eclipse 用の Android プラグイン (ADT プラグイ ン ) をインストール
- 15. プロジェクトの作り方 (Android) PhoneGap 用プロジェクト作成 ● Android Application Project を作成 ● assets/www フォルダを作成 ● PhoneGap の android フォルダに含まれる – cordova-2.0.0.jar を libs フォルダにコピー – cordova-2.0.0.jar をビルドパスに追加 – cordova-2.0.0.js を assests/www フォルダにコピー – xml フォルダを res フォルダにコピー ● AndroidManifests.xml を適宜編集 結構めんどくさい
- 16. Android で簡単に PhoneGap 利用 PhoneGap 用の Eclipse プラグインを利用する と簡単にできる ● PhoneGap 用 Eclipse 用プラグイン ● http://code.google.com/a/eclipselabs.org/p/mobile-web- development-with-phonegap ● Eclipse 用アップデートサイト ● http://svn.codespot.com/a/eclipselabs.org/mobile-web- development-with-phonegap/trunk/download/
- 17. PhoneGap プラグイン (1) ①PhoneGap プロジェクト作成 ③AndroidManifest.xml の この行を削除 ②AndroidManifest.xml を編集
- 18. PhoneGap プラグイン (2) assets/www フォルダ下に HTML/JS/CSS などを作成
- 19. デモ 1:Web サイト ● PhoneGap Eclipse プラグインを使ってアプリ (MobileStack) を PhoneGap アプリとしてビ ルド・デプロイ
- 20. デモ 2: カメラの利用 Eclipse 私の自宅 ソース コード ビルド・デプロイ アプリ 画像管理 アプリ 写真 画像データ ベース
- 21. PhoneGap 2.1 以降の CLI PhoneGap 2.1 以降は、 iOS の XCode 用テンプレート用プロジェクトが提供されない CLI を使ってプロジェクトを作成するようになる コマンド Android iOS 説明 create ○ ○ プロジェクト作成 debug ○ ○ ビルド emulate ○ ○ エミュレータ起動 log ○ ○ ログ出力 clean ○ × クリーン BOOM ○ × クリーン、ビルド、デプロイ、 起動を一度に実行
- 22. それでも面倒だと思われる方へ送る PhoneGap Build
- 23. PhoneGap Build Web UI で簡単にアプリケーションをビルド ● 開発環境不要 ● 動作確認はエミュレータや実機が必要
- 24. ● ソースコードのアップロード方法 ● Git/SVN のリポジトリを指定 ● Zip ファイル ● 対象プラットフォーム ● iOS, Android™, Windows® Phone, Blackberry® 5/6/7, webOS and Symbian (iOS は証明書がないとビルドできません！！ ) ● PhoneGap Build API を提供 ● Jenkins などで自動的にビルド可能 → テストなどを効率化
- 25. zip からのアプリ作成 ルートフォルダに index.html を置いた Web サイト ( アプリ ) を zip にアーカイブ ソースコード (zip) PhoneGap Build アプリケーション (*.apk,*.pkg)
- 26. リポジトリからのアプリ作成 リポジトリ (ex. Github) ソース コミット コード ルートフォルダに index.html を置いた Web サイト ( アプリ ) を作成 アプリケーション (*.apk,*.pkg) PhoneGap Build
- 28. 日本 jQuery Mobile ユーザ会 ● ● jQuery Mobile の情報交換を目的として 2012/5/21 に 日本 jQuery Mobile ユーザー会 ( 仮 ) として設立 ● jQuery Mobile/PhoneGap の勉強会などを 細々と実施
- 29. jQuery Mobile ユーザ会 ● 日本 jQuery Mobile ユーザー会 ( 仮 ) ↓ ● 日本 jQuery Mobile ユーザー会 今日から仮を取り活動を開始します !!
- 30. 拙書紹介 ● jQuery Mobile スマートフォンアプリ開発 jQuery Mobile ＋ PhoneGap GoogleMap Facebook Twitter PhotoSwipe jqplot jQuery Validator Bookmark Bubble jQuery Mobile と その応用がこの一冊で分かる！！
- 31. 書籍紹介 ● jQuery Mobile パーフェクトガイド 吉川 徹さん執筆 主に HTML5 開発者コミュニティである 「 HTML5 Developers JP 」で活動中。同コミュ ニティ主催の「 HTML5 とか勉強会」のスタッフ を務め、 HTML5 の最新動向を追っている。ま た、 Web に関する講演や、記事執筆を行ってい る。 allWeb クリエイター塾では jQuery Mobile の講師を担当している。 jQuery Mobile だけで 350 ページ超！！ jQuery Mobile の Web サイト制作ならこれでお任せ
- 32. ユーザ会への加入は
- 33. ● ご清聴ありがとうございました！！