今後10年を支えるWindowsアプリの条件：Windows Liveが魅せる次世代マッシュアップ（2/5 ページ）

[大澤文孝，ITmedia]

ITmedia.Gadget.Example.MyGadget =
  function(p_elSource, p_args, p_namespace)
  {
  〜中略〜
  }

　List 2では、このコンストラクタ引数の値を、次のようにオブジェクトの変数として保存している。

// 自分自身
var m_this = this;
// DOMオブジェクト
var m_el = p_elSource;
// argsオブジェクト
var m_args = p_args;

　これにより、以降の処理では、m_el変数を通じて、Liveガジェット内にコンテンツを差し込むことができる。

innerHTMLメソッドによるコンテンツの作成

　コンテンツを作成するもっとも簡単な方法が、innerHTMLメソッドを使う方法だ。

　例えば、次のようにする。

m_el.innerHTML = 
  "<p>ガジェット<i>テスト</i></p>";

　実際、このコードをガジェットが初期化される時に呼び出されるinitializeメソッドの内部に実装すれば、ガジェットの表示結果は、下の画面1のようになる。

画面1■innerHTMLメソッドによるコンテンツの作成

DOMを操作する

　innerHTMLメソッドを使うのと似た方法として、DOM操作によって、HTML要素を追加する方法も取れる。

　例えば、次のような具合だ。

// p要素を作る
pElement = document.createElement("p");
pElement.innerText = "ガジェット";
// i要素を作る
iElement = document.createElement("i");
iElement.innerText = "テスト";
// p要素の子としてi要素を加える
pElement.appendChild(iElement);
// ガジェットの内部にp要素を入れる
m_el.appendChild(pElement);

　この場合も、結果は画面1と同じになる。