pettanR

js によるコミック html の動的書き出しテスト

js による 動的な html の書き出しは、ブログ等への外部サイト表示 script と ログイン後のユーザーのコミック・パネル閲覧に使われます．

動的書き出しテスト

以下のテキストエリアに パネルの json データを入力することで、動的書き出しのテストを行えます．

json is invalid !

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 といった反転画像へのリクエストを抑止できる．
• ブラウザの表示エリアに入らない画像について、表示エリアに入るまでリクエストを行わないようにできる
• コマのズーム機能が利用できる．ただしリサイズを禁止された画像を含むコマに対してはできない．