『HTMLテンプレートplugin』の概要

かねてから多数のユーザー様よりいただいておりました『より詳細にカスタマイズしたい』というご意見に突き動かされ『HTMLテンプレートplugin』β版 をリリースいたしました。『HTMLテンプレートplugin』を使用すれば、HTMLとCSSの知識を持った方であればこれまでとは比較にならない柔軟さで表示をカスタマイズすることが出来ます。

β版であるという位置づけと、機能の性質上、現在のところ管理画面でグラフィカルに設定を変更することは出来ません。この機能を有効にするには忍者レコメンドのタグを以下のように書きかえてください。

１．HEADタグ内へ以下のタグを記述してください。これらのタグは忍者レコメンドのjavascriptコアエンジンとHTMLテンプレートplugin本体になります。1ページに複数の忍者レコメンドを使用している場合でも記入は一回のみで構いません。

<script src="//rcm.shinobi.jp/js/imp.js"></script>
<script src="//rcm.shinobi.jp/js/plugin/template.js"></script>

２．１で記入したタグ直下に以下のようなjapascriptを記述します。レコメンドコアエンジンのプラグイン初期化メソッドに、使用プラグインを表す文字列と設定オブジェクトを渡し初期設定を行うという意味合いです。設定オブジェクトの各要素については後述する『初期設定メソッドについて』で説明いたします。

<script>
NT_RMD_AUD_CORE_ENGINE.addPluginOption(
 'template',
 {
  sample:{
   layout:{
    header:"<h1>ヘッダですレコメンドエリア開始</h1><div>",
    _1:"<p>★一番 ${title} ${year}.${month}.${day}</p><div><img src='${image}'/></div>",
    _2:"<p>☆二番 ${title} ${year}.${month}.${day}</p><div><img src='${image}'/></div>",
    default:"<p>☆${number}番 ${title} ${year}.${month}.${day}</p><div><img src='${image}'/></div>",
    footer:"</div><hr><p>レコメンドエリア終了です</p><hr>"
   },
   afterFilter:function(dom){
    dom.click(function(){
     alert('click!!');
    });
   }
  }
 }
);
</script>

３．忍者レコメンドを表示させたい場所に以下のタグを記入します。data-plugin属性はプラグイン名（template固定）、data-template-name属性は使用するテンプレート名になります。(注.赤い部分は現在ご利用のタグに応じて書き換えてください)

<div id="e32c9bc31bacc17c6b06baba8d889606" data-plugin="template" data-template-name="sample">
 <script src="http://rcm.shinobi.jp/r/e32c9bc31bacc17c6b06baba8d889606"></script>
</div>

初期設定メソッドについて

HTMLテンプレートpluginは、忍者レコメンドコアエンジン『NT_RMD_AUD_CORE_ENGINE』の『addPluginOption』メソッドにプラグイン名『template』と『設定オブジェクト』を渡すことで設定可能です。書式は以下のようになります。

NT_RMD_AUD_CORE_ENGINE.addPluginOption('template(プラグイン名)',{設定オブジェクト});

プラグイン名については固定で『template』という文字列を指定してください。設定オブジェクトの構造は以下のようになります。

 {
  sample（テンプレート名）:{
   layout:{
    header:"ヘッダーです。最初に一回だけ書きだされます。",
    _1:"一番目の記事の書き出しに使用されるテンプレートです。必須項目ではありません。",
    _2:"二番目の記事の書き出しに使用されるテンプレートです。必須項目ではありません。",
    default:"該当順位のテンプレートがない場合の記事書き出しに使用されます。",
    footer:"フッターです。最後に一回だけ書きだされます。"
   }
  },
  afterFilter:function(dom){
   //テンプレートで書きだした直後に呼び出されます。第一引数はHTMLとして書き出す直前のjQueryオブジェクトです。
  }
 }

_1、_2…._nは順位がn番目の記事の書き出しに使用されるテンプレートですがこれらは必須項目ではなく省略可能です。該当する順位のテンプレートがない場合はdefaultのテンプレートが適応されます。

変数について

_1、_2…._nやdefault項目内で以下の用に記述を行うと記事の各項目と置換され表示されます。

${number}

記事順位

${title}

記事タイトル

${content}

記事本文（RSSに本文が存在しない場合は書き出せません）

${image}

画像のURL（RSSに画像が存在しない場合は書き出せません）

${url}

記事のURL

${year}

記事の公開日の『年』

${month}

記事の公開日の『月』

${day}

記事の公開日の『日』

${hateb}

はてなブックマーク数

${like}

Facebookいいね数

${rt}

twitterのRT数

最後に

今回リリースするテンプレート機能は非常に強力なカスタマイズ機能ではありますが、万人にとって使いやすいものではありません。ベータ版ご利用者様からの意見を参考に、UIにて手軽に設定できるように仕様を固めていこうと思おっております。何卒ご協力よろしくお願いいたします。また弊社といたしましてはHTMLやCSSの使用法等に関するご質問にはお応えいたしかねますのでご理解よろしくお願い致します。