ウェブページ用 Google ガジェットって

iGoogle ガジェットと同じなんだけれども
ブログパーツとしてページに張り付けられる
ウェブページ用 Google ガジェットってのがあります。
紛らわしいです。

作り方一緒なのに紹介ページは別で
しかもウェブページ用 Google ガジェットの紹介ページ
 http://www.google.co.jp/ig/directory?synd=open
への登録方法も判りません。

なんでこんなに紛らわしいことをしたんでしょう?

各ガジェットの配布について

各ガジェットプラットフォーム向けにガジェットを作成し
パッケージングしたら配布してみんなに使ってもらいましょう。

こんな感じになっています。
 Windows サイドバーガジェット:
  下記のサイトの”マイページ”から登録することができます。
  なおログインするにはWindows Live IDが必要です。
   http://gallery.live.com/
  登録が完了するまでには1、2日かかります。

 Opera ウィジェット:
  下記のサイトの”ウィジェットの公開”から登録することができます。
  なおログインするにはMy Opera ユーザ登録が必要です。
   http://widgets.opera.com/ja/
  登録が完了するまでには数日かかります。
  Operaはちゃんと内容チェックをしてくれていて
  おかしいところがあると英語ですが
  My Operaのメール箱にメッセージが届きます。

 Mac OS X Dashboard ウィジェット:
  下記のサイトより登録することができます。
   https://regist.apple.co.jp/downloads/widget.html
  ダウンロード先のURLはこちらで用意しないといけないので要注意です。
  登録が完了するまでには数カ月かかります。
  その上、ユーザからの要望などは登録することができません。

 Adobe AIR:
  下記のサイトより登録することができます。
   http://adobe-ria.jp/air/register
  一覧ページはAdobeの方なのですが詳細ページは
  こちらで用意しないといけません。
  登録が完了するまでには2、3日かかります。
  ユーザからの要望などはこちらで用意した詳細ページにて
  独自で用意するしかありません。

 iGoogle ガジェット:
  下記のサイトより登録することができます。
   http://www.google.com/ig/submit?hl=ja
  登録が完了するまでには数週間かかります。

 Google デスクトップ ガジェット:
  下記のサイトより登録することができます。
   http://desktop.google.com/pluginsubmit?hl=ja
  登録が完了するまでには約1ヵ月かかります。
  もし1ヵ月過ぎても登録されないときには下記を参照してください。
   http://code.google.com/intl/ja/apis/desktop/faq.html#faq_2_5

 Yahoo!ウィジェット:
  下記のサイトより登録することができます。
  なおログインするにはYahoo! JAPAN IDが必要です。
   http://widgets.yahoo.co.jp/gallery/
  登録が完了するまでには数日かかります。

各ガジェットのパッケージングについて

各ガジェットプラットフォーム向けにガジェットを作成したら
パッケージングして配布できるようにします。
ではそのファイルフォーマットというと
拡張子はそれぞれ異なりますが
大体がzip圧縮されたファイルとなっています。

なので作ったガジェットはAntなどを使って
zip圧縮して指定された拡張子を付けてあげます。
どうなっているかというと。
 Windows サイドバーガジェット:
  拡張子”gadget”でのzip圧縮

 Opera ウィジェット:
  拡張子”wgt”でのzip圧縮

 Mac OS X Dashboard ウィジェット
  拡張子”zip”でのzip圧縮

 Adobe AIR
  拡張子”air”でのzip圧縮 (Adobe AIR SDKのadtコマンドを使用)

 iGoogle ガジェット
  そのままサイトにアップロード

 Google デスクトップ ガジェット
  拡張子”gg”でのzip圧縮

 Yahoo!ウィジェット
  拡張子”widget”での独自のフラットファイル形式 (Converter.exeを使用)

iGoogle ガジェットでのテスト

iGoogle ガジェットはGoogleのサイト上にて動作するので
テストがしにくいです。

また、動いているのはGoogleのサイトで
ファイルを置いているサイトではないので
ときどき頭がこんがります。
あと、ブラウザのキャッシュもね。

そこでMy Gadgetsを使うとちょっとは楽になります。
Googleでのキャッシュを無効にできるので
最新のものを見ることができます。
下記のサイトより追加できます。
 http://www.google.co.jp/ig/directory?hl=ja&url=www.google.com/ig/modules/developer.xml

iGoogle ガジェットでのローカライズについて

iGoogle ガジェットではベースディレクトリ直下に
“ja_ALL.xml”のように”<言語>_<国>.xml”を作ります。
ワイルドカードとして”ALL”が使えます。
なので”ALL_ALL.xml”を作るのもありです。
むしろ”ALL_ALL.xml”を作って置いた方が良いと思います。

それでローカライズ毎のXMLファイルの中身はというと
下記のように記述してあげます。
 <messagebundle>
  <msg name=”foo”>bar</msg>
 </messagebundle>

メッセージを取得する方法は下記のように行います。
  var pref = new _IG_Prefs(__MODULE_ID__); // new gadgets.Prefs();
  var msg = pref.getMsg(“foo”);

透過PNGが透過されない

IE6では透過PNGをサポートしていなくて
苦労なさっている人も多いと思います。
IE7になってやっと対応してくてもちろん
Windows サイドバーガジェットも対応しているんだけれども
中途半端です。
ときどき透過PNG画像のはじっこが赤紫になってしまいます。
ならないのもあるし、なるのもあるしどうしてなのか不明です。

Silverlight2.0を使っての
Windows サイドバーガジェットを作っているときに
気づいたんだけれども背景を完全に透過にしたら赤紫になりました。
なんででしょうね。。

ちなみにiGoogleではIE6の透過PNG対応として
iepngfixというものを導入して
ごまかしています。
まったくシェアが多いから無視できないので苦肉の策です。。

設定ファイルへの読み書込み

今回は各種ガジェットでの設定ファイルへの読み書込みについてです。
キーに対して値の書込みを行い、キーを指定して値の読込みを行います。
なのでいっぱいキーを作っても面倒なので
値をJSONにしておくと便利です。
そしてOpera ウィジェット、Mac OS X Dashboard ウィジェットでは
書き込みを行う際に通常、キーと値なところが
値、キーの順番で設定しますのでちょっと紛らわしいです。

こんな感じで行います。
 Windows サイドバーガジェット:
  value = System.Gadget.Settings.readString(key);

  System.Gadget.Settings.writeString(key, value);

 Opera ウィジェット:
  value = widget.preferenceForKey(key);

  widget.setPreferenceForKey(value, key);

 Mac OS X Dashboard ウィジェット:
  value = widget.preferenceForKey(key);

  widget.setPreferenceForKey(value, key);

 Adobe AIR:
  var dir  = air.File.applicationStorageDirectory;
  var file = dir.resolvePath(key);
  if (file.exists) {
   var fileStream = new air.FileStream();
   fileStream.open(file, air.FileMode.READ);
   value = fileStream.readUTFBytes(fileStream.bytesAvailable);
   fileStream.close();
  }

  var dir        = air.File.applicationStorageDirectory;
  var file       = dir.resolvePath(key);
  var fileStream = new air.FileStream();
  fileStream.open(file, air.FileMode.WRITE);
  fileStream.writeUTFBytes(value);
  fileStream.close();

 iGoogle ガジェット:
  var pref = new _IG_Prefs(__MODULE_ID__); // new gadgets.Prefs();
  value = pref.getString(key);

  pref.set(key, value);

 Google デスクトップ ガジェット:
  value  = options.getValue(key);

  options.putValue(key, value);

 Yahoo!ウィジェット:
  value = preferences.key.value;

  preferences.key.value = value;

ガジェットでのAjaxセキュリティ

ガジェットからのAjax使っての外部通信ですが
ローカルからのブラウザアクセスと同様に結構バラバラです。
基本はマニフェストファイルに接続先ドメインを記述します。

まあ、下記のようになっています。
 Windows サイドバーガジェット: (特になし、今後かかりそう)

 Opera ウィジェット: 下記のようにconfig.xmlに接続先ドメインを記述
  <security>
   <access>
    <protocol>http</protocol>
    <port>80</port>
    <host>www.aaoh.co.jp</host>
    <host>aaoh.co.jp</host>
   </access>
  </security>

 Mac OS X Dashboard ウィジェット: 下記のように Info.plistに
  外部通信を許可することを記述
  <key>AllowNetworkAccess</key>
  <true />

 Adobe AIR: (特になし)

 iGoogle ガジェット: _IG_FetchXmlContentメソッドを使用すれば問題なし

 Google デスクトップ ガジェット: (特になし)

 Yahoo!ウィジェット: 下記のようにIwidget.xmlにに接続先ドメインを記述
  <security>
   <http name=”aaoh_co_jp”>www.aaoh.co.jp</http>
  </security>

Silverlightはちょっと特殊で通信を行うサーバー側に
このクライアントと通信してもよいという
マニフェストファイルを置きます。
こんな感じで。
 <cross-domain-policy>

  <!– すべてのクライアントからのアクセスを許可する –>
  <allow-http-request-headers-from
   domain=”*”
   headers=”*”
  />
 </cross-domain-policy>

リンクをブラウザで開く

ガジェット作成していてリンクをクリックしたら
ブラウザでそのURLを開きたいとき。
Mac OS X Dashboard ウィジェット、Adobe AIRだけは
拡張APIを呼んであげなければいけません。
JavaScriptからブラウザを開きたいときにはわかるんだけれども
“aタグ”で記述しているんだからそれを解釈してよと思います。

ちなみにリンクをブラウザで開く拡張APIは下記となっております。
 Windows サイドバーガジェット: <aタグ> または System.Shell.execute(url);

 Opera ウィジェット: <aタグ> または window.open(url);

 Mac OS X Dashboard ウィジェット: widget.openURL(url);

 Adobe AIR: air.navigateToURL(new air.URLRequest(url));

 iGoogle ガジェット: <aタグ> または window.open(url);

 Google デスクトップ ガジェット: <aタグ> またはframework.openUrl(url);

 Yahoo!ウィジェット: openURL(url);