関連記事を表示する Movable Type プラグイン - SimilarEntries v1.0.0 リリース

このブログでのお知らせが遅くなりましたが、先日、Movable Type で関連記事を表示するプラグイン「SimilarEntries」をリリースしました。

今日は SimilarEntries プラグインの特徴をご紹介します。

複数のフィールドで関連性を判定

Movable Type のデフォルトの機能を使って関連記事を表示する場合、「同じタグが付けられている記事」や「同じカテゴリに属する記事」をリストアップすることが多いですが、当プラグインは、複数のフィールドで関連性を判定することができます。

カスタムフィールドも関連性の判定に含めることができます。

フィールドごとに優先度を設定可能

フィールドごとに優先度を変えることができるので、例えば、

  • タグが一致していれば +3 点
  • キーワードが一致していれば +2 点
  • カテゴリが一致していれば +1 点

といった設定が可能です。これらの点数を積み上げていき、点数の多い記事から順にリストアップしていきます。

JavaScript で動的に表示

このプラグインでは、JavaScript で動的に関連記事を表示します。

まず、インデックステンプレートで関連付けを判定するための専用フォーマットの JSON を、スタティックパブリッシングで書き出します。JSON を書き出すと言っても、下記のようなファンクションタグをインデックステンプレートに書けばOKです。

<mt:SimilarEntriesRelateJSON
    include_blogs="7"
    fields="tags,keywords,field.text01,category">

これだけ書けば、あとはファンクションタグがよしなにやってくれます。

次に、同じくインデックステンプレートで出力 HTML 用の JSON ファイルをスタティックパブリッシングで書き出します。これも、下記のようにブロックタグ内に出力したい情報の MTML を書けばOKです。

<mt:SimilarEntriesTemplateJSON include_blogs="7">
<li><a href="<mt:EntryPermalink>"><mt:EntryTitle></a>(<mt:BlogName>)[<mt:EntryPrimaryCategory><mt:CategoryLabel></mt:EntryPrimaryCategory>]</li>
</mt:SimilarEntriesTemplateJSON>

これで、

{
    e718: "<li><a href="/SimilarEntries/archives/000718.html">すべてのページで同じ「最近のブログ記事一覧」を表示するカスタマイズ</a>(SimilarEntries)[MT Customize]</li>",
    e725: "<li><a href="/SimilarEntries/archives/000725.html">一定時間で自動的に消える New マークを付ける JavaScript の jQuery 版</a>(SimilarEntries)[JavaScript]</li>",
    (省略)
}

のような JSON を書き出してくれます。

あとは、出力したい場所(記事のテンプレートなど)に、

<mt:SimilarEntriesShow
    fields="tags,keywords,field.text01,category"
    relation_url="http://your-host/SimilarEntries/relation.json"
    template_url="http://your-host/SimilarEntries/template.json"
    target_selector="#similar-entries"
    limit="5">

と書けば、実行する部分の JavaScript を書き出してくれます。

使い方の詳細は、mt-plugin-SimilarEntries/README.md at master · bit-part/mt-plugin-SimilarEntries をご覧ください。

流れとしては、

  1. 関連付けを判定するための JSON を Ajax で読み込み
  2. 関連記事の ID を取得
  3. 出力用の JSON を Ajax で読み込み
  4. 該当する ID の情報を出力

するとこになります。

jQuery 等のライブラリは使っていないので、jQuery を使ったサイトでも AngularJS を使ったサイトでも、どんなサイトでも利用することが可能です。

JavaScript での処理がメインのプラグインですが、基本的に JavaScript は書かなくても利用できます。

また、関連記事をリストアップするループで毎回呼ばれる関数を JavaScript で設定することもできるので、少し JavaScript が書ければさらにきめ細かい制御が可能となります。

下記に、

  • 最初の1回にはさみたい HTML を指定
  • 最後の1回にはさみたい HTML を指定
  • 偶数回目に呼ばれる処理を指定
  • 奇数回目に呼ばれる処理を指定
  • 3回ごとに呼ばれる処理を指定

した例を掲載します。

<mt:SetVarBlock name="first"><ul></mt:SetVarBlock>
<mt:SetVarBlock name="last"></ul></mt:SetVarBlock>
<mt:SetVarBlock name="each_function">
function(i, text, odd, even){
    if (odd) {
        text = text.replace(/<li/, '<li class="odd"');
    }
    else if (even) {
        text = text.replace(/<li/, '<li class="even"');
    }
    if (i % 3 == 0) {
        text += '</ul><ul>'
    }
    return text;
}
</mt:SetVarBlock>
<mt:SimilarEntriesShow
    fields="tags,keywords,field.text01,category"
    relation_url="http://your-host/SimilarEntries/relation.json"
    template_url="http://your-host/SimilarEntries/template.json"
    target_selector="#similar-entries"
    limit="5"
    first="$first"
    last="$last"
    each_function="$each_function">
</div>

以上です。商用利用は有料となりますが、皆様のお役に立てば幸いです。

  • このエントリーをはてなブックマークに追加
Just a second...