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

[川俣晶，ITmedia]

　まず、機械的に処理できる準備手順の詳細は省く。以下の作業を行ったという前提で話を始めよう。

• RssGadgetサンプルソースを別ディレクトリにコピーする。
• ファイル名をRssGadget.jsなどから、ITMediaHeadlines.jsなどに変更する。
• 各ファイル中の文字列"RssGadget"を、一括置換で"ITMediaHeadlines"に置き換える。その際、CSSファイルを正しく置き換えるため、単語単位の検索はオフにしておく。

　なお、次の点も注意だ。

.Microsoft_Live_GadgetSDK_RssGadget

　↓この置き換えも必要

.Microsoft_Live_GadgetSDK_ITMediaHeadlines

• マニフェスト（XMLファイル）の中に含まれるURLを、テスト実行に使うURLに書き換える（各自テストに使用するURLを書き込むため、唯一の正解はない）。
• マニフェスト(XMLファイル)の中のtitle要素の中身を適切なタイトルに書き換えておく。

例

<title>ITMedia Enterpirse Headlines</title>

　ここまで実行したら、Windows Liveに登録して動作することを確認しておこう。

画面1■最低限の書き換えを行ったLiveガジェット。ここから本当の書き換えが始まる

　さて、ここからがソースコード書き換えの本番だ。ここでは以下の3つの作業を行う。

• 画面の構築（チャンネル切り替えのボタンなどを画面上に配置する）。
• イベントの処理（ボタンが押されたときにチャンネルが切り替わるようにする）。
• 細かい問題を解消する（仕上げ）。

　まずは、画面の構築から取り組んでみよう。

　ここでは、チャンネルを切り替えるボタン2つ（前向きと後ろ向き）、そしてタイトルを表示するためのspan要素を追加すればよい。それらを1行に収めるため、p要素を親として配置しよう。つまり、以下のようなHTMLで記述すればよいわけだ。

<p><input……><input……><span>……</span></p>

　Vistaのサイドバーガジェットであれば、このようなコードを直接書いてもよいのだが、Liveガジェットではできない。それでは、どのようにしてこれらの要素を追加するのかというと、DOMのメソッドを使う。

　this.initializeに代入される無名のメソッドに以下のようなコードを追加しよう（getBaseMethodメソッドの呼び出しの後に挿入する）。

m_selectorEl = document.createElement("p");
m_el.appendChild(m_selectorEl);
var btnPrev = document.createElement("input");
btnPrev.type = "button";
btnPrev.value = "←";
m_selectorEl.appendChild(btnPrev);
var btnNext = document.createElement("input");
btnNext.type = "button";
btnNext.value = "→";
m_selectorEl.appendChild(btnNext);
m_channelNameEl = document.createElement("span");
m_channelNameEl.innerText = " *** ここにチャンネルの名前が入る予定 *** ";
m_selectorEl.appendChild(m_channelNameEl);

　ちなみに、チャンネル名を表示するspan要素は、後から書き換えることになる。そのため、このノードは変数に保存しておこう。