PowerCMS ブログ

PowerCMSでは、MTIfUserAgentタグを使ってUserAgent毎にテンプレートを切り替える方法が用意されていますが、スマートフォンからの閲覧時にもPC向けのビューを見せたい(ユーザーが選択して切り替えられるようにしたい)というケースがあると思います。このような場合、Cookieを用いてどちらのビューを選択するかを判別できるようにする方法が一般的かと思いますが、MTMLでクッキー情報を簡単に扱うことのできる MTIfCookie ブロックタグ(条件タグ)を作りました。

• alfasado / mt-plugin-if-cookie - GitHub

これまでも <mt:getCookie name="view_pc" setvar="view_pc"> のように一旦変数に入れることで Cookie によって分岐させることが可能でしたが、このプラグインにより、以下のような形式で Cookie の値を変数に入れることなくダイレクトにテンプレートで分岐することができます。

<mt:ifCookie name="foo" eq="1">
    Cookie "foo" が "1" の時に処理される
</mt:ifCookie>

<mt:ifCookie name="foo" like="bar">
    Cookie "foo" に "bar" が含まれる時に処理される
</mt:ifCookie>

<mt:ifCookie name="foo" gt="2">
    Cookie "foo" が "2" より大きい値の時に処理される
</mt:ifCookie>

以下、MTIfUserAgent タグと MTIfCookie タグを使ったスマートフォン/PC向けのビューの切り替えの例です。

まず、JavaScriptによって、クッキー "view_pc" に値をセットするリンクを設置します(クッキーの有効期限については考慮していません。この例ではセッション単位で有効なクッキーがセットされます)。

<a href="#" onclick="document.cookie='view_pc=0';location.reload(true);">スマホビュー</a>
<a href="#" onclick="document.cookie='view_pc=1';location.reload(true);">PCビュー</a>

テンプレートは以下のようになります。DynamicMTMLで動作させるブロックに記述します。

<mt:ifUserAgent wants="PC"><mt:setvar name="view_pc" value="1"></mt:ifUserAgent>
<mt:ifUserAgent wants="Tablet"><mt:setvar name="view_pc" value="1"></mt:ifUserAgent>
<mt:ifUserAgent wants="Smartphone" exclude="tablet"><mt:setvar name="view_pc" value="0"></mt:ifUserAgent>
<mt:ifCookie name="view_pc" eq="1"><mt:setvar name="view_pc" value="1"></mt:ifCookie>

<mt:if name="view_pc">
    PCビューレンプレート
<mt:else>
<mt:ifUserAgent wants="Keitai">
    携帯(フィーチャーフォン)ビューテンプレート
<mt:else>
    スマホビューテンプレート
</mt:ifUserAgent>
</mt:if>

このテンプレートによって、PC、タブレットからの閲覧時、及びスマートフォンでの閲覧時にPCビューを選択した際にPC向けのテンプレートが使われるようになります。

MTのテンプレートに記述するときは、判別処理及び分岐処理を DynamicMTML で処理されるようにするため、MTDynamicMTMLタグ及び MTML タグを利用して以下のように記述することになります。

<mt:DynamicMTML>
<mt:ifUserAgent wants="PC"><mt:setvar name="view_pc" value="1"></mt:ifUserAgent>
<mt:ifUserAgent wants="Tablet"><mt:setvar name="view_pc" value="1"></mt:ifUserAgent>
<mt:ifUserAgent wants="Smartphone" exclude="tablet"><mt:setvar name="view_pc" value="0"></mt:ifUserAgent>
<mt:ifCookie name="view_pc" eq="1"><mt:setvar name="view_pc" value="1"></mt:ifCookie>
</mt:DynamicMTML>

<mtml tag="mt:if" params='name="view_pc"'>
    PCビューレンプレート
<mtml tag="mt:else">
<mtml tag="mt:ifUserAgent" params='wants="Keitai"'>
    携帯(フィーチャーフォン)ビューテンプレート
<mtml tag="mt:else">
    スマホビューテンプレート
<mtml tag="/mt:ifUserAgent">
<mtml tag="/mt:if">