ユーザ定義フィルタの記述方法

このページでは、ユーザ定義フィルタの記述方法について説明します。基本的なフィルタについては、「フィルタの記述方法」を参照してください。
注意) ユーザ定義フィルタは上級者向けの機能です。フィルタを作成するにはJavaScriptとDOMに関する知識が必要です。

アイテム描画の流れ

RSSやスレッドの各アイテムは以下の順に処理されて描画を行います。ユーザ定義フィルタはこのうち4番のRWフィルタ内で実行されます。

アイテムのテキストデータを抽出。
NGフィルタを実行。(NGの結果によっては以降の処理をスキップします)
テキストデータを加工してDOMにマッピング
RWフィルタを実行。(DOMデータの書き換え)
次のアイテムを1から繰り返し。

ユーザ定義のパラメータ

ユーザ定義フィルタのスクリプト欄には、アイテム描画時に実行するJavaScriptのコードを入力してください。
このスクリプトの目的は、各アイテムのDOMデータを直接操作して書き換えることです。例えば、getElementsByTagNameで特定のタグ要素を取得して属性を変更するとか、リンクに関連した画像を埋め込むとか、JavaScriptが行える範囲でアイテムの描画内容を書換えることができます。

draw変数

「draw」という名前の変数は、ユーザ定義のスクリプトに渡される唯一のオブジェクトです。以下にdrawオブジェクトのプロパティを列挙します。

プロパティ名	内容
mode	アイテムの表示モードを表す文字列。 "full" フル表示 "compact" コンパクト表示 (表示モードがタイトルやソースのとき、ユーザ定義フィルタは呼び出されません。)
elem	描画されたアイテムのDOMエレメント。
item	描画されたアイテムの情報を格納するオブジェクト。アイテムの種類により内容が変わります。 RSS・RSS検索のアイテム情報 title タイトル link リンク date 日付 author 作者名 body RSS記事の本文 type アイテム種別("rss"または"osr"で始まる文字列) 掲示板のアイテム情報 id スレッドID title スレッドのタイトル rows スレッドのレス数 type アイテム種別("bbs"で始まる文字列) スレッドのアイテム情報 name 名前 mail メールアドレス date 日付 id 投稿ID body スレッド本文 type アイテム種別("dat"で始まる文字列)
channel	描画されたフィードの情報を格納するオブジェクト title フィードのタイトル href フィードのURL link フィードのリンク type フィード種別(アイテム種別と同じか、クリップ表示時は"clip")

DOMデータの書き換え

ユーザ定義フィルタのスクリプトで、「draw.elem」に格納されたDOMデータを書き換えてください。
「draw.elem」が指し示すものは、本文のDOMエレメントそのものです。 (タイトル行のDOMエレメントはpreviousSiblingで参照できますが、タイトル行は書き換えないでください。)

例: RSSではてなブックマーク数を表示する

if (draw.item.link) {
  var url = draw.item.link.replace(/\?ref=rss.*|#.*/, ""); // URLを調整
  var img = document.createElement("IMG");
  img.src = "http://b.hatena.ne.jp/entry/image/"+url;
  draw.elem.appendChild(img);
}

例: Twitter検索でRTを見やすく表示する

// Twitter検索でなければ何もしない
if (draw.item.type != "osr_twitter") return;
// ノードツリーを探索してRTをハイライト表示
function highlight_RT (elem) {
  var node = elem.firstChild;
  while (node) {
    switch (node.nodeType) {
    case 1:
      highlight_RT(node);
      break;
    case 3:
      var pos = node.nodeValue.search(/\bRT:?\s/);
      if (pos >= 0) {
        node = elem.insertBefore(document.createElement("SPAN"), node.splitText(pos));
        while (node.nextSibling)
          node.appendChild(elem.removeChild(node.nextSibling));
        node.style.backgroundColor = "#ddd";
        node.style.fontSize = "80%";
      }
      break;
    }
    node = node.nextSibling;
  }
}
highlight_RT(draw.elem);

例: 掲示板でスレッドの勢いをフォントサイズに反映する

// n時間あたりの書き込み数を求める
var hour = 1;
var time = (new Date()).getTime()/1000 - parseInt(draw.item.id);
var rows = parseInt(draw.item.rows);
if (time > 0 && rows > 0) {
  rows = Math.round(rows / (time/3600) * hour);
  draw.elem.style.fontSize = Math.min(rows,100)+100+"%"; // 最大200%
}

例: スレッドでリンク先のJPG画像を表示する

// フル表示でなければ何もしない
if (draw.mode != "full") return;
// 全リンクの拡張子を調べる
var pat = /\.(?:jpg|jpeg)$/i;
var list = draw.elem.getElementsByTagName("A");
for (var i=0; i<list.length; i++) {
  if (pat.test(list[i].href)) {
    var img = document.createElement("IMG");
    img.src = list[i].href;
    list[i].parentNode.insertBefore(img, list[i]);
  }
}

デバッグ方法など

スクリプトのデバッグについて。パーサーエラーなどの単純な間違いは、ダイアログのOKボタンを押したときにアラートを表示します。
スクリプトの実行中に発生したエラーがある場合は、再びダイアログを開いたときに、スクリプト欄の下に表示します。
スクリプトを高度にデバッグする機能はありませんので、期待通りの動作をしない時などは、変数値やメッセージをコンソールに出力するなどして確認してください。

← ヘルプ目次に戻る