2010年05月31日 00:15 [Edit]

iPad - なんちゃってAjaxマンガビューワー

ipad

いや、落ち着いてない。

404 Blog Not Found:news - iPad入手なう
で、どうやってマンガをiPadに入れて読むかだが、試行錯誤の結果iMacをWebサーバーにしてそこにzipを転がしておき、そこにSafariからアクセスして任意のアプリで開くというというところに落ち着いた。

これも出来ればダウソなしにしちゃいたい。


というわけで、こさえたのが、これ。

使い方

  • Safari 4 iPad向けですが、他でも動きます
  • 画面の右側をクリックすると次のページ、左で前のページ
  • 中央をクリックすると「なんちゃってコントローラー」表示/非表示切替
  • なんちゃってコントローラーをクリックすると、ページ番号入力のプロンプト表示
  • 追加: window.localStorage を使って以前読んだページを記憶。以前読んだページから再会

そいうことをするindex.htmlを自動生成するperl scriptをこさえたというわけです。ソースは下に。なぜ動的生成ではなく固定ファイルを作成するかといえば、こうすれば「ZIP渡し」も可能になるし。サーバー側でプログラムを動かせない場合も使えるから。

なんちゃってぶりは、perl scriptというかその中のHTMLのテンプレートからも伺えます。Ajaxとか言ってますがそれすらなんちゃってです。30分で作ったので。CSSって難しいなあ…

が、これだけの工夫でもそこそこ使えるビューワーが出来ることになんか意味があるのかも知れません。

Enjoy!

Dan the iPad Newbie

dankogai@dan-imac111[1052]:~/Sites/ipad/manga% cat ../mkindexhtml.pl
#!/usr/local/bin/perl
use strict;
use warnings;

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 { qq('$_') } @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" />
<title>{title}</title>
<style>
body  { text-align:center; width:768; height:944; padding:0; margin:0 }
#ctrl { position:absolute; top:0; left:0; width:768; height:944 }
#ictrl{ width:100%;background-color:#ccc; opacity:0.75; font-size:larger }
#page { height:944 }
</style>
</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);
}
setpage(curr);
</script>
</body>
</html>

Posted by dankogai at 00:15│Comments(0)│TrackBack(1)
このBlogのトップへ│前の記事│次の記事

この記事へのトラックバックURL

この記事へのトラックバック
Retina Displayを見ていたら… 404 Blog Not Found:iPad - なんちゃってAjaxマンガビューワー というわけで、こさえたのが、これ。 iPhoneにも対応させたくなってきたので。 http://colabv6.dan.co.jp/~dankogai/ubunchu01/
iOS - なんちゃってAjaxマンガビューワーiPhone対応【404 Blog Not Found】at 2010年06月26日 17:14
 
このページの上へ▲


blog seo tool : track word