Androidハイブリッドアプリを約２年間メンテンナンスしてきて分ったこと

1. ANDROIDハイブリッドアプリを約
２年間メンテンナンスしてきて
分ったこと
xtone勉強会
2013/08/30
高谷秀一

2. ハイブリッドアプリってなに？
ネイティブアプリの中にWebViewと呼ばれる
簡易ブラウザを利用して、表示自体はWeb
ベースで表現し、ロジックをネイティブで開
発したアプリのこと。要するにネイティブア
プリとウェブアプリの良いとこ取り。

3. でも、良いことばかりじゃないんです。
「HTMLとJavascriptだから簡単だよね。 」と
か思うかもしれませんが、そんなことはない
です。
むしろ、Java書ける人はネイティブアプリに
いくべきと思います。

4. なぜならWebviewには問題が。。。
 セキュリティ・ホールがある
（addJavascriptInteface）
 メモリリークが起きる
 OSバージョン毎にAPIとWebkitの変更に両
方対処する必要がある。
 フォントやフォントサイズの変更でHTML
が初期化されてしまう。

5. ちなみに、フォントサイズ変更って
これのこと。
Activityが初期化されるのでwebviewも初期化
される。

6. でも、ハイブリッドアプリも悪いことば
かりじゃないので、これから作る人のた
めに注意した方が良いことをズラズラ書
いていきたいと思います。

7. まず、ここが重要。
 ビジネスロジックをJavaかJavascriptのど
ちらに寄せるかポリシーを決める
 removeJavascriptIntefaceした方がいい
 フォント変更に対応するか、プロジェク
トが始まる前に確認

8. PCブラウザで開発したら。
ブラウザでもテストしたいので、こんなコード
書いていたら。
$(‘#flickable’).bind(‘touchstart touchmove touchend
mousedown mousemove mouseup’, touchhandle);
しっかり、マウスイベントが発生する端末もある。
こんな風に対処
var ua = navigator.userAgent.toLowerCase();
if(ua.indexOf(‘android’) && e.type == ‘mouseup’) {
return;
}

9. DPI（解像度）毎に処理を振り分けな
いといけない時もある
if (window.devicePixelRatio<1) {
$('.widgetImage').css('max-width', '210px');
} else if (window.devicePixelRatio<1.5) {
$('.widgetImage').css('max-width', '280px');
} else if (window.devicePixelRatio<2.0) {
$('.widgetImage').css('max-width', '420px');
} else {
$('.widgetImage').css('max-width', ‘560px');
}

10. 2系だけ処理を切り分けたい
（各バージョン対応もできるよ）
こんなコードを書いてバージョンごとに処理分
けてます。
var ua = navigator.userAgent.toLowerCase();
var version = ua.substr(ua.indexOf('android')+8, 3);
if(ua.indexOf(‘android’) && parseFloat(version) < 3) {
// ここでゴニョゴニョ。
}

11. 特定の機種だけおかしい
これはしょうがない。
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf(‘f-02e’) >= 0) {
// ここでゴニョゴニョ。
}

12. 3系だけ対処
ハニカムはこれで判別
var isHoneycomb =
navigator.userAgent.toLowerCase()
.match(/android 3¥.[0-9]/)!==null;

13. まとめ
 ライフサイクルが短いアプリが向いてます
 対応機種が少ないアプリが向いています
 入力が少ないアプリが向いています
 セキュリティにはネィティブアプリより気
を使います。（webviewはOS4.3からはセ
キュリティ部分はかなり改善されているら
しい）