Lesson 03 PCとスマートフォンでページを切り替える - Webデザイン表現&技法の新・スマートフォン編

Webデザイン 表現&技法の 新・スタンダード

Lesson03

PCとスマートフォンで ページを切り替える

制作・文

樋山 淳

PC向けのページはUI的にもデザイン的にもスマートフォンで見やすいとはいえない。そこでスマートフォン向けのページを作成し、スマートフォンからアクセスされた場合にそのページへ飛ばす方法を紹介する。

JavaScript や.htaccessを使ったページ分岐を行い、スマートフォンからのアクセ スに対して自動的にスマートフォン専用ページに移動させよう。

JavaScriptを使った【1-1】のコードではiPhone、iPad、iPod touch、Androidでユーザーがアクセスしてきた場合、特定のページに移動するものである。JavaScriptでのページ移動は、PHPなど のプログラムと違い、直接HTML内に記述すればサーバ側で特別な設定をしなくても利用できる。反面、JavaScriptに対応してないブラウザや、JavaScriptの使用を停止しているブラウザでは当然動作しない【1-2】。ただ、現在のスマートフォンではデフォルトでJavaScriptが利用できる状態となっているため、あまり気にする必要はないだろう。


【1-1】metaタグなので、ページのヘッダー部分に記載し、ページの振り分けを行う。location.href部分でリンク先を指定する。この場合はhttp://www.○○○○○.com/i/index.htmlとしている


【1-2】HTMLファイルにJavaScriptとし て記載する場合、スマートフォン向けのページへの切り替えはユーザーの端末側のブラウザが解釈する

【2-1】はサーバ側の.htaccessファイルに記載して振り分ける方法である。.htaccessを使ったページ移動はHTMLファイルへの記述が不要な点がメリットだが、サーバ側で.htaccessの使用ができることが前提となる【2-2】。

.htaccess を使ったページ移動はブラウザにストレスを与えず、リダイレクトでPCページに戻ってしまうようなエラーも防げる。利用できるのであれば、.htaccessが使い勝手がよいだろう。


【2-1】.htaccessファイルなので、Webページを修正する必要がない分簡単に設定できる。ページの移動先はRewriteRule ^$ /i/ [R]と指定している



【2-2】.htaccessの場合、振り分けはサーバ側の処理となり、ブラウザ側に余計なストレスを与えない