Gadgets/Gadget1 の変更点

追加された行はこの色です。
削除された行はこの色です。
Gadgets/Gadget1 へ行く。
Gadgets/Gadget1 の差分を削除
*はじめてのガジェット作成 [#d5173758]

RIGHT:更新日 &lastmod();

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

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

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

 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~
には共通で使用するガジェットが入る。たとえば何かのソフトと一緒にインストールされるガジェット。

***インストーラーの作成 [#w02f7286]

-さきのようにフォルダごとコピーする
-以下のようにZIPファイルを作成し拡張子を.gadgetに変更する

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

''&color(blue){サンプル};''：&ref(he.gadget);をダウンロードしてダブルクリックでOK

***gadget.xml ファイル [#vee7a679]

サイドバーに登録する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ファイル [#ea471b41]

サイドバーに表示する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); */
 } 
 
 /* イメージの右上のマージンを０にする */
 img {
 	position:absolute;
 }


***JavaScriptの部分 [#x3aedb6a]

サイドバーに表示される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;
        //サイドバーが起動したときの環境データの読み込み
　　　　setButton();
 }
 // 設定画面が終了イベントが発生した時の処理
 function settingsClosed(event){
 // 「OK」が押された時の表示画面側の処理
 	if (event.closeAction == event.Action.commit){
                setButton();
        }
 }
 function setButton(){
 //設定値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");
 }

***設定画面 [#gf889c68]

設定内容は「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>

**参考情報 [#ybdd6e4c]

64bitでは2bitのライブラリをロードすることができないので32bitしか動作しないときは
32bit版のサイドバーを起動する　パス以下のようになる。
64bitでは32bitのライブラリをロードすることができないので32bitしか動作しないときは32bit版のサイドバーを起動する　パス以下のようになる。

 \Program Files(x86)\Windows Sidebar\sidebar.exe

**参考ページ [#w5bdcb8a]

-[[マイクロソフト:http://www.microsoft.com/japan/msdn/windowsvista/webcast/gadget_1st_step.aspx]]
-[[ガジェット開発概要:http://blogs.wankuma.com/jitta/articles/79953.aspx#systemAPI]]
-[[自分好みのガジェットを作る！:http://gihyo.jp/dev/feature/01/windows-gadget]]