JavaScript

Widget開発(クリスマス・イブ)

2008年12月24日 未分類 4 comments ,

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()によるボタンの作成を行わなければならない。
が、その問題として・・・(続く)

ACCESS社のライブラリを使用したNetFront Widget開発

2008年12月17日 未分類 3 comments ,

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

Access NetFrontWidgetの開発チュートリアルの・・・。

2008年12月3日 未分類 2 comments

AccessのWebサイトからダウンロードできるNetFrontWidget開発者向けドキュメントに、
「ウィジェットコンテンツ作成チュートリアルV2.0」というものがある。
Windows Mobile上で動作するWidgetを開発する際のイロハが書かれているものなんだけど、
実はこの中の5.2章「XML形式のレスポンスを扱う方法」と書かれているところに、
どう見ても間違ってるところを発見した。
内容的にはXHRをサーバーに投げて帰ってきたデータでゴニョゴニョという部分。
19ページから始まるjs/youtube.jsというファイル内の、

function showVideos(data) {
 // 検索結果の総数
 var totalResults = xmlDoc.getElementsByTagName("totalResults")[0].firstChild.nodeValue;
(略)
}

の部分、

function showVideos(xmlDoc) {
  // 検索結果の総数
  var totalResults = xmlDoc.getElementsByTagName("totalResults")[0].firstChild.nodeValue;
(略)
}

の間違いでしょう。。
同じく、

request.onreadystatechange = function() {
if (request.readyState == 4) {
  var xmlDoc = request.responseXML.documentElement;
  showVideos(data);
 }
}

の部分、

request.onreadystatechange = function() {
if (request.readyState == 4) {
  var xmlDoc = request.responseXML.documentElement;
  showVideos(xmlDoc);
 }
}

の間違いかと。
まぁ、文脈的に気づくと思うけど、こういうのはネット上に書き残しておくだけでも
誰かにとって価値が生じることがあるはず。。
っていうか初心者の人にとっては、チュートリアル通りに作って動かないんだから、
多分もうそこで挫折しかけるわな。

ということで、チュートリアルの間違いも直せたことだし、
このブログの読者の方々はWidget開発において、1歩他者を出し抜いたわけです。
もう、モバイルウィジェットコンテストに参加するしかないですよ。
賞金総額1000万円っすよ!この不景気にYB~!
自分は諸事情により参加資格無いので、誰か出て。。んで賞金取って俺にキャッシュバックして。もしくは焼肉オゴって。。