面白いから作る! PCホビイストの開発体験談:Windows Liveが魅せる次世代マッシュアップ(2/6 ページ)
開発は難しい? そんなイメージはWebアプリケーションの登場で過去のものとなりつつある。アイデアさえ持っていれば、すぐにでも作り上げることができる環境が整ってきているのだ。
まず、機械的に処理できる準備手順の詳細は省く。以下の作業を行ったという前提で話を始めよう。
- RssGadgetサンプルソースを別ディレクトリにコピーする。
- ファイル名をRssGadget.jsなどから、ITMediaHeadlines.jsなどに変更する。
- 各ファイル中の文字列"RssGadget"を、一括置換で"ITMediaHeadlines"に置き換える。その際、CSSファイルを正しく置き換えるため、単語単位の検索はオフにしておく。
なお、次の点も注意だ。
.Microsoft_Live_GadgetSDK_RssGadget
↓この置き換えも必要
.Microsoft_Live_GadgetSDK_ITMediaHeadlines
- マニフェスト(XMLファイル)の中に含まれるURLを、テスト実行に使うURLに書き換える(各自テストに使用するURLを書き込むため、唯一の正解はない)。
- マニフェスト(XMLファイル)の中のtitle要素の中身を適切なタイトルに書き換えておく。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
ここまで実行したら、Windows Liveに登録して動作することを確認しておこう。
さて、ここからがソースコード書き換えの本番だ。ここでは以下の3つの作業を行う。
- 画面の構築(チャンネル切り替えのボタンなどを画面上に配置する)。
- イベントの処理(ボタンが押されたときにチャンネルが切り替わるようにする)。
- 細かい問題を解消する(仕上げ)。
まずは、画面の構築から取り組んでみよう。
ここでは、チャンネルを切り替えるボタン2つ(前向きと後ろ向き)、そしてタイトルを表示するためのspan要素を追加すればよい。それらを1行に収めるため、p要素を親として配置しよう。つまり、以下のようなHTMLで記述すればよいわけだ。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
Vistaのサイドバーガジェットであれば、このようなコードを直接書いてもよいのだが、Liveガジェットではできない。それでは、どのようにしてこれらの要素を追加するのかというと、DOMのメソッドを使う。
this.initializeに代入される無名のメソッドに以下のようなコードを追加しよう(getBaseMethodメソッドの呼び出しの後に挿入する)。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
ちなみに、チャンネル名を表示するspan要素は、後から書き換えることになる。そのため、このノードは変数に保存しておこう。
Copyright © ITmedia, Inc. All Rights Reserved.