2013年07月30日

GaWidgetのガジェット定義方法

GaWidgetのガジェット定義方法は以下のようになります。
1.構成
・1つのフォルダが1つのガジェットに対応します。
フォルダ内部は以下の2つが最低入ります。
・Main.html:ウィジェットを表示するためのHTMLです。
・gawidget.xml:表示部の幅・高さを定義します。
また、オプションとして、以下のものを置いておくことができます。
・gawidget.ico:GaWidgetBaseに表示されるアイコンを指定します。ファイル名は必ずこの名前にします。
GaWidgetのデータフォルダー\iconsには幾つかのアイコンが入っています。これをコピーして使用することもできます。

2.Main.html
ガジェットを表示するHTMLを記述したファイルです。
基本はHTML+Javascriptで記述します。
以下の記述を含ませることで、上及び左の空きを0にして詰めて表示することができます。

<style type="text/css">
* { margin: 0; padding: 0; }
</style>

3.gawidget.xml
現在、このxmlで重要な部分は以下の記述のwidthおよびheightのみです。

<gadget name="Yahoo" width="300" height="250" version="0.1" />

実行時にはこのwidth,height(幅、高さ)でガジェットが表示されます。

4.記述例
4.1基本的な記述
Main.htmlがHTML+HTML部に全て記述されたJavaScriptである場合は、基本構成のみで実行できます。

4.2外部JavaScriptを呼び出すWidgetを使用する場合
基本構成でほとんど実行できると思います。実行できない場合は、以下のような記述に変更し、フレームに収める形にすると実行できる場合があります。

<iframe src="file://xxx.html width="336" height="280" frameborder="0" scrolling="no">
</iframe>

xxx.htmlがWidgetの定義を記述したhtmlとなります。xxx.htmlはMain.htmlと同じフォルダに格納します。
この時widthとheightはgawidget.xmlのwidthとheightに一致させる必要があります。

4.3外部サーバーを必要とする場合
この場合は、4.2と同様にiframeでWidget用のhtmlを記述する必要があります。また、外部サーバーからhtmlを供給しないと動作しないものですから、無料のWebサーバーを借りてそこにWidget定義用htmlファイルを置く必要もあります。楽天などはその典型的な例になります。

4.4Object定義が必要な場合
Object定義されたWidgetを実行できる率は90%程度です。10%程度は実行できない場合があります。
Object定義されたWidgetは基本的な構成を試してダメなら、ローカルiframeを試し、ダメなら外部サーバーにWidget定義を置きiframeで引っ張るようにMain.htmlを記述します。
これら全てを試して、ダメな場合は実行できないと思います。もし、良い方法があれば作者に教えて下さい。
posted by ともちゃんぐ at 21:35| GaWidget | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。