Tag: JavaScript

iG:Syntax Hiliter 日本語版の導入・試験も兼ねて。。

前にも書いたとおり、ACCESSが提供しているNetFrontBrowser Widget開発用のJavaScriptライブラリでは、
Widgetを、dock状態、float状態、maximize状態へ遷移させるボタンと、押下時のイベントは
ひとまとまりにdivタグでくくられて出力されている。（ちなみに、「押下」って「おうか」と初見で読めます？？）

./access/nfbwdgt.js

[js]
function nfbw_displayModeButton(arg)
{

（中略）

////////////////////////////////
// main
//
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’;
[/js]

と、各状態へ遷移させる関数

widget.maximize();
widget.restore();
widget.dock();

onclickイベントに割り当てている。
これだと個別にボタンを作成できないので、
ライブラリに入る手前の段階（つまり、function nfbw_displayModeButton(arg)の呼び出し元）で、
nfbw_createButtonS()によるボタンの作成を行わなければならない。
が、その問題として・・・（続く）

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要素としているところあたりは若干の修正が必要となる気がする。というか、このライブラリ自体、はなっから絶対にウィルコム端末だけのことを考えて作ってるだろ、と。。（もしくはソフトバンク端末とこんんだけ仕様が違ってくるとは思ってなかったか。）というわけで、ここらへんを修正し、ソフトバンクモバイル用にウィジェット開発用のライブラリを作成できたらなーと思っております。