HTML5 KISS

これは何?

いわゆるHTML5対応Webブラウザの標準機能だけで、KISekae Set system (KISS)のデータを表示します。LZH書庫の展開も行います。Java VMやプラグインなどは一切必要としません

読み取るのは純正のKISS/GS形式のデータそのものです。ブラウザからアクセスしやすくするための事前変換などは一切必要ありません。

何がうれしいの?

実用的な意味はあまりありません。ぶっちゃけ、新規にWeb着せ替えを自作するならsioriでも使ったほうがよほど高速で古いブラウザとの互換性も高いでしょう。KISSデータをWeb上で遊ばせるにはきすちょこJavaアプレット版KISSなどの選択肢もありましたが、最近のブラウザやJava実行環境では困難になりました:

これに対して、HTML5版をデフォルトでブロックするブラウザは今のところありません(ブラウザが古くて動かないことはありえますが)。

そのほか、次のような点についてはJavaアプレット版よりメリットがあります。

いっぽう次のような点はJavaアプレット版に劣ります。

技術情報

更新履歴

2015-12-31
2015-12-29
2015-12-22
2015-12-05

量的スペック・制限事項

Webブラウザの性能が許す限り、いくらでも多くのセルと大きな表示領域を使えます(とはいえちょっと大きいデータになるとあまり実用的ではありません)。コメント機能、追加セットには今のところ未対応です。

ckissにはいちおう対応していますが、データが大きくなるのでロードが非常に遅いです。

今のところ並列実行を全く考慮していないので、同じページで複数データを同時に開いたり、ロード中にセットを切り替えたりすると動作がおかしくなります。

現在、LZH圧縮していないデータの読み込みではXMLHttpRequestを同期的に使っているので、データの読み込み中ブラウザが固まります。遅い通信回線や巨大なデータでは顕著な問題になります。

システム要件

プラグインなどは必要ありませんが、WebブラウザはいわゆるHTML5対応と呼ばれる、比較的新しいものでなければなりません。

具体的には以下の機能をサポートしている必要があります。また、任意のバイナリファイルからの読み取りを実現するためにunlzh.jsのシステム要件も満たす必要があります。

HTML5のCanvas 2D Context、またはdata URLスキーム

canvasはピクセルデータの読み書きをサポートしている必要があります。具体的にはCanvasRenderingContext2DインターフェースにgetImageDataメソッドとputImageDataメソッドが必要です。古い(たとえばWeb Application 1.0の時代の)canvas要素の実装はこれらのメソッドをサポートしていない場合があります。putImageDataをサポートしていない場合にはdata URLスキームによるシミュレートを行います。createImageDataメソッドはサポートされていれば使いますが、必ずしもサポートされている必要はありません。

Cascading Style Sheets Level 2 Revision 1 (CSS 2.1)

セルを任意の座標に表示するための絶対配置(position: absoluteなど)、セットに存在しないセルを隠したりするために可視性(visibilityプロパティ)などの機能を使っています。ckissのセル全体透明度(%t)を実現するためにopacityプロパティを使っています。

Document Object Model (DOM) Level 2 Events

マウス操作を検知するためにaddEventListenerメソッドやMouseEventインターフェースなどを使用しています。

CSSOM View Module

ポインタの要素に対する相対位置を求めるために、getBoundingClientRect()メソッドを使用しています。offsetX/offsetYのほうが直接的なのですが、ブラウザにより実装されていなかったり実装がCSSOM Viewの仕様通りでなかったりするので使用していません(参考)。仕様ではgetBoundingClientRect()により得られる値はfloatなので、セルの当たり判定で誤差を生じないようにMath.roundで丸めを行っています(ただし実際には、IEやWebKitは丸めを行なった値を返すようです)。

またページの幅を取得するのにinnerWidthプロパティを、CSSのfloatプロパティを変更するためにcssFloatプロパティを、CSSプロパティの計算値を取得するためにgetComputedStyle()メソッドを使用しています。一部のブラウザではバグ対策のためにCSSOM Viewで定義されている他のプロパティやブラウザの独自拡張を使っている場合があります。

高速なJavaScriptエンジン

Internet Explorerはバージョン8でもかなり厳しいです。あくまで私の環境での参考ですが、Chrome 2はFirefox 3.5の2〜3倍、Safari 4は10倍近くも速いです。Internet Explorer 8はFirefox 3.5の10倍以上遅いですが。Minefield 3.7a3preではJavaScriptがさらに高速化されてCanvasPixelArrayがサポートされたため、Chrome/Safari/Opera 10.50並みに速くなっているようです(これらの機能の導入前後のビルドではっきり体感できるほど速度が違う)。技術的な解説

IE9 Platform Preview 3では大幅に速くなっていますが、Microsoftの宣伝から受けるイメージほどではありませんでした(ハードウェアが貧弱でアクセラレーションが効いていないのかもしれませんが)。

また最低でもECMA-262 第3版の機能が必要です。たとえば、第3版で初めて定義されたtry...catchを使用しています。もっともいわゆるHTML5対応ブラウザのJavaScript実装が第3版の機能すらサポートしていないほど古いということはありえないので、事実上この条件は問題になりません。

ブラウザ別のhack・制限

canvasをサポートしていない環境やcanvasにputImageDataがない環境(Safari 3.2など)では、data URLスキームによりputImageDataをシミュレートしています。ただしそういう環境は概してJavaScriptも低速なので、あまり実用的ではないでしょう。

Safari 3.2.2/3.2.3/Chrome 1.0はgetBoundingClientRectに未対応なので、CSSOM View Moduleの他の機能を使ってシミュレートしています。

Firefox 2はgetBoundingClientRectをサポートしていないので、Gecko独自のgetBoxObjectForによりシミュレートしています。またCSSの固定配置の実装バグにより、ときどき着せ替えウィンドウがシェードの背後に回って操作不能になることがあったので、この対策として(またブラウザのバグとは関係なくページのフッタが固定配置要素であるような場合を考慮して)z-indexを指定しています。さらにCSSのfloatの実装バグにより、着せ替えウィンドウの幅が正しく計算されないので(またブラウザのバグとは関係なく固定配置を使わないモードを考慮して)、幅を明示的に指定しています。

各種シミュレートは原則としてKISSを動かすのに必要な最低限の実装しか行っていないので、そのまま他のページで使い回せるとは限りません。また同様のシミュレーションを行っている他のライブラリと衝突するおそれがあります。ご注意ください。

Opera 10.50以降ではバイナリファイルのダウンロードに対応して動作可能になりましたが、細かな不具合があります:

IE9では、開発者ツールを開くとwindow.consoleが再定義されるため、動作しなくなります。

未対応ブラウザ

Internet Explorer 7以前は、ブラウザの標準機能のみではピクセル単位で任意の絵を描くことがほとんど不可能に近いので、対応していません。絶対配置のspanをたくさん並べてシミュレートするという手もいちおう試してみましたが、案の定まるで使いものにならなかったので(私のスキル不足の可能性もありますが)あきらめました。

Opera 10.10以前のバージョンはバイナリファイルをJavaScriptから読み取る手段がなかったので、(KISS/GSのファイルをそのまま読めるという要件を満たす限り)対応できませんでした。

(2011-05-14) Firefox for mobile 4.0.1は(少なくともWindows用のエミュレータ上では)マウスイベントが取れないため、服を移動させることができない(ページ全体がスクロールしてしまう)ようです。

設置方法

現在は他者が設置することを想定していませんが、勝手に解析して設置する分にはかまいません。

リンク

という不親切さにもかかわらず、設置していただいたページがあるようです。


Copyright© 2009-2015 Masatoshi Kimura (emk)