| ページ一覧 | ブログ | twitter |　 書式 | 書式(表) |

MyMemoWiki

Windows サイドバー 概要 ～ ガジェットの表示

提供: MyMemoWiki
ナビゲーションに移動 検索に移動

Windows サイドバー 概要 ～ ガジェットの表示

Windows サイドバー | JavaScript |

ガジェット

概要

  • HTML およびスクリプト ベースのアプリケーション
  • 情報または機能をユーザーに示す
  • のアプリケーション、コントロール、Web サイトおよびサービスから取得

構成要素

.gadget ファイル

  • 構成要素のコレクションをzipアーカイブ

インストール

  • ダウンロードプロセスにより
  • ローカルからダブルクリックにより

ガジェット マニフェスト

  • 全体構成や表示情報を記載した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画像をガジェットの背景として配置すること

<blockquote>CSSのpositionで「absolute」を指定し、HTMLのレイアウトとは無関係に左上隅に配置するように設定 </blockquote>

<blockquote>その後の要素が背景イメージの下に配置されないようにするため、z-indexスタイルに-1を指定 </blockquote>

GIMAGE

  • 標準 HTML imgタグより効率的にガジェット DOM にイメージを追加する
  • リクエストされたファイルはローカル コンピュータにあることが必要

G:TEXT

Settings

  • 基本ガジェット UI に 2 つのユーザー インターフェイス (UI) 拡張子を定義
  • ガジェットから情報を保存するには、ファイルに書き込むのではなくこのオブジェクトを利用
  • System.Gadget.Settings
    • ガジェットの構成を変更
  • System.Gadget.Flyout
    • ガジェット UI に関する追加的詳細または情報を表示

リファレンス

Gadget オブジェクト

System.Gadget.Settings
  • Settings 機能
System.Gadget
  • 基本的機能
System.Gadget.Sidebar
  • サイドバーの基本的機能
System.Gadget.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
System.Shell.Drive
  • システム ストレージ デバイスの特性を示す
System.Shell.Folder
  • ファイル管理操作を実行
System.Shell.Item
System.Shell.RecycleBin
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>
結果
  • ガジェットの一覧に表示された

1343 win sidebar01.jpg

  • 起動したところ

1344 win sidebar02.jpg

「https://www.typea.info/tips_/index.php?title=Windows_サイドバー_概要_～_ガジェットの表示&oldid=6791」から取得

© 2006 矢木浩人