スマートフォンとPCの振り分け
ここまでできたらいよいよサイトの公開です。今回は、スマートフォンサイト用に「iphone」というサブドメインを割り当てました。
- ・プレイグループ木場校（スマートフォンサイト）
- http://iphone.playgroup-kiba.com/
- ・プレイグループ木場校（PCサイト）
- http://playgroup-kiba.com/
作成したファイルをWebサーバーにアップロードすれば一応完成ですが、スマートフォンサイトのURLをユーザーに入力してもらうのは現実的ではないので、iPhone/AndoridからPCサイトにアクセスしたときには自動的にスマートフォン専用サイトに振り分けるようにしましょう。
iPhone/Androidからのアクセスを判別して専用サイトに振り分けるには、JavaScriptやPHPなどのプログラム言語か、Webサーバーの設定を利用します。今回はもっとも手軽なJavaScriptを使って振り分ける方法を紹介します。まず、端末の振り分けのときに利用するのが、「ユーザーエージェント」と呼ばれる情報です。
ユーザーエージェントとは
ユーザーエージェント（User Agent）とはWebブラウザーや検索エンジンのクローラーといったWebサイトへアクセスするプログラムのことですが、Web制作では一般的に、WebブラウザーがHTTP通信時にサーバーへ送信する固有の文字列情報を指します。たとえば、iPhone 4のSafariのユーザーエージェントは次のような文字列になっています。
ユーザーエージェント文字列にはOSやブラウザーの名称、バージョンといった情報が含まれているので、ユーザーエージェントを見ればユーザーがどんな環境からアクセスしているか分かるというわけです。
Android端末（ここではHTC Desire）の「ブラウザ」のユーザーエージェント文字列は次のようになります。
これらのユーザーエージェント文字列を利用して、iPhoneやAndroidからのアクセスを判断します。たとえば、iPhoneには必ず「iPhone」というキーワードが含まれていますし、Androidはメーカーや端末が異なっていても「Android」というキーワードが含まれています。
JavaScriptでiPhone/Androidを判別する
ユーザーエージェント文字列の取得の方法はプログラム言語によって異なりますが、JavaScriptの場合は次の方法で取得できます。
navigator.userAgent
取得したユーザーエージェント文字列に「iPhone」や「Android」といったキーワード含まれているかはindexOf()というメソッドで判断します。具体的なプログラムは次のようになります（本連載ではJavaScriptの詳しい文法は紹介しませんので、必要に応じて入門書籍などを参照してください）。
<script type="text/javascript">
// iPhoneまたは、Androidの場合は振り分けを判断
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
if(confirm('プレイグループ木場へようこそ。このサイトにはスマートフォン用のサイトがあります。表示しますか？')) {
location.href = 'http://iphone.playgroup-kiba.com';
}
}
</script>
プログラムを少しずつ分解して見ていきましょう。まず、ユーザーエージェントがiPhoneかどうかは次のようなプログラムで調べられます。
if (navigator.userAgent.indexOf('iPhone') > 0)...
indexOf()メソッドは、指定したキーワードを発見すると文字列中の位置を、発見できなければ「-1」の数値を返します。そのため、値が「0より上」であればキーワードが発見できた（＝iPhoneからのアクセス）と分かります。
同様に、Androidかどうかは次のようにして調べられます。
if (navigator.userAgent.indexOf('Android') > 0)...
今回のように「iPhoneまたはAndroid」と判断したい場合は、「||（または）」という記号で2つの判断をつなげます。
if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0)...
iPhone/Androidだけでなく、iPod touchからのアクセスもスマートフォンサイトに振り分けたい場合もあるでしょう。iPod touchのユーザーエージェント文字列は次のようになっています。
iPod touchからのアクセスでは、「iPod」というキーワードが含まれるのが特徴です。ブラウザーを搭載したiPodはiPod touchしか存在しませんので、このキーワードを手がかりにします。前のルールに従ってつなげて記述すると次のようになります。
if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0 || navigator.userAgent.indexOf('iPod') > 0)...
最後にもうひとつ、iPad向けの記述を追加します。第3回で説明したとおり、iPadはiPhoneに非常に近い性質を持つ端末ですが、iPhoneに比べて画面が大きく、ノートPC並みの解像度があるので、スマートフォンサイトを表示すると逆に見づらくなります。そこでiPadからのアクセスの場合はスマートフォンサイトではなくPCサイトを表示します。
iPadのSafariのユーザーエージェント文字列は次のようになっています。
このユーザーエージェント文字列にはキーワード「iPad」しかないので問題ありませんが、発売当初のiPadのユーザーエージェント文字列には「iPhone OS」というキーワードも含まれていました。このキーワードが「iPhone」という文字列が含まれていると判断されて、iPhoneと誤認識する場合があります。そこで念のためiPadを完全に除外する処理を加えておきましょう。次のようになります。
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) ...
少し複雑ですが、indexOf('iPad')メソッドが-1の場合、つまりユーザーエージェント文字列の中に「iPad」が見つからなかった場合の条件を加えることで、「iPhoneというキーワードが含まれており、かつiPadというキーワードが含まれていない場合」という条件になります。
以上で、振り分けの条件が完成です。続いて、iPhone/Androidからのアクセスだった場合に実行する処理を作っていきます。
