開発者向け:番組表に任意の記事を表示する方法

開発者向け:番組表に任意の記事を表示する方法

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


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

あなたはおやつの時間がとても楽しみで、どうしても番組表の 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にドラッグアンドドロップしてインストールした後、番組表を実際に見てみましょう。

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

f:id:higepon:20060817164603g:image


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

記事のオブジェクトを作って 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任意

開発のヒント

もしもうまく表示できていない場合は log()という関数を利用してデバッグすると良いでしょう。

log関数に文字列を渡すと JavaScriptコンソール にその文字列が表示されます。


今回は簡単な例なので、動的に記事を中身を取得することはしませんでした。

HatenaRssMixiMixは、ミクシィから動的に情報を取得して日記を表示するということをやっているので、HatenaRssMixiMixの fetchArticles関数を読めばやりかたが分かると思います。


またたくさんの記事をまとめて番組表に追加したい場合は、articleのArrayを作って insertArticlesという関数に渡せば良いでしょう。


JSONを出力しているサービスを利用するのも面白いかもしれません。


あなたの作ったスクリプトをお寄せください

あなたが作ったスクリプトが便利なものであれば、ぜひはてなまでお寄せください。ユーザースクリプトを投稿する

詳細は、「ユーザースクリプトを投稿する」をご参照ください。