コミック用 html 構造のテスト
html 4.01 + css 2.1 で pettanR コミックを表示するための html 構造のテストページです.
html は js で動的に描画されるため、js の関連部分のテストも兼ねます.
js による 動的な html の書き出しは、ブログ等への外部サイト表示 script と ログイン後のユーザーのコミック・パネル閲覧に使われます.
動的書き出しテスト
以下のテキストエリアに パネルの json データを入力することで、動的書き出しのテストを行えます.
source
pettanr.bind は pettanR コミック用の html エレメントを制作するときに使用する.外部サイト張り出し用 script や ユーザーコンソールの コミックビューワーから使われる.
pettanr.bind.createBindWorker で BindWorker インスタンスを作って使用する.bind の意味は 製本 .jQuery.bind とは関係ないので注意.
var jsonArea = document.htmlTest.jsonString,
button = document.htmlTest.bindButton,
bindWorker = pettanr.bind.createBindWorker( document.getElementById( 'outputHere')),
elmAlertStyle = document.getElementById( 'invalidJsonAlert').style,
json = null;
button.onclick = function(){
try {
eval( 'json = ' + jsonArea.value);
elmAlertStyle.display = 'none';
} catch(e){
elmAlertStyle.display = 'block';
}
json !== null && bindWorker.json( json);
json = null;
}
js による動的な書き出しの利点
js による動的な書き出しには以下にあげる利点がある.最後のもの以外はサーバへの画像リクエストを抑えるものになります.
- 吹き出しをベジェ曲線で書き出すことで美しい描画ができ、吹き出し画像へのリクエストを抑止できる
- 反転画像をブラウザ側で用意することで、flipH, flipV, flipVH といった反転画像へのリクエストを抑止できる.
- ブラウザの表示エリアに入らない画像について、表示エリアに入るまでリクエストを行わないようにできる
- コマのズーム機能が利用できる.ただしリサイズを禁止された画像を含むコマに対してはできない.