> >

経緯

アイデアは篠の風さんから頂きました。毎日コツコツとエントリを書いている篠の風さんらしいアイデアです。また、今のブログツールによるサイトは過去のエントリを参照しにくい形態であることが多く、時間とともに埋もれてしまったエントリ達を有効に活用できないものかとがちゃがちゃエントリとかエントリ一覧(このブログのナビゲーションエリアにリンクやフォームを表示している)や類似エントリ(これはまだ未公開)などを作成してきた身としては、　「あっ、そうか!」という感じでした。

サンプル

実験用ブログでもある「僕は見ていた」のエントリページの下の方に、この JavaScript による表示があります。エントリページへは各エントリのタイトルからリンクされています。これを書いている時点で最新のエントリ「Mac が欲しい Win ユーザに捧ぐ」には一年前の同じ日付にエントリがあるので、このエントリを見てください。

対象

iblogPatcher に同梱されている ENTRIES_JS.plugin を有効にしてあるブログにおいて使用できます。

ダウンロード

次のリンクから取得してください。

設置方法

1. ダウンロードした NYearOldEntries.js を適当なところへアップロードしてください。
2. エントリページで entries.js をロードするようにする。

   テンプレートファイル EntryPage.txt, MusicEntryPage.txt, FileSharingEntryPage.txt に次のような記述を入れてください。

   <script type="text/javascript" src="<$BlogBaseURL$>entries.js"></script>

   AroundEntries.js を設置している方は既にこれは行われています。
3. 一年前のエントリをリストアップしたい箇所に次のようなコードを挿入します。

   <script type="text/javascript" src="アップしたNYearOldEntries.jsのURL"></script>
   <script type="text/javascript">
       WriteNYearOldEntriesHTML(
           1,
           '<$EntryUUID$>',
           '<$BlogBaseURL$>'
       );
   </script>
   <noscript>
       JavaScript を有効にすると表示されます。
   </noscript>

   ここで 4 行目の 1 を 2 とすると二年前のエントリがリストアップされます。もちろん 3, 4, ... とできます。逆に 0 とすると同じ日のエントリ(そのエントリも含む)のリストアップ、-1 とすると一年後のエントリ、-2 は二年後のエントリになります。小数は効きません。整数にしてください。

4. [プレビュー状態をリセットしてプレビュー]をする。

   エントリページが更新さればよいので、ブログの表示設定を変える振りをする方法でも構いません。

5. 確認して、OK ならば公開する。

リストアップ方法をカスタマイズする

上述した方法ではデフォルトの次のような ul 要素を利用した箇条書きの HTML が生成されます。

<ul>
    <li><_a href="エントリのURL">エントリのタイトル</a></li>
    <li><_a href="エントリのURL">エントリのタイトル</a></li>
    ...
</ul>

これを変えることができます。これにはテンプレートファイルに書き込んだ次の箇所をカスタマイズします。

WriteNYearOldEntriesHTML(
    1,
    '<$EntryUUID$>',
    '<$BlogBaseURL$>'
);

リストアップ全体の前の HTML コード、各エントリへのリンクの前の HTML コード、各エントリへのリンクの後ろの HTML コード、リストアップ全体の後ろの HTML コードを次のように指定します。

WriteNYearOldEntriesHTML(
    1,
    '<$EntryUUID$>',
    '<$BlogBaseURL$>',
    'リストアップ全体の前の HTML コード',
    '各エントリへのリンクの前の HTML コード',
    '各エントリへのリンクの後ろの HTML コード',
    'リストアップ全体の後ろの HTML コード'
);

例えば、デフォルトの状態は次のようにしたのと同じです。

WriteNYearOldEntriesHTML(
    1,
    '<$EntryUUID$>',
    '<$BlogBaseURL$>',
    '<ul>',
    '<li>',
    '</li>',
    '</ul>'
);

ただし、script 要素内に & < " > を書くとエージェント(ブラウザなどのこと)を混乱させる恐れがあります。このため、この部分を JavaScript ファイルにまとめて、それをロードするようにしたほうがよいでしょう。ファイルを増やしたくない人は、次の変換表に従って & < " > を文字コード指定で書きましょう。
テンプレート用の置き換え項目が入っているので別ファイルにするのは逆に手間がかかります。

上級者へのヒント

NYearOldEntries.js には JavaScript 関数 WriteNYearOldEntriesHTML と同じ引数をとる GetNYearOldEntriesHTML という関数が用意されています。これはその場に HTML を書き出すのではなく、HTML の文字列を返すものです。これを利用すれば ID 属性で指定された XHTML の要素の値を入れ替えたりできます。

これを使えば、一年前をあらわす 1 の部分を閲覧者に選ばせて動的に、一年前のエントリのリストアップ、二年前のエントリのリストアップ、一年後のエントリのリストアップなどを行うフォームが作れます。

これらの方法では、エントリへのリンクのタグの付け方が固定されています。これすら変えたい人もいるかもしれません。そういう人は GetNYearOldEntries 関数を利用してください。この関数は何年前のエントリをリストアップするかを表す整数と、基準になるエントリの EntryUUID を引数として、該当するエントリの EntryUUID 群を配列として返します。

関連エントリ

• 一年前のエントリ用 JavaScript 更新