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

MyMemoWiki

「Windows サイドバー 概要 ~ ガジェットの表示」の版間の差分

提供: MyMemoWiki
ナビゲーションに移動 検索に移動
 
(同じ利用者による、間の1版が非表示)
1行目: 1行目:
==Windows サイドバー 概要 ~ ガジェットの表示==
+
==[[Windows サイドバー 概要 ~ ガジェットの表示]]==
[[Windows サイドバー]][[JavaScript]]
+
[[Windows サイドバー]] | [[JavaScript]] |
 
===ガジェット===
 
===ガジェット===
 
====概要====
 
====概要====
*HTML およびスクリプト ベースのアプリケーション
+
*[[HTML]] およびスクリプト ベースのアプリケーション
 
*情報または機能をユーザーに示す
 
*情報または機能をユーザーに示す
 
*のアプリケーション、コントロール、Web サイトおよびサービスから取得
 
*のアプリケーション、コントロール、Web サイトおよびサービスから取得
 
====構成要素 ====
 
====構成要素 ====
*XML
+
*[[XML]]
*HTML
+
*[[HTML]]
 
*JScript
 
*JScript
*CSS
+
*[[CSS]]
 
====.gadget ファイル====
 
====.gadget ファイル====
 
*構成要素のコレクションをzipアーカイブ
 
*構成要素のコレクションをzipアーカイブ
17行目: 17行目:
 
*ローカルからダブルクリックにより
 
*ローカルからダブルクリックにより
 
===[http://msdn.microsoft.com/ja-jp/library/bb508509(VS.85).aspx ガジェット マニフェスト]===
 
===[http://msdn.microsoft.com/ja-jp/library/bb508509(VS.85).aspx ガジェット マニフェスト]===
*全体構成や表示情報を記載したXML
+
*全体構成や表示情報を記載した[[XML]]
 
*ガジェットピッカーを通じてユーザーに提示
 
*ガジェットピッカーを通じてユーザーに提示
 
*ガジェットパッケージに同梱する必要がある
 
*ガジェットパッケージに同梱する必要がある
28行目: 28行目:
 
*基本は 2 つのファイルから構成  
 
*基本は 2 つのファイルから構成  
 
====マニフェスト====
 
====マニフェスト====
*XMLファイル
+
*[[XML]]ファイル
 
*名前はgadget.xml  
 
*名前はgadget.xml  
====HTML====
+
====[[HTML]]====
 
*UIを提供  
 
*UIを提供  
 
*コアコード  
 
*コアコード  
39行目: 39行目:
 
*開発およびテスト中は、サイドバーに関連するシステム フォルダに配置するとより効率的
 
*開発およびテスト中は、サイドバーに関連するシステム フォルダに配置するとより効率的
 
*これにより、ガジェットはガジェット ピッカーに表示され、後のファイル処理を最小限に抑えることができる
 
*これにより、ガジェットはガジェット ピッカーに表示され、後のファイル処理を最小限に抑えることができる
  %USER_DATA%\Local\Microsoft\Windows Sidebar\Gadgets (ユーザー ガジェット)  
+
  %USER_DATA%\Local\Microsoft\[[Windows]] Sidebar\Gadgets (ユーザー ガジェット)  
  %SYSTEM_ROOT%\Program Files\Windows Sidebar\Gadgets (グローバル ガジェット)  
+
  %SYSTEM_ROOT%\Program Files\[[Windows]] Sidebar\Gadgets (グローバル ガジェット)  
 
===3 つのプレゼンテーション要素===
 
===3 つのプレゼンテーション要素===
====G:BACKGROUND====
+
====G:BACKG[[R]]OUND====
 
*多数のメソッドを使用して、ガジェットの背景を宣言し、イメージ ソースを指定  
 
*多数のメソッドを使用して、ガジェットの背景を宣言し、イメージ ソースを指定  
*一般に、背景オブジェクトおよびそのイメージ ソースは、g:background 要素を使用してガジェット HTML ファイルで宣言  
+
*一般に、背景オブジェクトおよびそのイメージ ソースは、g:background 要素を使用してガジェット [[HTML]] ファイルで宣言  
 
*役割は、アルファチャンネルを持つPNG画像をガジェットの背景として配置すること  
 
*役割は、アルファチャンネルを持つPNG画像をガジェットの背景として配置すること  
  
<blockquote>CSSのpositionで「absolute」を指定し、HTMLのレイアウトとは無関係に左上隅に配置するように設定 </blockquote>
+
<blockquote>CSSのpositionで「absolute」を指定し、[[HTML]]のレイアウトとは無関係に左上隅に配置するように設定 </blockquote>
  
 
<blockquote>その後の要素が背景イメージの下に配置されないようにするため、z-indexスタイルに-1を指定 </blockquote>
 
<blockquote>その後の要素が背景イメージの下に配置されないようにするため、z-indexスタイルに-1を指定 </blockquote>
  
 
====GIMAGE ====
 
====GIMAGE ====
*標準 HTML imgタグより効率的にガジェット DOM にイメージを追加する  
+
*標準 [[HTML]] imgタグより効率的にガジェット DOM にイメージを追加する  
 
*リクエストされたファイルはローカル コンピュータにあることが必要  
 
*リクエストされたファイルはローカル コンピュータにあることが必要  
  
74行目: 74行目:
 
*サイドバーの基本的機能  
 
*サイドバーの基本的機能  
 
=====System.Gadget.SideShow =====
 
=====System.Gadget.SideShow =====
*Windows Vista SideShow デバイスでサイドバー機能  
+
*[[Windows Vista]] SideShow デバイスでサイドバー機能  
 
=====System.Gadget.Flyout =====
 
=====System.Gadget.Flyout =====
 
*Flyout 機能  
 
*Flyout 機能  
84行目: 84行目:
 
=====System.Diagnostics.EventLog =====
 
=====System.Diagnostics.EventLog =====
 
*Application イベント ログ エントリの書き込みに利用  
 
*Application イベント ログ エントリの書き込みに利用  
=====System.Environment =====
+
=====System.En[[vi]]ronment =====
 
*システムおよびユーザー環境変数を決定  
 
*システムおよびユーザー環境変数を決定  
=====System.Machine =====
+
=====System.[[Mac]]hine =====
 
*マシン プロセッサとメモリ特性を決定  
 
*マシン プロセッサとメモリ特性を決定  
=====System.Machine.CPU =====
+
=====System.[[Mac]]hine.CPU =====
*System.Machine.CPU コレクションの各メンバー  
+
*System.[[Mac]]hine.CPU コレクションの各メンバー  
=====System.Machine.PowerStatus =====
+
=====System.[[Mac]]hine.PowerStatus =====
 
*コンピュータの電源状態  
 
*コンピュータの電源状態  
 
=====System.MessageStore =====
 
=====System.MessageStore =====
*Microsoft Windows メール (旧称 Outlook Express)  
+
*Microsoft [[Windows]] メール (旧称 Outlook Express)  
 
=====System.MessageStore.Folder =====
 
=====System.MessageStore.Folder =====
*個々の Windows メール フォルダ  
+
*個々の [[Windows]] メール フォルダ  
 
=====System.MessageStore.Message =====
 
=====System.MessageStore.Message =====
*Windows メールの各メンバー  
+
*[[Windows]] メールの各メンバー  
 
=====System.Network.Wireless =====
 
=====System.Network.Wireless =====
 
*ワイヤレス ネットワーク接続性  
 
*ワイヤレス ネットワーク接続性  
 
=====System.Shell =====
 
=====System.Shell =====
*Windows Shell 特性を示す  
+
*[[Windows]] Shell 特性を示す  
 
=====System.Shell.Drive =====
 
=====System.Shell.Drive =====
 
*システム ストレージ デバイスの特性を示す  
 
*システム ストレージ デバイスの特性を示す  
107行目: 107行目:
 
*ファイル管理操作を実行  
 
*ファイル管理操作を実行  
 
=====System.Shell.Item =====
 
=====System.Shell.Item =====
=====System.Shell.RecycleBin =====
+
=====System.Shell.[[R]]ecycleBin =====
*Recycle Bin 特性  
+
*[[R]]ecycle Bin 特性  
 
=====System.Sound =====
 
=====System.Sound =====
 
=====System.Time =====
 
=====System.Time =====
130行目: 130行目:
 
   <hosts>
 
   <hosts>
 
     <host name="sidebar">
 
     <host name="sidebar">
       <base type="HTML" apiVersion="1.0.0" src="WindowSidebarSample.html" />
+
       <base type="[[HTML]]" apiVersion="1.0.0" src="WindowSidebarSample.html" />
 
       <permissions>Full</permissions>
 
       <permissions>Full</permissions>
 
       <platform minPlatformVersion="1.0"/>
 
       <platform minPlatformVersion="1.0"/>
154行目: 154行目:
 
  <body onload="init()">
 
  <body onload="init()">
 
   <!--
 
   <!--
     ・ absolute を指定し、HTMLのレイアウトとは無関係に左上隅に配置
+
     ・ absolute を指定し、[[HTML]]のレイアウトとは無関係に左上隅に配置
 
     ・ 後の要素が背景イメージの下に配置されないようにz-indexスタイルに-1を指定
 
     ・ 後の要素が背景イメージの下に配置されないようにz-indexスタイルに-1を指定
 
     -->
 
     -->

2020年2月16日 (日) 04:34時点における最新版

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