Your SlideShare is downloading. ×
PhoneGapでWebアプリをスマホアプリ化
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

3,066
views

Published on

オープンソースカンファレンス2012TokyoFall …

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

Published in: Technology

0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,066
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
38
Comments
0
Likes
8
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. オープンソースカンファレンス 2012 Tokyo FallPhoneGap で 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 で 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. 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 以降の CLIPhoneGap 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
  • 27. jQuery Mobile ユーザー会のご紹介
  • 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. ● ご清聴ありがとうございました!!