2006-08-24 - はてなの告知

開発者様向け番組表に好きなものを表示してみよう

「番組表にマイミクシィ日記を表示するスクリプト」を少し改造するだけで、番組表に好きなものを表示する方法を紹介します。

とても簡単な例でコードを書いてみましょう。

あなたはおやつの時間がとても楽しみで、どうしても番組表の 15:00 の欄に、おやつメッセージを表示したいとしましょう。

その場合の手順を説明していきます。

1.スクリプトの準備

まずは雛型となる、HatenaRssMixiMix.user.jsをダウンロードします。

そしてファイルの名前を変更します。

ここでは「HatenaRssOyatsuMix.user.js」と変更しました。

ファイル名の末尾の.user.jsの部分は変更しないように注意してください。

2.コードを書く

実際にコードをお気に入りのエディタ(Emacs)で開いて編集をします。

まずは、ヘッダにある@nameという属性を書き換えます。

これはインストールの際に使われる名前なので、既存のものと名前が同じにならないようにして下さい。

// @name           Hatena Rss Oyatsu mix

次にヘッダのすぐ下あたりにある function fetchArticles() の中身を空にします。

そしてここに自分のコードを追加していきます。（多くの場合、この関数以外はさわる必要はありません。）

     function fetchArticles() {
         // ここにコードを追加していきます
     }

では早速コードを書いていきましょう。

番組表に追加する「記事（article）」のオブジェクトを作ります。

var article = createArticle();
article.url = 'http://d.hatena.ne.jp/keyworddiary/%a4%aa%a4%e4%a4%c4';
article.title = 'It is time for sweets.';
article.sitetitle = '[sweets alert]';
article.style.backgroundColor = '#EEFF22';

記事にはタイトルやURLが必要なので、上記のようにプロパティを追加していきます。

ついでに必須ではありませんが、目立つように背景色を指定しておきます。

なおソースコード中に日本語を埋め込むのはちょっと面倒なので今回は全て英語にしています。（escapeを使う必要があります。詳細はHatenaRssMixiMix.jsを参照)

次に記事の日付・時刻を保持したDateインスタンスを設定します。

このプロパティは「番組表のどこに記事が表示されるか？」の判断材料になります。

    var today = new Date();
    today.setHours(15);
    today.setMinutes(0);
    article.date = today;

    insertArticle(article);

上記のように、当日の15:00に表示されるようにセットします。

最後にできあがった article を insertArticle関数に渡してコードの編集は完了です。

出来上がったスクリプトをFirefoxにドラッグアンドドロップしてインストールした後、番組表を実際に見てみましょう。

このように番組表に表示されているはずです。

今回書いたコードは以下の通りです。

記事のオブジェクトを作って insertArticle()関数に渡すという流れになります。(HatenaRSSOyatsuMix.user.js)

     function fetchArticles() {
         var article = createArticle();
         article.url = 'http://d.hatena.ne.jp/keyworddiary/%a4%aa%a4%e4%a4%c4';
         article.title = 'It is time for sweets.';
         article.sitetitle = '[sweets alert]';
         article.style.backgroundColor = '#EEFF22';

         var today = new Date();
         today.setHours(15);
         today.setMinutes(0);
         article.date = today;

         insertArticle(article);
     }

記事のプロパティ

article に設定可能なプロパティは以下の通りです。

プロパティ	意味	必須?
url	記事のPermalink	必須
title	記事のタイトル	必須
sitetitele	サイト名	必須
date	記事の投稿日時(Dateオブジェクト)	必須
body	記事の本文	任意
style	記事のstyle	任意