カテゴリー別アーカイブ: スマホ

スマホ/PCからのアクセスを厳密に判定する方法

User-Agentを利用して、スマートフォンからのアクセスなのか、PCからのアクセスなのかを判定することは既に記事が数多く出ていますね。

しかし、User-AgentはPCからのブラウザで簡単に偽装が可能です。
ガラケーの場合は、User-Agentが偽装されていたとしても、IPアドレスやUIDなど契約者固有IDによって、実際の携帯電話からのアクセスなのか判定できていました。

スマートフォンの場合は、Wifi経由でアクセスされることもある上に、契約者固有IDが取得できないため(というか、スマートフォンはほぼPCなので基本的には何でもあり)、User-Agentが偽装されてしまうと判定ができなくなってしまうわけです。

3G回線のみでアクセスされることを前提にするならば、厳密に検出することはスマートフォンでも可能です。

NTTドコモ – IPアドレス帯域(spモード)
KDDI – IPアドレス帯域
Softbank – IPアドレス帯域

しかし、この方法は現実的ではありません。

IPアドレスは使えない、User-Agentも偽装されてしまう。
こうなると、検出方法がないのでは?と思い、はてなで質問もしてみました。

スマートフォン用のサイトを制作しています。PCブラウザでスマートフォンのUserAgentに偽装されても、アクセスを受け付けないようにする方法ってあるのでしょうか。
http://q.hatena.ne.jp/1330229019

バッチリな回答はもらえなかったものの、ヒントは得ることができました。
クライアントサイドスクリプトのコマンド有無による判定が使えるかも?とのことです。

モバイル用のブラウザには、touch判定用のJavascriptのイベントハンドラが実装されています。
かたやPC用のブラウザにはそのようなイベントハンドラはありません。画面に直接触って操作するのではないから、当たり前ですね。

これを判定するためには、HTML5/CSS3の仕様をブラウザごとに判別してくれるライブラリ、Modernizrで出来そうです。
HTML5のサイトを作っていると、どのCSSプロパティが、どのブラウザのどのバージョンに対応しているか、このタグはこのブラウザには非対応…など悩まされるかと思います。
ModernizrはHTMLタグに、どの機能が有効なのかをクラスとして書きだしてくれます。

そのような機能を提供しているぐらいなので、このライブラリにはスマートフォンを検出するメソッドも用意されています。
Modernizrを読み込んだ上で、以下のように記述すると判定できるようです。

if (Modernizr.touch){
// bind to touchstart, touchmove, etc and watch event.streamId
} else {
// bind to normal click, mousemove, etc
}

詳細は以下のドキュメントをご覧下さい。

Modenizr Documantation

また以下のページでは、どのイベントハンドラがどのブラウザで有効/無効になるのかが一覧になっていてとても便利ですね。

Modernizr Touch tests

ライブラリを使わず、もっとシンプルに実装したければ以下のように書いておけば、ある程度は判定できると思います。
もう少し厳密にしたければ、window.orientationの角度検出イベントの有無やnavigator.platformなどのチェックを複合的に行えばよいかと。

ちなみに、chromeにはこのようなイベントハンドラ自体を付加するextensionが存在します。
(そこまで有効ではなさそうですが。)

Touch用のイベントハンドラを実装したブラウザ自体を作られてしまう可能性を考えると、ガラケーのように100%の判定は不可能ですが、たいていはこれで判定できるのではないでしょうか。