今日はJSでVista Sidebar gadgetを作る際のTipsを紹介したいと思います
- ライブラリは遠慮なく使う
規模も小さく、隔離された環境なので影響範囲の大きいライブラリ等を使っても問題が少ないです。過去にPrototype.jsやjQueryを使用しましたが、問題は起きませんでした。
- データの重さは気にしない
gadgetに同封してあるデータは、数MBなら一瞬で表示されます
- 処理速度は気にする
常に表示され続けるので重い処理は避けましょう
- swfを使用する場合、ExternalInterface.addCallbackが必要な処理を行わない
ExternalInterface.addCallbackされたmethodをJSから呼んでも反応しませんでした。localのswfをブラウザで開くと同様の動作になるため、flash側の仕様ではないかと想像しています。また、いくつか配布されているgadgetを確認しましたが、ExternalInterface.addCallbackを使用していると思われるgadgetはありませんでした
- できること、できないことを早めに見極める
「面倒かな？」と思うことが簡単だったり（Flyoutの動的な形変換は標準で可能）、「簡単だろう」と思うことが不可能だったりします（JSから動的にdocOutする）
- 無理してDTDに従わない
interfaceはHTMLっぽいですが、独自タグとかあるのでそもそもDTDとか気にしなくていいです。SEO対策とかも当然不要なので、デザインはほぼ画像のみでOKです
- WebアプリとWindowsアプリのいいとこ取りをする
shellアクセスや、速度的な意味ではWindowsアプリ、ネット上へ自由にアクセスできる、HTML等で表示を簡単に切り替えられるのはWebアプリといいとこ取りできます
- IE7で動けばOK
クロスブラウザに関しては基本的に一切考慮不要です。Live gadget版は別に作りましょう
- 既存のコードを眺める
sidebar gadgetで難読化されたコードはほとんどないです。実データをweb上からダウンロードするタイプのgadgetでも大抵JSはそのままなので、普通に読めます
- セキュリティに気をつける
sidebar gadgetはshellアクセスが可能なので、不正なJSONを落としてevalしたらシステムのっとられます
- 位置調整は別アプリで
やはりfirebugは便利です。細かい位置調整等はsidebar内ではなく別アプリを使いましょう
- 要素はできるだけ背景に埋め込む（副笑い実装）
ボタン、リンク等でも静的な部分は背景画像として保持し、上に透明なgifを貼ってclick取るほうがいろいろ楽です。clickもa tagではなく、img tagのcursorを変更してリンクっぽく見せるほうが実装が楽です
body {
background: no-repeat url('background.png');
width: 130px;
height: 170px;
}
body * {
position: absolute;
border: none;
margin: 0px;
padding: 0px;
}
- 透過pngに注意
通常は問題なくても古いアプリを動かすと透過部分がピンクになる場合があります（vistaの表示モードが切り替わる？）
コードがほとんどなくて恐縮ですが、参考にしていただけると幸いです
