AndroidアプリでWebViewが異様に重いときの解決Tips

仕事でアプリのWebViewを使ってサイト内コンテンツを表示したところ、動作もたついてしまった事例がありました。
そのときの解決法が思いのほか簡単だったのでメモがてら記載。
動作がもたついてしまう主な原因は
1.アニメーションのコンテンツがある。
2.CSSの設定が複雑。
3.CSSのエフェクトを使っている。
といったところが主な原因。
自分が仕事でぶちあたったのは3つ目で角丸にするborder-radiusと影をつけるbox-shadow,text-shadowを取るとかなり動作が解消されました。
その他JavaScriptで0.何秒毎に、、、といった処理を加えている場合も一度最適な数値をいろいろ試して導いてみると効果が出る場合があります。
今後、OSやブラウザーのアップデートと合わせ、WebViewの高速かも進むと思いますが、Webブラウザーで100%信頼できる動作もWebViewでは動かない場合があるので、認証や決済時に使う場合は注意が必要です。

  • Google+Androidアプリケーション開発入門+画面作成からデバイス制御まで――基本機能の全容
  • HTML5とJavaScriptによるiPhone%2FAndroid両対応+アプリ開発ガイド
  • アプリ%2FWeb開発者のための+フラットデザインガイドブック【iOS+7・Android・Windows+8対応】
  • Androidアプリ開発実践ノウハウ128
  • スマートフォンのためのHTML5アプリケーション開発ガイド―iPhone%2FiPad%2FAndroid対応

linked by blog-tools

タブレットやスマートフォン向けサイトを画面サイズに合わせてviewportを変える際のTips

タブレットやスマートフォン向けのサイトを作っているときにぶち当たる問題が端末の画面に対するデザインのサイズ設定。

デザインもリキッドレイアウトをメインにしつつブロック要素で構成していたりすると画面を回転させたとき、幅が可変にならず右に余白が。。。。といったことがあったのでその対処法も少しばかり載せておく。

一般的に画面が回転するとそれに応じてブラウザの縦、横幅のサイズも入れ替わるはずなのだが、一部には入れ替わらないものがあり、そのときの対処を考えるのに無駄に時間がかかったりしてしまう。

自分がいろいろ探して見た結果、回転したときの角度を取得してそれに応じて画面幅をviewportにJavaScriptで振り分ける方法が比較的簡単に適応できる方法だとわかりました。

JavaScriptで window.orientation を使うと角度が取得できる。

自分が検証に使った端末は横長のときに0度or180度、
縦長のとき90度、-90度と表示されていたので、
縦横が入れ替わらない場合の設定は(jQuery使用)

var orientation = window.orientation;
//角度の取得

if((orientation == 0)||(orientation == 180)){
//横長のときの設定
var hscale = $(window).width();
var wscale = $(window).height();
}else{
//縦長のときの設定
var wscale = $(window).width();
var hscale = $(window).height();
}
var viewport = $(‘meta[name=”viewport”]’);
$(全体幅を指定している要素).css({width:wscale});
viewport.attr(‘content’, ‘width=’+wscale+’, initial-scale=1, maximum-scale=1′);

といった感じで設定。

よりシームレスにするには画面幅に応じていくつかレイアウトデザイン(max-width?など)を定めた上で行うと効果的。

未だ少し理解できていないAndroid OS2.Xと3.Xのブラウザのviewport周りの挙動についてわかり次第またかきます。

Tips : WordPressなどのサムネイルがsrc=""なときの対処法

WordPressでサムネイル表示などを行うプラグイン。画像があれば表示されるが、Youtubeの動画や、画像のない記事ではリンク先の画像なしのアイコンがでたりしてしまうのでjQuery(JavaScript)を使って簡単にsrc=””をsrc=”画像アドレス”へ変更するためのTips
変更するにはjQueryの「.each」を使う。.eachはセレクターで指定したものがあると実行される関数でこの場合はimgタグと.eachを使い、その中でsrcの表記がsrc=””のものに特定の画像アドレスを挿入するためのスクリプトを書く。

jQuery(document).ready(function($) {
$("img").each(function(){
	var imgsrc = $(this).attr("src");
	if(imgsrc==""){
		$(this).attr({src:"/images/nonimg.png"})
	}
});
});

.attr(“src”)でimgの中のsrcの要素を指定。
.attr({src:”/images/nonimg.png”})で表示したい画像のアドレスを指定。
実際にこのブログでも使用中です。
 

ページにTipsなどをバルーンで表示できるbubbletip


jQueryをつかったTipsなどのバルーン表示を行う「Bubbletip」。
使い方
リンクのタグなどにIDを設定し、その後に表示したいバルーンの内容を記載。
<a id=”a1_up” href=”#”>above</a>
表示したいバルーンは予め「display:none」を設定。
<div id=”tip1_up” style=”display: none;”>
<pre class=”tip”>{ deltaDirection: ‘up’ }</pre>
</div>

そしてヘッダー部などにJavaScriptを以下のような形で記載。
<script type=”text/javascript”>// <![CDATA[
$(window).bind(‘load’, function() {
$(‘#a1_up’).bubbletip($(‘#tip1_up’));
});
// ]]></script>

バルーンを消すスクリプト
$(‘#a1_up’).removeBubbletip();
特定のバルーンを消す場合
$(‘#a1_up’).removeBubbletip([$(‘#tip1_up’), …]);
といった形で使います。
ブログやTipsサイトのちょっとした説明など様々な用途で使えそうです。
http://code.google.com/p/bubbletip/