← ヘルプ目次に戻る

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

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

アイテム描画の流れ

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

  1. アイテムのテキストデータを抽出。
  2. NGフィルタを実行。(NGの結果によっては以降の処理をスキップします)
  3. テキストデータを加工してDOMにマッピング
  4. RWフィルタを実行。(DOMデータの書き換え)
  5. 次のアイテムを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ボタンを押したときにアラートを表示します。
スクリプトの実行中に発生したエラーがある場合は、再びダイアログを開いたときに、スクリプト欄の下に表示します。
スクリプトを高度にデバッグする機能はありませんので、期待通りの動作をしない時などは、変数値やメッセージをコンソールに出力するなどして確認してください。

← ヘルプ目次に戻る