アプリケーション開発とXML-なぜRSSやGUI開発にXMLを使うのか？（付録）

番外編：Infoteria RSS取得Widgetサンプルのご紹介（Windows環境）

このサンプルの概要は…

このサンプルは、インフォテリアサイトのRSS情報をディスクトップ上のwidgetの掲示板に表示させる簡単なアプリケーションです。

※サンプルは流用していただいて構いませんが、サンプルによる不具合には対応いたしかねますので、あらかじめご了承ください

さっそく手順解説を…

１．Yahoo! Wiget Engine をインストールする

以下のサイトより「Yahoo! Widget Engine」をダウンロードし、ご自分のPCにインストールします。

※ここではWindows環境をご紹介しますが、ご自分のOS環境に併せてダウンロードしてください

　　【URL】：http://widgets.yahoo.com/download/

＜注意：Notes＞
Yahoo! Widget Engine」は、widget、konというXMLベースの開発言語ファイルをYahoo! Widget Engineが起動しているOS上で開いたときのみアプリケーションを稼動させます。そのため、サンプルファイルも、Yahoo! Widget Engineがインストールされているマシン上でなければアプリケーションを起動することができません。

２．サンプルをダウンロードして“My Widgets”フォルダ内に置く

以下のサンプルZIPファイルをダウンロードして圧縮解凍ツールで解凍し、フォルダの中にある“infoteria RSS.widget”フォルダごと“My Widgets”フォルダ内に、コピーしてください。

　　→サンプルZIP （infoteria rss.zip）

＜注意：Notes＞
インストール時に特にディレクトリを指定しなければ「C:\Documents and Settings\【ログインユーザー名】\My Documents\My Widgets」にデフォルトで使用可能なWidgetがインストールされると思います（分からなくなったら“*.Widget”で検索をしてください）

３．完成版のサンプルを確認する

まず最初に完成版を確認してみましょう。
インフォテリアのWebサイト上にあるサイト更新情報用RSSファイルを取得し、タイトルをリスト化して表示します。また、各リストの文字をクリックすると、Webブラウザが開き、そのタイトルの情報が記述されたページを表示します。

フォルダ内の“infoteria rss.kon”をダブルクリックで開いてください。

＜注意：Notes＞
中にある.konファイルをダブルクリックすれば、自動的にYahoo! Widget Engineが起動します。この時、Yahoo!が配布している正規のWidgetではないのでその旨を問う警告ダイアログが出ますが、表示を続ける場合はそのまま【許可】を選択してください。またインストールした「Yahoo! Widget Engine」の初期設定で登録されているWidgetsがあれば同時に起動されます。（ダウンロードして使用する“Widgets”には個人で作成したものが多くあるので、使用する際は自己責任のもとにご利用ください）

確認が終わったら、ウィンドウ上で右クリックを行い。「Widgetsを閉じる」を選択して、閉じてください。

＜注意：Notes＞
この時、「Yahoo! Widget Engine」の初期設定で同時に起動された、すべてのWidgetsを終了したい場合は、タスクバーに表示される「Yahoo! Widget Engine」アイコンを右クリックして“Yahoo!ウィジットエンジンを終了”を選択してください

４． .konファイル（テスト用）をテキストエディタで開く

“infoteria RSS.widget”フォルダ内の「infoteria rss-test.kon」をテキストエディタで開いてください。

５．メインウィンドウの設定を記述する

まず、メインウィンドウの設定を記述してみましょう。
ファイル内の上部にある“//MainWindowを定義する”の下に以下のように記述してみましょう。

//MainWindowを定義する　… ←既に記述されている部分
<window>
 <name>main_window</name>
 <title>Infoteria RSS Headline</title>
 <height>250</height>
 <width>350</width>
 <visible>true</visible>
</window>

ここでは、アプリケーションの“メインウィンドウ（main_window）”の定義をしています。
<window>タグ内の設定値が「Yahoo! Widget Engine」上でメインウィンドウを描画します。
各タグの設定は、何となく分かるのではないかと思いますが、以下に記します。

さて、この時点でどのように見えるか確認してみましょう。
widget（infoteria rss-test.kon）をダブルクリックして起動してください。デスクトップに以下のようなウィンドウが現れると思います。

サンプルでは、デスクトップの背景色はBlackにしています

ここで注目すべきなのは、このタグの設定値を変更するだけで、アプリケーションのメインウィンドウのサイズも変更できるのです。

以下のように幅のサイズを定義する<width>タグの数値を書き換えてください。

//MainWindowを定義する　… ←既に記述されている部分
<window>
 <name>main_window</name>
 <title>Infoteria RSS Headline</title>
 <height>100</height>
 <width>200</width>
 <visible>true</visible>
</window>

そして、デスクトップのwidget上で右クリックをして「widgetを閉じる」を選択します。その後、再度widget（infoteria rss-test.kon）をダブルクリックして開いてください。

※アプリケーションを再起動しなければ、変更値は反映されません

※再起動時に、変更の旨の警告ダイアログが表示される場合は【許可】として起動してください

以下のように画面が小さくなるのが確認いただけると思います。

例えば、アプリケーションのメインウィンドウのサイズが変更になることなどは結構あると思いますが、このようにXMLで外部で変数を管理していれば、コードの中身を変えることなく、ましてやコードをコンパイルする必要もなく、すぐに仕様変更に対応できるのです。

※今回のように画面が切れるような変更はしないと思いますが…あくまでサンプルです

では、エディタに戻って数値を元に戻し、またWidgetも再起動してください。

//MainWindowを定義する
 <window>
 <name>main_window</name>
 <title>Hello</title>
 <height>250</height>
 <width>350</width>
 <visible>true</visible>
</window>

６．背景イメージの設定を記述する

ファイル内の上部にある“//背景イメージを定義する”の下に以下のように記述してみましょう。

//背景イメージを定義する　… ←既に記述されている部分
<image>
 <src>Images/backImage.png</src>
 <hOffset>0</hOffset>
 <opacity>100%</opacity>
</image>

再度、「infoteria rss-test.widget」を再起動してください。
すると、以下のようにメインウィンドウに半透明な背景が表示されたのがご確認いただけると思います。

また、背景画像が変更になれば、先程のメインウィンドウのサイズのように<src>タグの中身を書き換えて、アプリケーションを再起動すれば反映されます。

今度は、文字列リストの下部にグレーの背景が入ります。

サンプルでは、デスクトップの背景色はBlackにしています

７．プロパティの設定を記述する

次に、Widgetの設定内のプロパティの設定を記述してみましょう。
ファイル内の上部にある“//Widgetの設定内のプロパティを定義”の下に以下のように記述してみましょう。

ファイルの最後の方に記述されています。

※「//ヘッダーの設定」「//RSS読み込み」「//フッターの設定」の後ろです

//Widgetの設定内のプロパティを定義　… ←既に記述されている部分
<preference>
 <name>textColorPref</name>
 <title>Text Color:</title>
 <type>color</type>
 <defaultValue>#FF0000</defaultValue>
 <description>文字色の選択をしてください</description>
</preference>

再度、「infoteria rss-test.widget」を再起動してください。
起動したアプリケーション上で右クリックをし「Widgetの環境設定...」を選択してください。

プロパティのウィンドウで「General」タブの欄に“Text Color”の指定ができるようになったのが、確認いただけると思います。
最初に選択されている色を変更しておきたければ、<defaultValue>タグの値を書き換えて、アプリケーションを再起動するだけで反映することができます。

＜注意：Notes＞
「ウィンドウ」タブはもともと用意されている設定値です。今回使用している背景画像は、もともと不透明度50%なので、このタブの画像の透明度のスライダを100%にしても、背景画像がこれ以上不透明になることはありません。

８．最後にもう一度、今回のサンプルの完成版を確認する

“infoteria RSS.widget”フォルダ内の「infoteria rss.kon」が完成型のKonファイルです。
今度は同じフォルダ内にある「infoteria rss.kon」の方をダブルクリックで起動させてください。

※「infoteria rss-test.kon」は右クリックで現れるコンテクストメニューの「Widgetを閉じる」で終了してください

また、「infoteria rss.kon」をテキストエディタで開き、以下の上部の宣言部分３行目にある<debug>タグを“On”にすると、デバックウィンドウが現れます。うまくいかない部分は、赤字で表示されるなど、アプリケーションテストに役立ちます。

<?xml version="1.0" encoding="UTF-8"?>
<widget version="2.1.1" minimumVersion="1.7">
<debug>off</debug>　… ←デバック用に<debug>on</debug>に変更してください

「infoteria rss.kon」を再起動してください。
以下のようなデバックウィンドウが現れます。

以上サンプルでの番外編は終了です。
おつかれさまでした。

“//ヘッダーの設定”“//RSS読み込み”“//フッターの設定”の部分は、それぞれ流用して構いませんので、まず動作を確認後、読み込みたいRSSを変えたり、Prefarenceを変えたり、いろいろ行ってみてください。

※今回はご紹介できませんでしたが…XMLだけでなくJavascriptの制作も得意な方がいらっしゃれば「ASTERIA」という文字列の記事だけを表示するなどのオプション機能の開発にも是非チャレンジしてみてください！

もっと、自分で自由に機能をつくりたい場合は…

さて“なんだ、とても簡単じゃないか”…と思われた方も多いのではないでしょうか？
より詳細に開発を行いたい場合は、以下のページより「Reference Guide」（英語版）をダウンロードしてみることをおすすめします。

ご自分自身の創作意欲を存分に発揮してみると良いでしょう。健闘を祈ります！
【URL】：http://widgets.yahoo.com/workshop/

また、世界各国のWidgetユーザーが開発したWidgetがダウンロードできる「Widget Gallery」はこちらです。
【URL】：http://widgets.yahoo.com/gallery/

日時: 2006年07月11日 13:00 | 　| TrackBack

特集のTOPへ戻る

• 特集
  • Statusのみかた
  • XMLマスター
  • アプリケーション開発とXML