HOMEブログModxModx ユーザーエージェントによる表示切り替え 【表示スニペット】

Modx ユーザーエージェントによる表示切り替え 【表示スニペット】

投稿日:2011年11月14日

Modxに限った事では無いのですが、CMSを使用していれば必ずと言っていいほど、モバイル用のプラグインがあります。しかし現状のスマホの普及率を考えると、ユーザーエージェントによるファイル変更はこれからの主流にはならないでしょうね。

ご注意

ブログ移転に伴い、この記事は2011年11月に公開されたブログを一部修正して、再掲載しています。
元のブログはこちらです。
横浜で、ホームページ製作をしている自転車乗りの堅物。 横浜本田WEBブログ

Modx ユーザーエージェントによる表示切り替え 【表示スニペット】

ブラウザーのユーザーエージェントを使って、表示(内容)を切り替える極簡単なスニペット。

ページ全体の表示を切り替えるのであれば、MobileConverter※1を使用すれば、指定したブラウザー毎に表示変更が可能になりますが、そこまで必要ないと言ったような場合に意外と便利。

ページの極一部の表示がそのブラウザーに対応していないなどの場合、新たにテンプレートを作るよりは効率的?ではないかな。


●iPadなどでFlashを採用している箇所を他のパーツに置き換える。
●IE8以前のブラウザーは、別のCSSを読み込ませる。

など。

基本的に、スニペットなので、テンプレート内のどこに設置しても動作しますし、書き換えの内容もスニペット・チャンクの別を問わないので、使用範囲も幅広いはずです。

サンプル

<?php
  $agent = $_SERVER['HTTP_USER_AGENT'];
  if(ereg("^DoCoMo", $agent)){
  ■■■;// DoCoMo対応
  }else if(ereg("^J-PHONE|^Vodafone|^SoftBank", $agent)){
  ■■■;// ソフトバンク部類
  }else if(ereg("^UP.Browser|^KDDI", $agent)){
  ■■■;// AU?
  }else if(ereg("iPhone", $agent)){
  ■■■;// iPhone
  }else if(ereg("WILLCOM", $agent)){
  ■■■;// WILLCOM
  }else if(ereg("^PDXGW", $agent)){
  ■■■;// PDXGW
  }else if(ereg("DDIPOCKET", $agent)){
  ■■■;// DDIPOCKET
  }else{
  ■■■;// 上記以外 PC等?
  }
  ?>

■■■部に、表示させたい内容を書き出す。
書き出す方法は、echo または、return 文で。

また、ターゲットとするブラウザーが決まっている場合は、こんなにユーザーエージェントを列挙する必要はないので、ターゲットとするブラウザーのみを書けばよいです。

基本的にphp構文ですので、Modxだけではなく他のCMSへの流用も可能です。

ユーザーエージェントの種類に関しては、下記サイトを参照。
PCブラウザ
http://www.openspc2.org/userAgent/

スマートフォン関連
http://www.kagua.biz/android/ualist.html

※1
MobileConverterはユーザーエージェントで指定したブラウザーに対して、使用できるテンプレートは1種類しか利用できなくなるので、MobileConverterのタイトル通り、モバイル用にした方が無難でしょうかね…

お問い合わせはお気軽に

この記事が面白いと思ったら、下のボタンをお願いします。

御社にとってのホームページとは何ですか。

横浜でホームページ製作を始めて、10年以上が経ちます。ホームページ制作会社は、横浜にも数多くありますので、私の様な個人で仕事をしている者へのお仕事依頼はなかなかありませんが、ご相談頂ければ、フットワークの良さと、フレンドリーで身近にお役にたつようなお仕事を心がけております。

ホームページ製作はもちろんのこと、DM製作やパンフレット等の紙媒体の製作も行なっております。

最近は、CMS(主にWordPress・modx)によるホームページ制作を主に行なっております。

直接お話をお伺い出来るエリアは、横浜市内および、横浜近郊の神奈川県。東京都23区の一部とさせて頂いておりますが、エリア外でも対応が可能ですので、まずは、お気軽にご連絡ください。