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ドラッグアンドドロップしてインストールした後、番組表を実際に見てみましょう。

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

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を出力しているサービスを利用するのも面白いかもしれません。

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

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

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

「ミクシィの足あとを番組表に表示」「フレパの日記を番組表に表示」「マイミクシィ日記を番組表に表示」スクリプトの追加・更新について

ミクシィの足あとを番組表に表示」スクリプト

はてなRSSの番組表にミクシィの足あとを表示する「ミクシィの足あとを番組表に表示」スクリプトを追加しました。

http://f.hatena.ne.jp/images/fotolife/h/hatenarss/20060822/20060822115610.png

詳しくは「g:hatenagreasemonkey:keyword:ミクシィの足あとを番組表に表示」をご覧ください。

どうぞご利用ください。

「フレパの日記を番組表に表示」スクリプト

はてなRSSの番組表にフレパ最新日記を表示する「フレパの日記を番組表に表示」スクリプトを追加しました。

http://f.hatena.ne.jp/images/fotolife/h/hatenarss/20060822/20060822120113.png

詳しくは「g:hatenagreasemonkey:keyword:フレパの日記を番組表に表示」をご覧ください。

どうぞご利用ください。

マイミクシィ日記を番組表に表示」スクリプトを更新

はてなRSSの番組表にマイミクシィ最新日記を表示する「マイミクシィ日記を番組表に表示」スクリプトを更新しました。

変更点は以下の通りです。

  • 日記が番組表中の日付・時刻にあわせて適切な場所に表示されます。

詳しくは「g:hatenagreasemonkey:keyword:マイミクシィ日記を番組表に表示」をご覧ください。

どうぞご利用ください。

好きなものを番組表に追加したい

「これを番組表に表示してほしい!」といったアイデアのある方は

はてなアイデア - はてなRSS」 までお寄せください。

なお開発者様向けに「番組表に好きなものを表示してみよう」にて、番組表に簡単に任意の記事を追加できる方法を解説いたしましたのでご参照ください。

はてなRSSの一部機能の昨晩の障害について

昨晩未明頃から早朝7時頃まで障害により、はてなRSSの出力するRSSフィードページなどがお使い頂けない状況が続いておりました。

ご利用の皆様には大変ご迷惑をおかけいたしました。

現在は正常にお使い頂けるようになっております。