Yahoo!ウィジェットのパッケージングについて

Yahoo!ウィジェットのパッケージングですが
昔はzip圧縮の拡張子widgetだったのですが
いまは独自フラットファイル形式の拡張子widgetとなっております。

なぜ独自フラットファイル形式にしたかというと
ガジェット、ウィジェットはもともと小さいプラグラムなので
それほどファイルサイズは大きくはならないのと
ファイルサイズのなかで多くを占めているのは
もともと圧縮されている画像ファイルだからだそうです。
なので解凍のコストを考えると
そのままフラットファイル形式でよいのではと。
おそらくフラットファイル形式はtarのような
形式をしていると思いますが詳細は知らないです。

それで下記のようにタスクを書いてあげます。
 <target name    = “convYahooWin”
         unless  = “mac”
 >
  <exec executable = “${bin.dir}/Converter.exe”
        dir        = “${basedir}”
        timeout    = “60000”
  >
   <arg value = “-flat” />
   <arg value = “<作成するwidgetファイル名>” />
   <arg value = “-o” />
   <arg value = “<出力ディレクトリ>” />
  </exec>
 </target>

 <target name    = “convYahooMac”
         if      = “mac”
 >
  <exec executable = “${bin.dir}/Converter”
        dir        = “${basedir}”
        timeout    = “60000”
  >
   <arg value = “-flat” />
   <arg value = “<作成するwidgetファイル名>” />
   <arg value = “-o” />
   <arg value = “<出力ディレクトリ>” />
  </exec>
 </target>

Adobe AIRのパッケージングについて

Adobe AIRのパッケージングですが
できるものはzip圧縮で拡張子airのファイルです。
でもAdobe AIR SDKをつかってairファイルを作成します。
何故かというと署名を付加しているからです。
署名ファイルは自己署名でもOKとなっています。

署名ファイルの作成はAntで行うとすると
下記のようにタスクを書いてあげます。
 <target name = “convAIRKey”>
  <java jar         = “${bin.dir}/adt.jar”
        fork        = “true”
        failonerror = “true”
        maxmemory   = “64m”
        timeout     = “300000”
  >
   <jvmarg value = “-Xms16m” />
   <jvmarg value = “-Xmx64m” />

   <arg value = “-certificate” />
   <arg value = “-cn” />
   <arg value = “SelfSign” />
   <arg value = “-ou” />
   <arg value = “<部署名>” />
   <arg value = “-o” />
   <arg value = “<会社名>” />
   <arg value = “-c” />
   <arg value = “JP” />
   <arg value = “2048-RSA”/>
   <arg value = “<自己署名ファイル名>” />
   <arg value = “<自己署名パスワード>” />
  </java>
 </target>

それを元にパッケージングを行います。
 <target name   = “convAIRWin”
         unless = “mac”
 >
  <java jar         = “${bin.dir}/adt.jar”
        fork        = “true”
        failonerror = “true”
        maxmemory   = “64m”
        timeout     = “300000”
  >
   <jvmarg value = “-Xms16m” />
   <jvmarg value = “-Xmx64m” />

   <arg value = “-package” />
   <arg value = “-storetype” />
   <arg value = “pkcs12” />
   <arg value = “-keystore” />
   <arg value = “<自己署名ファイル名>” />
   <arg value = “-storepass” />
   <arg value = “<自己署名パスワード>” />
   <arg value = “<作成するairファイル名>” />
   <arg value = “<マニフェストファイル名>”/>

   <arg value = “-C” />
   <arg value = “<ベースディレクトリ>” />
   <arg value = “AIRAliases.js”   />
   <arg value = “AIRLocalizer.js” />
   <arg value = “<airファイルに含めるファイル名…>” />
  </java>
 </target>

ちなみにAdobe AIR SDKのbinディレクトリにある
adl.exeを使うと現状の確認、テストが行えます。
下記のコマンドです。
 adl.exe <マニフェストファイル名>

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

各ガジェットプラットフォーム向けにガジェットを作成したら
パッケージングして配布できるようにします。
ではそのファイルフォーマットというと
拡張子はそれぞれ異なりますが
大体が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を使用)

Adobe AIRでのガジェットの移動

Adobe AIRでマニフェストファイルを下記のようにして
をクロムモードをなしにすると
当然ながらタイトルバーがないです。
タイトルバーがないので移動もできません。
 <systemChrome>none</systemChrome>
 <transparent>true</transparent>

そのときには動かしたいエレメントに対して
下記のイベントを追加してあげると移動することができます。
  $(“foo”).onmousedown = function(){ window.nativeWindow.startMove(); };

そして現在の表示位置は下記のように取得することができるので
この値を保存しておいて起動時に設定してあげれば
前回の表示位置を再現できます。
 x = window.nativeWindow.x;
 y = window.nativeWindow.y;

テキストボックスに枠線がない

Google デスクトップ ガジェットでは
なんとテキストボックスに枠線がないのです。
自分で線を書かないといけないとは思いもしませんでした。

また、ボタンに対しても同じです。
枠線がなかったらボタンの判別すらできません。
でもimage、overImage、downImageとマウスの状態によっての
画像が設定できます。
これはこれで便利です。

iGoogle ガジェットでのテスト

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

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

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

Mac OS X Dashboard ウィジェットでのテスト

Mac OS X Dashboard ウィジェットでテストを行う際に
毎回、Dashboardに切り替えるのが面倒です。

下記のサイトを参照してください。
なんとウィジェットをデスクトップ上に持ってこれます。
ウィジェットをドラッグしたままF12をおしたらほらね。
便利です。
 http://developer.apple.com/jp/technotes/tn2005/tn2139.html#TNTAG13

また、Info.plistにてセキュリティ属性を変更したときには
一旦ログアウトをしないと
変更したセキュリティ属性が反映されませんので
気を付けてください。
覚えておかないとハマったりします。

Opera ウィジェット エミュレータ

OperaはPCでのブラウザのシェアとしては大きくないんだけれども
Wiiなどのゲーム機やモバイル機、携帯などにも
搭載されているのでそれを合わせると結構な数になると思います。
当然Opera ウィジェットもWiiで動いたりします。
そこでの動作環境の確認用にエミュレータがあります。
Opera ウィジェットとしてOperaから提供されています。

エミュレータで動かすためには
下記の文章を書いてあげる必要があります。
 <script type=”text/javascript” language=”javascript”>
  if(parent.emulator){
   parent.emulator.begin(window);
  }
 </script>

注意点はあくまで動かしている
Operaのバージョン上でエミュレートしており
実機のOepraバージョンとは異なったりします。
残念ながらやっぱりエミュレータでしかないところです。

音の再生

今回は各ガジェットにて音の再生と停止についてです。

Opera ウィジェット、Mac OS X Dashboard ウィジェット、
iGoogle ガジェットに関しては拡張APIが用意されていません。
なのでFlash経由などで行う方法しかないようです。

また、音源ファイルにはいろいろとフォーマットがありますが
Adobe AIRはmp3のみサポートしていますので
要注意です。

ではその他のガジェットに関しては下記のように行います。
 Windows サイドバーガジェット:
  <再生>
   System.Sound.playSound(“foo.mp3”);

  <停止> 引数にから文字を設定します
   System.Sound.playSound(“”);

 Adobe AIR:
  <再生>
   if(airSoundChannel != null){
    airSoundChannel.stop();
   }
   var sound = new air.Sound(
    new air.URLRequest(“foo.map3”)
   );
   airSoundChannel = sound.play(0);

  <停止>
   if(airSoundChannel != null){
    airSoundChannel.stop();
   }

 Google デスクトップ ガジェット:
  <再生>
   if(curAudioClip == null){
    curAudioClip = framework.audio.play(“foo.mp3”, onAudioStateChange);
   } else {
    curAudioClip.currentPosition = 0;
   }

  <停止>
   if(curAudioClip != null){
    curAudioClip.stop();
    curAudioClip = null;
   }

 Yahoo!ウィジェット:
  <再生>
   play(“foo.mp3”, true);

  <停止> 引数にnullを設定
   play(null, true);

Yahoo!ウィジェットでのローカライズについて

Yahoo!ウィジェットでのローカライズについてですが
これはベースディレクトリの下に”Resources”ディレクトリを作成し
その下に”ja”などの言語ディレクトリを作成します。
そこにはローカライズ毎に”Localizable.strings”を作成します。

“Localizable.strings”ファイルの中身は
下記のように記述します。
行末の”;”を忘れないようにしてください。
 “foo” = “bar”;

ローカライズされたメッセージを取得するときは
下記の拡張APIを使用します。
 var msg = widget.getLocalizedString(“foo”);