Hello World ガジェット

最も簡単で単純なガジェット（Hello World ガジェット）を作成する手順についてです。

Hello World ガジェットの作成

誰でもWindows サイドバー ガジェットの作成手順を理解できる様に、お約束ながら最も簡単で単純なガジェット（Hello World ガジェット）を作成する手順について紹介します。解説に従って実際に作成してみてください。

  1. Windows ロゴキーとRキーを押して、ファイル名を指定して実行のダイアログを表示します。そして、テキスト入力フォームに %USERPROFILE%\AppData\Local\Microsoft\Windows Sidebar\Gadgets（ユーザ毎のガジェットのインストール先）と入力してエクスプローラを開きます。

    注釈

    • Windows Vista に予め導入されているガジェットは、%ProgramFiles%\Windows Sidebar\Gadgets にあります。
    • 本解説では、ガジェットが格納されるディレクトリ（...\Gadgets）のことを、便宜上ガジェットディレクトリと称します。

  2. ガジェットディレクトリにこれから作成するガジェットを格納する為のディレクトリを新規作成します。

    例えば、作成するがジェットの名前をtestとする場合、作成するディレクトリの名前は Test.gadget と指定します。この例では、ディレクトリの名称を HelloWorld.gadget とします。

  3. ガジェット本体になるHTMLファイルを作成します。メモ帳などのテキストエディッタを開き、次のコードをコピーして貼り付け、ファイル名称を gadgetUI.html と指定して、それを HelloWorld.gadget ディレクトリに保存します（文字コードはUTF-8）。

    <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <style type="text/css">
    /*<![CDATA[*/
      body {
        width: 130px;
        height: 60px;
      }
    /*]]>*/
    </style>
    <title>Hello, World!</title>
  </head>
  <body>
    <p>Hello, World!</p>
  </body>
</html>

  4. ガジェットマニフェスト [GadgetManifest] を作成します。メモ帳などのテキストエディッタを開き、次のコードをコピーして貼り付け、ファイル名称を必ずgadget.xml と指定して、それを HelloWorld.gadget ディレクトリに保存します（文字コードはUTF-8）。

    <?xml version="1.0" encoding="UTF-8"?>
<gadget>
  <name>Hello, World!</name>
  <namespace>Example.gadgets</namespace>
  <version>1.0.0.0</version>
  <author name="Your Name">
    <info url="http://www.example.com/" text="example.com"/>
  </author>
  <copyright>(c) 2008</copyright>
  <description>The Hello, World! Gadget</description>
  <hosts>
    <host name="sidebar">
      <base type="HTML" apiVersion="1.0.0" src="gadgetUI.html"/>
      <permissions>Full</permissions>
      <platform minPlatformVersion="1.0"/>
    </host>
  </hosts>
</gadget>

  5. 作成したガジェットを実行してみます。Windows ロゴキーとSpaceキーを押してEnterキーを押すか、サイドバーの上部の正符号 (+) をクリック、又はサイドバーを右クリックしてガジェットの追加を選択し、ガジェット ギャラリーを開きます。

    この例では、ガジェット ギャラリーからこの例で作成した Hello World ガジェットをダブルクリックしてサイドバーに追加します。ガジェットの表示領域に Hello, World! と表示されれば成功です。

Hello World ガジェットの背景に画像を指定する

Hello World ガジェットの作成で作成した「Hello World ガジェット」の背景に画像を指定してみましょう。

前回作成したガジェット本体になるHTMLファイル（gadgetUI.html）をテキストエディッタで開き、次のコードをコピーして貼り付けて上書き保存します。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <style type="text/css">
    /*<![CDATA[*/
      body {
        width: 130px;
        height: 60px;
        color: WindowText;
        background-color: Window;
        background-image: url("background.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: 0% 0%;
        margin: 0;
        padding: 0;
      }
      div#GadgetBody {
        width: 120px;
        height: 50px;
        margin: 5px;
        text-align: center;
      }
    /*]]>*/
    </style>
    <title>Hello, World!</title>
  </head>
  <body>
    <div id="GadgetBody">
      <p>Hello, World!</p>
    </div>
  </body>
</html>

gadgetUI.htmlファイルで指定している画像ファイル（background.png）

そしてgadgetUI.htmlファイルで指定している画像ファイル（background.png）を%USERPROFILE%\AppData \Local\Microsoft\Windows Sidebar\Gadgets\HelloWorld.gadgetフォルダに配置します。

ガジェットの修正が完了したら、Windows サイドバーからガジェット ギャラリを開いて、Hello World ガジェットを実行します。ガジェットの背景が指定した画像になっていれば成功です。

注釈

  • ガジェットの寸法（幅及び高さ）は、最低でも幅25px～130px以内、高さ60px以上でなければなりません。尚、初期値の寸法は、25*60px（幅×高さ）です。

Hello World ガジェットを修正して環境変数を表示する

Hello World ガジェットの背景に画像を指定するで作成した「Hello World ガジェット」を修正して環境変数を表示してみましょう。環境変数の取得は、Windows Script Host [WSH] のWshEnvironmentオブジェクトでもできますが、ここでの例では Windows サイドバー ガジェット専用のAPI [GadgetAPI] にて提供される System.Environmentオブジェクトを使用します。

前回作成したガジェット本体になるHTMLファイル（gadgetUI.html）をテキストエディッタで開き、次のコードをコピーして貼り付けて上書き保存します。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <style type="text/css">
    /*<![CDATA[*/
      body {
        width: 130px;
        height: 60px;
        color: WindowText;
        background-color: Window;
        background-image: url("background.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: 0% 0%;
        margin: 0;
        padding: 0;
      }
      div#GadgetBody {
        width: 120px;
        height: 50px;
        margin: 5px;
        text-align: center;
      }
    /*]]>*/
    </style>
    <script type="text/javascript">
    //<![CDATA[
      var defaultText = "Hello, World!";
      var variableName = "ProgramFiles";
      window.onload = function() {
        var envPath = System.Environment.getEnvironmentVariable(variableName);
        var newP = document.createElement("p");
        var newText = document.createTextNode(envPath ? envPath : defaultText);
        newP.appendChild(newText);
        var refElement = document.getElementById("GadgetBody");
        while (refElement.firstChild)
          refElement.removeChild(refElement.firstChild);
        refElement.appendChild(newP);
      };
    //]]>
    </script>
    <title>Hello, World!</title>
  </head>
  <body>
    <div id="GadgetBody">
      <p>Hello, World!</p>
    </div>
  </body>
</html>

上記例のscript要素の記述内容ではW3CによるDOM [DOM] を用いているが、次の例ではMS社独自の Dynamic HTML [DHTML] を用いている。上記例のscript要素を下記例で置き換えても同様の実行結果が得られる。

<script type="text/javascript">
//<![CDATA[
  var defaultText = "Hello, World!";
  var variableName = "ProgramFiles";
  window.attachEvent("onload", function(event) {
    var envPath = System.Environment.getEnvironmentVariable(variableName);
    refElement.innerHTML = "<p><\/p>";
    refElement.children.item(0).innerText = envPath ? envPath : defaultText;
  });
//]]>
</script>

ガジェットの修正が完了したら、Windows サイドバーからガジェット ギャラリを開いて、Hello World ガジェットを実行して下さい。

注釈

  • スクリプトからHTML文書の個別の要素を参照／操作、またイベント処理をするには、HTML文書オブジェクトモデル（[DOM] 或いは [DHTML-OM]）を使用します。

Hello World ガジェットを修正して設定機能を実装する

Hello World ガジェットを修正して環境変数を表示するで内容を変更した「Hello World ガジェット」に設定機能を実装してみましょう。

ガジェットの設定ダイアログになるHTMLファイルを作成します。メモ帳などのテキストエディッタを開き、次のコードをコピーして貼り付け、ファイル名称を settingsUI.html と指定して、それを HelloWorld.gadget ディレクトリに保存します（文字コードはUTF-8）。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <style type="text/css">
    /*<![CDATA[*/
      body {
        width: 250px;
        height: 80px;
        margin: 0;
        padding: 0;
      }
      dl {
        margin: .3em .5em;
        padding: 0;
      }
      dd {
        margin-left: 20px;
      }
      kbd {
        text-decoration: underline;
      }
    /*]]>*/
    </style>
    <script type="text/javascript">
    //<![CDATA[
      System.Gadget.onSettingsClosing = function(event) {
        if (event.closeAction == event.Action.commit) {
          var variableName = document.getElementById("envVar").value;
          System.Gadget.Settings.write("variableName", variableName);
        }
      };
      window.onload = function() {
        var currentSetting = System.Gadget.Settings.read("variableName");
        System.Debug.outputString("currentSetting:"+ currentSetting +"\n");
        if (currentSetting != "") {
          document.getElementById("envVar").value = currentSetting;
        }
      };
    //]]>
    </script>
    <title>Hello, World!</title>
  </head>
  <body>
    <fieldset>
      <legend>Environment</legend>
      <dl>
        <dt><label for="envVar">Environment Variable (<kbd>V</kbd>):</label></dt>
        <dd><input type="text" name="envVar" id="envVar" value="ProgramFiles" accesskey="V" /></dd>
      </dl>
    </fieldset>
  </body>
</html>

次に、前回作成したガジェット本体になるHTMLファイル（gadgetUI.html）をテキストエディッタで開き、次のコードをコピーして貼り付けて上書き保存します。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <style type="text/css">
    /*<![CDATA[*/
      body {
        width: 130px;
        height: 60px;
        color: WindowText;
        background-color: Window;
        background-image: url("background.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: 0% 0%;
        margin: 0;
        padding: 0;
      }
      div#GadgetBody {
        width: 120px;
        height: 50px;
        margin: 5px;
        text-align: center;
      }
    /*]]>*/
    </style>
    <script type="text/javascript">
    //<![CDATA[
      var defaultText = "Hello, World!";
      var variableName = "ProgramFiles";
      function setContent() {
        var envPath = System.Environment.getEnvironmentVariable(variableName);
        var newP = document.createElement("p");
        var newText = document.createTextNode(envPath ? envPath : defaultText);
        newP.appendChild(newText);
        var refElement = document.getElementById("GadgetBody");
        while (refElement.firstChild)
          refElement.removeChild(refElement.firstChild);
        refElement.appendChild(newP);
      };
      System.Gadget.settingsUI = "settingsUI.html";
      System.Gadget.onSettingsClosed = function(event) {
        if (event.closeAction == event.Action.commit) {
          variableName = System.Gadget.Settings.read("variableName");
          System.Debug.outputString("variableName:"+ variableName +"\n");
          System.Diagnostics.EventLog.writeEntry(variableName);
          setContent();
        }
      };
      window.onload = setContent;
    //]]>
    </script>
    <title>Hello, World!</title>
  </head>
  <body>
    <div id="GadgetBody">
      <p>Hello, World!</p>
    </div>
  </body>
</html>

ガジェットの修正が完了したら、Windows サイドバーからガジェット ギャラリを開いて、Hello World ガジェットを実行して下さい。

注釈

  • System.Gadget.onSettingsClosingプロパティに設定されたハンドラ関数は、設定機能の使用が終了する際（ガジェットの設定ダイアログが閉じらる時）に呼び出されます。この関数で設定情報を保存します。そして、System.Gadget.onSettingsClosedプロパティに設定されたハンドラ関数は、設定機能の使用が終了した際（ガジェットの設定ダイアログが閉じた時）に呼び出されます。この関数で変更された設定情報を取得します。