ウェブサイトをスマートフォン対応するために必要な5つの事

久しぶりのブログ更新となりました。
3月は多くの出来事があってブログ更新出来ませんでしたが、また元のペースに徐々に戻していければと思います!

そんなわけで今回は、ウェブサイトのスマートフォン対応のお話です。Androidの普及もあり、随分対応サイトも多くなって来たように思います。コノルでは既にいくつもの案件で、スマートフォン対応に取り組んでいます。その中で使ってきた必要な対応方法を5つまとめてみました。

その1画面サイズを合わせる

最近のウェブサイトだと、横サイズが900pxというのも珍しくないですよね。しかし、iPhoneなどのスマートフォンだと、画面サイズはそこまで大きくありません。まずは、いくつか代表的な端末を挙げてみました。

iPhone3G iOS HVGA(320*480)
iPhone4 iOS retina(640*960)
XperiaTM arc SO-01C Android WVGA(480×854)
003SH Android WVGA(480×800)
IS03 Android 640*960

iPhoneのみ対応させる場合は、3GSと4だけ意識すれば良いでしょう。3GSに合わせておけばまず間違いないです。Androidに至っては端末によって解像度はバラバラなため、それぞれに対応させる必要があります。

そんなバラバラなAndroid端末ですが、
画面サイズはいくつに合わせるのが得策か。コノルではコーディングを行う際には、「横サイズ320+(可変)」としています。しかし、注意が必要なのはデザインなのです。デザインする際には、横サイズを640pxで行います。この辺りが間違えやすい所。

そしてコーディングの際に必ず以下のタグを入れる必要があります。

<meta name="viewport" content="width=device-width; initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />

これは「width=device-width」の指定部分が端末に応じて横サイズを決めてくれるというものになります。便利ですね。
content属性の指定にwidthやinitial-scale(初期表示の拡大率)の指定を入れておきます。これらを設定する事で、ページを開くと自動的にズームされたり、縮小されたりする事がなくなります。

その2縦横サイズが変わった際にCSSを変える

スマートフォンに対応させる上で「横画面」を常に考える事の一つに入れる必要があります。
これは以下のCSSで対応が可能です。

@media only screen and (orientation : landscape) { /<em>横向き</em>/
    #contents   { width:200px; }
}
@media only screen and (orientation : portrait) { /<em>縦向き</em>/
    #contents   { width:100px; }
}

横向きと縦向きを「orientation」でそれぞれ指定する事で画面が切り替わった際に画面に合わせて、片方のCSSが有効になります。
その1で説明したような場所とは違う、レイアウト情報を可変に出来ない部分については、有効な手段となるでしょう。

また、Javascriptを使った場合には画面の縦横情報を「window.orientation」で取得が可能です。
jQueryを使った場合は、「orientationchange」イベントをbindしてあげる事で判定を行う事が出来ます(※ただし、iPhone限定
Androidで傾きを判定を行う場合は、setIntervalで定期的に「window.orientation」を調べる事で、値が変更された場合に動作させるような仕組みが必要になります。

$(function(){
    var iPhone = (navigator.userAgent.indexOf("iPhone") >= 0) ? true : false;
    var currentOrien = window.orientation; //読み込んだ時点での傾き</p>

<pre><code>$(window).bind('load', changeOrien);
if(!iPhone){
    setInterval(function(){
        if(currentOrien !== window.orientation) {
            setTimeout(changeOrien, 200); //GalaxyS
            }
    }, 500); //IS03 etc..
} else {
    $(window).bind("orientationchange", changeOrien);
} 

function changeOrien(){
    alert(window.orientation);
}
</code></pre>

<p>});

5機種程度を個人的にテストした限りでは、Androidも端末によって「window.orientation」の値の戻し方が異なっていたりしますので、対応機種に応じて調整する必要がありそうです。
上記のコードならば、ある程度の機種は網羅出来ましたが、もうちょっとエレガントに出来そうな気もしますね。

その3画像をiPhone4に対応させる

retinaディスプレイ(高解像度)に対応させる方法はいくつか考えられます。
たぶん以下の3つ位が思いつく所でしょうか。SVGなどありますが、写真などを使う場合もあるので外しました。

・CSSのmedia指定
・システムによる画像名の置き換え
・3GSに対応させない

CSSのmedia指定

以下のようなCSSによる指定がコノルでは、(今のところ)一番現実的な手法となっています。

<link" rel="stylesheet" type="text/css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" href="/css/iphone4.css" />

上記のようにmedia部分に判定を入れる事で、iPhone4用のCSSを定義する事が出来ます。
その2でも紹介した「orientation : landscape」や「orientation : portrait」などと同じような指定ですね。
CSSを2つ作るのはコスト的には微妙ですが、今のところ一番対応させやすい方法と言えるでしょう。

システムによる画像名の置き換え

ウェブ系のシステムが使えれば、ルールなどを決めて画像名やCSS名を置き換えるような仕組みを作ってあげる事が可能なので、比較的簡単に対応出来るはずです(仕組みにもよりますが、CSSなどで指定したbackgroundの問題などの解決方法が必要ですね…)

3GSなどに対応させない(高解像度のみ対応)

これは英断ですね。でも今後の事を考えるのであれば、十分有り得る話でしょう。
もうちょっと先の話…ですかね?

その4スワイプに対応させる

iPhoneやAndroidなどのスマートフォンでは、スワイプ(フリック)・ピンチ(イン/アウト)などの特徴的なUIが挙げられます。これにHTML5やCSSだけでは対応が出来ません。この部分はJavascriptで実装をしていく必要があります。
全て開発するには時間もかかってしまう部分ですので、ここはjQueryなどのライブラリにお世話になった方が得策ですね。私が使った事のある3つのプラグインをご紹介します。

jQuery Swipe

スワイプ後の処理の設定が可能です。左右のみに対応しています。
とりあえず左右のスワイプで何かの処理を行うなどであれば、これで十分かと思います。

var swipeOptions = {
    swipeLeft:leftMove,
    swipeRight:rightMove,
    allowPageScroll:"auto"
}
$('#photos').swipe(swipeOptions);</p>

<p>function leftMove(){
    //左方向へのスワイプ後の処理
}
function rightMove(){
    //右方向へのスワイプ後の処理
}

jQuery.flickable

上下左右のフリック以外にも色んな手段に対応しているプラグイン。ただし、余白を入れる事を前提としているためオリジナルのデザインを組み込む場合は注意が必要です。iPhone/Android両方対応

$(function() {
    $('#flickable1').flickable();
});

flickGal

Yahoo!のスマートフォンサイトのようなUIがすぐに作れます。目的がはっきりしている場合には、非常に簡単で使いやすいプラグインですね。

$(function(){
    $("#photos").flickGal();
});

これらのUIを取り入れる事で、よりスマートフォンらしいサイトが作れますね。

その5キャッシュを指定する

スマートフォンも携帯である事には変わりありません。常にwifi環境があればPCと同じようにサイト内を巡回していく事も可能ですが、電車などの移動中にも快適にサイトを見せたい場合有効な手段として、同じ画像をキャッシュするような仕組みにすべきでしょう。そうすれば、更新部分のみをダウンロードする事になるので、結果として表示速度の向上が図れるはずです。

「キャッシュマニフェスト」ファイル

HTML5では「cache.manifest」というファイルを作成・リンクしてあげる事でキャッシュの設定が可能です。具体的には以下のように書いていきます。

<!doctype html>
<html manifest="cache.manifest">
・・・
</html>

指定したmanifestファイルには以下のように記述しましょう。一つずつ指定していきます。

CACHE MANIFEST</p>

<h1>Version: 0001</h1>

<p>CACHE:
/images/logo.png
/images/menu1.png
/css/base.css
  :
【省略】
  :
NETWORK:
/api/window
/get.php

最後の仕上げにファイルをサーバに認識してもらうために.htaccessにaddtypeしてあげましょう。

AddType text/cache-manifest .manifest

これでキャッシュが動作するようになるはずです。iPhoneなどは、このキャッシュが動作し出すと指定された画像などは読込をしなくなるため、注意が必要です。
また、Javascriptを使う事でこのキャッシュファイルが最新かどうかをチェックする事が出来るので、オンラインの場合は以下のようなコードを入れておくとキャッシュされているファイルのロードをしてくれるため、うまく使っていきたい所ですね。

var cache = window.applicationCache;
cache.addEventListener("updateready", function() {
    if (confirm('アプリケーションの新しいバージョンが利用可能です。更新しますか?')) {
        cache.swapCache();
        location.reload();
    }
});
if (navigator.onLine) {
    cache.update();
}

1〜5までまとめましたが、それぞれスマートフォン向けのサイトを制作していく上ではどれも重要な要素となるはずです。今後スマートフォンの更なる普及と共に、これらのやり方も一般的なものになっていく事が予想されます。まだまだJavascriptの対応状況などが怪しい部分もあるため、うまく付き合っていくことが大事ですね!


コノルでは、スマートフォン対応に興味があるデザイナーやプログラマーを募集しています!
お問い合わせフォームよりご連絡下さい〜

コニョル

スマートフォン持っているからスマートだというわけではないのですよ…

One Response to ウェブサイトをスマートフォン対応するために必要な5つの事

  1. ピンバック: スマホ対応サイト作成資料 « epkg

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>