Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ANDROIDハイブリッドアプリを約
2年間メンテンナンスしてきて
分ったこと
xtone勉強会
2013/08/30
高谷秀一
ハイブリッドアプリってなに?
ネイティブアプリの中にWebViewと呼ばれる
簡易ブラウザを利用して、表示自体はWeb
ベースで表現し、ロジックをネイティブで開
発したアプリのこと。要するにネイティブア
プリとウェブアプリの良いとこ取り。
でも、良いことばかりじゃないんです。
「HTMLとJavascriptだから簡単だよね。 」と
か思うかもしれませんが、そんなことはない
です。
むしろ、Java書ける人はネイティブアプリに
いくべきと思います。
なぜならWebviewには問題が。。。
 セキュリティ・ホールがある
(addJavascriptInteface)
 メモリリークが起きる
 OSバージョン毎にAPIとWebkitの変更に両
方対処する必要がある。
 フォントやフォン...
ちなみに、フォントサイズ変更って
これのこと。
Activityが初期化されるのでwebviewも初期化
される。
でも、ハイブリッドアプリも悪いことば
かりじゃないので、これから作る人のた
めに注意した方が良いことをズラズラ書
いていきたいと思います。
まず、ここが重要。
 ビジネスロジックをJavaかJavascriptのど
ちらに寄せるかポリシーを決める
 removeJavascriptIntefaceした方がいい
 フォント変更に対応するか、プロジェク
トが始まる前に確認
PCブラウザで開発したら。
ブラウザでもテストしたいので、こんなコード
書いていたら。
$(‘#flickable’).bind(‘touchstart touchmove touchend
mousedown mousemove mouseu...
DPI(解像度)毎に処理を振り分けな
いといけない時もある
if (window.devicePixelRatio<1) {
$('.widgetImage').css('max-width', '210px');
} else if (win...
2系だけ処理を切り分けたい
(各バージョン対応もできるよ)
こんなコードを書いてバージョンごとに処理分
けてます。
var ua = navigator.userAgent.toLowerCase();
var version = ua.sub...
特定の機種だけおかしい
これはしょうがない。
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf(‘f-02e’) >= 0) {
// ここでゴニョゴニョ。
}
3系だけ対処
ハニカムはこれで判別
var isHoneycomb =
navigator.userAgent.toLowerCase()
.match(/android 3¥.[0-9]/)!==null;
まとめ
 ライフサイクルが短いアプリが向いてます
 対応機種が少ないアプリが向いています
 入力が少ないアプリが向いています
 セキュリティにはネィティブアプリより気
を使います。(webviewはOS4.3からはセ
キュリティ部分はか...
Upcoming SlideShare
Loading in …5
×

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

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

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

  1. 1. ANDROIDハイブリッドアプリを約 2年間メンテンナンスしてきて 分ったこと xtone勉強会 2013/08/30 高谷秀一
  2. 2. ハイブリッドアプリってなに? ネイティブアプリの中にWebViewと呼ばれる 簡易ブラウザを利用して、表示自体はWeb ベースで表現し、ロジックをネイティブで開 発したアプリのこと。要するにネイティブア プリとウェブアプリの良いとこ取り。
  3. 3. でも、良いことばかりじゃないんです。 「HTMLとJavascriptだから簡単だよね。 」と か思うかもしれませんが、そんなことはない です。 むしろ、Java書ける人はネイティブアプリに いくべきと思います。
  4. 4. なぜならWebviewには問題が。。。  セキュリティ・ホールがある (addJavascriptInteface)  メモリリークが起きる  OSバージョン毎にAPIとWebkitの変更に両 方対処する必要がある。  フォントやフォントサイズの変更でHTML が初期化されてしまう。
  5. 5. ちなみに、フォントサイズ変更って これのこと。 Activityが初期化されるのでwebviewも初期化 される。
  6. 6. でも、ハイブリッドアプリも悪いことば かりじゃないので、これから作る人のた めに注意した方が良いことをズラズラ書 いていきたいと思います。
  7. 7. まず、ここが重要。  ビジネスロジックをJavaかJavascriptのど ちらに寄せるかポリシーを決める  removeJavascriptIntefaceした方がいい  フォント変更に対応するか、プロジェク トが始まる前に確認
  8. 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. 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. 10. 2系だけ処理を切り分けたい (各バージョン対応もできるよ) こんなコードを書いてバージョンごとに処理分 けてます。 var ua = navigator.userAgent.toLowerCase(); var version = ua.substr(ua.indexOf('android')+8, 3); if(ua.indexOf(‘android’) && parseFloat(version) < 3) { // ここでゴニョゴニョ。 }
  11. 11. 特定の機種だけおかしい これはしょうがない。 var ua = navigator.userAgent.toLowerCase(); if (ua.indexOf(‘f-02e’) >= 0) { // ここでゴニョゴニョ。 }
  12. 12. 3系だけ対処 ハニカムはこれで判別 var isHoneycomb = navigator.userAgent.toLowerCase() .match(/android 3¥.[0-9]/)!==null;
  13. 13. まとめ  ライフサイクルが短いアプリが向いてます  対応機種が少ないアプリが向いています  入力が少ないアプリが向いています  セキュリティにはネィティブアプリより気 を使います。(webviewはOS4.3からはセ キュリティ部分はかなり改善されているら しい)

    Be the first to comment

    Login to see the comments

  • sakura_bird1

    Sep. 4, 2013
  • furuya02

    Sep. 5, 2013
  • smaedajp

    Apr. 22, 2014
  • shigekinakagawa12

    Apr. 23, 2014
  • minako.kubo

    Nov. 17, 2014
  • KensukeFujiya

    Nov. 11, 2015
  • toutoutakataka

    Nov. 24, 2016

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

Views

Total views

4,112

On Slideshare

0

From embeds

0

Number of embeds

25

Actions

Downloads

10

Shares

0

Comments

0

Likes

7

×