ブラヴィッシモのいろいろな記事

Movable Type：インデックステンプレートのプレビュー表示

2015/2/3

こんにちは。

今回記事を書くことになりましたおじさんです。

Movable TypeやPowerCMSを使って行く上で、サイトの記事の公開するまでのフローとして以下のような形態をとられることが一般的と思われます。

この際、管理者は実際にページの体裁を見た上で承認を出したいと思うのが普通です。

ですので、基本的にはMovable Type標準の「プレビュー」機能を使って確認を取りたいところですが、
Movable Typeのプレビューで表示できるテンプレートは基本的に「優先アーカイブタイプ」のテンプレートのデザインで表示されます。

ここで、「製品の一覧ページをプレビューしたい」や「カスタムフィールドの値でプレビュー時のデザインを一覧ページと詳細ページで切り替えたい」等の要望が出てくるかと思います。

また、プレビュー時にブラウザバックをしてしまうと一時的にプレビュー用のファイルが残ってしまうのも気になる場合があると思います。

プラグイン等で制御できるものも出ておりますが、プラグインは極力入れたく無いという場合もあるかと思います。そこで、各ブログでプレビュー表示専用のテンプレートを作ってしまうという手段を紹介します。

ケースごとに対応方法が異なるため、今回は「インデックステンプレートのデザインでプレビューを見る」を追って行きたいと思います。

１・Movable Typeのプレビュー機能の仕様とインデックステンプレート
まずは、Movable Typeにおける「プレビュー機能」に関して説明します。

先ほど書きましたが、Movable Typeの標準のプレビュー機能は「優先アーカイブタイプ」の
テンプレートを表示します。

例えばブログ内に「インデックステンプレート」しかない場合、プレビューすると以下のような
タイトルと本文のみのテキスト表示になってしまいます。

実際にインデックステンプレートのデザインでプレビューを表示させるためには
「アーカイブテンプレート」としておなじ内容のテンプレートを作成する必要があるのですが、
記事一覧を表示させるための<MTEntries>タグでは「公開済み」の記事しか取得できませんので、
「現在編集中の未公開記事を一覧で取得できない」ということになります。

２・編集中の記事内容を順序通りに表示させる

編集中の記事の情報を取得させるためには普通の記事詳細ページを作成するときのように
<MTEntries>を使わずにMTタグで情報を取り出せばよいのですが、一覧ページで表示する以上
「表示順を公開ページと同じにしたい」となるのが普通だと思われます。

一覧表示させる上で<MTEntries>タグで想定の表示順序で表示させるためには、まず
<MTEntries>タグ外で編集中の記事情報と表示順の制御に使う値を配列に入れ,
記事のIDを配列のキーに指定しておきます。

その上で、現在登録されている記事の一覧を<MTEntries>で取得し、配列に入れていきます。
後は、配列をループさせる中でプレビューさせる記事を想定の位置で表示できるように
制御すればよいです。今回の場合は「記事アーカイブ」での作成を想定しています。

例)記事公開日で制御を行う場合

<mt:ignore>プレビュー中の記事情報の取得し、配列に入れます</mt:ignore>
<$mt:setvar name="pre_id" value=""$>
<$mt:setvar name="titles" value=""$>
<$mt:setvar name="ent_date" value=""$>
<$MTEntryID setvar="pre_id"$>
<$MTEntryTitle setvar="titles" key="$pre_id"$>
<$MTEntryDate format="%Y%m%d%H%M%S" setvar="ent_date" key="$pre_id"$>

<mt:ignore>記事一覧の情報取得し、同じ配列に入れます</mt:ignore>
<MTEntries sort_by="authored_on" sort_order="descend">
   <$mt:setvar name="ent_id" value=""$>
   <$MTEntryID setvar="ent_id"$>
   <mt:ignore>プレビューする記事が既に保存されている場合に記事IDではじきます</mt:ignore>
   <mt:if name="ent_id" ne="$pre_id">
      <$MTEntryTitle setvar="titles" key="$ent_id"$>
      <$MTEntryDate format="%Y%m%d%H%M%S" setvar="ent_date" key="$ent_id"$>
   </mt:if>
</MTEntries>

<mt:ignore>記事公開日を入れた配列を記事公開日の降順でループさせ、
記事の情報を配列のキー(この場合は記事ID)で関連付けて表示させます</mt:ignore>
<MTLoop name="ent_date" sort_by="value numeric reverse">
<p>記事タイトル：<$mt:getvar name="titles" key="$__key__"$></p>
</MTLoop>

今回の場合は記事公開日がすべて異なる想定ですが、記事公開日が同じ記事が複数件あった場合は
<MTEntries>の仕様でどうやら記事IDの降順で取得されるようなので、順序を制御するための変数が
一つ増えます。

３・プレビュー用のディレクトリを設定する

Movable Typeのプレビューですが、プレビューの際にプレビュー用のファイルを実際に吐き出しており、ブラウザバックでプレビューページを抜けてしまうとファイルが残ってしまうという現象があります。

プレビュー用ファイルは公開ディレクトリに書き出されてしまうので、場合によっては邪魔になることもあると思われます。

このような事態を避ける方法ですが、プレビュー用ディレクトリを公開ディレクトリとは別に作ってしまうという方法があります。

ここで、プレビュー用ファイルが書き出されるディレクトリですが、
各記事のパーマリンクのディレクトリに書き出される仕様となっているようです。

このパーマリンクに設定されるURLですが、各ブログの「優先アーカイブタイプ」の設定と