NetFront Widgetを開発するときの裏ワザとして、ACCESS社が作成したライブラリを入手・使用するというものがある。βバージョンから開発ツールを使用されていた皆さんはすでにご存知かと思われるが、NetFront Widgetはその特徴から半強制的にオープンソースである。というのも、開発ツールによってパッケージングされた.wgtというファイルは、実はindex.html + config.xml + etcをフォルダにまとめ、zip圧縮しただけのものなので、

  1. 公式サイトからダウンロードした.wgtファイルをダウンロード
  2. ファイルの拡張子を.wgtから.zipに変更
  3. .zipファイルの解凍

という作業で、ソースコードが入手可能となる。また、ACCESSが開発したWidget(たとえば、公式サイトにある楽天Widgetなど)を上記の方法で調べてみると、ACCESS独自のJavascriptのライブラリ(./ACCESS/nfbwdgt.js)が用いられていることがわかる。このファイルには、

  • 携帯画面がVGA、QVGAかどうかの判別
  • スクロールバーの作成、制御
  • ウィジェットの各状態間の遷移ボタンの作成

などの機能を実現するソースコードがまとめられているので、参考にされたし。。このライブラリをソフトバンク用のウィジェットの開発にも用いることができれば便利だと思うけれど、今のところウィルコム用のものとの仕様の違いで、なかなか上手く機能を流用できない。たとえば、ソフトバンク用ウィジェットには、そもそもdock状態などがないため、function nfbw_displayModeButton(arg)などで、

[javascript]
eButtons = document.createElement(‘DIV’);
if (arg.idName) {
    eButtons.setAttribute(‘id’, arg.idName);
}
eDock = nfbw_createButtonS({‘onclickfunc’:’widget.dock();’,
                        ’imgName’:arg.buttons.dockImgName,
                        ’imgWidth’:width,
                        ’imgHeight’:height,
                        ’isElement’:true});
eDock.style.position = ‘absolute’;
eDock.style.top = ‘0px’;
eDock.style.left = ‘0px’;
eMini = nfbw_createButtonS({‘onclickfunc’:’widget.restore();’,
                        ’imgName’:arg.buttons.floatImgName,
                        ’imgWidth’:width,
                        ’imgHeight’:height,
                        ’isElement’:true});
eMini.style.position = ‘absolute’;
eMini.style.top = ‘0px’;
eMini.style.left = width/3 + gaplen + ‘px’;
eMini.style.display = ‘none’;
eMaxi = nfbw_createButtonS({‘onclickfunc’:’widget.maximize();’,
                        ’imgName’:arg.buttons.maxImgName,
                        ’imgWidth’:width,
                        ’imgHeight’:height,
                        ’isElement’:true});
eMaxi.style.position = ‘absolute’;
eMaxi.style.top = ‘0px’;
eMaxi.style.left = width/3 + gaplen + ‘px’;
eButtons.style.width = width/3 * 2 + gaplen + ‘px’;
eButtons.appendChild(eDock);
eButtons.appendChild(eMini);
eButtons.appendChild(eMaxi);[/javascript]
と、最小化、最大化、float化させるボタンをひとまとめにDIV要素としているところあたりは若干の修正が必要となる気がする。というか、このライブラリ自体、はなっから絶対にウィルコム端末だけのことを考えて作ってるだろ、と。。(もしくはソフトバンク端末とこんんだけ仕様が違ってくるとは思ってなかったか。)というわけで、ここらへんを修正し、ソフトバンクモバイル用にウィジェット開発用のライブラリを作成できたらなーと思っております。