質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.96%

webviewでのキャッシュやメモリの扱い方について

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 3,316

score 18

1つのhtmlファイル上でdivを差し替えて(右から左へスライドさせる)、
画面遷移を実現しているものをwebviewで表示させるアプリを作成しています。
以下の前提のもと、実機でいろいろ画面遷移を繰り返すと
だんだん動きが重くなってしまうような感じがするのですが、
キャッシュやメモリの開放など何か有効な解決策はありますでしょうか。
画面遷移を行う毎に遷移元のキャッシュを消す方法などあれば教えていただきたいと思います。
ちなみにリロードを行えば解消されるのですが、基本はコンテンツ部のみをスライドさせる動きにしているので
(ヘッダやフッターがリロードによって一瞬ちらつくのはNG)リロードせずに解決できる方法を探しています。

イメージ説明

・平均して1ページにつき100KBの画像を1~6枚くらい表示させている。
・ページ内のクリッカブルエリアは、透明のgif画像を配置してjquery mobileのtapイベントをバインドしている。
・画像にはloadイベントをバインドし、表示すべきすべての画像のloadを検知し、loadイベントをアンバインドしている。
・divの差し替えはいったん新しいdivをappend()し、animateを使って右から左へ移動させ、
 移動が完了したら古いdivのtapイベントをアンバインドし、
 古いdiv自体はリムーブ、新しいdiv内にtapイベントをバインド(MAX20個くらい)する。
・遷移元の画面で使用した変数や配列は極力「delete」を使って破棄している。

実際の画面遷移は以下のように行っています。(要所要所を抜粋しただけです)
新しいページのDIVをappendし、右から左へanimateで動かし、
animateが完了したら旧」DIVをremoveする。

newHtml='<div class="content">ここに画像等複数階層のDIVがさらに入る</div>";//新DIV
        $("#footer").before(newHtml);

    obj.animate({"left":leftValue +"px"},{
            duration:200,
            step:function(){
            },
            complete:function(){                
                //リンククリックイベント追加
                //ヘッダークリックイベント追加
                //グラフ表示ページの場合はグラフリンクを設定する。
                $(".oldcontent").remove();//旧DIVをremove
                if (completeFn !== undefined) completeFn();
            }
        });

参考までに画面遷移を繰り返した際のtimelineの様子を添付させていただきます。
イメージ説明

時間経過とともにListenersという項目が増えて行っていますが、
これはイベントが正しくアンバインドできていないということなのでしょうか。。。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

<script src="jquery.js"></script>
<script>
var s = location.search.split("?");
// M = Main html & timer start !!
// 1-9 = sub.html & background-colors valiations.
window.onload = function() {
  console.log("OK:" + s[1]);
  var t = document.getElementById("tbl");
  console.log("td length = " + $("td", t).length);
  if (s[1] == "M") {
    t.style.display = "block";
    wipe();
  } else {
    t.style.display = "none";
    var o = document.getElementById("ID_" + s[1]);
    if (o != null) {
      o.style.display = "block";
    }
  }
}
function wipe() {
  var flag = true;
  var tds = $("td");
  var counter = 1;
  var width=[100, 0];
  setInterval(function() {
  console.log(tds.length + " :: " + width);
    if (flag) {
      if (width[0] > 0) {
        $(tds[0]).css("width", (width[0]--) + "%");
        $(tds[1]).css("width", (width[1]++) + "%");
      } else {
        flag = false;
        $("iframe", tds[0]).attr("src", "main.html?" + counter);
        counter += 1;
      }
    } else {
      if (width[0] < 100) {
        $(tds[0]).css("width", (width[0]++) + "%");
        $(tds[1]).css("width", (width[1]--) + "%");
      } else {
        flag = true;
        $("iframe", tds[1]).attr("src", "main.html?" + counter);
        counter += 1;
      }
    }
    if (counter > 8) counter = 1;
  }, 100);
}
</script>
<style>
html,body {
  width:100%;
  height:100%;
  margin:0;
  padding: 0;
  overflow:hidden;
}
div {
  width: 100%;
  height: 100%;
  display: none;
}
table {
  width: 100%;
  height: 100%;
  display: none;
}

</style>
<div id="ID_1" style="background-color:pink;">
</div>
<div id="ID_2" style="background-color:gray;">
</div>
<div id="ID_3" style="background-color:lime;">
</div>
<div id="ID_4" style="background-color:yellow;">
</div>
<div id="ID_5" style="background-color:magenta;">
</div>
<div id="ID_6" style="background-color:green;">
</div>
<div id="ID_7" style="background-color:tomato;">
</div>
<div id="ID_8" style="background-color:#CCC;">
</div>

<table id="tbl">
  <tr>
    <td width="99%"><iframe id="leftFrame" src="main.html?1" style="width: 100%; height: 100%" frameborder="no"></iframe></td>
    <td width="1%"><iframe id="rightFrame" src="main.html?2" style="width: 100%; height: 100%" frameborder="no"></iframe></td>
  </tr>
</table>


↑追記、frameset は幅を変更できなかったので、iframe に変更する。
PCでもカクカクしますね。
ページをめくる、ような動きをさせたいのでしょうけど、これ重いからやめて、フェードIN,OUT にしたら
どうですか。

-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
<frameset cols="100%,0%">
  <frame src="left.html?1" />
  <frame src="left.html?2" />
</frameset>
たとえば、ですが、左右にワイプするのはダメですか。
上記のフレームきると、縦線で左右に仕切られます。初期表示は、 100%,0% なので、左枠がいっぱい表示です。右端の中央線を左に移動すると自動的に右が見えてきます。0%,100% になった時点で今度は、左から右へ、これを繰り返す。
たぶん、 div のような、クリッッピングされたイメージをタイマーで動かすことでwebview のリソースを食い、動きがぎこちなくなるんだと思うのです。
左か右が 0% になったら、再読込すればいいのでは、と思うのです。

なぜwebview にこだわるのか、要件をもう少し具体的にお話しくださるともう少し皆の興味がここに向くとおもいますね。今のままだと前、前々スレ同様、コメントなし or よくて1つとかになりそうです。
一番ネックなのは、実機確認が必要ってこと。シミュレータだとPCのCPUパワーの恩恵でカクカクが再現
しないんですよね。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/12/24 21:31

    ご丁寧に回答頂きありがとうございます。
    webviewにこだわる理由としては、単純にコンテンツのメンテナンスがhtmlだけで済むからです。
    json(アプリのローカルに配置してあるjsファイル内にJSON形式で表示位置、リンク先、表示画像ファイル名等が記載してある)を使ってhtml上のどの座標にクリッカブルエリアや画像を配置するか保持させているので、表示内容やリンク先の変更はJSONの修正を行うだけで済んでいます。
    また、サーバーとの通信などは一切行いません。
    アプリ内に保持しているhtml,js,png,cssを使って表示しています。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.96%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る