IT-WEB -- MCタイチ

スマフォ/タブレットPC用WEBサイト制作事始め2011-12-21

初めてのモバイル端末iPod touchを購入したので、遅まきながらスマフォ用サイトを作り始めました。

ところがスマホと言っても、Apple製品だけでなくAndroid携帯もありますし、iPadやIconiaTabと言ったタブレットPCまで考えると一筋縄では行かないことがわかって来ました。

Viewport(画面幅)の設定

スマフォで通常のWebページを見ると、時々左にコンテンツが寄ってしまい右に空白が出来る事があります。あんなに小さな画面なのに何故そうなるのか？

それは、ハード上の解像度とは関係なく画面幅を980px位(機種によって違う)と見なしてページをレンダリングしてしまうからです。Viewportとはそのみなしサイズの事で、デフォルトでは”viewport=980px”とかになっている訳です。

僕が作るWebサイトは以前からリキッドレイアウトなので、ちゃんと横幅一杯に表示されますが、それでも文字が小さすぎてそのままではとても読みにくいです。

そこで、このViewportの設定を変更してやる必要があります。これは簡単でHTMLのmetaタグで次のように設定してやるだけです。

<meta name=”viewport” content=”width=480px”>

嬉しい事に、このタグは通常のPCで閲覧する場合は無視してくれるので、表示は従来通りです。

ところが！タブレットPCは無視せず、この設定を読み込んでしまうのです。すると当然ながら、スマフォをそのままデカデカと拡大したような間抜けなページになってしまいます。

そこで登場するのが、widthプロパティーの”device-width“という特殊な値です。これは文字通り、その端末の解像度に応じた横幅にしてくれます。ただし、これも液晶の本当の解像度とは限らず、iPhoneを初めスマフォなら大抵320pxに設定してあるようです。

これがまた曲者で、画面を横にしたら表示エリアはそのままで、その分拡大されてしまいます。つまり、横にしてもViewport=320pxの設定のままって事ですね。しかもこれが、縮小出来ない。

そこで次に登場するのが、initial-scaleというプロパティーです。画面の拡大/縮小の初期値ですが、これに1.0(等倍)などの値を設定します。纏めて書くと次のようになります。

<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>

こうすると、横表示にしてもコンテンツの縮尺は同じ、つまり表示エリアが広くなります。ただし、縦から横に倒した場合、最初は拡大されて表示されますので、指で縮小させる必要がありますが、一先ずこれでOKでしょう。

参考：スマートフォン時代のWebサイト制作 第2回　スマートフォン特有の表示環境を理解する

iPadの謎

そこで次はSoftbankショップに行き、iPadで表示させると…何ともコンテンツがデカイのです。印象としてはViewportがiPodよりは幾分大きい位で、iPad2の物理的な解像度：1026*768をフルに使っているようには見えません。

元々、iPadのようなタブレットPCの場合、普通のPCと同じように表示しても殆ど問題なく読めたので、Viewport設定は不要なのです。そこで、Useragentを判定して、スマフォのみViewport設定を行うことにしました。

Useragentでスマフォか否かを判定する

Useragent(UA) とは、Webページを閲覧する端末の機種やブラウザやそのヴァージョンを示す固有のコードの事で、アクセス時に必ずWebサーバーに送信されます。これを元に、端末にあった処理を行おうというものです。やり方としては；

  1. PHP(サーバプログラム)で判別し、条件分岐で処理する。
  2. Javascriptで判別し、条件分岐で処理する。
  3. .htaccess(サーバ初期設定ファイル)で判定し、スマフォの場合は専用のベージに飛ばす

がありますが、僕のサイトは皆PHPで動いているし、馴染みの言語なのでこれを使います。具体的な実装方法としては、ネットを探した中で最もスマートでかつ適用範囲が広いと思われるこちらのサイトを参考にしました。

この方は、Wordpress用の”WPtouch”というスマフォ対応プラグインのコードを解析されたそうです。それを改造したというコードを引用しますと；

function is_mobile () {
$useragents = array(
‘iPhone’, // Apple iPhone
‘iPod’, // Apple iPod touch
‘Android’, // 1.5+ Android
‘dream’, // Pre 1.5 Android
‘CUPCAKE’, // 1.5+ Android
//以下省略//
);
$pattern = ‘/’.implode(‘|’, $useragents).’/i’;
return preg_match($pattern, $_SERVER[‘HTTP_USER_AGENT’]);
}

成る程、配列化したキーワードを”|”(orの意味)で連結し、パターンマッチングでモバイル端末かどうか判定しようというわけですね。面白いのはAndroidのバージョンをCUPCAKEなどのニックネームで判別していることです。しかしそれでは、バージョンが増える度に、リストも更新していく必要があるわけで、ちょっと問題ですね。

とりあえず僕の場合、この関数がTrueの時(スマフォの時)ViewportのMetaタグを記述する、と言うことで次のように実装しました。

<?php if (is_mobile()) { ?>
<meta name=”viewport” content=”width=device-width,initial-scale=1.0 “>
<?php } ?>

すると結果は、iPadでは狙い通りViewport設定は読み込まれず、通常のPCサイトとして表示されました。

Android端末のUA判定

ところが！SonyTabのようなAndroidタブレットで見ると、Viewport設定が読み込まれる＝モバイルと判定されてしまうのです。

これはよく考えれば当然で、UAがもしHoneycomb(Android 3.X系＝タブレットPC限定)であっても、”Android”の文字は含まれている訳ですから、上述のis_mobile()関数ではTure判定となります。当然ながら、WPtouchを入れた当ブログも完璧にモバイル表示になっていました(^^；

そこでまた、どうするべきか調べた結果、本家Google先生がウェブマスター向けブログの中で、”ユーザーエージェントに「android」だけでなく「mobile」が含まれているかどうかを検出すべし”と書いてあるではないですか。しかもこれなら、今後バージョンが増えても同じ方法で検出できます。

他に、UAによるモバイル判定についてはこのサイトがよくまとまっていますね。因みに「GALAXY Tab SC-01C」はタブレットだが「Android」と「Mobile」が含まれているらしいですが、これは今回無視します。

そこで、上述のis_mobile()関数の’Android’の部分を‘Android.+Mobile’(正規表現でAndroidとMobileの間に任意の文字が幾つかあるという意味)に変え、’dream’も’CUPCAKE’も消してしまいました。ついでにblackberryは一本化し、Windows mobileも加えたのが次のコードです；

function is_mobile() {
$useragents = array(
‘iPhone’, // Apple iPhone
‘iPod’, // Apple iPod touch
‘Android.+Mobile’, // Android mobile
‘blackberry’, // blackberry
‘webOS’, // Palm Pre Experimental
‘incognito’, // Other iPhone browser
‘webmate’, // Other iPhone browser
‘IEMobile’ // Windows mobile
);
$pattern = ‘/’.implode(‘|’, $useragents).’/i’;
return preg_match($pattern, $_SERVER[‘HTTP_USER_AGENT’]);
}

果たして結果は・・・バッチリでした！GalaxiやSonyタブレットなどiPadクラスの端末では、モバイル設定は読み込まれず、逆にAndroidスマフォではちゃんとモバイル設定になっていました。

機種は確認し忘れましたが、恐らく上述のGALAXY Tab SC-01C(ドコモの店にあった小さめのタブレット)は確かにモバイル判定されたました。中途半端なサイズですが、これだったらPC用サイトで良いと思いますね。これは今後の課題としましょう。

CSSの振り分け

さてここまでは、Viewportを設定することで、表示上の解像度を適正化(＝文字や画像など個々の要素のサイズを適正化)しただけです。このままでは狭い空間に文字や画像がすし詰めの筈なので、次にレイアウトも変更してやる必要があります(段組みを止めて、シングルカラムにするとか)。

そこで、既存のCSS内に次のような記述を追加し、モバイル専用のスタイルを定義しました。

@media screen and (max-device-width: 480px) {
….モバイル専用スタイル…
}

max-device-widthというプロパティーで、最大480pxつまり480px以下ならこのスタイルですよと。注意すべきは、殆どの場合、元々あったPCサイト用のスタイルを上書きする事になるので、この記述はCSSの最後に持ってくる必要があるということです。

その結果、iPod touch/iPhoneでは狙い通り、モバイル用スタイルで表示されるようになりました。ところが(またかいな！)、幾つかのAndroid携帯で試すと、PC用のスタイルのまま表示されてしまいます。これはその機種のViewportが480pxより大きいからでしょう。

これはもう、画面サイズで振り分けるのではなく、上述のUA判定の所でViewportの設定と併せて、モバイル専用のCSSファイルを読み込むようにするのが一番確実のようです。

↓↓ ♥ ♥ ♥ Share this post ♥ ♥ ♥ ↓↓
Line