同じURLのままPCとスマホで違うページを見せる（ユーザーエージェント条件分岐）
WEBサイトのスマホ対応をさせる場合、レスポンシブルデザインとスマホ専用ページの他にもう一つあります。
ユーザーエージェントを判別し条件分岐でhtmlソースコードを出し分ける方法です。
URLは変わらないのですが更新の手間が2倍になり、ソース量が増えるので負荷も掛かります。
同じURLのままPCとスマホで違うページを見せる
先日WEBサイトの移転を担当した際に、特殊なスマホ版対応をしているケースに遭遇しました。
ユーザーエージェントを判別し、phpの条件分岐でデバイスごとに指定のhtmlソースを表示させる方法です。
確かにスマホ版対応する一つの方法ではありますが、今は他に主流の方法があるのであまり使いませんね。
本記事ではこの「ユーザーエージェント判別によるコードの出し分け」方法の紹介、およびレスポンシブルデザインとの比較もしていきます。
本来は取る必要のない方法です。
今回は移転元のWEBサイトがこの手法を取っていたため、やむなく同じ方法を取ったに過ぎません。
もし今WEBサイトを制作したりリニューアルするのなら、今はレスポンシブルデザインを採用するべきでしょう。
ですが今回は再構築によるデータの引っ越しだったので、あえて実施した形です。
※そもそも移転対象のWEBサイトの仕様が古い状態でした。
ユーザーエージェントで条件分岐
この手法は基本的に、1つのHTMLファイルにPC版のソースとスマホ版のソースを個別に全て記載されています。
ポイントはPC閲覧かスマホ閲覧かをユーザーエージェントで判別する点です。
それにより、対象となるHTMLソースを条件分岐で出し分けしているのですね。
開いたデバイスがPCならPC専用のソースのみを表示し、スマホならスマホ専用のソースのみを表示する訳です。
こうすれば同じURLのまま、デバイスごとに全く違うコンテンツを表示させる事ができます。
HTMLソースコード例
<?php function is_mobile() { return preg_match( '/android.+mobile/i', $_SERVER['HTTP_USER_AGENT'] ) || preg_match( '/iphone/i', $_SERVER['HTTP_USER_AGENT'] ); } ?> <?php if (is_mobile()): ?> ここにスマホ版のHTMLソースを入れる <?php else: ?> ここにPC版のHTMLソースを入れる <?php endif; ?>
HTMLソースを入れる箇所は、冒頭の<html>から一番最後の</html>までを丸ごと入れるので、相当長くなります。
上記のコードは、htmlソース内専用の書き方になっています。
htmlでphpを動かす
引っ越し対象のWEBサイトはほとんどのページに「.html」の拡張子が付いていました。
.htmlで今回の手法を実装するためには、htmlファイルでphpが動く様にしなければなりません。
そこで.htaccessにあらかじめ、phpを動かすための追記をしています。
htmlでphpを動かすコード例
AddHandler application/x-httpd-php .php .html
上記は一例であり、サーバーにあった記述が必要です。
もし移転元データのファイル拡張子が.phpならば、当然最初からphpファイルを用意しています。
移転前と移転後でURLが変わらない様にするため、あえて.htmlファイルにしています。
デメリット
この方法を使ったスマホ版ページの準備は、先述した通り今はあまり使いません。
それはレスポンシブルデザインと比べて、以下のデメリットがあるためです。
コード量が増える
確かにこの方法なら、ユーザーエージェントごとに全く違うページを表示させる事が可能です。
その意味ではレスポンシブルデザインよりもカスタマイズ性は高いと言えるでしょう。
しかし、その分ソースが肥大する事は忘れてはなりません。
PC版のソースとスマホ版のソースを縦に並べている訳ですから、コード量は単純に2倍になりますよね。
更新はPC版とスマホ版とが必要
この仕組みの場合は更新の際も注意が必要です。
通常レスポンシブルデザインの場合は対象データが一つだけなので、1か所を更新すれば問題はありません。
しかし条件分岐によるソース出し分けの場合、1つのファイルとは言えどもPCコードとスマホコードとが完全に別々に分かれています。
手間も2倍になる
ページを一部更新する場合、PCコードとスマホコードの2か所を更新しなければならないのです。
更新漏れが起きると、PC版は更新されているのにスマホ版が反映されない等のトラブルになります。
更新箇所が多い場合、作業の手間が2倍になるのは大変です。
発見した経緯
案件を受けた際、最初はこの条件分岐によるソース出し分けが実装されている事を知りませんでした。
データの実物を頂いた訳ではありませんし、当然説明などはありません。
ですので一応発見までの経緯を簡単にご紹介しておきます。
WEBサイトの移転案件
今回も例によってWEBサイトの引っ越し依頼を頂いたのが事の発端です。
クライアントは現在の業者契約を解約し、弊職に保守を頼むため問い合わせをしてきました。
引っ越しと同時に管理をこちらでもらい受ける事になります。
引っ越しは再構築で
今回は現行管理者との契約で、FTP情報はもちろんHTMLやCSSなどの実物ファイルももらう事ができませんでした。
となればHTMLソースや画像・CSS・JSファイルを一つずつ全てコピーして、いわゆるWEBサイトの再構築をする事になります。
これは今まで何度もやった事があります。
ブラウザのF12ディベロッパーツールを使えば、時間は掛かりますがそれほど難しい事ではありません。
レスポンシブルデザインではない
確認をしているうちにある事に気づきます。
対象WEBサイトはPC版ではPCサイト、スマホ版ではスマホ向けページが表示されます。
しかしソース上には今主流のレスポンシブルデザイン向けのレイアウトが使われていません。
ディベロッパーツールで確認してみると、PC版のHTMLソースとスマホ版のHTMLソースが全く違うのです。
ソースは変わるがURLは変わらない
一番のポイントは、PC版とスマホ版のURLは全く同じである事です。
以前よく目にしていたスマホ版だけ別ディレクトリのデータを見せているパターンであれば、スマホ表示時にURLが変わります。
ところが今回はそうでなはく、どちらも全く同じアドレスなのですね。
アドレスは変わらないのに、PCとスマホで全く違うソースコードが表示される訳です。
今はどの方法が最適か
この状況から、PC版とスマホ版とでページを見せるもう一つの方法に気づきました。
それがユーザーエージェントを判別して、表示するコードを出し分ける方法です。
私自身も引っ越し案件で遭遇したのは初めてです。
スマホ対応させる方法には3つある
スマホページ対応をさせる方法として有名なのは以下の方法です。
・レスポンシブルデザイン
・スマホ専用ページ
これに加えてもう一つ、今回「条件分岐によるソース表示」に遭遇しました。
・レスポンシブルデザイン
・ユーザーエージェント条件分岐によるソース表示
・スマホ専用ページ
今回紹介したユーザーエージェントでソース表示を分岐させる手法は、レスポンシブルデザインとスマホ専用ページの中間の様な位置づけでしょう。
この手法の一番の特徴は、1番のレスポンシブルデザインと同様にURLが変わらない事ですね。
特徴比較
これを踏まえて、PCスマホ対応に関する3つの方法の特徴をまとめてみました。
| タイプ | レスポンシブルデザイン | スマホ専用ページ | 条件分岐によるソース出し分け |
|---|---|---|---|
| 手法 | 新しい | 古い | 古い |
| コード | 普通 | 普通 | 長くなる |
| 更新 | 1か所 | 2か所 | 2か所 |
| URL | 変わらない | 変わる | 変わらない |
| デザイン | ある程度制限あり | オリジナル性あり | オリジナル性あり |
| レベル | css知識 | 簡単 | プログラム知識 |
一番はレスポンシブルデザイン
上記比較を見てわかる通り、やはりbootstrapCSSなどに関する知識を身に着けてレスポンシブルデザインを実現するのが一番だと思われます。
レスポンシブルデザインであれば、PCとスマホとも同一データなので1か所更新すれば済みます。
アドレスも変わらないので、SEOのインデックスにも有利です。
アドレスが変わる
それに対しスマホページを別区画で用意するとスマホ版閲覧時にURLが変わってしまいます。
これはGoogleのクローラーに読み込先を2つ指し示す事になり、厄介です。
いつも2回更新
レスポンシブルデザイン以外の手法は更新の際、PCとスマホとそれぞれを更新しなければなりません。
更新の量が多い場合は一苦労になりますね。
速度低下
条件分岐によるソース出し分けはphpで動かしているので、htmlと比べると負荷も掛かり、速度もその分遅くなるでしょう。
※それ以外にローカル環境でphpが動く様にしないと事前確認ができない事もあります。
今回は担当したWEBサイトが古かったため、やむなくこの手段を採用しました。
これからリニューアルなどを考えているならば、できるだけレスポンシブルデザインレイアウトを採用しましょう。
