多様化するデバイスへの対応その1：それ用のUIを用意する
スマートフォンでは、SafariやChromeなどのブラウザでPCと同じようにWebページを見ることが可能です。ただ、その際に、PCからアクセスのみを想定したサイトだと、どうしても見づらい点が出てきます。反面教師として、いまだスマホに最適化していない僕のBlogを例に挙げましょう。
iPhoneのSafariでアクセスした際のスクリーンショットを見ると、以下のような「不満」が出てきます。
- PCの画面サイズを想定しているのでサイドバーが表示され邪魔になる
- 文字が小さくて文章が読みにくい
- Safariのアドレスバーは隠れて欲しいかも
- スマホにとっては機能があるのでロードが重い……などなど
スマホからのアクセスでも心地よい体験を提供したければ、これらを解決する、それ用のUIを用意した方がいいでしょう。
それ用のUIに振り分けるには？ 各種デバイスを検出する仕組み
では、PC向け、もしくはスマホ向けにUIを振り分けるには、どのような仕掛けが必要になるのでしょうか。具体的には、「HTTPリクエスト」の「User-Agentヘッダ」を見て判断することになります。
連載の第1回でWebページが閲覧されるフローを簡単に解説しました。その際に、ブラウザを含むクライアントがサーバー側にリクエストを送ると紹介しましたが、このリクエスト内に「自分はどのようなOS/ブラウザかどうか？」と言う情報が含まれています。例えば、手元のiPhone5のSafariのUser-Agentは以下のような文字列で表現されます。
Mozilla/5.0 (iPhone; CPU iPhone OS 6_1_4 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10B350 Safari/8536.25
この情報を頼りに、iPhone向けのUIに切り替えたり、スマホ向けのサイトへリダイレクト（転送）することになります。
Webの記事を読むのもいいけれど、リアルゆーすけべーさんに会って直接講義を受けませんか？
本講座では、実際のWebサービス制作における事例やエピソードを交えながら、ディレクターの役割と必要なスキル、そしてチームの共通言語となるWeb基礎技術について学びます。Webディレクターに成り立ての人やWebクリエイターとのやり取りがイマイチうまくいかない人にオススメです。
