透過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>

ローカルからのブラウザでのAjaxセキュリティ

ブラウザでのAjaxのセキュリティモデルは
異なるドメイン間はできないで統一されていますが
ローカルからのアクセスだと結構バラバラなんですよね。
IEだと制限ないしOperaだとどこともアクセスできないし。
ちなみにFirefoxだと下記のメソッドを呼ぶと出来るようになります。
もちろん”よいですか?”ときかれますが。

 try{
  if(netscape){
   netscape.security.PrivilegeManager.enablePrivilege(“UniversalBrowserRead”);
  }
 }catch (ex){
 }

なきむし

いよいよ長渕剛、ユニバーサルミュージック移籍第1弾シングルの
“卒業”発売まで10日を切りました。
カップリングは通常のパターンだと
ライブ盤のラブソングなんかが多いけれども
今回はこちらも新曲の”なきむし”だそうです。
どんな唄か楽しみです。

でも一般的な卒業ソングとしては定着しないような気がする。。

リンクをブラウザで開く

ガジェット作成していてリンクをクリックしたら
ブラウザでその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);

ガジェットプラットフォームの違いについて

ガジェット、ウィジェットは基本はXML(HTML)と
JavaScriptで記述していくのですが
設定情報の保存などの特殊な処理は各種ガジェットプラットフォームにて
拡張APIを提供してくれています。
Opera ウィジェットとMac OS X Dashboard ウィジェットは
結構似ているのですがその他はバラバラです。
一つに統合してほしいです。

Opera ウィジェットはその上、拡張API少なすぎ。

そしてWindows サイドバーガジェット、
Google デスクトップ ガジェットにはonDock、unDockというのがあります。
要するにサイトバーとして表示されているガジェットプラットフォームでは
ガジェットがサイトバーに納まっているときにはonDockで
サイトバーから外されたときがunDockとなります。
当然イベントが取れるわけでunDock時には
大きさを変更することもできます。

また、Windows サイドバーガジェットではflyoutというのもあります。
サイドバーの横っちょに表示することができるのです。
通常は表示していなくてボタンを押下されたら
にょきっと表示するってことです。
びみょーな機能です。

sdlsdkでSilverlight2.0を作成

Silverlightを用いたガジェットをつくるときにいろいろ悩んだけれども
結局はSilverlight Dynamic Languages SDKを使って
JavaScriptに似た? Managed JScriptを選択して作成しました。
王道はC#でごしごし作っていく方が良いんだろうけれども
改めてC#を覚えるのとその環境がないのと
既存のJavaScriptを有効活用したかったので。

eclipse4slを使えばできると思うけれども挫折しました。。
作ったけれどもちょっと強引になった。
Managed JScriptを複数ファイルに分ける方法
知っている人いたら教えてくださいー。
分らなかったので1ファイルにまとめちゃいました。
あっ。ローカライズの方法も。。

そしてブリッジdllが結構ファイルサイズが大きいです。
これはしょうがないのかな?

下記のサイトも参照してください。
 Silverlight Dynamic Languages SDK: http://www.codeplex.com/sdlsdk
 eclipse4sl: http://www.eclipse4sl.org/

Silverlight2.0を用いたWindows サイドバーガジェット

Silverlightを用いてWindows サイドバーガジェットを作成したのですが
最初動かしたときにあまりにもおかしくてびっくりしました。
シングルクリックでフォーカスが当たって、
ダブルクリックでボタン押下イベント発生なんて。。
結局これはiframeにSilverlightのオブジェクトを埋め込んだら治りました。
なぜだか。

そしてSilverlightでのXAPの指定の仕方も
ガジェットだと特別なのです。
“x-gadget:///”をつけないと動いてくれません。
なぜだか。
なので下記のように設定します。

 <div id=”silverlightControlHost”>
  <object data=”data:application/x-silverlight,”
          type=”application/x-silverlight-2″
          width=”130″ height=”163″
   >
   <param name=”source”            value=”x-gadget:///foo-sl.xap”/>
   <param name=”onerror”           value=”onSilverlightError” />
   <param name=”background”        value=”#00000000″ />
   <param name=”minRuntimeVersion” value=”2.0.31005.0″ />
   <param name=”autoUpgrade”       value=”true” />
   <param name=”initParams”        value=”reportErrors=errorLocation,GADGET_ENGINE=vista” />
   <param name=”windowless”        value=”true” />

   <a href=”http://go.microsoft.com/fwlink/?LinkID=124807
      style=”text-decoration: none;”
   >
    <img src=”http://go.microsoft.com/fwlink/?LinkId=108181
         alt=”Get Microsoft Silverlight” style=”border-style: none”
    />
   </a>
  </object>
  <iframe style=’visibility:hidden;height:0;width:0;border:0px’></iframe>
 </div>

Windows サイドバーガジェットでの設定画面について

Windows サイドバーガジェット、Opera ウィジェット、
Mac OS X Dashboard ウィジェット、Adobe AIR、iGoogle ガジェット、
Google デスクトップ ガジェット、Yahoo!ウィジェットと
結構多種にわたってガジェットを作成しているのですが
Windows サイドバーガジェットだけ設定画面は
別HTMLで行うことを推奨しているんですよね。
なるべく同じファイルで複数ガジェットプラットフォームで動くものを
作ろうとしたのでこれで苦労しました。
結局はiframeに設定ファイルを埋め込んで行っているのですが
同じwindowでないとうまく動かなかったりして。
今後は設定画面もメイン画面とおなじHTMLにして
Windows サイドバーガジェットだけは別にする方が苦労しなさそうです。