JSONのライブラリモジュールを使ってみました。うまく動きましたね。複雑なデータ構造へのアクセスに慣れていないので、ちょっと途惑いましたが、ハッシュの配列とかハッシュのハッシュとか、うまくアクセスできるものです。大変勉強になりました。JavaScriptによる画像表現も少しわかってきました。どう書けば、複数の画像や線画を表示できるのかが最初はよくわからなくて、見様見真似で・・・なんとか動いてよかった^^;)JavaScriptもちょっとしたことで動いたり動かなかったりするし^^;;;PerlとJavaScript両方デバッグする必要がある。
後は、もう少しenchantMOONの仕様と機能を調べる必要があります。下記のスクリプトは画像や線画をCANVASに配置する程度のものです。ページ間のリンクはまだ完ぺきではない。本が出るはずですけどね。もっともユーザーは4000人ぐらいしか存在しないはずですが。買う人がそのうちどれくらいいるかですね。
-----^
#!/Perl64/bin/perl.exe
#
use CGI qw(:cgi);
use JSON; # imports encode_json, decode_json, to_json and from_json.
my $emoondir = "X:/xxxxxx/yyyyy/enchantMOON/Data/MyNotebook1";# enchantMOONページデータディレクトリ
(my $thisscript = $0) =~ s/^.+[\\\/]([^\\\/]+)$/$1/;
my $page = param('page');
unless($page){
$page = "0PQQ21081376620923240";
}
my $pageinfo = "";
my @stickers = ();
my $sticker = "";
my $stickerinfo = "";
my $hackinfo = "";
my %stickerdata = ();
open my $fh, $emoondir . "/$page/info.json";
$pageinfo = <$fh>;
close $fh;
@stickers = ($pageinfo =~ /"(.{21})"/g);
my $json;
my %perl_scalar = ();
foreach $sticker (@stickers){
open my $fh, $emoondir . "/$page/$sticker/info.json" or die "Can't open it!?: $!";
$stickerinfo = <$fh>;
close $fh;
$json = JSON->new->allow_nonref;
$perl_scalar{$sticker} = $json->decode( $stickerinfo );
if(open $fh, $emoondir . "/$page/$sticker/hack.js"){
$hackinfo = <$fh>;
if($hackinfo =~ /location.replace\("([^"]+)"\);/){
$stickerdata{$sticker} = $1;
$stickerdata{$sticker} =~ s/^page:\/\/(.+)$/$server\/$thisscript\?page=$1/;
}else{
$stickerdata{$sticker} = "$server\/$thisscript\?page=$page";
}
close $fh;
}else{
$stickerdata{$sticker} = "";
}
}
print <<"CANVASTOP";
Content-type: text/html
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<style>
body {
widht: 100%;
background: #000000;
}
.footer {
font-size: 80%;
color: white;
text-align: right;
margin-top: 10pt;
text-align: right;
}
.footer a {
color: white;
text-decolation: none;
}
#canvas {
border: 0px;
padding: 0p;
}
#frame {
display: hidden;
border: 0px;
padding: 0p;
}
</style>
</head>
<body>
<div style="width: 768px; margin: auto;">
<div id="frame">
<canvas width="768" height="1024" id="canvas"></canvas>
</div>
</div>
CANVASTOP
foreach $sticker (keys %stickerdata){
if($stickerdata{$sticker}){
print <<"IMAGE";
<script>
window.addEventListener("load", function(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var img = new Image();
img.src = "/enchantMOON/Data/MyNotebook1/${page}/${sticker}/background.png";
img.onload = function() {
context.drawImage(img, $perl_scalar{$sticker}->{x}, $perl_scalar{$sticker}->{y});
};
canvas.addEventListener("mousedown", mouseDownListner, false);
function mouseDownListner(e) {
var rect = e.target.getBoundingClientRect();
mouseX1 = e.clientX - rect.left;
mouseY1 = e.clientY - rect.top;
if (mouseX1 > $perl_scalar{$sticker}->{x} && mouseX1 < $perl_scalar{$sticker}->{x} + $perl_scalar{$sticker}->{width}) {
if (mouseY1 > $perl_scalar{$sticker}->{y} && mouseY1 < $perl_scalar{$sticker}->{y} + $perl_scalar{$sticker}->{height}) {
location.href = "$stickerdata{$sticker}";
}
}
}
}, false);
</script>
IMAGE
}
}
my $strokecolorhex = "";
my $c = 0;
my $s = 0;
my $i = -1;
my $j = -1;
foreach $sticker (keys %perl_scalar){
while($perl_scalar{$sticker}->{strokes}->[++$i]){
print <<"STROKEBEGIN";
<script>
window.addEventListener("load", function(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.beginPath();
STROKEBEGIN
while($perl_scalar{$sticker}->{strokes}->[$i]->{data}->[++$j]){
++$c;++$s;
if($s == 1){
print "context.moveTo($perl_scalar{$sticker}->{strokes}->[$i]->{data}->[$j],";
}elsif($c == 1){
print "context.lineTo($perl_scalar{$sticker}->{strokes}->[$i]->{data}->[$j],";
}elsif($c == 2){
print " $perl_scalar{$sticker}->{strokes}->[$i]->{data}->[$j]);\n";
}elsif($c == 3){
print "globalAlpha = $perl_scalar{$sticker}->{strokes}->[$i]->{data}->[$j];\n";
$c = 0;
next;
}
}
$c = 0;$s = 0;$j = -1;
($strokecolorhex = sprintf "%X", $perl_scalar{$sticker}->{strokes}->[$i]->{color}) =~ s/^FFFFFFFFFF(\w{6})$/"#$1"/;
print <<"STROKE";
context.strokeStyle = $strokecolorhex;
context.lineWidth = $perl_scalar{$sticker}->{strokes}->[$i]->{width};
context.stroke();
}, false);
</script>
STROKE
}
$i = -1;
}
print <<"CANVASEND";
</body>
</html>
CANVASEND
-----$
2013年9月27日金曜日 23時05分46秒 UTC+9 jscripter: