Retina Displayを見ていたら…

404 Blog Not Found:iPad - なんちゃってAjaxマンガビューワー
というわけで、こさえたのが、これ。

iPhoneにも対応させたくなってきたので。

使い方

  • Safari 4 iPad向けですが、他でも動きます
  • 画面の右側をクリックすると次のページ、左で前のページ
  • 中央をクリックすると「なんちゃってコントローラー」表示/非表示切替
  • なんちゃってコントローラーをクリックすると、ページ番号入力のプロンプト表示
  • window.localStorage を使って以前読んだページを記憶。以前読んだページから再会
  • iPhone/iPod Touchにも対応四様だけではなく、初代iPod Touchでも動きます。さすがに重いですが。 四様だと、マージンを引いてもKindleを解像度で上回ります。その小ささとあいまって、iPadを上回るマンガビューワーかもしれません。
  • オリエンテーションの変化にも対応。基本的にこのビューワーは縦長の画像に最適化してあるのですが、カバーなど横長のイメージが混じっている場合、iPhoneやiPadを寝かすことで全部見えるようになります。
  • 別の言い方をすると、解像度に限ら縦方向に目一杯画像表示するということ。 上はiCab Mobileで、iPadで全画面表示した例。こうなると読み応えは専用アプリと遜色ありません。

というわけで、改訂版のindex.html生成スクリプトは以下

Enjoy!

Dan the Man with Too Many iProds

#!/usr/local/bin/perl
use strict;
use warnings;
use URI::Escape;
my $tmpl = join "", <DATA>;
for my $dir (@ARGV){
    -d $dir or next;
    my @imgs = do{
	opendir my $dh, $dir or die $dir;
	my @ret = grep /\.(jpe?g|gif|png)$/, readdir $dh;
	closedir $dh;
	sort @ret;
    };
    my %tmpl;
    $tmpl{title} = $dir;
    $tmpl{pages} = join ", ", map { q('). uri_escape($_) . q(') } @imgs;
    my $html = $tmpl;
    $html =~ s/\{(\w+)\}/$tmpl{$1}/ge;
    open my $fh, '>', "$dir/index.html" or die "$dir/index.html : $!";
    print $fh $html;
    close $fh;
}
__DATA__
<html>
<head>
<meta charset="UTF-8" />
<meta name = "viewport" content="width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>{title}</title>
<style>
body  { text-align:center; width:768; padding:0; margin:0 }
#ctrl { position:absolute; top:0; left:0; width:768; height:946 }
#ictrl{ width:100%;background-color:#ccc; opacity:0.75; font-size:larger }
#page { height:946 }
</style>
<script>
</script>
</head>
<body>
<img id="page" src="#">
<table id="ctrl"><tbody><tr>
<td id="left"  rowspan="2" width="25%" onclick="prev()"> </td>
<td height="90%" onclick="togglectrl()"> </td>
<td id="right" rowspan="2" width="25%" onclick="next()"> </td>
</tr>
<tr><th>
<table id="ictrl" style="display:none"><tr>
<th onclick="prev()">◀</th>
<th id="pagenum" width="80%" onclick="jump()">
<th onclick="next()">▶</th>
</tr></tbody></table>
</th></tr>
</tbody></table>
<script>
var pages = [{pages}];
// window.localStorage is per domain but we need per page
var db    = window.localStorage;
var key   = 'curr-' + location.href;
var curr = db ? db.getItem(key) * 1 : 0;
function $(id) { return document.getElementById(id) }
function setpage(n){
  if (0 <= n && n < pages.length){
    curr = n;
    if (db) {
	db.removeItem(key); // 2 avoid QUOTA_EXCEEDED_ERR on Safari 4 iPad
	db.setItem(key, n);
    }
    $('page').src = pages[n];
    $('pagenum').innerHTML = n+1 + '/' + pages.length;
  }
}
function next(){
  setpage((curr + 1) % pages.length);
}
function prev(){
  setpage(curr == 0 ? pages.length - 1 : curr - 1);
}
function togglectrl(){
  $('ictrl').style.display = $('ictrl').style.display == 'none'
  ? 'block' : 'none';
}
function jump(){
  setpage(parseInt(prompt('Go to page:', curr+1))-1);
}
function resize(){
    var height = navigator.userAgent.match(/iP(?:hone|od)/i)
	? (window.orientation == 0 ? 416 : 199) : window.innerHeight;
    document.body.style.width = $('ctrl').style.width = window.innerWidth;
    $('page').style.height = $('ctrl').style.height = height;
    window.setTimeout(function(){
      window.scrollTo(0,1); // this hides address bar on iOS;
    }, 100);
}
window.onresize = window.onorientationchange = resize;
resize();
setpage(curr);
</script>
</body>
</html>