お知らせ

戻る

『忍者レコメンド』 HTMLテンプレートpluginβ版 リリース

  •  トピック | 忍者画像RSS |
  • 2014年7月10日 10:52

平素は『忍者レコメンド』をご利用いただき誠にありがとうございます。

多くのご利用者様よりいただいておりました、「より詳細にカスタマイズしたい」というご意見に突き動かされ、この度「HTMLテンプレートplugin」β版 をリリースいたしました。
HTMLとCSSの知識をお持ちの方であれば、これまでとは比較にならない柔軟さでデザインや表示形式をカスタマイズすることが出来ます。

β版であるという位置づけと、機能の性質上、現在のところ管理画面でグラフィカルに設定を変更することは出来ません。

■中上級者向け「HTMLテンプレートplugin」の概要

この機能を有効にするには忍者レコメンドのタグを以下のように書きかえてください。

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

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

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

<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>

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

<div id="e32c9bc31bacc17c6b06baba8d889606" data-rcm-plugin="template" data-rcm-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数

■最後に

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

戻る
忍者ツールズ（Ninja Tools）