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>
このブログにコメントするにはログインが必要です。
さんログアウト
この記事には許可ユーザしかコメントができません。