スマートフォンとPCの振り分け

　ここまでできたらいよいよサイトの公開です。今回は、スマートフォンサイト用に「iphone」というサブドメインを割り当てました。

　作成したファイルを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からのアクセスだった場合に実行する処理を作っていきます。

ツイートする

この連載の記事

• 第10回  jQueryでiPhone風スライドパネルを作ろう
• 第9回  CSS＋jQueryでクロスデバイスサイトを作ろう
• 第7回  HTML5/CSS3で作るスマートフォンサイトの基本
• 第6回  実例でわかる！スマートフォンサイトの画面設計
• 第5回  スマートフォンサイトをデザインする7つのポイント
• 第4回  スマートフォン対応サイトを設計するときのノウハウ
• 第3回  サイト制作の前に知りたいiPhone/Androidの仕様
• 第2回  作って学ぶスマートフォン対応サイトの基本
• 第1回  スマートフォン対応サイトの作り方、教えます
• この連載の一覧へ

この記事の編集者は以下の記事をオススメしています

• 実践！iPhone＆Androidサイト制作ガイド

• iPhoneサイトを無料作成！Dreamweaver拡張機能が登場

• スマートフォン時代のモバイルサイトの条件とは？

はてブ注目ランキング

1. 世界を変える方法は山川の教科書に書いてある638 users

2. 10分でわかる！ jQuery Mobileのキホン103 users

3. iBooks AuthorでHTML5の電子書籍作ってみた77 users

4. HTML5要素のブラウザー実装状況を調べてみた39 users

5. コンテンツを依頼するときのSEOチェックリスト1738 users

6. 40分で覚える！jQuery速習講座2225 users

7. 絶対見ておきたい有名企業のスマホサイトまとめ2151 users

8. もう配色には困らない！「Adobe Kuler」1683 users

9. 30分でできる！Webサイトを高速化する6大原則1498 users

10. Web制作会社が作った！超使えるJavaScriptライブラリ1217 users

最新記事

• 「サイトアドバイザー」でネットの危険を神回避！

  

• iTunes in the Cloudだけじゃない 担当者が教える5つの新機能

  

• au版iPhoneのキャリアメールが3/13からリアルタイム受信対応

  

• HDDの容量を飛躍的に増加！　熱アシストの正体とは？

  

• REGZAサーバー録画中の「できること」と「できないこと」