PhoneGapによるiPhoneアプリ作成（ChildBrowser導入編）
PhoneGap日本語コミュニティ
PhoneGap Plugin
経緯
PhoneGapによるWebViewベースアプリをつくることになりました。以前もつくったのですが機能不足のため審査通過ならず放置していたのですが、再度作成司令を受けたためObject-Cなどという（以下略。
学習コスト的にはPhoneGapは効率的ですがバージョンアップが激しいためころころ実装が変わる。
情報をその度かきあつめたりしなければならないなど面倒。
忘れないため覚え書きする。対象は２.４.０をベースに進める。
プロジェクトの作成
２系からXcodeテンプレートスタイルから、ターミナルを開いてコマンドでプロジェクトを作成するスタイルになったみたいです。PhoneGap本体をダウンロードし、解凍したディレクトリ内にある、Phonegap-2.4.0->lib->ios->binをターミナルで開き、createのバイナリに引数を渡すとプロジェクト作成となります。
./create <project_folder_path> <bundle_id> <project_name>
bundle_idはあらかじめiTunesConnectでつくっといたほうが楽です。
覚え書きなのでここらへんは割愛。
ChildBrowserの実装
上のGitHubからChildBrowserのファイルをダウンロード。
基本的にREADMEに書いてある通り。あらかじめ作成していたプロジェクトをXcodeで開いておき、ファインダーから、ChildBrowser.bundle, ChildBrowserCommand.h, ChildBrowserCommand.m, ChildBrowserViewController.h, ChildBrowserViewController.m, ChildBrowserViewController.xib をマウスでPluginフォルダにドラッグしてコピーする。
次に、hoge-Info.plist (hogeはプロジェクト名）を開き、プリセットを追加する。
Cordova.plist.png が添付されてあるのでそのとおり入力する。入れ子の箇所は誤入力しやすいので注意。
次に、config.xmlのpluginsのとこに以下を追加。
READMEに書いてない...
<plugin name="ChildBrowserCommand" value="ChildBrowserCommand" />
端末側では以上で終わり。サーバー側で cordova-2.4.0.js ChildBrowser.js を読み込み js で起動させる仕組み。Android版とiOS版で同名でもcordoba-2.4.0.jsが違うらしいので混ぜるな危険。
起点ページを外のサーバーページにする
PhoneGapは基本的に、ビルドイン式でプロジェクト内のwwwディレクトリを起点とします。
今回は外のサーバーを起点にしました。実装はwwwディレクトリのindex.htmlをjsでリダイレクトします。
以下最低限のコード
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<title>Hello World</title>
<script type="text/javascript">
function locationhttp(){
location.href = "http://hogehoge/piyopiyo.html";
document.body.onload=locationhttp;
}
</script>
</head>
<body onload=locationhttp();>
</body>
</html>
サーバー側での記述
PhoneGapではJavaScriptが肝です。それゆえ扱いにくい点もありますが、Object-Cよりは（以下略。
以下コードの一例。
<script type="text/javascript" src="js/cordova-2.4.0.js"></script>
<script type="text/javascript" src="js/ChildBrowser.js"></script>
<script type="text/javascript">
function onDeviceReady(url) {
var root = this;
cb = window.plugins.childBrowser;
if(cb != null) {
cb.onLocationChange = function(loc){ root.locChanged(loc); };
cb.onClose = function(){root.onCloseBrowser(); };
cb.onOpenExternal = function(){root.onOpenExternal(); };
cb.showWebPage(url);
}
}
function onCloseBrowser() {
console.log("onCloseBrowser!");
}
function locChanged(loc) {
console.log("locChanged!");
}
function onOpenExternal() {
alert("onOpenExternal!");
}
// jsアンカー
function itemdetail(url) {
if( navigator.userAgent.indexOf('iOS') > 0 ) {
window.iOS.getUrlFromJS(url);
onDeviceReady(url);
}
}
</script>
// htmlアンカー
<a href="JavaScript:itemdetail('http://fuga/hoge.html')">
i-mobile広告タグの施策
iPhoneだと戻るの物理キーがないため、めんどくさいことにボタンを付けなければなりません。
そのため、ChildBrowserでサブウインドウとして今回は代用しました。
しかし、例外として起点ページに広告タグをつけていると漏れ無くこの問題に直面するかと思います。
今回はアイモバイルのタグをつかっていたので、視点を変えて、広告をSafariに投げるという方法を考えました（他アプリを参考）。修正箇所は、MainViewController.m の126行目がコメントアウトされている箇所を参考に下のようにします。
- (BOOL) webView:(UIWebView*)theWebView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType
{
NSURL *url = [request URL];
if([[url host] isEqualToString:@"spnet1.i-mobile.co.jp"])
{
[[UIApplication sharedApplication] openURL:url];
return NO;
}else {
return [super webView:theWebView shouldStartLoadWithRequest:request navigationType:navigationType];
}
}
spnet1.i-mobile.co.jp がアイモバイルのホストらしいのでこれでSafariを立ち上げています。
他は知らないので調べてください。
デバッグ
PhoneGapのWebViewはSafariでデバッグできるのでまだマシ（Androidだと無理）。
方法はエミュレータでプロジェクト起動し、そのまま、Mac側でSafariを立ち上げ、開発からターゲットをエミュレータに指定してやるとデバッグができる。
Xcodeのデバッグ画面を見て発狂した私にとって（以下略。
おわり
学習コストはそれほど下がらないが車輪の再開発するのも…
そもそもObject-Cなどという言語が（以下略。