はじめてのガジェット作成

更新日 2009-07-21 (火) 09:40:03

Vistaのサイバーに表示するガジェットはjavacsript,xmlとガジェット用APIで作成できるテキストベースの小さなプログラムある。
はじめに、簡単なガジェットを作成してみる。
作成ガジェットは画像を押すと「へ〜」となるへ〜ボタン。

登録はマニュアル、一応設定画面あり。

ガジェットに必要なファイルは最低3つあればできる。

gadget.xml  <=サイドバーに登録するxmlファイル(ガジェットマニフェスト)
he.html     <=ガジェットのメインのページ
he.js       <=上記のjavascript用ファイル
============================================
setting.html<=設定を変更するページ

それ以外はページを飾る画像ファイルを使用する

また、できたガジェットはひとつのフォルダに入れ、
C:\Users\okada\AppData\Local\Microsoft\Windows Sidebar\Gadgets\
にフォルダーごと保存する
このときのフォルダ名の拡張子は.gadgetにする (e.g.)he.gadeget

マイクロソフトのページには「ja-JP」が日本語用のガジェットを格納するためで、仮に英語用のガジェットを作成する場合は「en-US」フォルダ。
言語に依存しないガジェットであれば、言語ごとのサブフォルダは必要はない。また「images」フォルダはガジェットで使用するイメージを格納する。

とありますが、パスの関係でデバッグしやすいように全部直下にいれます。

ちなみにはじめからインストールされているガジェットは
C:\Program Files\Windows Sidebar\Gadgets
にある
C:\ProgramFiles\Windows Sidebar\Shared Gadgets
には共通で使用するガジェットが入る。たとえば何かのソフトと一緒にインストールされるガジェット。

インストーラーの作成

  1. エクスプローラで目的フォルダ(拡張子gadgetのフォルダ)を開く
  2. 編集 ->すべてを選択
  3. ファイル->送る->圧縮フォルダ
  4. できたファイルの拡張子を.gadgetに変更
  5. インストールはダブルクリックでOK

サンプルfilehe.gadgetをダウンロードしてダブルクリックでOK

gadget.xml ファイル

サイドバーに登録するxmlファイル(ガジェットマニフェスト)の作成

<?xml version="1.0" encoding="utf-8"?>
<gadget>
  <name>へ〜ぼたん</name>
  <version>1.2</version>
  <author name="ISM">
  </author>
  <copyright>ISM</copyright>
 <description>押すと「へ〜」と言います。</description> <==ガジェット追加画面の下の説明表示
  <icons>
    <icon width="80" height="60" src="he-1B.jpg" />  <==ガジェット追加用画面の画像
  </icons>
  <hosts>
    <host name="sidebar">
      <base type="HTML" apiVersion="1.0.0" src="he.html" />  <==ここにサイドバーに表示するhtmlを記入
      <permissions>Full</permissions>  <==現在はFullのみ指定('07/10)
      <platform minPlatformVersion="1.0"/>  <==1.0を必ず指定
    </host>
  </hosts>
</gadget>

表示のhtmlファイル

サイドバーに表示するHTMLの作成

he.html

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"/>

<script src="he.js" type="text/javascript"></script>

<link href="he.css" rel="stylesheet" type="text/css" charset="Shift_JIS"/>
<bgsound src="he.wav" volume="-10000" id="mySND" loop="1">
</HEAD>

<!--
表示画像の大きさを指定する(ガジェットの最小サイズは横20px,縦63px)
-->
<body style="width:120px;height:100px;" onclick="hbset()" onload="load()">
<!-- 透明画像で透明化 -->
<g:background src="glass.png">

<IMG SRC = "he-1B.png" WIDTH="120" HEIGHT="100" border="0"  name="hebutton" 
style="left:0px;top:0px" />
</BODY>
</HTML>

全体を透明化するにはスタイルシートでバックグランド画像を透明化して指定してもできるが、html内の<body></body>の間に以下のようにWindowsサイドバー独自のg:background要素を使用したほうがよいようだ

<body>
<g:background src="glass.png">
-- 省略 --
</body>

he.css

body {
	width:130px;
	height:130px;
	font-family:Meiryo;
	background-color:#000000;
/*ここで指定する画像がすべてpngで透明化してあると透明化できる
	background-image:url(glass.png); */
} 

/* イメージの右上のマージンを0にする */
img {
	position:absolute;
}

JavaScriptの部分

サイドバーに表示されるHTMLファイルからコールされるJavascriptの作成

he.js

var Vollevel = "-1500";
var Silent; 
function hbset(){
	
	hb0 = new Image();
	hb0.src = "he-1B.png";
	hb1 = new Image();
	hb1.src = "he-1.png";
	if(!Silent){
		mySND.volume =Vollevel;
		mySND.src ="he.wav";
	}
	setTimeout("document.images[\"hebutton\"].src = hb0.src", 300); //0.3秒後
	document.images["hebutton"].src = hb1.src; //こちらが先に実行

}

// <BODY>タグで onloadされ実行される
function load() {
       // 設定用htmlファイルを指定する API
	System.Gadget.settingsUI="settings.html";
       // 設定画面が終了したときに設定情報を取得するための関数を指定「settingsClosed」を指定
	System.Gadget.onSettingsClosed=settingsClosed;
       // 設定画面が終了イベントが発生した時の処理
	function settingsClosed(event){
       // 「OK」が押された時の表示画面側の処理
		if (event.closeAction == event.Action.commit){
                       //設定値Volumeの読み込みAPI
			Volume = System.Gadget.Settings.read("Volume");
			switch ( Volume ) {
				case 1:
					Vollevel = "-2500";
					break;
				case 2:
					Vollevel = "-2000";
					break;
				case 3:
					Vollevel = "-1500";
					break;
				case 4:
					Vollevel = "-1000";
					break;
				case 5:
					Vollevel = "-500";
					break;
 				default:
					Vollevel = "-1500";
 			}

		}

		Silent = System.Gadget.Settings.read("Silent");
	}

}

設定画面

設定内容は「C:\Users\JE2ISM\AppData\Local\Microsoft\Windows Sidebar\Settings.ini」に以下のように保存されるがこれはサイドバーに登録されいる間明け有効で、サイドバーから削除すると消える

[Section21]
PrivateSetting_GadgetName="C:%5CUsers%5CJE2ISM%5CAppData%5CLocal%5CMicrosoft%5CWindows%20Sidebar%5CGadgets%5Che.gadget"
PrivateSetting_Enabled="true"
Volume="2"
Silent="False"

環境設定を行うファイルの作成

setting.html

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"/>
	<title>へ〜ボタン</title>
	<style type="text/css">
               //設定画面の大きさの指定
		body {
			width:230px;
			height:65px;
			margin:1px;
		}
	</style>
	<script type="text/javascript">
		function load() {
                       //設定値の読み込み
			volume=System.Gadget.Settings.read("Volume");
			if (volume ==""){
				vol[2].checked = true;
			}else{
				vol[5-volume].checked = true;
			}
			silent.checked=System.Gadget.Settings.read("silent");
		}
               // 設定画面が閉じるときの関数を指定している。と同時その関数をコールしている
               // System.Gadget.onSettingsClosing=SettingClosed;
               // function SettingClosed(event){
               // この2行と同じ
		System.Gadget.onSettingsClosing=function(e) {
			if(e.closeAction==e.Action.commit) {
				var volume;
				for(i = 0; i < 5; i++){
					if(vol[i].checked) {
						volume = vol[i].value ;
						break;
					}
				}
                       //設の書き込みAPI
                       System.Gadget.Settings.write("Volume",volume);
                       System.Gadget.Settings.write("Silent",silent.checked);
			}
		}
	</script>
</head>
<body onload="load()">
音量:</br>(大)
//<FORM>タグは不要(入れると表示されない)
//区別は javascruptでの区別はidで行う
	<input type="radio" name="vol" id="vol" Value="5" />5&nbsp;
	<input type="radio" name="vol" id="vol" Value="4" />4&nbsp;
	<input type="radio" name="vol" id="vol" Value="3" />3&nbsp;
	<input type="radio" name="vol" id="vol" Value="2" />2&nbsp;
	<input type="radio" name="vol" id="vol" Value="1" />1&nbsp;(小)</Br>

	消音:<input type="checkbox" id="silent"/>
</body>
</html>

参考ページ


トップ   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS