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/

年賀状サイト「Nenga. 皆と違う、年賀状。」で使っているjQueryプラグインなどのTips。

今月立ち上げた、年賀状サイト「Nenga. 皆と違う、年賀状。

制作当初はFlashでと考えたり、CMSでとも考えていたりしたのですが今回もお得意?のJavaScriptでインターフェースを固めました。

現状様々なJSライブラリがあり、Lightboxなどいいものがたくさんある中で、最近よく使っているのがjQuery。

さまざまな用途に応じたクラスやライブラリが多くあり、複数を使ってもあまり不具合が起こらないのでよく使っています。

Nenga.で使っているのはjQuery+prettyPhoto+Nivo Slider

トップページで画像が次々と切り替わるアニメーションはNivo Sliderで指定したクラスやIDの中の画像を児童でスライドショーにしてくれるものです。単にIDを指定してしまうと複数をスライドショーにするのが難しくなるので、今回はクラス+タグで指定しています。スライドショーに使う画像は前後で明暗がはっきりした画像にすると切り替わりがシャープに仕上がると思います。

各ページをウインドウで表示するのに使っているのがprettyPhoto
かなり高機能なビュアのインターフェイスでFlashや動画などにも対応しています。また、デフォルトで数種類のテーマファイルが入っているのでホワイト、ブラックなどサイトのスタイルに合わせて選ぶことができます。

自分の予想以上にアクセスがあるのでちょっとピッチはやめて年賀状のデザインもアップしないと。。。ですね。

ネットブックのウインドウサイズを見た目より広くしてしまう方法

ネットブックを使ってみるとこのブログやウインドウのサイズを指定して開かれるページがあるとすごく操作しにくいところがあったので、自分は実際のスクリーンより広く使えるように設定をしてみました。そのキャプチャーを載せておきます(Windows XP)

1. .画面のプロパティを押して「設定」タブを選択
2. 「詳細設定」をクリックして出てきたウインドウの「モニタ」タブを選択
3. 「このモニタでは表示できないモードを隠す」のチェックを外し、「適用」をクリックしたあと「アダプタ」タブをクリック
4. 「モードの一覧」をクリックして出てきたウインドウで希望のウインドウサイズ、ビットレートを選択し、「OK」をクリック
5. そして、「適用」→「OK」を押す。
6. 完了。

以上でスクリーンより広い設定を行うことができます。カーソルを端に寄せるとスクロールして表示してくれるようになります。

Gmapをつかっていて地図が表示されないときの対処

覚書。

gmap_tips

さっきまでちゃんと見れていたのに急にコントロール部以外の地図そのものがみれなくなったときの原因がわかったのでとり急ぎ、メモ。

原因はCSSでGoogle Mapを読み込むdivの設定をdisplay:block, float:left,overflow:hiddenにしていたことが原因だったようでそれらをはずすと無事表示されるようになりました。

モニターよりも消費電力が低いMac mini

気になったので消費電力を調べてみたところ、今使っているディスプレイの消費電力は最大63W、Mac miniは13〜110W。一般的なフルスペックのデスクトップは300W以上の消費電力なのでその3分の1近く消費電力抑えることができる。

1年間電気代を節約した分でiPodが買えてしまいそうだ。。。

ioPLAZA【Mac用地デジキャプチャBOX】