今回は、グローバルナビゲーションをプラグインを使って仕上げ、トップページのメインコンテンツ部分（div id="primary"）に最新ブログ記事一覧とMultiblog機能を使った別ブログの最新ブログ記事一覧を表示させます。

Movable Type 4.22へのセキュリティアップデートを忘れずに

くれま先輩：さて！この連載も始まって5ヵ月ほど経過しましたが、その間に数回のMovable Typeのアップデートを経験してまいりました！

ほげ山くん：そして、今回も、ですよね。先輩（笑）

くれま先輩：はい（笑⁠）⁠。皆さまもすでにご存知かとは思いますが、2008年10月15日にMovable Type 4.22がリリースされています。

【参考】

Six Apart - Movable Type News: [重要] セキュリティアップデート Movable Type 4.22 の提供を開始
http://www.sixapart.jp/movabletype/news/2008/10/15-1400.html

くれま先輩：管理画面のクロスサイトスクリプティングによる脆弱性に対処したものなので、まだ対応されていない方は、早めのアップデートをされたほうが良いでしょう。

ほげ山くん：僕も早速、アップデートすることにします！

プラグインを使ってグローバルナビゲーションの並び替えをしよう

くれま先輩：ではでは、今回の本題に入るね！前回の最後に、ほげ山くんから「グローバルナビゲーションの並び順って、希望通りのものじゃないですよね？」と指摘されていたでしょ？

ほげ山くん：本当は「最新情報⁠」⁠→「⁠国内作家の絵本⁠」⁠→「⁠海外作家の絵本⁠」⁠→「⁠赤ちゃん向け絵本⁠」⁠→「⁠会社概要⁠」⁠→「⁠絵本出版のポリシー」と並べたいのに、今のMTタグの書き方では、「⁠国内作家の絵本⁠」⁠→「⁠最新情報」のところが逆順になっているんですよね。

くれま先輩：こんな風に、カテゴリをリストアップする場面で希望の順番にカテゴリを並べ替えるには、カテゴリ名の先頭に数字を付けるなどの方法も使われたりしているんだけど……。私のオススメは、藤本壱さんが配布してくださっている「カテゴリーとフォルダを並べ替えるプラグイン」プラグインを使うこと。

ほげ山くん：便利なプラグインを作ってくださってるんですねー。

くれま先輩：やっぱり、管理画面でWYSIWYGでカテゴリの順番を変えることができるのが、初級の人にはわかりやすいと思うのよ。なので、まずは下記のページから、プラグインをいただいてきましょう。

【参考】

カテゴリーとフォルダを並べ替えるプラグイン（MT4以降用）｜The blog of H.Fujimoto
http://www.h-fj.com/blog/archives/2007/08/28-114447.php

ほげ山くん：藤本さんの解説どおりに、ダウンロードして、解凍して、アップロードして、画面の指示通りにアップグレードしました！

くれま先輩：そうしたら、上部メニューの［デザイン→テンプレート］を選択して、「⁠テンプレートモジュール」一覧の中から「グローバルナビゲーション」をクリック。編集画面に入ってみて。

ほげ山くん：藤本さんの解説にテンプレートの中で、MTSubCategories／ MTTopLevelCategories／MTSubFolders／MTTopLevelFoldersタグを使っている箇所を検索します。と書いてありましたけど、この中にありますねー。

<ul>
<mt:TopLevelCategories>
<li><a href="<mt:CategoryArchiveLink />"><mt:CategoryLabel remove_html="1" /></a></li>
</mt:TopLevelCategories>

<mt:TopLevelFolders>
<li><a href="<mt:BlogUrl /><mt:FolderPath />/"><mt:FolderLabel remove_html="1" /></a></li>
</mt:TopLevelFolders>
</ul>

くれま先輩：そうそう。なので、解説どおり、こういう風に書き換えて保存してね。

<ul>
<mt:TopLevelCategories sort_method="SortCatFld::Sort">
<li><a href="<mt:CategoryArchiveLink />"><mt:CategoryLabel remove_html="1" /></a></li>
</mt:TopLevelCategories>

<mt:TopLevelFolders sort_method="SortCatFld::Sort">
<li><a href="<mt:BlogUrl /><mt:FolderPath />/"><mt:FolderLabel remove_html="1" /></a></li>
</mt:TopLevelFolders>
</ul>

ほげ山くん：「sort_method="SortCatFld::Sort"」が、このプラグインを使えるようになるおまじないみたいなものなんですね。

くれま先輩：おまじないねー（笑⁠）⁠。っで次に、上部メニューの［一覧→カテゴリ］を選択して。カテゴリの一覧に「カテゴリの並べ替え」というリンクができてるでしょ？

ほげ山くん：おぉ、ほんとだ！「カテゴリの並べ替え」をクリックすると、上下移動アイコンが沢山の画面になりました。順番を変えるのが、目で見て分かりやすいですね。「⁠最新情報」カテゴリを先頭にするようにクリックして…と。

くれま先輩：で、「⁠変更を保存」をクリックして、全体を再構築したあと、トップページのHTMLソースを見てみて。

<ul>
<li><a href="http://xxxxxxx.xxxxx/news/">最新情報</a></li>
<li><a href="http://xxxxxxx.xxxxx/japan/">国内作家の絵本</a></li>
<li><a href="http://xxxxxxx.xxxxx/world/">海外作家の絵本</a></li>
<li><a href="http://xxxxxxx.xxxxx/baby/">赤ちゃん向け絵本</a></li>
<li><a href="http://xxxxxxx.xxxxx/company/">会社概要</a></li>
<li><a href="http://xxxxxxx.xxxxx/policy/">絵本出版のポリシー</a></li>
</ul>

ほげ山くん：ちゃーんと最新情報が先頭に来てますねー。便利ですねぇ、これ！

くれま先輩：さらに補足しておくと、ここでご紹介したプラグインを非常にパワーアップさせたプラグインのβ版を、作者の藤本壱さんが公開なさっているのよ。まだこの連載の中では使っていないのだけど、気になる方は、ぜひ使わせていただくと良いと思います！

【参考】

カテゴリ／フォルダ／ブログ記事／ウェブページを並べ替えるプラグインβ版｜The blog of H.Fujimoto
http://www.h-fj.com/blog/archives/2008/10/20-164959.php

ほげ山くん：ブログ記事とウェブページを並べ替えるのもできるんですねー！今まで公開日を変更して並べ替えたりしてたんですよね？

くれま先輩：そうそう、すごいよね！正式版になったら商用やアカデミックでの利用は有償になるんだけど、いずれありがたく使わせていただくことにしようね！

トップページに最新ブログ記事一覧を表示させる

くれま先輩：さてさて、では次は、トップページのdiv id="primary"の中身を作っていこう。

ほげ山くん：div id="primary"って、トップページでは最新情報などを表示させるメインの部分ですよね。

くれま先輩：うん。この中に、最新情報をリストアップする部分が3グループあるよね。

ほげ山くん：「リブリートの新刊」「最新情報」「絵本編集者のつぶやきブログ」ですね。

くれま先輩：その中の「絵本編集者のつぶやきブログ」は、Multiblog機能を使った別ブログの読み込みだから、ちょっと次の説明にまわすね。残りの2つを先に説明するよ。

ほげ山くん：まずは「リブリートの新刊」ですか。

くれま先輩：この部分には、「国内作家の絵本」「海外作家の絵本」「赤ちゃん向け絵本」の3カテゴリのブログ記事を最新から6件表示させることになっているので、それを作っていくよ。

ほげ山くん：じゃ、トップページのテンプレートをいじるんですね。上部メニューの［デザイン→テンプレート］から、インデックステンプレートの一覧の中の「メインページ」をクリックしました。

くれま先輩：そのソースの中に、以前書いたdiv id="primary"があるでしょ？その中に、このサブテンプレートを書いてみてね。

<div id="newBooks">
<h2>リブリートの新刊</h2>
<mt:Entries category="国内作家の絵本 OR 海外作家の絵本 OR 赤ちゃん向け絵本" lastn="6">
<div class="newBooksDetail">
<h3><a href="<mt:EntryLink />"><mt:EntryTitle /></a></h3>
<dl>
<dt>著者名</dt>
<dd><mt:author_name /></dd>
<dt>発売日</dt>
<dd><mt:release_date /></dd>
<dt>対象年齢</dt>
<dd><mt:readers_age /></dd>
<dt>版型</dt>
<dd><mt:book_size /></dd>
<dt>説明</dt>
<dd><mt:EntryBody words="50" /></dd>
</dl>
<p><mt:coverAsset><a href="<mt:EntryLink />"><img src="<mt:AssetThumbnailURL width="100" />"alt="<mt:EntryTitle />" title="<mt:EntryTitle />" /></a></mt:coverAsset></p>
</div>
</mt:Entries>
</div>

ほげ山くん：あ、なんだか第3回で作ったカスタムフィールドの名前が出てきてますね。なるほど、こんな風にmt:xxxxx（作成したカスタムフィールドのタグ）って使えばいいんですね。あれ、でもmt:coverというタグの後ろにAssetっていう文字列がついて、ブロックタグが書かれてますね。これって…？

くれま先輩：カスタムフィールドにアップロードした画像などのアイテムを表示させるには、このAssetっていう文字列が必要なのよ。詳しくは、以下の参考リンクを見てね。

【参考リンク】

カスタムフィールドでアップロードしたアイテムを表示するには|Movable Type 4 ドキュメント
http://www.movabletype.jp/documentation/professional/custom-fields
.html#item_view

ほげ山くん：なるほどー。で、mt:AssetThumbnailURLというMTタグで、アップロードした画像から生成されたサムネイルのURLが出力されるんですね。width="100"っていうモディファイアがありますけど、これで生成するサムネイルの横幅を指定しているんですねー。

くれま先輩：やだ、ほげ山くん、すごくよく分かってるじゃない！

ほげ山くん：テンプレートタグリファレンスで調べました（笑）

くれま先輩：うんうん。で、これを再構築すると、こうなる。

<div id="newBooks">
<h2>リブリートの新刊</h2>
<div class="newBooksDetail">
<h3><a href="http://xxxxxxx.xxxxx/japan/post.html">ゆうえんちへいこう</a></h3>

<dl>
<dt>著者名</dt>
<dd>くろのあきこ</dd>
<dt>発売日</dt>
<dd>2008年11月13日</dd>
<dt>対象年齢</dt>
<dd>4～5才</dd>
<dt>版型</dt>
<dd>B5判</dd>

<dt>説明</dt>
<dd>みんなではじめてのゆうえんちにいくよ</dd>
</dl>
<p><a href="http://xxxxxxx.xxxxx/japan/post.html"><img src="http://xxxxxxx.xxxxx/japan/post.html/assets_c/2008/11/fig001-thumb-243x203.jpg" width="100" height="140" alt="ゆうえんちへいこうル" title="ゆうえんちへいこう" /></a></p>
</div>
（以下5件繰り返し）
</div>

くれま先輩：div class="newBooksDetail"をデザインどおり横に3つずつ並べるには、CSSレイアウト用の要素を幾つか追加しなければいけないんだけど、それは次回説明するね。MTタグに関しては、基本的にこれでOKだよ。

ほげ山くん：次は「最新情報」ですね。

くれま先輩：そこはさくっと行くけど、こんな感じ。さっき追加したコードの後に、これを入れてね。

<div id="news">
<h2>最新情報</h2>
<mt:Entries category="最新情報" lastn="5">
<mt:EntriesHeader>
<dl>
</mt:EntriesHeader>
<dt>[<mt:EntryDate format="%x" language="ja" />]</dt>
<dd><a href="<mt:EntryLink />"><mt:EntryTitle /></a></dd>
<mt:EntriesFooter>
</dl>
</mt:EntriesFooter>
</mt:Entries>
<p><a href="<mt:BlogURL />news/">一覧を見る</a></p>
</div>

ほげ山くん：基本的にさっきと似ていますね。ちょっと違うのは、mt:EntryDateのところで、日付を出しているんですね。

くれま先輩：うん。これを再構築するとこんな感じね。

<div id="news">
<h2>最新情報</h2>
<dl>
<dt>[2008年8月24日]</dt>
<dd><a href="http://xxxxxxx.xxxxx/news/post_2.html">絵本展覧会に出展しました！</a></dd>
（以下4件繰り返し）
</dl>
<p><a href="http://xxxxxxx.xxxxx/news/">一覧を見る</a></p>
</div>

Multiblog機能を使って、トップページに別ブログの最新ブログ記事一覧を表示させよう

ほげ山くん：そして次は、「⁠絵本編集者のつぶやきブログ」ですよね。

くれま先輩：ここを作るに先立って、別ブログの「絵本編集者のつぶやきブログ」を作らないといけないのよね。第3回を参考に、ブログの名前が「絵本編集者のつぶやきブログ」で、サイトURLと公開パスが「/blog/」になるように新規ブログを作っちゃおう。

ほげ山くん：では、テスト用に6件ぐらいダミーのブログ記事を投稿しておきますね。

くれま先輩：お願いね。

ほげ山くん：できましたー。

くれま先輩：っで、次に必要なのは、この新しいブログのidなの。実験を兼ねて、この「絵本編集者のつぶやきブログ」のメインページのテンプレートのどこかに、<mt:BlogID>って書いてみて。で、「⁠保存と再構築⁠」⁠。

ほげ山くん：どこかに…。ではとりあえず、

くれま先輩：HTMLソースを見てみて。

ほげ山くん：あ、「⁠4」って出力されてますね。これが、このブログのIDなんですか？

くれま先輩：そうなの。Multiblog機能を使うために、このIDが必要なのよー。ちょっと細かい話をするけれど、Multiblog機能を使うためには、「⁠アグリゲーションポリシー」や「プライバシーポリシー」の設定をする必要があるの。だけど、ここまでの連載の通りに進めてきた人だったら、デフォルトの値で大丈夫なので、詳しい話は省略するね。もし設定を変えている人がいるようでしたら、以下のページを読んでみてください！

【参考URL】

MultiBlog 機能の特長|Movable Type 4 ドキュメント
http://movabletype.jp/documentation/designer/multiblog/features.html

くれま先輩：では、メインの「絵本出版のリブリート」のブログに戻って、設定を続けるよ。管理画面が「ブログモード」になっていることを確認して、［⁠ツール→プラグイン］を選択して。

ほげ山くん：プラグインの一覧画面になりましたね。

くれま先輩：そうしたら、「⁠MultiBlog2.0」という文字をクリックして、次に「設定」をクリックして。

ほげ山くん：はい。

くれま先輩：で、「⁠再構築トリガーを作成」をクリック。MultiBlogトリガーの設定画面になるので、「⁠絵本編集者のつぶやきブログ」を選択して「ブログ記事の公開時」「⁠インデックスを再構築する」を選んで「確認」をクリックね。

ほげ山くん：はい。できました。

くれま先輩：そして、次の画面で「変更を保存」をクリック。

ほげ山くん：これで、「⁠絵本編集者のつぶやきブログ」を「絵本出版のリブリート」の方に読み込む設定ができたっていうことなんですかね？

くれま先輩：そうね。「⁠絵本編集者のつぶやきブログ」で記事が公開された時に、「⁠絵本出版のリブリート」が必要に応じて再構築されるように設定したのよ。そして次は、「⁠絵本出版のリブリート」のメインページテンプレートに戻って、さっき追加したコードのさらに下に、こんなのを追加してね。

<div id="blog">
<h2>絵本編集者のつぶやきブログ</h2>
<mt:MultiBlog include_blogs="4">
<mt:Entries lastn="5">
<mt:EntriesHeader>
<dl>
</mt:EntriesHeader>
<dt>[<mt:EntryDate format="%x" language="ja" />]</dt>
<dd><a href="<mt:EntryLink />"><mt:EntryTitle /></a></dd>
<mt:EntriesFooter>
</dl>
</mt:EntriesFooter>
</mt:Entries>
</mt:MultiBlog>
<p><a href="<mt:BlogURL />blog/">一覧を見る</a></p>
</div>

ほげ山くん：えーっと、さっきの「最新情報」のサブテンプレートとかなり似てますけど、mt:MultiBlogっていうブロックタグが追加されてるんですね。あ、で、include_blogsモディファイアの値が「4」なのかー。

くれま先輩：わかってるねー。そう、ここで、さっき調べたブログのidを指定しているんだよ。で、再構築するとこうなるの。

<div id="blog">
<h2>絵本編集者のつぶやきブログ</h2>
<dl>
<dt>[2008年11月 7日]</dt>
<dd><a href="hhttp://xxxxxxx.xxxxx/blog/2008/11/post.html">海外に新しい作家を探しに行きました</a></dd>
（以下4件繰り返し）
</dl>
<p><a href="http://xxxxxxx.xxxxx/blog/">一覧を見る</a></p>
</div>

ほげ山くん：おー！複数のブログを使っても、全然違和感ないですね！

くれま先輩：でしょ？じゃ、今回もここまでにして、続きは次回にね！

次回予告