仕事でアプリのWebViewを使ってサイト内コンテンツを表示したところ、動作もたついてしまった事例がありました。
そのときの解決法が思いのほか簡単だったのでメモがてら記載。
動作がもたついてしまう主な原因は
1.アニメーションのコンテンツがある。
2.CSSの設定が複雑。
3.CSSのエフェクトを使っている。
といったところが主な原因。
自分が仕事でぶちあたったのは３つ目で角丸にするborder-radiusと影をつけるbox-shadow,text-shadowを取るとかなり動作が解消されました。
その他JavaScriptで0.何秒毎に、、、といった処理を加えている場合も一度最適な数値をいろいろ試して導いてみると効果が出る場合があります。
今後、OSやブラウザーのアップデートと合わせ、WebViewの高速かも進むと思いますが、Webブラウザーで100％信頼できる動作もWebViewでは動かない場合があるので、認証や決済時に使う場合は注意が必要です。
linked by blog-tools
タブレットやスマートフォン向けのサイトを作っているときにぶち当たる問題が端末の画面に対するデザインのサイズ設定。
デザインもリキッドレイアウトをメインにしつつブロック要素で構成していたりすると画面を回転させたとき、幅が可変にならず右に余白が。。。。といったことがあったのでその対処法も少しばかり載せておく。
一般的に画面が回転するとそれに応じてブラウザの縦、横幅のサイズも入れ替わるはずなのだが、一部には入れ替わらないものがあり、そのときの対処を考えるのに無駄に時間がかかったりしてしまう。
自分がいろいろ探して見た結果、回転したときの角度を取得してそれに応じて画面幅を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周りの挙動についてわかり次第またかきます。
これからもっとメジャーになるかな？
jQuery Mobileのまとめがあったのでメモメモ。
自分は結局jQueryベースで独自のものを使うことが多いのですが、できれば使いたい。
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”})で表示したい画像のアドレスを指定。
実際にこのブログでも使用中です。
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. 皆と違う、年賀状。」
制作当初は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. 完了。
以上でスクリーンより広い設定を行うことができます。カーソルを端に寄せるとスクロールして表示してくれるようになります。
今更なのかもしれないですが、気づけばメールやラベルをドラッグ＆ドロップできるようになっていました。
本当にソフトのように使えるようになってしまった。
記事を見つけたのでこちらもどうぞ
マイコミジャーナル