- 追加された行はこのように表示されます。
- 削除された行は
このように表示されます。
!!!Windows サイドバー 概要 〜 ガジェットの表示
[Windows サイドバー][JavaScript]
!!ガジェット
!概要
*HTML およびスクリプト ベースのアプリケーション
*情報または機能をユーザーに示す
*のアプリケーション、コントロール、Web サイトおよびサービスから取得
!構成要素
*XML
*HTML
*JScript
*CSS
!.gadget ファイル
*構成要素のコレクションをzipアーカイブ
!インストール
*ダウンロードプロセスにより
*ローカルからダブルクリックにより
!![ガジェット マニフェスト|http://msdn.microsoft.com/ja-jp/library/bb508509(VS.85).aspx]
*全体構成や表示情報を記載したXML
*ガジェットピッカーを通じてユーザーに提示
*ガジェットパッケージに同梱する必要がある
*名前は gadget.xml とする
!!!開発
!!はじめに
*Web サイトおよびサービスから取得した情報または機能をユーザーに示すことを目的
*Web ページの作成経験がある方には身近
!!ファイル
*基本は 2 つのファイルから構成
!マニフェスト
*XMLファイル
*名前はgadget.xml
!HTML
*UIを提供
*コアコード
*マニフェストで指定された名前
!!作成手順
*通常、開発フォルダにはホストするガジェットと同じ名前を付け、拡張子 .gadget を付ける
!配置
*開発およびテスト中は、サイドバーに関連するシステム フォルダに配置するとより効率的
*これにより、ガジェットはガジェット ピッカーに表示され、後のファイル処理を最小限に抑えることができる
%USER_DATA%\Local\Microsoft\Windows Sidebar\Gadgets (ユーザー ガジェット)
%SYSTEM_ROOT%\Program Files\Windows Sidebar\Gadgets (グローバル ガジェット)
!!3 つのプレゼンテーション要素
!G:BACKGROUND
*多数のメソッドを使用して、ガジェットの背景を宣言し、イメージ ソースを指定
*一般に、背景オブジェクトおよびそのイメージ ソースは、g:background 要素を使用してガジェット HTML ファイルで宣言
*役割は、アルファチャンネルを持つPNG画像をガジェットの背景として配置すること
""CSSのpositionで「absolute」を指定し、HTMLのレイアウトとは無関係に左上隅に配置するように設定
""その後の要素が背景イメージの下に配置されないようにするため、z-indexスタイルに-1を指定
!GIMAGE
*標準 HTML imgタグより効率的にガジェット DOM にイメージを追加する
*リクエストされたファイルはローカル コンピュータにあることが必要
!G:TEXT
!Settings
*基本ガジェット UI に 2 つのユーザー インターフェイス (UI) 拡張子を定義
*ガジェットから情報を保存するには、ファイルに書き込むのではなくこのオブジェクトを利用
*System.Gadget.Settings
**ガジェットの構成を変更
*System.Gadget.Flyout
**ガジェット UI に関する追加的詳細または情報を表示
!![リファレンス|http://msdn.microsoft.com/ja-jp/library/aa965853(VS.85).aspx]
!Gadget オブジェクト
::System.Gadget.Settings
*Settings 機能
::System.Gadget
*基本的機能
::System.Gadget.Sidebar
*サイドバーの基本的機能
::System.Gadget.SideShow
*Windows Vista SideShow デバイスでサイドバー機能
::System.Gadget.Flyout
*Flyout 機能
!システム オブジェクト
::System.Contact
::System.ContactManager
::System.Debug
*サイドバー ガジェット スクリプトのデバッグに利用
::System.Diagnostics.EventLog
*Application イベント ログ エントリの書き込みに利用
::System.Environment
*システムおよびユーザー環境変数を決定
::System.Machine
*マシン プロセッサとメモリ特性を決定
::System.Machine.CPU
*System.Machine.CPU コレクションの各メンバー
::System.Machine.PowerStatus
*コンピュータの電源状態
::System.MessageStore
*Microsoft Windows メール (旧称 Outlook Express)
::System.MessageStore.Folder
*個々の Windows メール フォルダ
::System.MessageStore.Message
*Windows メールの各メンバー
::System.Network.Wireless
*ワイヤレス ネットワーク接続性
::System.Shell
*Windows Shell 特性を示す
::System.Shell.Drive
*システム ストレージ デバイスの特性を示す
::System.Shell.Folder
*ファイル管理操作を実行
::System.Shell.Item
::System.Shell.RecycleBin
*Recycle Bin 特性
::System.Sound
::System.Time
*システム時間情報を決定
::System.Time.timeZone
*System.Time.timeZone コレクションの各メンバー
!プレゼンテーション オブジェクト
::background
*コンテンツおよびプロパティでガジェットの背景を宣言
::image
*ガジェットに表示するイメージ要素
::text
*ガジェットに表示するテキスト要素
!!サンプル
!表示
::gadget.xml
<?xml version="1.0" encoding="utf-8" ?>
<gadget>
<name>WindowSidebarSample</name>
<version>1.0.0.0</version>
<hosts>
<host name="sidebar">
<base type="HTML" apiVersion="1.0.0" src="WindowSidebarSample.html" />
<permissions>Full</permissions>
<platform minPlatformVersion="1.0"/>
</host>
</hosts>
</gadget>
::WindowSidebarSample.html
<html>
<head>
<style type="text/css">
body {
/* ウィンドウサイズはBody要素に明示的に指定する */
margin:0px;
width:125px;
height:250px;
}
</style>
<script type="text/jscript" language="jscript">
function init() {
}
</script>
</head>
<body onload="init()">
<!--
・ absolute を指定し、HTMLのレイアウトとは無関係に左上隅に配置
・ 後の要素が背景イメージの下に配置されないようにz-indexスタイルに-1を指定
-->
<g:background id="imgBackground" src="images/background.png"
style="position:absolute;z-index:-1;width:125px;height:250px;">
</g:background>
</body
</html>
::結果
*ガジェットの一覧に表示された
{{ref_image win_sidebar01.jpg}}
*起動したところ
{{ref_image win_sidebar02.jpg}}
