iPod touch + lighttpdでiComic代わり

iPod touch 2.0では今のところiComicが動きません。
2.0用の野良toolchainが出てるらしいのでコンパイルし直せば良いのかもしれませんが、結構大変そう。。
それならと、しばらくはMobileSafariでしのぐべく、補助スクリプトを書いてみました。


下記スクリプトを適当な名前で保存し、JPEGファイルを固めたZipファイル名と書き出しディレクトリ名を指定すると、ブラウザ上でタップするだけでページめくりができるWebページを含むフォルダができます。
これをWebサーバ上においてiPod touchからアクセスすればOK。 id:NeoCat:20080723 で書いたlighttpd上におけば、オフラインでも見られます。


ページめくり操作は、右半分をタップすると前のページへ、左の方をタップすると次のページへ。
左上部分をタップするとページ番号入力でジャンプ。


画像は幅が画面サイズに合うように縮小されます。右半分をダブルタップすると、2倍の大きさに拡大(MobileSafariの自動ズーム機能を利用)。
もちろん指一本でスクロースしたり、ピンチ操作で適当な大きさに調整したり、結構快適です。
フルスクリーンにできない以外は…。


ちなみに、標準の「写真」機能で解像度の高い画像を見ようとすると、表示がおかしくなったり、iPod touchがハングするようです。ブラウザなら大丈夫。こっちの方が操作はページめくり感が出て良いんだけどなあ。

#!/usr/bin/perl

my $f = shift;
my $g = shift;
unless (-f $f && $g ne "") {
	print "usage: $0 zipfile title\n";
	exit;
}

my $tmpdir = $ENV{"HOME"}."/Desktop/$g";
if (-e $tmpdir) {
	die "$tmpdir: already exists.";
}
mkdir $tmpdir;
system "unzip \"$f\" -d $tmpdir";
chdir $tmpdir;
@files = glob "*";
if ($#files == 0) {
	$title = (glob "*")[0];
	print "title: $title\n";
	chdir $title;
	$has_title = 1;
}
@files = glob "*.jpg";
$files = '"' . join('","', @files) . '"';

open(OUT, ">index.html") || die "cannot open index.html";
print OUT <<EOF;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>$title</title>
<script>
var curPage = 0;
var picList = [$files];
function init() {
	curPage = location.href.split("?")[1];
	curPage = curPage ? parseInt(curPage) : 0;
	document.getElementById("pic").src = picList[curPage];
}
function page(d) {
	curPage += d;
	if (curPage < 0) curPage = 0;
	if (curPage >= picList.length) curPage = picList.length - 1;
	location.href="index.html?" + curPage
}
function jump() {
	p = prompt("page", curPage);
	if (p) {
		curPage = parseInt(p);
		page(0);
	}
}
</script>
<style>
* { margin; 0; padding: 0; }
</style>
</head>
<body onLoad="init()">

<img id="pic" src="" width="100%" style="position: absolute; left 0; top 0;" onClick="page(1)">
<div style="width: 50%; height: 99%; position: absolute; right: 0; top 0;" onClick="page(-1)"></div>
<div style="width: 40%; height: 30%; position: absolute; left: 0; top 0;" onClick="jump()"></div>

</body>
</html>
EOF

if ($has_title) {
	system("mv * ..; cd ..; rmdir \"$title\"");
}