■ ■ ■ ■ ■ ■ ■ ■ ■

MODXでPC用、スマホ用コンテンツ出し分け


MODXでPCや携帯、スマホ別にテンプレートを切り替えて表示するプラグイン「MobileConverter」 をこのサイトで公開しているけど、正直使い方はそこそこ難しい。細かい条件定義だったり、文字コード変換、画像の自動拡大縮小、cookie制御も含めて特に必要なくて以下の要件を満たすだけなら、MobileConverterを使うまでもないです。

とりあえず試しに新デモサイトでMODX Evoの「サンプルサイト有標準インストール(バージョン1.0.6J)」パッケージを展開して適当に設定してみます。

スマホ用のリソースを作成

スマホ用リソースの作成 
スマホ用のリソースは標準で入っているもう一つのテンプレート「Minimal Template」を指定して、本文(コンテンツ)も適当に入力します。スマホ用リソースのIDは17になりました。

テンプレート変数を作成

テンプレート変数作成1 
変数名は「リソース切替」、入力タイプは「Text」

テンプレート変数作成2
テンプレートとの関連付けは「xRay」

プラグインを作成

プラグインに以下のPHPコードをつっこんで保存。

/** * リソース切替 * * スマホ用のリソース切替プラグイン * * @category plugin * @version 1.00 * @license http://www.gnu.org/copyleft/gpl.html GNU Public License (GPL) * @author soushi * @internal @events OnWebPageInit * @internal @modx_category リソース切替 * @internal @properties &agent=エージェント;text;android,iphone */ $f=false; $agents=explode(',',$agent); foreach( $agents as $val ){ if( preg_match('/'.$val.'/i',$_SERVER["HTTP_USER_AGENT"]) == 1 ){ $f=true; } } if( $f ){ $tv_val=$modx->getTemplateVarOutput(array('リソース切替')); if( !empty($tv_val['リソース切替']) && preg_match('/^[0-9]+$/',$tv_val['リソース切替']) ){ $modx->sendForward($tv_val['リソース切替']); } }

簡単に中身を説明するとUser Agentが「android」「iphone」の時に違うリソースIDの中身を返すようなコードです。

Home(1)のリソースを編集

サンプルサイトのトップページにあたるHome(1)のリソースを編集します。 

スマホ用リソースIDの記述
テンプレート変数の「スマホ用のリソースIDを記述します」のところに、最初に作ったスマホ用リソースのリソースIDを入力します。

ブラウザでアクセスしてみよう

PCのブラウザでトップページにアクセスするといつものサンプルページが表示されます。そしてスマホのブラウザでトップページにアクセスするとスマホ用に作ったリソースID17の中身が表示されます。

これでトップページだけスマホ用のページができました。他のページも同じような要領で作っていけばスマホ用のページが作れます。ちなみにPCページはあるけど、スマホページがないというリソースの場合は、「スマホ版はありません」というスマホ用のリソースを作って全てそこに飛ばすようにするといいかなと思います。

応用偏

上記のサンプルではスマホでアクセスしてもPC用のページを見たいときにPC用ページを開くことができません(Agentで強制的に変わるため)。この場合、PC用を見たいときは特定のcookieを設定させ、そのcookieがある場合はPC用を表示するようなロジックを入れれば実現できます。プラグインのコードはシンプルなのでphpが書ける人は直ぐ書けると思います。

ちなみにこの機能はMobileConverterにも搭載されていたり(ちょっとスペルミスがあるけど…orz)。

作成日：2012/03/24 02:59:03
トラックバック
TrackbackURL:このページのトラックバックの受付は終了しています。

トラックバックはありません。
コメント
※スパムコメントが届くようになったためコメント投稿を中止しました。