Gadgets/Gadget1
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
]
開始行:
*はじめてのガジェット作成 [#d5173758]
RIGHT:更新日 &lastmod();
Vistaのサイバーに表示するガジェットはjavacsript,xmlとガジ...
はじめに、簡単なガジェットを作成してみる。~
作成ガジェットは画像を押すと「へ〜」となるへ〜ボタン。
登録はマニュアル、一応設定画面あり。~
ガジェットに必要なファイルは最低３つあればできる。
gadget.xml <=サイドバーに登録するxmlファイル(ガジェット...
he.html <=ガジェットのメインのページ
he.js <=上記のjavascript用ファイル
============================================
setting.html<=設定を変更するページ
それ以外はページを飾る画像ファイルを使用する
また、できたガジェットはひとつのフォルダに入れ、~
C:\Users\okada\AppData\Local\Microsoft\Windows Sidebar\Ga...
にフォルダーごと保存する~
このときのフォルダ名の拡張子は.gadgetにする (e.g.)he.gade...
マイクロソフトのページには「ja-JP」が日本語用のガジェット...
言語に依存しないガジェットであれば、言語ごとのサブフォル...
とありますが、パスの関係でデバッグしやすいように全部直下...
ちなみにはじめからインストールされているガジェットは~
C:\Program Files\Windows Sidebar\Gadgets~
にある~
C:\ProgramFiles\Windows Sidebar\Shared Gadgets~
には共通で使用するガジェットが入る。たとえば何かのソフト...
***インストーラーの作成 [#w02f7286]
-さきのようにフォルダごとコピーする
-以下のようにZIPファイルを作成し拡張子を.gadgetに変更する
+エクスプローラで目的フォルダ(拡張子gadgetのフォルダ)を開く
+編集 ->すべてを選択
+ファイル->送る->圧縮フォルダ
+できたファイルの拡張子を.gadgetに変更
+インストールはダブルクリックでOK
''&color(blue){サンプル};''：&ref(he.gadget);をダウンロー...
***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"...
<permissions>Full</permissions> <==現在はFullのみ...
<platform minPlatformVersion="1.0"/> <==1.0を必ず...
</host>
</hosts>
</gadget>
***表示のhtmlファイル [#ea471b41]
サイドバーに表示するHTMLの作成
''he.html''
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; char...
<script src="he.js" type="text/javascript"></script>
<link href="he.css" rel="stylesheet" type="text/css" cha...
<bgsound src="he.wav" volume="-10000" id="mySND" loop="1">
</HEAD>
<!--
表示画像の大きさを指定する(ガジェットの最小サイズは横20p...
-->
<body style="width:120px;height:100px;" onclick="hbset()...
<!-- 透明画像で透明化 -->
<g:background src="glass.png">
<IMG SRC = "he-1B.png" WIDTH="120" HEIGHT="100" border="...
style="left:0px;top:0px" />
</BODY>
</HTML>
全体を透明化するにはスタイルシートでバックグランド画像を...
<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ファイルからコールされるJavascr...
''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...
document.images["hebutton"].src = hb1.src; //こちらが先...
}
// <BODY>タグで onloadされ実行される
function load() {
// 設定用htmlファイルを指定する API
System.Gadget.settingsUI="settings.html";
// 設定画面が終了したときに設定情報を取得するため...
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\Windo...
[Section21]
PrivateSetting_GadgetName="C:%5CUsers%5CJE2ISM%5CAppData...
PrivateSetting_Enabled="true"
Volume="2"
Silent="False"
環境設定を行うファイルの作成
''setting.html''
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; cha...
<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=Settin...
// 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("Vol...
System.Gadget.Settings.write("Sil...
}
}
</script>
</head>
<body onload="load()">
音量：</br>(大)
//<FORM>タグは不要（入れると表示されない）
//区別は javascruptでの区別はidで行う
<input type="radio" name="vol" id="vol" Value="5" />5&n...
<input type="radio" name="vol" id="vol" Value="4" />4&n...
<input type="radio" name="vol" id="vol" Value="3" />3&n...
<input type="radio" name="vol" id="vol" Value="2" />2&n...
<input type="radio" name="vol" id="vol" Value="1" />1&n...
消音：<input type="checkbox" id="silent"/>
</body>
</html>
**参考情報 [#ybdd6e4c]
64bitでは32bitのライブラリをロードすることができないので3...
\Program Files(x86)\Windows Sidebar\sidebar.exe
**参考ページ [#w5bdcb8a]
-[[マイクロソフト:http://www.microsoft.com/japan/msdn/win...
-[[ガジェット開発概要:http://blogs.wankuma.com/jitta/arti...
-[[自分好みのガジェットを作る！:http://gihyo.jp/dev/featu...
終了行:
*はじめてのガジェット作成 [#d5173758]
RIGHT:更新日 &lastmod();
Vistaのサイバーに表示するガジェットはjavacsript,xmlとガジ...
はじめに、簡単なガジェットを作成してみる。~
作成ガジェットは画像を押すと「へ〜」となるへ〜ボタン。
登録はマニュアル、一応設定画面あり。~
ガジェットに必要なファイルは最低３つあればできる。
gadget.xml <=サイドバーに登録するxmlファイル(ガジェット...
he.html <=ガジェットのメインのページ
he.js <=上記のjavascript用ファイル
============================================
setting.html<=設定を変更するページ
それ以外はページを飾る画像ファイルを使用する
また、できたガジェットはひとつのフォルダに入れ、~
C:\Users\okada\AppData\Local\Microsoft\Windows Sidebar\Ga...
にフォルダーごと保存する~
このときのフォルダ名の拡張子は.gadgetにする (e.g.)he.gade...
マイクロソフトのページには「ja-JP」が日本語用のガジェット...
言語に依存しないガジェットであれば、言語ごとのサブフォル...
とありますが、パスの関係でデバッグしやすいように全部直下...
ちなみにはじめからインストールされているガジェットは~
C:\Program Files\Windows Sidebar\Gadgets~
にある~
C:\ProgramFiles\Windows Sidebar\Shared Gadgets~
には共通で使用するガジェットが入る。たとえば何かのソフト...
***インストーラーの作成 [#w02f7286]
-さきのようにフォルダごとコピーする
-以下のようにZIPファイルを作成し拡張子を.gadgetに変更する
+エクスプローラで目的フォルダ(拡張子gadgetのフォルダ)を開く
+編集 ->すべてを選択
+ファイル->送る->圧縮フォルダ
+できたファイルの拡張子を.gadgetに変更
+インストールはダブルクリックでOK
''&color(blue){サンプル};''：&ref(he.gadget);をダウンロー...
***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"...
<permissions>Full</permissions> <==現在はFullのみ...
<platform minPlatformVersion="1.0"/> <==1.0を必ず...
</host>
</hosts>
</gadget>
***表示のhtmlファイル [#ea471b41]
サイドバーに表示するHTMLの作成
''he.html''
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; char...
<script src="he.js" type="text/javascript"></script>
<link href="he.css" rel="stylesheet" type="text/css" cha...
<bgsound src="he.wav" volume="-10000" id="mySND" loop="1">
</HEAD>
<!--
表示画像の大きさを指定する(ガジェットの最小サイズは横20p...
-->
<body style="width:120px;height:100px;" onclick="hbset()...
<!-- 透明画像で透明化 -->
<g:background src="glass.png">
<IMG SRC = "he-1B.png" WIDTH="120" HEIGHT="100" border="...
style="left:0px;top:0px" />
</BODY>
</HTML>
全体を透明化するにはスタイルシートでバックグランド画像を...
<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ファイルからコールされるJavascr...
''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...
document.images["hebutton"].src = hb1.src; //こちらが先...
}
// <BODY>タグで onloadされ実行される
function load() {
// 設定用htmlファイルを指定する API
System.Gadget.settingsUI="settings.html";
// 設定画面が終了したときに設定情報を取得するため...
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\Windo...
[Section21]
PrivateSetting_GadgetName="C:%5CUsers%5CJE2ISM%5CAppData...
PrivateSetting_Enabled="true"
Volume="2"
Silent="False"
環境設定を行うファイルの作成
''setting.html''
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; cha...
<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=Settin...
// 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("Vol...
System.Gadget.Settings.write("Sil...
}
}
</script>
</head>
<body onload="load()">
音量：</br>(大)
//<FORM>タグは不要（入れると表示されない）
//区別は javascruptでの区別はidで行う
<input type="radio" name="vol" id="vol" Value="5" />5&n...
<input type="radio" name="vol" id="vol" Value="4" />4&n...
<input type="radio" name="vol" id="vol" Value="3" />3&n...
<input type="radio" name="vol" id="vol" Value="2" />2&n...
<input type="radio" name="vol" id="vol" Value="1" />1&n...
消音：<input type="checkbox" id="silent"/>
</body>
</html>
**参考情報 [#ybdd6e4c]
64bitでは32bitのライブラリをロードすることができないので3...
\Program Files(x86)\Windows Sidebar\sidebar.exe
**参考ページ [#w5bdcb8a]
-[[マイクロソフト:http://www.microsoft.com/japan/msdn/win...
-[[ガジェット開発概要:http://blogs.wankuma.com/jitta/arti...
-[[自分好みのガジェットを作る！:http://gihyo.jp/dev/featu...
ページ名:
![[PukiWiki]](image/../localimages/Atom.gif "[PukiWiki]")
