HTML5 KISS

これは何?

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

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

何がうれしいの?

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

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

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

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

技術情報

更新履歴

2024-08-20
2024-08-19
2024-08-12
2024-08-07
2024-08-05
2024-08-04
2024-08-03
2024-07-29
2024-07-29
2024-07-26
2024-07-25
2024-07-23
2024-07-22
2024-07-21
2024-07-20
2024-07-19
2024-07-17
2024-07-16
2024-07-15
2023-01-18
2023-01-17
2023-01-15
2023-01-09
2023-01-08
2015-12-31
2015-12-29
2015-12-22
2015-12-05

既知の問題・ToDo

量的スペック・制限事項

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

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

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

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

sound/musicによる音声再生はLZH圧縮しているデータにのみ対応しています。musicはMIDIjsを使って実装しています。soundは.wavのみ、musicはMIDIのみといったファイル形式の事前チェックはしていませんが、実際に再生できるかは別問題です。

高速化のため、collide/apartは多くの場合に正しく動作するものの完全にピクセルごとの判定を行わない方法で実装されています。

X68k標準のADPCMフォーマットである拡張子.pcmの音声ファイルを含むデータがありますが(BakuretuKen_-_Flare.lzhなど)さすがに対応の予定はありません(.wav版も含まれているのでとくに不都合ないし)。当時はKISSGA/21/CL/SV付属の設定ファイルに、標準でpcmplayという外部コマンドで音声再生を行う設定が書かれており、このpcmplayがX68kのADPCMに対応していたようです。

CRCはチェックしますが、CRCエラーを検出しても解凍した内容は捨てずにそのまま使っています。CRCエラーを含む(けど無視して解凍すれば問題なく遊べる)データが存在するためです(Kyo-he-_-_Nakoruru.lzhなど)。KISSLDではそもそもCRCチェックをしていませんでした。

set(0) changeset(1) set(1) changeset(0)のような無限ループ防止のため、同じセットに対するネストしたsetイベント中で再び同じセットへの切り替えたときはsetイベントの発火を抑制しています。他のローダーでは(そのまま無限ループも含め)異なる動作をする可能性があります。

initializeイベント中でmusicアクションを呼び出しても反応しません(Anita Blake.lzhなど)。fkiss仕様にあるとおり、nop/debug/shell/unmap以外のアクションの動作保証はされません(データを動かすために必要性が高ければ対応する可能性はあります)。

システム要件

プラグインなどは必要ありませんが、WebブラウザはいわゆるHTML5対応と呼ばれる、比較的新しいものでなければなりません。とくにInternet Explorer 6/7にはまったく対応していません。Internet Explorerはバージョン8以降を、少なくともIE8モードで動作させなければなりません。

具体的には以下の機能をサポートしている必要があります。また、任意のバイナリファイルからの読み取りを実現するために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版の機能すらサポートしていないほど古いということはありえないので、事実上この条件は問題になりません。

また、画面キャプチャー機能を動作させるには以下の機能が必要です。
HTMLCanvasElement.toDataURL

今のところdata URLのcanvasシミュレートはtoDataURLをサポートしていないため、canvasのネイティブサポートが必要です(img.srcを返すだけなので画像のスライスが必要なIE8以外なら対応は簡単そうですが)。もっともcanvasすらサポートしていないブラウザーが以下の他の必要条件を満たしている可能性はほとんどないと思います。

SVG 1.1

画面キャプチャー用SVGを作成するとき内部でSVG DOMを使用しているため、SVGサポートが必要です。

XMLSerializer

SVG文書断片をシリアライズ(文字列化)するためにXMLSerializerを使用しています。

Blobコンストラクター

一部のBlobコンストラクターをサポートしていない旧ブラウザーがサポートするBlobBuilderは考慮していません。

URL.createObjectURL

一部のURLオブジェクトをサポートしていない旧ブラウザーがサポートするwebkitURLは考慮していません。

a要素のdownload属性

ダウンロード時のファイル名指定と、強制的にダウンロード動作を発生させるために必要です。download属性をサポートしていないブラウザーでも画面遷移が発生してSVG画像が表示されるかもしれません。その場合は「名前を付けて保存」で画像をダウンロードできます。

HTMLAnchorElement.clickメソッド

リンクのクリック動作を発生させるために必要です。一部の旧ブラウザーのためにdispatchEventによるpolyfillなどは行っていません。

また、sound/musicによる音声再生には型付き配列、Blobコンストラクター、URL.createObjectURLとHTML audio要素のサポートが必要です。

ブラウザ別のhack・制限

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

Internet Explorer 8はシステム要件に挙げた機能の多くをサポートしていないので、同等あるいは類似の機能を持ったInternet Explorerの独自拡張によってシミュレートしています。

Internet Explorer 8では、同じページでリロードを繰り返しているとメモリ使用量がだんだん増えていきます。別のページに移動すると回復するようです。

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〜12.18 (Presto Opera)ではバイナリファイルのダウンロードに対応して動作可能になりましたが、細かな不具合があります:

Opera 15以降(Blink Opera)はChromeと同様です。

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

IE9はBlobが未サポートなので、画面キャプチャー機能は動作しません。

Firefox 70/ESR68未満では文書に挿入されていないa要素でclickメソッドが動作しないため、clickを呼び出す瞬間だけ文書に挿入しています。clickの代わりにdispatchEventでclickイベントを発火しても回避できるようですが、今のところ採用していません。

画面キャプチャーのSVGはシリアライズをブラウザーに丸投げしているので、出力はブラウザー依存です(xmlns:xlinkがIEでは個々のimage要素につくのに対してEdgeHTML/Firefox 108/Chrome 109ではsvg要素に1つだけつくなど)。

soundによる音声再生もほぼブラウザーに丸投げしているので、対応形式はブラウザー依存です。IEはKISSでよく使われる.wav形式に対応していないので、IE独自拡張のbgsound要素を使って対応しています。本家fkissがサポートし、一部のKISSデータで使われている.au形式(MIMEタイプaudio/basic)は、μ-lawコーデックのものに限りWAVコンテナーに変換することで対応しています。これは、.au形式のままではSafari(とbgsoundを使ったときのIE)くらいしか対応していないのに対して、WAVコンテナーならばμ-lawコーデックでも主要ブラウザーは(少なくともFirefox 128とChrome 126は)ほぼ対応しているからです。ただしChromeはcanPlayType("audio/wav;codecs=7")に対して嘘をつきます。IEでは変換の必要はない(bgsoundを使うならそのまま.au形式を再生できる)のですが、特に害もなさそうなので判定はしていません。

またブラウザーのセキュリティ制限により音を鳴らせない可能性があります。

.au形式からWAV形式への変換については、以下のサイトなどを参照しました。

μ-lawコーデックについては以下のページなどを参照しました(今回コーデックの変換は不要という結論に達したので結果として使いませんでしたが)。

Math.imulを実装していないブラウザーでは、mulの結果が正確でない場合があります(不正確なのはオーバーフローが起きるような計算をしたときだけです)。

未対応ブラウザ

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

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

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

設置方法

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

リンク

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

他のKISS互換実装


Copyright© 2009-2015 Masatoshi Kimura (emk)