PhoneGapでWebアプリをスマホアプリ化

4,317 views

Published on

オープンソースカンファレンス2012TokyoFall
PhoneGapでWebアプリをスマホアプリ化

Published in: Technology
  • Be the first to comment

PhoneGapでWebアプリをスマホアプリ化

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

×