ホームページ作成/携帯・スマートフォンサイト作成入門

PC版とスマートフォン版サイトを自動で切り替える方法(2ページ目)

PC用サイトにアクセスしてきたスマートフォン利用者を自動的にスマホ用サイトへ誘導できるように、アクセス者の端末(PC/SP)に応じて閲覧先を自動で切り替える機能の作り方をご紹介。閲覧者のユーザエージェント名(ブラウザや機種名)を判別し、「.htaccess」のmod_rewriteを使ってアクセス先を自動振り分けすることで、スマートフォンユーザだけをリダイレクトする方法を解説。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

ユーザエージェント名で、スマートフォンによるアクセスを判別する方法

ブラウザがウェブサーバにアクセスする際には、自身が何者なのかを示すユーザエージェント名という情報を毎回伝えています。このユーザエージェント名は長い文字列で、ブラウザの名称やバージョン番号・OSの名称・端末の種類など、閲覧環境を示すいくつかの名称が連なって構成されています。

このユーザエージェント名を調べれば、アクセス者が利用している端末の種類を判別できます。ここではスマートフォンとして、iPhone(iPod touch)、Android、Windows Phoneの3種類を判別してみます。

※タブレット端末は画面が大きいので、スマートフォン用サイトにリダイレクトするよりは、そのままPC用サイトを表示しておく方が望ましいと考え、ここでは自動振り分けの対象にはしていません。

【このページの目次】


iPhone・iPod touchからのアクセスを判別するには

iPhoneでアクセスされた場合は、例えば以下のようなユーザエージェント名が得られます。

  • Mozilla/5.0 (iPhone; CPU iPhone OS 11_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1
  • Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_3 like Mac OS X) AppleWebKit/603.3.8 (KHTML, like Gecko) Version/10.0 Mobile/14G60 Safari/602.1
  • Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1
  • Mozilla/5.0 (iPhone; CPU iPhone OS 8_4 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) CriOS/45.0.2454.89 Mobile/12H143 Safari/600.1.4
  • Mozilla/5.0 (iPhone; CPU iPhone OS 7_0_4 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) GSA/9.0.60246 Mobile/11B554a Safari/9537.53

また、iPod touchでアクセスされた場合は、以下のようなユーザエージェント名が得られます。

  • Mozilla/5.0 (iPod touch; CPU iPhone OS 11_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1
  • Mozilla/5.0 (iPod touch; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1
  • Mozilla/5.0 (iPod touch; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1
  • Mozilla/5.0 (iPod touch; CPU iPhone OS 8_2 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12D508 Safari/600.1.4

iPodは音楽プレーヤーであってスマートフォンではありませんが、iPod touchならiPhoneとほぼ同じハードウェアで同じOSが使用されており、無線LAN(Wi-Fi)を使ってインターネット接続が可能です。ですから、iPod touchでアクセスされた場合もスマートフォンからの閲覧だと考えて良いでしょう。

上記に挙げたユーザエージェント名から分かるように、細かな数値は端末やブラウザの種類・バージョンによって異なるものの、共通して「iPhone」という文字列が含まれています。したがって、ユーザエージェント名の中に「iPhone」が含まれていれば、iPhoneやiPod touchからのアクセスだと考えて良いでしょう。

備考:iPad(タブレット)の場合には「iPhone」の文字列は含まれない
iOS搭載タブレットであるiPadのユーザエージェント名には、「iPhone」の文字列は含まれていません。ただし、「Mobile」の文字列は含まれています。

  • Mozilla/5.0 (iPad; CPU OS 11_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1
  • Mozilla/5.0 (iPad; CPU OS 10_3_2 like Mac OS X) AppleWebKit/603.2.4 (KHTML, like Gecko) Coast/5.04.110603 Mobile/14F89 Safari/7534.48.3
  • Mozilla/5.0 (iPad; CPU OS 9_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) CriOS/45.0.2454.89 Mobile/13B143 Safari/600.1.4
  • Mozilla/5.0 (iPad; CPU OS 8_4 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12H143 Safari/600.1.4

※iPhone、iPod touch、iPadで使われているOSの名称は「iOS」ですが、ユーザエージェント名の中に「iOS」という文字列は含まれていません。

Androidスマートフォンからのアクセスを判別するには

Android端末でアクセスされた場合は、以下のようなユーザエージェント名が得られます。

  • Mozilla/5.0 (Linux; Android 7.1.2; SH-M05 Build/S4260) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.68 Mobile Safari/537.36
  • Mozilla/5.0 (Linux; Android 6.0.1; F-01J Build/V17R048B) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.83 Mobile Safari/537.36
  • Mozilla/5.0 (Linux; Android 5.1.1; Nexus 5 Build/LMY48M) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.76 Mobile Safari/537.36
  • Mozilla/5.0 (Linux; U; Android 4.4.2; ja-jp; SonySO-02F Build/14.3.B.0.346) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

※以下は、ブラウザがFirefoxの場合です。
  • Mozilla/5.0 (Android 7.0; Mobile; rv:60.0.2) Gecko/60.0.2 Firefox/60.0.2
  • Mozilla/5.0 (Android 6.0.1; Mobile; rv:53.0) Gecko/53.0 Firefox/53.0
  • Mozilla/5.0 (Android 5.0.1; Mobile; rv:41.0.2) Gecko/41.0.2 Firefox/41.0.2

ここでは「Android」という文字列が共通して含まれています。しかし、スマートフォン以外にタブレット端末でもAndroid OSは使われているため、「Android」という文字列だけをチェックするのでは不十分です。そこで「Android」という文字列以外に、Andoroidスマートフォンだけに共通して登場する「Mobile」という文字列の存在もチェックします。

備考:Androidタブレットの場合には「Mobile」の文字列は含まれない
Android OS環境であっても、スマートフォン端末ではなくタブレット端末でアクセスされた場合には、ユーザエージェント名に「Mobile」の文字列は含まれていません。

  • Mozilla/5.0 (Linux; Android 7.0; P00A Build/NRD90M) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.68 Safari/537.36
  • Mozilla/5.0 (Linux; Android 6.0.1; P008 Build/MMB29M) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.83 Safari/537.36
  • Mozilla/5.0 (Linux; Android 5.1.1; Nexus 7 Build/LMY03S) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.76 Safari/537.36
  • Mozilla/5.0 (Linux; U; Android 4.4.2; ja-jp; F-02F Build/V09R19C) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Safari/534.30
  • Mozilla/5.0 (Android 5.1.1; Tablet; rv:41.0) Gecko/41.0 Firefox/41.0

ただし、タブレット端末のブラウザでもユーザエージェント名に「Mobile」の文字列が含まれる場合もあるようです。したがって、この判別方法は完全ではありません。今回にご紹介する自動判別方法では、「スマートフォンからのアクセスであってもPC用サイトを閲覧できるようにする方法」も用意しますから、その機能で対処することにします。

Windows Phoneからのアクセスを判別するには

Windows Phoneのユーザ数は少ない上に、もはや開発も終了してしまいましたので考慮する必要性は低いかもしれません。しかし、ユーザが居ないわけではありませんし、判別条件を追加するのに大した手間も要りませんから、ここでは念のために紹介しておきます。

Windows Phoneでアクセスされた場合は、以下のようなユーザエージェント名が得られます。

  • Mozilla/5.0 (Windows Phone 10.0; Android 4.2.1; NOKIA; Lumia 1520) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Mobile Safari/537.36 Edge/12.10512
  • Mozilla/5.0 (Mobile; Windows Phone 8.1; Android 4.0; ARM; Trident/7.0; Touch; rv:11.0; IEMobile/11.0; NOKIA; Lumia 520) like iPhone OS 7_0_3 Mac OS X AppleWebKit/537 (KHTML, like Gecko) Mobile Safari/537
  • Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; FujitsuToshibaMobileCommun; IS12T; KDDI)

ここでは、「Windows Phone」という文字列が共通して含まれます。したがって、ユーザエージェント名の中に「Windows Phone」が含まれていれば、Windows Phoneからのアクセスだと考えて良いでしょう。

iPhone・Android用の判別条件にも該当するWindows Phone?
Windows Phone版ブラウザのユーザエージェント名として上記に掲載した3件のうち最初の2件には、「Windows Phone」という文字列だけでなく「Android」と「Mobile」や「iPhone」の文字列を含むものもあります。そのため、これらの端末はiPhone・Androidスマートフォン用の判別方法を使った場合でも該当します。この点からも、「なおさらWindows Phone用の判別条件を書く必要性は低い」と言えそうです。

スマートフォンからのアクセスを判別するには

上記でご紹介した3点から、スマートフォンでアクセスされたかどうかを判別するには、ユーザエージェント名の中に、
  • 「iPhone」
  • 「Android」 + 「Mobile」
  • 「Windows Phone」
……のどれかが含まれているかどうかをチェックすれば良いことになります。

※もし、Firefox OSを搭載したスマートフォンも判別の対象にしたい場合は、「Firefox」+「Mobile」の文字列もチェックする必要があります。しかし、Firefox OSはあまり普及しませんでしたし、開発元のMozillaは2016年7月に商用デバイスの開発から撤退しましたので、もはや気にしなくて問題ないでしょう。

それでは最後に、「.htaccess」ファイルを記述して自動振り分けを行う方法をご紹介いたします
  • 前のページへ
  • 1
  • 2
  • 3
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます