,

スマホ用ページを作ろう(3)

昨年の暮れから取り組んでいた、SSK Worldのスマートフォン用ページ。ページのスタイルそのものは11月の段階でほぼ完成していて、あとはどのようにしてスマートフォン用ページに適切なユーザーを誘導するのか?という問題が残っていました。
もう少し具体的に言うなら、普通のPCからのアクセスか、スマートフォンからのアクセスかを判定したい…ということになるんですが、このためにはHTTP_USER_AGENTという環境変数を参照します。ブラウザーがWebページをWWWから取得するときにヘッダー情報として送られてくる、どんな環境で閲覧しているのかを示す文字列で、ブラウザーの種類やOSなどの情報を知ることができます。
もちろん、PHPからもHTTP_USER_AGENTの情報は取得可能で、あとは特定の文字列とのマッチング…例えば「Android」「iPhone」などが含まれているかどうか…で、スマートフォンからのアクセスは判別できる可能性が高くなります。もっとも、HTTP_USER_AGENTはあくまでもクライアント側が自らを「どう名乗っているか」に過ぎないもので、いくらでも詐称は可能なんですが。


文字列関数も強力なPHPですから、その気になればかなり凝った判別プログラムも書けるはずなんですが、日々激動のこの業界で、常に最先端を追いかけるのも大変です。ここは、既存のプログラムを活用させてもらうことにしました。
Mobile DetectというPHPクラスライブラリが公開されています。これを組み込むと、数行の実にシンプルな手順で、相手の環境がスマートフォンか、あるいはタブレットかを判別することができます。jQuery Mobileがスマホ用Webページのデザインを劇的に簡単にしたのと同じように、私たちWebデザイナー(と呼ぶのはあまりに大げさすぎますが)の労力を軽減してくれます。しかも、やろうと思えばさらにマニアックな機種判別もできるようにしてあるようです。


試験的に、個々のブログ記事のページのみに、Mobile Detectによる自動振り分けを仕掛けてみました。TwitterFacebookmixiなどでSSK Worldへのリンクをクリックすると、普通のPCからのアクセスなら従来のPC用ページが、スマートフォンからならスマートフォン用ページが自動的に表示されるはずです。
とりあえず、これで私のTwitterアカウントBOBなどからSSK Worldに流れてくるスマホユーザーの環境はずいぶん改善するはずですが、この単純かつ強引な自動振り分けは、どうもベストの方法ではないような気がします。もう少しいろいろな状況を想定しながら、プログラムをきめ細かくしてみたいところです。
また、トップページなどでは、自動振り分けとはもう少し違う方法で、環境の自動判別を活用するべきのような気がします。これについても、引き続き情報を収集して、ベストな方法を考えてみたいと思っています。
「BOB」でこの記事をチェック!



投稿日

カテゴリー:

,

投稿者:


1回のみ
毎月

記事を気に入っていただけましたか?よろしければ、今後のSSK Worldの活動に向けてご支援をお願いいたします。

SSK Worldを「面白い!」と思っていただける方がありましたら、今後の当サイトの活動継続に向けて、ご支援をお願いいたします。

Choose an amount

¥100
¥500
¥1,000
¥500
¥1,000
¥2,000

Or enter a custom amount

¥

ご協力いただき、ありがとうございます。

ご協力いただき、ありがとうございます。

送金送金

コメント

コメントを残す

タグクラウド

2年縛り Amazon Android BESS Bluetooth CF-B5 CF-R2 CF-R4 CF-RZ4 CF-SV8 DIY iPhone LTE Movable Type Nintendo Switch NuAns NEO Reloaded SNS SSD Webサイト Webブラウザー Windows 10 Windows XP カメラ カーナビ クルマ ショップ ステップワゴンスパーダ スマートフォン バージョンアップ ブログ マラソン レッツノート ログハウス 中日ドラゴンズ 伊豆 倉庫 健康 写真 合唱 塗装 家族 携帯電話 旅行 日本プロ野球 映画 暮らし 東京 槇原敬之 浜松 無線LAN 省電力 自作PC 芝生 花壇 薪ストーブ 薪割り 記念日 野球 音楽 食べる