vista – kana.me 要

「初めてのWindowsガジェット」ソースコード解説

2010-12-292021-11-16 清水咲里

「【ランチタイムラーニング】初めてのWindowsガジェット」という記事(冒頭の「注」もお読みください)で、お昼を食べながら踏み出す、ガジェット作成の第一歩について説明しました。

この記事では、その記事に掲載したソースコードについて、少し詳しく解説します。

JavaScriptでのタイマー機能の実装

最初はHTMLの開始と、CSSのスタイルの定義です。

<html>
<head>
<title></title>
<style type="text/css">
body {
  margin: 0;
  width:130px;
  height:100px;
  font-family:Georgia, "Times New Roman", Times, serif;
  font-weight:bold;
}
#gadgetContent {
  margin-top:20px;
  width:130px;
  vertical-align:middle;
  text-align:center;
  overflow:hidden;
}
#nowTime {
  text-align:left;
  font-size:x-large;
}
#setTime {
  text-align:right;
}
</style>

<html>

<head>

body {

margin: 0;

width:130px;

height:100px;

font-family:Georgia, "Times New Roman", Times, serif;

font-weight:bold;

}

#gadgetContent {

margin-top:20px;

width:130px;

vertical-align:middle;

text-align:center;

overflow:hidden;

}

#nowTime {

text-align:left;

font-size:x-large;

}

#setTime {

text-align:right;

}

</style>

7行目で、bodyの幅を130pxに設定しています。ガジェットがWindows Vistaのサイドバーに貼り付いている状態を「ドッキング」と言いますが、このドッキングの状態では、ガジェットの最大の幅は130pxです。

また、ガジェットをサイドバーに貼り付けず、単独でデスクトップに表示する状態にすることができ、この状態を「アンドック」と言います。

アンドックした状態では、ガジェットの幅は130px以上に設定することができます。多くのガジェットでこの設定を利用して、ドッキングの状態では簡易的なビュー、アンドックした状態ではリッチなインターフェイスを持ったビュー、というようなビューの切り替えを提供しています。ただし、アンドックした状態でも、ガジェットのサイズは縦横共400pxを超えないことをMicrosoftは勧めているそうです。

さて次にHTMLを見てみましょう。

<body onload="init()">
<g:background id="imgBackground">
  <span id="gadgetContent">
    <span id="nowTime">00:00</span><br />
    <input  id="setTime" type="text" size="5" id="time" value="55" /> min <br />
    <input type="button" value="Start" onclick="startTimer()" />
    <input type="button" value="Stop" onclick="finish()" />
  </span>
</g:background>
</body>
</html>

<g:background id="imgBackground">

</span>

</g:background>

</body>

</html>

4行目が経過時間を表示するエリア(nowTime)です。そして、5行目に設定時間を入力するフィールド(setTime)があり、6行目、7行目がタイマーを開始、停止するためのボタンです。開始するにはJavaScriptで記述したstartTimer()ファンクション、停止するにはfinish()ファンクションをそれぞれ呼ぶようになっています。

1行目で、このHTMLがロードされたときにJavaScriptで記述したinit()ファンクションを呼ぶようになっていますが、後で出てくるように、今回のガジェットではこのinit()ファンクションは何もしないので、このHTMLがロードされたときは特別な処理は行われません。しかし、今後タイマーの背景画像を変えたりするなどカスタマイズするときに、HTMLがロードされるタイミングでJavaScriptのファンクションを呼ぶ、ということを覚えておきましょう。

最後にJavaScriptを見てみましょう。

<script type="text/jscript" language="jscript">
var startTime;
var secTimerId;
var timerId;
 
function init() {
//  var oBackground = document.getElementById("imgBackground");
//  oBackground.src = "url(images/background.png)";
}
 
function startTimer() {
  startTime = new Date();
  doTimer();
}

function doSecTimer() {
  var diffSec = Math.floor(((new Date()).getTime() - startTime.getTime())/1000);
  var nextTime;
  var iMin=Math.floor(diffSec/60);
  var iSec=diffSec%60;
  var strMin=("0" + iMin);
  strMin = strMin.substr(strMin.length - 2, 2);
  var strSec=("0" + iSec);
  strSec=strSec.substr(strSec.length - 2, 2);
 
  document.getElementById('nowTime').innerHTML=strMin + ":" + strSec;

  nextTime = (startTime + 1000 * (1 + diffSec)) - (new Date()).getTime();
  if (0 < nextTime) {
    secTimerId=setTimeout("doSecTimer()", nextTime);
  } else {
    secTimerId=setTimeout("doSecTimer()", 100);
  }
}
 
function doTimer() {
  var time = Math.abs(document.getElementById('setTime').value * 60 * 1000);
  doSecTimer();
  timerId=setTimeout("finish()", time - ((new Date()).getTime() - startTime.getTime()));
}
 
function finish() {
  clearTimeout(secTimerId);
  clearTimeout(timerId);
}	
</script>

var startTime;

var secTimerId;

var timerId;

function init() {

// var oBackground = document.getElementById("imgBackground");

// oBackground.src = "url(images/background.png)";

}

function startTimer() {

startTime = new Date();

doTimer();

}

function doSecTimer() {

var diffSec = Math.floor(((new Date()).getTime() - startTime.getTime())/1000);

var nextTime;

var iMin=Math.floor(diffSec/60);

var iSec=diffSec%60;

var strMin=("0" + iMin);

strMin = strMin.substr(strMin.length - 2, 2);

var strSec=("0" + iSec);

strSec=strSec.substr(strSec.length - 2, 2);

document.getElementById('nowTime').innerHTML=strMin + ":" + strSec;

nextTime = (startTime + 1000 * (1 + diffSec)) - (new Date()).getTime();

if (0 < nextTime) {

secTimerId=setTimeout("doSecTimer()", nextTime);

} else {

secTimerId=setTimeout("doSecTimer()", 100);

}

function doTimer() {

var time = Math.abs(document.getElementById('setTime').value * 60 * 1000);

doSecTimer();

timerId=setTimeout("finish()", time - ((new Date()).getTime() - startTime.getTime()));

}

function finish() {

clearTimeout(secTimerId);

clearTimeout(timerId);

}

</script>

ここでは経過時間の常時を更新し(26行目)、毎秒JavaScriptのsetTimeout()でつぎのちょうどの秒にdoSecTimerを呼び出します(30行目)。念のため高負荷がかかっていて表示の次のちょうどの秒が過ぎてしまった場合には単に0.1秒後に再度更新するようにします(32行目)。これをsetTimeout()で設定時間までの時間を計る(39行目,44行目)ことでタイマーを実装しています。

表示の更新は、その時点での時間と開始時間の差分をとって、何秒経過したかを計算します。もちろん1秒ごとに1を足すのが一番簡単ですが、タイマーイベントがジャストの時間に発生しなかったり、そのほかの計算での時間も足されてしまうのでどんどんどんどん遅れることになり、やめたほうが良いでしょう。

また、前述の通りこのガジェットではHTMLがロードされたときに呼ばれるinit()ファンクションでは何もしませんが、7行目、8行目でコメントアウトしてある行のコメントをはずして、背景画像を表示することができるでしょう。

ガジェットでのalertの実装

さてタイマーはこれで実装できるのですが、そもそもタイマーは、指定時間が経過したことを「ぴぴっ」とか言いながら教えてくれてこそ、その本領を発揮できると言うものでしょう。なのにこのタイマーにはアラーム機能がありません。まるで人ごとのように書いてしまいましたが、このセクションでは簡単なアラーム機能を実装しましょう。

そもそも何故このタイマーガジェットはalert()ファンクションを使って、ひょいっとポップアップさせることさえしないのか。それは、alert()ファンクションやconfirm()ファンクションで出てくるポップアップがWindows Vista User Experience Guidelines for the Sidebarに則っていないということでサイドバーガジェットでは無効化されているからです。

それでもとりあえず簡単にポップアップを出したいときもあるではないですか。デバッグするときなんか特に。MSDN Magazineの記事に、そんな開発者の心の叫びに応えた、alert()やconfirm()と同等の機能を実装するやり方(ガジェットプラットフォームが脆弱である一因)が掲載されています。以下が今回のタイマーガジェットにそのやり方を適用する方法です。

ステップ1: ファンクションを準備する

作業フォルダに新しく「Timer.vbs」というファイルを作成して、次のように記述し保存します。

sub myAlert(msg) 
  MsgBox msg, 48 , "Message from Timer" 
end sub

sub myAlert(msg)

MsgBox msg, 48 , "Message from Timer"

end sub

ステップ2: タイマーガジェットから呼び出す

Timer.htmlの中で、前述のCSSの直後、JavaScriptの直前に次の行を書きます。

<script src="Timer.vbs" type="text/vbscript"></script>

1	<script src="Timer.vbs" type="text/vbscript"></script>

同じくTimer.htmlの中の、finish()ファンクションの最初か最後に次の行を書きます。

myAlert("時間です");

1	myAlert("時間です");

これで簡単なアラーム機能ができました。

参照情報

【ランチタイムラーニング】初めてのWindowsガジェット – お昼を食べながらガジェットを作ってみよう – Windows 7 デスクトップおよびVista サイドバー

2010-12-292021-11-16 清水咲里

「ガジェット」という言葉を聞くと、昔のアニメ、Inspector Gadgetの決め台詞、”Go-Go-Gadget!”と叫びたくなります。この台詞と共に、体のあちこちからわらわらとガジェットが出てくる様は、さながら洋風ドラえもんといったところです。

GUIを伴うアプリケーション作成は数年前まではちょっと敷居が高いものでしたが、現在ではエディターと初歩的なHTMLやJavaScriptの知識があれば、便利な「ガジェット」がいとも簡単に作れるようになりました。しかも作ったガジェットを世界中の人たちと共有できる環境があるので、その便利さや自分の作品を公開し使ってもらえる楽しさから、文字通り老若男女が挑戦しています。

最初の一歩はお昼を食べながら踏み出せるくらいの手軽さです。明日のお昼にでも、ちょっと作ってみませんか？

注: 脆弱なガジェットをインストールした場合に遠隔からコードを実行させることができてしまうプラットフォームである(KB2719662)との理由でWindows 8以降での機能実装の打ち切り、およびガジェットを無効にするように薦めています(理由は不明ですがガジェットを無効にするためのお手軽Fix it 50906の提供が中断か終了したようなので、無効にする場合は上記記事の中のSuggested Actionsの抜粋 Windows サイドバーガジェットの悪用から Windows Vista および Windows 7 コンピューターを保護する方法を参照してください)。ガジェットはお手軽ですが、動作させることはexeを動作させているのと同じ危険性を持つので、由来のわからないものや、由来がわかっていても脆弱かもしれないという意識が必要です。またローカルファイルにアクセスする権限やコードの実行権限があるので、脆弱なものを作ったりインストールしたりしたら大変なことに、しかも管理者権限でログインしていたらOSまるごと乗っ取られるかもしれませんよ、ということになります。以上、当たり前な話であるわけですが、テキストエディタだけでお気楽に作れる分余計に注意が必要、ということでしょうか。メールに添付されたzipの内のjsファイルを実行してしまってファイルを軒並み暗号化されて、復号のためにはbitcoin払えと表示されて涙、と似たようなものです(こちらはOSによる注意のダイアログが出る分少しましかも知れないですが、見慣れていて結局そのままOK押してしまうかも)。

何を作るか

Windows サイドバーガジェット開発者ガイドには、”Hello, World!”と出てくるガジェットの作り方が掲載されています。”Hello, World!”はチュートリアルの王道ではありますが、もう少し実用性のあるガジェットを作ったほうがより楽しく作れるでしょう。

例えばタイマーなどは便利な上に簡単です。最近、仕事を効率よく進めるコツとして「ライフハック」という言葉が使われていますが、いくつかのライフハックの中で1日の時間を分割して効率良く作業を進める方法を取り上げています。ただ、時間を気にしながら作業をしても集中できないので、タイマーがあると便利です。それにタイマーはエンジニアの友であるカップ麺を作る時にも重宝します。

そこで今回は簡単なタイマーを自作します。この簡単なタイマーを改造していけば、自分好みのタイマーを作ることができます。

材料を準備しましょう

【材料】

お気に入りのエディタ (Windowsのメモ帳(notepad.exe)で十分)
ブラウザ

以上です。そうです、今この記事をご覧になっているのであれば標準的にコンピュータに入っているもので作れてしまうのです。それがガジェット作りの手軽さなのです。

もちろんJavaScriptやHTMLのリファレンスが手元にあると便利ではありますので、お好みでご利用ください。

さっそくガジェットを作りましょう

手順と成果物の概要

ではさっそくガジェットを作りましょう。その手順は以下の通りです。

%LOCALAPPDATA%\Microsoft\Windows Sidebar\Gadgetsにフォルダーを作る→「○○.gadget」フォルダー
JavaScriptを含んだHTMLを記述する→「○○.html」ファイル
マニフェストを記述する→「gadget.xml」ファイル

以上、簡潔な3ステップです。

ステップ1: 作業フォルダの作成

%LOCALAPPDATA%\Microsoft\Windows Sidebar\Gadgets (C:\Users\<ユーザー名>\AppData\Local\Microsoft\Windows Sidebar\Gadgets)に「Timer.gadget」フォルダー(以降、作業フォルダーと呼びます)を作成します。

mkdir "%LOCALAPPDATA%\Microsoft\Windows Sidebar\Gadgets\Timer.gadget"

1	mkdir "%LOCALAPPDATA%\Microsoft\Windows Sidebar\Gadgets\Timer.gadget"

ステップ2: JavaScriptを含んだHTMLを記述する

作業フォルダーに、新しく「Timer.html」というファイルを作成して、次のように記述し保存します。(このHTMLファイルの内容の詳しい解説は、『ソースコード解説』に記述しましたので、必要に応じて参照してください。)

<html>
<head>
<title></title>
<style type="text/css">
body {
  margin: 0;
  width:130px;
  height:100px;
  font-family:Georgia, "Times New Roman", Times, serif;
  font-weight:bold;
}
#gadgetContent {
  margin-top:20px;
  width:130px;
  vertical-align:middle;
  text-align:center;
  overflow:hidden;
}
#nowTime {
  text-align:left;
  font-size:x-large;
}
#setTime {
  text-align:right;
}
</style>
<script type="text/jscript" language="jscript">
var startTime;
var secTimerId;
var timerId;
 
function init() {
//  var oBackground = document.getElementById("imgBackground");
//  oBackground.src = "url(images/background.png)";
}
 
function startTimer() {
  startTime = new Date();
  doTimer();
}

function doSecTimer() {
  var diffSec = Math.floor(((new Date()).getTime() - startTime.getTime())/1000);
  var nextTime;
  var iMin=Math.floor(diffSec/60);
  var iSec=diffSec%60;
  var strMin=("0" + iMin);
  strMin = strMin.substr(strMin.length - 2, 2);
  var strSec=("0" + iSec);
  strSec=strSec.substr(strSec.length - 2, 2);
 
  document.getElementById('nowTime').innerHTML=strMin + ":" + strSec;

  nextTime = (startTime + 1000 * (1 + diffSec)) - (new Date()).getTime();
  if (0 < nextTime) {
    secTimerId=setTimeout("doSecTimer()", nextTime);
  } else {
    secTimerId=setTimeout("doSecTimer()", 100);
  }
}
 
function doTimer() {
  var time = Math.abs(document.getElementById('setTime').value * 60 * 1000);
  doSecTimer();
  timerId=setTimeout("finish()", time - ((new Date()).getTime() - startTime.getTime()));
}
 
function finish() {
  clearTimeout(secTimerId);
  clearTimeout(timerId);
}	
</script>
</head>
 
<body onload="init()">
<g:background id="imgBackground">
  <span id="gadgetContent">
    <span id="nowTime">00:00</span><br />
    <input  id="setTime" type="text" size="5" id="time" value="55" /> min <br />
    <input type="button" value="Start" onclick="startTimer()" />
    <input type="button" value="Stop" onclick="finish()" />
  </span>
</g:background>
</body>
</html>

<html>

<head>

body {

margin: 0;

width:130px;

height:100px;

font-family:Georgia, "Times New Roman", Times, serif;

font-weight:bold;

}

#gadgetContent {

margin-top:20px;

width:130px;

vertical-align:middle;

text-align:center;

overflow:hidden;

}

#nowTime {

text-align:left;

font-size:x-large;

}

#setTime {

text-align:right;

}

</style>

var startTime;

var secTimerId;

var timerId;

function init() {

// var oBackground = document.getElementById("imgBackground");

// oBackground.src = "url(images/background.png)";

}

function startTimer() {

startTime = new Date();

doTimer();

}

function doSecTimer() {

var diffSec = Math.floor(((new Date()).getTime() - startTime.getTime())/1000);

var nextTime;

var iMin=Math.floor(diffSec/60);

var iSec=diffSec%60;

var strMin=("0" + iMin);

strMin = strMin.substr(strMin.length - 2, 2);

var strSec=("0" + iSec);

strSec=strSec.substr(strSec.length - 2, 2);

document.getElementById('nowTime').innerHTML=strMin + ":" + strSec;

nextTime = (startTime + 1000 * (1 + diffSec)) - (new Date()).getTime();

if (0 < nextTime) {

secTimerId=setTimeout("doSecTimer()", nextTime);

} else {

secTimerId=setTimeout("doSecTimer()", 100);

}

function doTimer() {

var time = Math.abs(document.getElementById('setTime').value * 60 * 1000);

doSecTimer();

timerId=setTimeout("finish()", time - ((new Date()).getTime() - startTime.getTime()));

}

function finish() {

clearTimeout(secTimerId);

clearTimeout(timerId);

}

</script>

</head>

<g:background id="imgBackground">

</span>

</g:background>

</body>

</html>

ステップ3: マニフェストを記述する

作業フォルダーに新しく「gadget.xml」というファイルを作成します。

作成したファイルに次のように記述し保存します。Shift_JISの代わりにUTF-8で保存できるエディタの場合はencoding=”…”の部分は不要です。

<?xml version="1.0" encoding="Shift_JIS" ?>
<gadget>
  <name>Simple Timer</name>
  <version>1.0.0.0</version>
  <author name="【あなたの名前】">
    <info url="" />
  </author>
  <copyright>【あなたのコピーライト】</copyright>
  <description>A simple timer</description>
  <hosts>
    <host name="sidebar">
      <base type="HTML" apiVersion="1.0.0" src="Timer.html" />
      <permissions>Full</permissions>
      <platform minPlatformVersion="1.0" />
    </host>
  </hosts>
</gadget>

<?xml version="1.0" encoding="Shift_JIS" ?>

<name>Simple Timer</name>

</author>

<copyright>【あなたのコピーライト】</copyright>

<description>A simple timer</description>

<hosts>

</host>

</hosts>

</gadget>

ガジェットを動かしましょう

Windows Vistaの場合

サイドバーを右クリックで「ガジェットを追加」を選びます。

Windows 7の場合

Windows 7の場合はデスクトップの右クリックで「ガジェット」を選びます。

するとガジェットのリストに、「Simple Timer」が出てくるので、それを選びます。

パッケージを作る場合

作成した「Timer.html」「gadget.xml」の2つのファイルをzipにまとめます。zipにフォルダ名が保存されないように(zipファイルをダブルクリックした際に、フォルダではなくて2つのファイルが見える状態)、作成してください。そしてできあがったzipファイルを、「Timer.gadget」という名前に変更します。出来上がった「Timer.gadget」ファイルをダブルクリックしてインストールできるパッケージができます。

さあ、いかがですか？ちょっと見た目が悪いタイマーっぽいものが出てきましたね？

そして自分好みのタイマーに

今回作成したタイマーは、ガジェットの作り方の基本だけなので装飾していません。自分好みの背景画像や、色、フォント、さらにアニメーションを加えて、自分好みのタイマーに育ててみましょう。それがアプリケーション作りの醍醐味のひとつです。

また、このタイマーには指定時間が経過したことを通知するアラーム機能がありません。簡単なアラーム機能に関しては、上記のHTMLファイルを解説した「『初めてのWindowsサイドバーガジェット』ソースコード解説」という記事に記述しましたので、必要に応じて追記してみてください。

そうしているうちにガジェットのJavaScriptは原型を留めないほど変わるでしょう。その頃にはタイマーに限らず、自分の好きなガジェットが作れるようになっているはずです。楽しいガジェットを作って、世界に向けて発信しましょう！

kana.me 要

タグ: vista

「初めてのWindowsガジェット」ソースコード解説

JavaScriptでのタイマー機能の実装

ガジェットでのalertの実装

ステップ1: ファンクションを準備する

ステップ2: タイマーガジェットから呼び出す

参照情報

【ランチタイムラーニング】初めてのWindowsガジェット – お昼を食べながらガジェットを作ってみよう – Windows 7 デスクトップおよびVista サイドバー

何を作るか

材料を準備しましょう

【材料】

さっそくガジェットを作りましょう

手順と成果物の概要

ステップ1: 作業フォルダの作成

ステップ2: JavaScriptを含んだHTMLを記述する

ステップ3: マニフェストを記述する

ガジェットを動かしましょう

Windows Vistaの場合

Windows 7の場合

パッケージを作る場合

そして自分好みのタイマーに

参照資料