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

MyMemoWiki

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

提供: MyMemoWiki
ナビゲーションに移動 検索に移動
(ページの作成:「==Windows サイドバー 概要 ～ ガジェットの表示== [Windows サイドバー][JavaScript] ===ガジェット=== ====概要==== *HTML およびスクリプ…」)
 
1行目: 1行目:
 
==Windows サイドバー 概要 ～ ガジェットの表示==
 
==Windows サイドバー 概要 ～ ガジェットの表示==
−
[Windows サイドバー][JavaScript]
+
[[Windows サイドバー][JavaScript]]
 
===ガジェット===
 
===ガジェット===
 
====概要====
 
====概要====
47行目: 47行目:
 
*役割は、アルファチャンネルを持つPNG画像をガジェットの背景として配置すること  
 
*役割は、アルファチャンネルを持つPNG画像をガジェットの背景として配置すること  
  
−
<blockquote>CSSのpositionで「absolute」を指定し、HTMLのレイアウトとは無関係に左上隅に配置するように設定 </blockquote>
+
&lt;blockquote&gt;CSSのpositionで「absolute」を指定し、HTMLのレイアウトとは無関係に左上隅に配置するように設定 &lt;/blockquote&gt;
  
−
<blockquote>その後の要素が背景イメージの下に配置されないようにするため、z-indexスタイルに-1を指定 </blockquote>
+
&lt;blockquote&gt;その後の要素が背景イメージの下に配置されないようにするため、z-indexスタイルに-1を指定 &lt;/blockquote&gt;
  
 
====GIMAGE ====
 
====GIMAGE ====
124行目: 124行目:
 
====表示====
 
====表示====
 
=====gadget.xml=====
 
=====gadget.xml=====
−
  <?xml version="1.0" encoding="utf-8" ?>
+
  &lt;?xml version="1.0" encoding="utf-8" ?&gt;
−
  <gadget>
+
  &lt;gadget&gt;
−
   <name>WindowSidebarSample</name>
+
   &lt;name&gt;WindowSidebarSample&lt;/name&gt;
−
   <version>1.0.0.0</version>
+
   &lt;version&gt;1.0.0.0&lt;/version&gt;
−
   <hosts>
+
   &lt;hosts&gt;
−
     <host name="sidebar">
+
     &lt;host name="sidebar"&gt;
−
       <base type="HTML" apiVersion="1.0.0" src="WindowSidebarSample.html" />
+
       &lt;base type="HTML" apiVersion="1.0.0" src="WindowSidebarSample.html" /&gt;
−
       <permissions>Full</permissions>
+
       &lt;permissions&gt;Full&lt;/permissions&gt;
−
       <platform minPlatformVersion="1.0"/>
+
       &lt;platform minPlatformVersion="1.0"/&gt;
−
     </host>
+
     &lt;/host&gt;
−
   </hosts>
+
   &lt;/hosts&gt;
−
  </gadget>
+
  &lt;/gadget&gt;
 
=====WindowSidebarSample.html=====
 
=====WindowSidebarSample.html=====
−
  <html>
+
  &lt;html&gt;
−
  <head>
+
  &lt;head&gt;
−
   <style type="text/css">
+
   &lt;style type="text/css"&gt;
 
     body {
 
     body {
 
       /* ウィンドウサイズはBody要素に明示的に指定する */
 
       /* ウィンドウサイズはBody要素に明示的に指定する */
146行目: 146行目:
 
       height:250px;
 
       height:250px;
 
     }
 
     }
−
   </style>
+
   &lt;/style&gt;
−
   <script type="text/jscript" language="jscript">
+
   &lt;script type="text/jscript" language="jscript"&gt;
 
     function init() {
 
     function init() {
 
     }
 
     }
−
   </script>
+
   &lt;/script&gt;
−
  </head>
+
  &lt;/head&gt;
−
  <body onload="init()">
+
  &lt;body onload="init()"&gt;
−
   <!--
+
   &lt;!--
 
     ・ absolute を指定し、HTMLのレイアウトとは無関係に左上隅に配置
 
     ・ absolute を指定し、HTMLのレイアウトとは無関係に左上隅に配置
 
     ・ 後の要素が背景イメージの下に配置されないようにz-indexスタイルに-1を指定
 
     ・ 後の要素が背景イメージの下に配置されないようにz-indexスタイルに-1を指定
−
     -->
+
     --&gt;
−
   <g:background id="imgBackground" src="images/background.png"  
+
   &lt;g:background id="imgBackground" src="images/background.png"  
−
                 style="position:absolute;z-index:-1;width:125px;height:250px;">
+
                 style="position:absolute;z-index:-1;width:125px;height:250px;"&gt;
−
   </g:background>
+
   &lt;/g:background&gt;
−
  </body
+
  &lt;/body
−
  </html>
+
  &lt;/html&gt;
 
=====結果=====
 
=====結果=====
 
*ガジェットの一覧に表示された
 
*ガジェットの一覧に表示された

2020年2月15日 (土) 08:06時点における版

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

[[Windows サイドバー][JavaScript]]

ガジェット

概要

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

構成要素

  • XML
  • HTML
  • JScript
  • CSS

.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
  • 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>
結果
  • ガジェットの一覧に表示された

1343 win sidebar01.jpg

  • 起動したところ

1344 win sidebar02.jpg

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

© 2006 矢木浩人