面白いから作る！ PCホビイストの開発体験談：Windows Liveが魅せる次世代マッシュアップ（3/6 ページ）

[川俣晶，ITmedia]

　ここでは、変数を宣言することを忘れないように、var m_headlinesEl;という行の後ろに以下の行も入れておこう。

var m_channelNameEl;

　ここで、Windows Liveのページをリロードしてみよう。正しく書き換えることができていれば、追加したボタンとテキストが表示される。

画面2■ボタンとテキストが追加された

　しかし、この段階ではまだ単に表示されているだけで、ボタンを押しても反応しない。

　次はボタンを押すとチャンネルが切り替わるようにしてみよう。しかし、いきなりイベント処理を記述してもチャンネルを切り替えることはできない。切り替え先のフィードURLを準備しておく必要があるのだ。

　取りあえず、名前とURLのペアを4つ、配列に書き込んでおこう。var m_channelNameEl;を書き込んだ行の後ろに、以下のような行も続けて記述すればよい。m_feedListはチャンネルの候補リストを書いた配列。m_feedSelectは、現在どのチャンネルを見ているかを保持する変数とする。

var m_feedList = 
[
	{ "name":"エンタープライズ新着", "url":"http://rss.itmedia.co.jp/rss/2.0/enterprise.xml"},
	{ "name":"特集", "url":"http://rss.itmedia.co.jp/rss/2.0/ep_special.xml"},
	{ "name":"コラム", "url":"http://rss.itmedia.co.jp/rss/2.0/ep_column.xml"},
	{ "name":"ブログ", "url":"http://rss.itmedia.co.jp/rss/2.0/ep_blog.xml"}
];
var m_feedSelect = 0;

　それでは、このリストを活用するイベント処理を記述してみよう。

　まず、便利なイベント処理のラッパメソッドを調達しよう。SDKのnotepadGadgetのソースに含まれているdoAttachEventメソッドとdoDetachEventメソッドである。後者は今回は使っていないが、いっしょにもらってきておこう。

function doAttachEvent(el, evtObj, Fn)
{
	el.attachEvent("on" + evtObj, Fn);
}
function doDetachEvent(el, evtObj, Fn) 
{
	el.detachEvent("on" + evtObj, Fn);
}

　これをRenderHeadlinesメソッドの後ろに挿入しておこう。

　次に、このラッパを使ってイベントを登録するコードを追加しよう。初期化メソッドに追加したコードへ、次に挙げる2つの行を追加する。