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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

4190閲覧

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

manz

総合スコア18

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1グッド

1クリップ

投稿2015/12/17 02:04

編集2022/01/12 10:55

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する。

javascript

1 newHtml='<div class="content">ここに画像等複数階層のDIVがさらに入る</div>";//新DIV 2 $("#footer").before(newHtml); 3 4 obj.animate({"left":leftValue +"px"},{ 5 duration:200, 6 step:function(){ 7 }, 8 complete:function(){ 9 //リンククリックイベント追加 10 //ヘッダークリックイベント追加 11 //グラフ表示ページの場合はグラフリンクを設定する。 12 $(".oldcontent").remove();//旧DIVをremove 13 if (completeFn !== undefined) completeFn(); 14 } 15 });

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

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

ikuwow👍を押しています

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

html

1<script src="jquery.js"></script> 2<script> 3var s = location.search.split("?"); 4// M = Main html & timer start !! 5// 1-9 = sub.html & background-colors valiations. 6window.onload = function() { 7 console.log("OK:" + s[1]); 8 var t = document.getElementById("tbl"); 9 console.log("td length = " + $("td", t).length); 10 if (s[1] == "M") { 11 t.style.display = "block"; 12 wipe(); 13 } else { 14 t.style.display = "none"; 15 var o = document.getElementById("ID_" + s[1]); 16 if (o != null) { 17 o.style.display = "block"; 18 } 19 } 20} 21function wipe() { 22 var flag = true; 23 var tds = $("td"); 24 var counter = 1; 25 var width=[100, 0]; 26 setInterval(function() { 27 console.log(tds.length + " :: " + width); 28 if (flag) { 29 if (width[0] > 0) { 30 $(tds[0]).css("width", (width[0]--) + "%"); 31 $(tds[1]).css("width", (width[1]++) + "%"); 32 } else { 33 flag = false; 34 $("iframe", tds[0]).attr("src", "main.html?" + counter); 35 counter += 1; 36 } 37 } else { 38 if (width[0] < 100) { 39 $(tds[0]).css("width", (width[0]++) + "%"); 40 $(tds[1]).css("width", (width[1]--) + "%"); 41 } else { 42 flag = true; 43 $("iframe", tds[1]).attr("src", "main.html?" + counter); 44 counter += 1; 45 } 46 } 47 if (counter > 8) counter = 1; 48 }, 100); 49} 50</script> 51<style> 52html,body { 53 width:100%; 54 height:100%; 55 margin:0; 56 padding: 0; 57 overflow:hidden; 58} 59div { 60 width: 100%; 61 height: 100%; 62 display: none; 63} 64table { 65 width: 100%; 66 height: 100%; 67 display: none; 68} 69 70</style> 71<div id="ID_1" style="background-color:pink;"> 72</div> 73<div id="ID_2" style="background-color:gray;"> 74</div> 75<div id="ID_3" style="background-color:lime;"> 76</div> 77<div id="ID_4" style="background-color:yellow;"> 78</div> 79<div id="ID_5" style="background-color:magenta;"> 80</div> 81<div id="ID_6" style="background-color:green;"> 82</div> 83<div id="ID_7" style="background-color:tomato;"> 84</div> 85<div id="ID_8" style="background-color:#CCC;"> 86</div> 87 88<table id="tbl"> 89 <tr> 90 <td width="99%"><iframe id="leftFrame" src="main.html?1" style="width: 100%; height: 100%" frameborder="no"></iframe></td> 91 <td width="1%"><iframe id="rightFrame" src="main.html?2" style="width: 100%; height: 100%" frameborder="no"></iframe></td> 92 </tr> 93</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/22 15:03

編集2015/12/22 16:33
ipadcaron

総合スコア1693

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

manz

2015/12/24 12:31

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問