Movable Type：TOP絵をリロードごとにランダム表示

KK's WS: TOP絵自動表示
こちらをみて、ああ、いわゆるTOP絵って、やっぱりいいな、華があるし。と思って、TOP絵を設置しました（えらく小さいけど）。
絵の大きさって毎回違うので、そのたびレイアウトが変わってしまうのが嫌で今まで作っていなかったんですが、<div>タグのボックスの背景に指定してトリミングするのは、良いアイデアかも、ということであっさり真似を。

それで、思いつきで「いままでの絵の中からランダムにTOP絵として表示させて、かつその記事へのリンクを張る」という機能を作ってみました。（完成したら気が変わってしまって、結局自分では使ってないんですが……）

→ サンプルページ。
リロードするごとに違う絵が表示されるはずです。

「記事をランダムに表示する」というプラグインはあるにはあるんですが、それを使うと再構築（Rebuild）時にしか入れ替えることができません（「リロードするごとに絵を変える」ことはできない）。わざわざそのためだけにCGIを書いたりするのも嫌だったので、プラグインとJavaScriptでむりやり実現させました。

ちょっと強引な書き方をしているので、使いたい方は自己責任で〜。

まずテンプレートの任意の場所に、以下の部分を追加します。

<script language="javascript" type="text/javascript"><!--
var bgi = new Array(
<MTEntries category="Illustration">
<MTCollect tags="img">
<MTCollectThis><$MTEntryBody$></MTCollectThis>
<MTIfCollected><MTCollected tags="img" lastn="1">"<$MTCollectedAttr attr="src"$>",</MTCollected></MTIfCollected>
</MTCollect>
</MTEntries>
<MTEntries category="Illustration" lastn="1">
<MTCollect tags="img" lastn="1">
<MTCollectThis><$MTEntryBody$></MTCollectThis><MTIfCollected><MTCollected tags="img" lastn="1">"<$MTCollectedAttr attr="src"$>"</MTCollected></MTIfCollected>
</MTCollect>
</MTEntries>
);
var bgd = new Array(
<MTEntries category="Illustration">"<$MTEntryLink$>",</MTEntries>
<MTEntries category="Illustration" lastn="1">"<$MTEntryLink$>"</MTEntries>
);
var bgt = new Array(
<MTEntries category="Illustration">"<$MTEntryTitle$>",</MTEntries>
<MTEntries category="Illustration" lastn="1">"<$MTEntryTitle$>"</MTEntries>
);
var query1 = bgi.length;
var query2 = Math.floor(Math.random()*query1);
document.write('<div class=\"randomimage\">');
document.write('</div><div class=\"randomimage1\">');
document.write('<style type=\"text/css\"><!--');
document.write('.randomimage {background-image:url(' + bgi[query2] + ');} --> </style>');
document.write('Random Pickup: ' + '<a href=\"' + bgd[query2] + '\">' + bgt[query2] + '</a>');
document.write('</div>');
// -->
</script>


なんかぐちゃぐちゃと見にくいですが、やっていること自体はけっこう単純で、

• Collect Pluginの機能を使って、絵のエントリーからIMGタグを抜き出し
• 画像のURLを順番にJavaScriptの配列に格納する
• 同様に、Collect Pluginの機能を使って（2004 5.14修正：Collect Pluginの機能ではなくて、MTの標準の機能でした）、絵のエントリーのPermalinkとタイトルも取得、それぞれJavaScriptの別の配列に格納する
• 配列の中身からランダムに1つ選んで、表示

すごい言葉足らずですがこんなところです。あとはソースを見れば、きっとなんとかなります。randomimageというclass名を持つ<div>タグを新たに作り、その背景画像に絵のURLを適用します。

スタイルシートにも次のように追加。

.randomimage {
margin:10px 0 0 0;
padding:0;
width:320px;
height:430px;
border:1px solid #666666;
background-color:#333333;
background-repeat:no-repeat;
background-position:center center
}
.randomimage1 {
margin:0;
padding:4px 0 4px 0;
width:320px;
text-align:center;
font-size:90%;
border:1px solid #666666;
border-width:0 1px 1px 1px;
background-color:#FAF8F2;
}


「randomimage」には何らかのサイズを指定しないと表示されません（中身が何もないので）。背景画像のリピートは切り、位置はとりあえずど真ん中にしておきます。たまに人物の顔が入らなかったりしますが、まあ、しょうがないです。
中身が何もないボックスを書くのって、HTML的にどうなんだろ……と思いましたが、気にしない方向で。

そのまま貼り付けても、動きません。最低でも、Collect Pluginをインストールしたうえで、絵のカテゴリ名（上の例だと、Illustration）を自分の使っているカテゴリ名にする必要があります。スタイルシートも、自分のサイトに合ったかたちに書き換えればいいとおもいます。また、JavaScriptを切ってあるブラウザで見ると、TOP絵のボックス自体が表示されなくなります（JavaScriptを切った状態でも何らかの絵を表示させたいなら、<noscript>タグを同時に書いて、その中に表示させたいTOP絵に関する記述を入れれば良いでしょう）。

注意点として、実はこのスクリプトだと、最新の絵だけすこし出てくる確率が上がってしまいます。動作はしてるので直すのが面倒になってしまって……。解決法をご存知の方がいたら、教えて頂けると嬉しいです（このスクリプトの方法で、MTEntriesを使って配列の要素を羅列していくとどうしても最後に無駄なカンマが入ってしまうので、それを解消するためのむりやりの措置です）。

あれもこれもと機能を追加していくと、どうしてもトップページが情報ごっちゃりな感じになりますね。うまく折り合いつけていかないとなあ。

あ、うまく設置できなくてもサポートとかできませんのでよろしくお願いします（逃げ口上）。

04/05/11 7:40