TOPページに戻る

← ルールの記述方法に戻る

RSS+リーダー: ユーザ定義スクリプトの記述方法

このページではRWルールのユーザ定義スクリプトについて説明します。
注意) ユーザ定義スクリプトを作成するには、JavaScriptとDOMに関する知識が必要です。

記事の描画とRWルールの流れ

RSSやスレッドの各記事は以下の順に処理されて描画を行います。 RWルールはこのうち2番と5番の2回実行されます。

1. 記事のテキストデータを抽出。
2. RWルール・フェーズ1を実行。(テキストデータの書き換え)
3. NGルールを実行。(NGの結果によっては以降の処理をスキップします)
4. テキストデータを加工してDOMにマッピング
5. RWルール・フェーズ2を実行。(DOMデータの書き換え)
6. 次の記事を1から繰り返し。

ユーザ定義のスクリプト

ユーザ定義ルールのスクリプト欄には、上記RWルールのフェーズ1と2で実行される、JavaScriptのコードをそのまま入力してください。
このスクリプトが行うことは、正に各記事のテキストデータやDOMデータを直接操作することです。 例えば、ソースのテキストをreplaceで書き換えたり、DOMのgetElementsByTagNameでタグ要素を取得して属性を書き換えるなど、JavaScriptで行えることは全てできます。

以降ではスクリプトに渡ってくる変数とその内容を、基本的なコードを交えて説明していきます。

draw変数

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

ユーザ定義のスクリプトが一番最初に行うことは、RWルールの呼ばれた状態を把握することです。
目的のフェーズかどうか？ 目的のRSS表示モードかなどを判断して、違う場合はすぐに終了します。

// 目的のフェーズでなければ終了
if (draw.phase != 2 || draw.type != "rss" || draw.rssMode != "html") return;

// この先、RSSのHTMLモードでDOMを操作するコードが続く

テキストデータの書き換え

RWルール・フェーズ1では、「draw.itemText」に格納されたテキストデータを書き換えてください。
「draw.itemText」のプロパティを以下に列挙します。(RSSとスレッドでプロパティが違います)

// 目的のフェーズでなければ終了
if (draw.phase != 1) return;

// 本文の改行タグを全て削除
draw.itemText.body = draw.itemText.body.replace(/<br>/g, "");

DOMデータの書き換え

RWルール・フェーズ2では、「draw.itemElem」に格納されたDOMデータを書き換えてください。
「draw.itemElem」が指し示すものは、本文のDOMエレメントそのものです。 (タイトル行のDOMエレメントはpreviousSiblingで参照できますが、タイトル行は書き換えないでください。)

// 目的のフェーズでなければ終了
if (draw.phase != 2) return;

// リンクを抽出
var list = draw.itemElem.getElementsByTagName("A");
for (var i=0; i<list.length; i++) {
    // リンクが既知のJPG画像を指しているなら表示
    if (list[i].href.match(/^http:\/\/known-host\/.*\.jpg$/i)) {
        var img = document.createElement("IMG");
        img.src = list[i].href;
        list[i].parentNode.insertBefore(img, list[i]);
    }
}

DOM操作の煩わしさを軽減するため、「draw.insertHTML」というメソッドを用意しています。

書式: draw.insertHTML(DOMエレメント, HTMLテキスト, [挿入位置])

このメソッドはDOMエレメントの前にHTMLテキストを挿入します。 DOMエレメントの後にHTMLテキストを挿入したい場合は、3番目の引数にtrueを指定してください。
先の例をdraw.insertHTMLで書き直すと次のようになります。

// リンクを抽出
var list = draw.itemElem.getElementsByTagName("A");
for (var i=0; i<list.length; i++) {
    // リンクが既知のJPG画像を指しているなら表示
    if (list[i].href.match(/^http:\/\/known-host\/.*\.jpg$/i))
        draw.insertHTML(list[i], '<img src="'+list[i].href+'">');
}

ページ情報

「draw.pageInfo」で表示しているページの情報を得ることができます。
条件判定などで必要があれば参照してください。(このページ情報は絶対に書き換えないでください。)
「draw.pageInfo」のプロパティは以下の通りです。

その他

ユーザ定義スクリプトのデバッグについて。
パーサーエラーなどの単純な間違いは、ルール追加ダイアログのOKボタンを押した時点で判断できます。
スクリプトの実行中に発生したエラーについては、設定画面の該当するルールの横に表示します。
スクリプトを高度にデバッグする機能はありませんので、期待通りの動作をしない時などは、変数値やメッセージを出力するなどして確認してください。

TOPページに戻る