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

オープンソースカンファレンス 2012 Tokyo Fall

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

2012/9/8

日本 jQuery Mobile ユーザー会
岡本隆史

自己紹介
● いつもにこにこあなたの書架に這いよる混沌
( エンジニア ) です。

書きました！！

斜め上行くエンジニア

スマートフォンにおける
Web アプリの課題
● HTML+JavaScript の表現力が高まったと言って
も、 Apple Store や Google Play でアプリ売って儲
けれない、、、

● カメラや加速度センサーはデバイス毎に Web ブラウ
ザのサポート状況が違って使えたり使えなかったりす
るし、、、

● そもそも、電話帳とかと連携したり、バイブ機能を
使ったりできないし、、、

そんなときは
● PhoneGap で解決！！

PhoneGap の特徴
● HTML/JavaScript でスマートフォンネイティ
ブのアプリが作れる
(AppStore 、 Google Play へ登録可 )
● Web ブラウザだけじゃ利用できない機能が
HTML/JavaScript で使える
● プラグインにより機能を拡張可

Mozilla のアンケート結果

Which frameworks do you use to convert apps to native apps?

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 と名前が変更され
る。

PhoneGap と Cordova の関係

Safari PhoneGap

レンダリングエ
ンジン将来的には
＋ α で製品化
+JavaScript を Apache に入れれ
OSS 化ないものを追加
WebKit Cordova

PhoneGap のイメージ図
電話帳
コンパス

メディア処理
ファイル

イベント処理

加速度

Web SQL
Web Storage 通知

www.icondrawer.com
ストレージ

アーキテクチャ

Java
開発者がアプリケーション HTML CSS
Script
実装する部分

プラットフォーム共通
PhoneGap API (JavaScript)
の JavaScript API

プラットフォーム固有 PhoneGapLib DroidGap WP7GapClassLib
のフレームワーク実装

iOS Android Windows Phone

PhoneGap がプラットフォーム間の差を吸収

プロジェクトの作り方 (iOS)

準備
● Mac に XCode をインストール
● Cordova の配布に含まれる Cordova-2.0.0.dmg
を Mac にインストール ( ～ 2.0)

iOS 用プロジェクトの作成
– XCode で Cordova based Application を選択してプロ
ジェクトを作成
– www ディレクトリに HTML/JavaScript を実装

プロジェクトの作り方 (Android)

準備
● Eclipse をインストール

● Android SDK をインストール
● Eclipse 用の Android プラグイン (ADT プラグイ
ン ) をインストール

プロジェクトの作り方 (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 を適宜編集

結構めんどくさい

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/

PhoneGap プラグイン (1)

①PhoneGap プロジェクト作成

③AndroidManifest.xml の
この行を削除

②AndroidManifest.xml を編集

PhoneGap プラグイン (2)

assets/www フォルダ下に
HTML/JS/CSS などを作成

デモ 1:Web サイト
● PhoneGap Eclipse プラグインを使ってアプリ
(MobileStack) を PhoneGap アプリとしてビ
ルド・デプロイ

デモ 2: カメラの利用
Eclipse

私の自宅

ソース
コード
ビルド・デプロイ

アプリ

画像管理
アプリ

写真画像データ
ベース

PhoneGap 2.1 以降の CLI

PhoneGap 2.1 以降は、 iOS の XCode 用テンプレート用プロジェクトが提供されない
CLI を使ってプロジェクトを作成するようになる

コマンド Android iOS 説明
create ○ ○ プロジェクト作成
debug ○ ○ ビルド
emulate ○ ○ エミュレータ起動
log ○ ○ ログ出力
clean ○ × クリーン
BOOM ○ × クリーン、ビルド、デプロイ、
起動を一度に実行

それでも面倒だと思われる方へ送る

PhoneGap Build

PhoneGap Build

Web UI で簡単にアプリケーションをビルド
● 開発環境不要
● 動作確認はエミュレータや実機が必要

● ソースコードのアップロード方法
● Git/SVN のリポジトリを指定
● Zip ファイル
● 対象プラットフォーム
● iOS, Android™, Windows® Phone,
Blackberry® 5/6/7, webOS and Symbian
(iOS は証明書がないとビルドできません！！ )
● PhoneGap Build API を提供
● Jenkins などで自動的にビルド可能
→ テストなどを効率化

zip からのアプリ作成

ルートフォルダに
index.html
を置いた Web サイト ( アプリ )
を zip にアーカイブ
ソースコード
(zip)

PhoneGap
Build

アプリケーション
(*.apk,*.pkg)

リポジトリからのアプリ作成

リポジトリ
(ex. Github)

ソース
コミットコード
ルートフォルダに
index.html
を置いた Web サイト
( アプリ ) を作成

アプリケーション
(*.apk,*.pkg)
PhoneGap
Build

jQuery Mobile ユーザー会のご紹介

日本 jQuery Mobile ユーザ会
●

● jQuery Mobile の情報交換を目的として
2012/5/21 に

日本 jQuery Mobile ユーザー会 ( 仮 )

として設立

● jQuery Mobile/PhoneGap の勉強会などを
細々と実施

jQuery Mobile ユーザ会
● 日本 jQuery Mobile ユーザー会 ( 仮 )
↓
● 日本 jQuery Mobile ユーザー会

今日から仮を取り活動を開始します !!

拙書紹介
● jQuery Mobile スマートフォンアプリ開発

jQuery Mobile
＋
PhoneGap
GoogleMap
Facebook
Twitter
PhotoSwipe
jqplot
jQuery Validator
Bookmark Bubble

jQuery Mobile と
その応用がこの一冊で分かる！！

書籍紹介
● jQuery Mobile パーフェクトガイド

吉川徹さん執筆
主に HTML5 開発者コミュニティである
「 HTML5 Developers JP 」で活動中。同コミュ
ニティ主催の「 HTML5 とか勉強会」のスタッフ
を務め、 HTML5 の最新動向を追っている。ま
た、 Web に関する講演や、記事執筆を行ってい
る。 allWeb クリエイター塾では jQuery Mobile
の講師を担当している。

jQuery Mobile だけで 350 ページ超！！
jQuery Mobile の Web サイト制作ならこれでお任せ

● ご清聴ありがとうございました！！

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

More Related Content

What's hot

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

More from Takashi Okamoto

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