自分好みのガジェットを作る! Windowsサイドバーガジェット作り入門

第3回 ガジェットを作ってみる(中編)

この記事を読むのに必要な時間:およそ 7 分

Flyoutを表示設定と表示方法

Flyoutの利用方法を知る意味でも,試しにガジェットのほうから呼び出して表示してみます。

まず,Flyoutがどのファイルであるのかを設定する必要があります。設定は組み込みのSystem.Gadget.Flyoutオブジェクトのfileプロパティにファイル名を指定します。

先ほど作ったFlyoutの名前はFlyout.htmlとしたので,以下のように指定します。この行をMain.htmlのscript要素の先頭に追加します。

System.Gadget.Flyout.file = "Flyout.html";

そして実際に表示するにはSystem.Gadget.Flyoutオブジェクトのshowプロパティにtrueを指定します。

System.Gadget.Flyout.show = true;

試しにこの行をファイル指定の後に追加して,ガジェットを追加してみてください。ガジェットがサイドバーに出た直後,シュルシュルと結果の入っていないFlyoutが表示されるはずです。

そして別のアプリケーションなどにフォーカスを移すとシュルシュルと消えてゆきます。Flyoutはフォーカスが外れると自動的に非表示となります。

表示できることを確認したら,showの行は削除しておいてください。検索した結果を表示すればよいので最初は非表示にしておきます。

なおここで出てきたSystem.Gadget.Flyoutオブジェクトはその名の通りFlyout関連のオブジェクトで,fileプロパティ,showプロパティ以外にもFlyoutが表示されたら発生するonShowイベントや,Flyoutのドキュメントにアクセスするdocumentプロパティが用意されています。

これでFlyoutの準備はできました。あとは検索して結果を反映して,適切なタイミングで表示すればよいことになります。

ボタンを押して検索できるようにする

今度はまたガジェット本体にコードを書いていきます。そもそも,まだ「ボタンを押して検索」という動作すら実装していませんので,まずはそれを実装します。

イベントハンドラをつける

ボタンを押したら検索されるようにするには,フォームの送信イベントであるonsubmitイベントで関数を呼び出すようにします。⁠ボタンを押したら」であれば「ボタンのinput要素のonclickイベントで呼び出せばよいのでは?」と思われるかもしれませんが,検索文字列入力欄のinput要素に入力してEnterを押した場合に検索できません。それを簡単に回避するために,フォームの送信のタイミングを利用します。

それではイベント発生時に処理を行うために,以下の属性をform要素に追加します。

onsubmit="doSearch(); return false;"

onsubmitイベントではdoSearch関数を呼んで,falseを返します。doSeachはこの後実際に中身を書く予定の関数名です。

次にfalseを返している理由ですが,onsubmitは送信直前のイベントでありfalseを返すことで送信をキャンセルできます。今回はXMLHttpRequestで通信するため,フォームから送信する必要がないのでfalseを返してキャンセルしています。

検索文字列入力にidをつけておく

入力された検索文字列をスクリプトから取得できるようにしなければいけません。そのためinput要素にkeywordというidを振っておきます。

<input type="text" id="keyword" style="width: 145px">

検索ボタンを押されたときの処理を書く

ボタンが押され,イベントが発生したら関数が呼ばれるようにしたので実際の処理を書きます。先ほどdoSearch関数という名前で呼ぶようにしたのでdoSearch関数を実装します。

doSearch関数で行うことは次のようになります。

  • 入力文字列の取得
  • 検索
  • Flyoutの表示と検索結果更新(Flyoutが表示されていない場合)
  • Flyoutの検索結果更新(Flyoutが表示されている場合)

Flyoutの検索結果更新処理は若干長めで,Flyoutが表示されている場合と非表示な場合で別々なところで同じ処理を行うため,updateFlyoutという関数に記述します。

著者プロフィール

沢渡真雪(さわたりまゆき)

普段はASP.NETやPerlでWebアプリケーションを書くのが主。興味の向きはWindows一般から.NET Framework,Perl(Plaggerとか)やMac OS Xなど。

URLhttp://www.misuzilla.org/