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

というわけで遅まきながらAndroidにも対応です。

こんな感じ。
ISW11HTSMT-i9100
800x4801024x600

コメント

新型タブレット「ICONIA TAB A100」発表、前代未聞の「マンガロイド」に - GIGAZINE
OSにWindows 7を採用した「ICONIA TAB W500」や、Androidを採用した安価で高性能なタブレット「ICONIA TAB A500」などを積極的にリリースしてきたAcerですが、今度はマンガを読むことを前面に押し出した前代未聞の「マンガロイド」となっています。

方向性としては正しいんだけど、1024x600だとやっぱきつく感じるなあ。

Enjoy!

Dan the Man with Too Many Gadgets

追記:UIをちょっと改善。ページジャンプをpromptではなくselectに

#!/usr/local/bin/perl
#
# $Id: mkindexhtml.pl,v 0.10 2011/11/23 21:08:48 dankogai Exp dankogai $
#
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)$/i, 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:100%; padding:0; margin:0 }
#ctrl { position:absolute; top:0; left:0; width:100%; height:100% }
#ictrl{ width:100%; background-color:#ccc; opacity:0.75; font-size:larger }
#page { height:100% }
</style>
<script>
</script>
</head>
<body>
<img id="page" src="#">
<table id="ctrl"><tr><th colspan="3" valign="top">
  <table id="ictrl" style="visibility:hidden" width="100%"><tbody><tr>
  <th width="25%" onclick="prev()">◀</th>
  <th id="pagenum" onclick="jump()"></th>
  <th width="25%" onclick="next()">▶</th>
  </tr></tbody></table>
</th></tr>
<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>
</tbody></table>
<script>
var pages = [{pages}];
// window.localStorage is per domain but we need per page
var db; 
try {
 db = window.localStorage;
}catch(e){
 if (console) console.log(e);
}
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.visibility = $('ictrl').style.visibility == 'hidden'
  ? 'visible' : 'hidden';
}
function jump(){
    var select = document.createElement('select');
    var onchange = function(){setpage(this.value-1)}
    for (var i = 0; i < pages.length; i++){
	var opt = document.createElement('option');
        opt.appendChild(document.createTextNode(i+1));
        if (i == cure) opt.selected = true;
	select.appendChild(opt);
    }
    select.addEventListener('change', on change, false);
    $('pagenum').innerHTML='';
    $('pagenum').appendChild(select);
    select.focus();
}
function resize(){
    //var height = navigator.userAgent.match(/iP(?:hone|od)/i)
    //    ? (window.orientation == 0 ? 416 : 199) : window.innerHeight;
    var height = window.innerHeight;
    if (navigator.userAgent.match(/iP(?:hone|od)/i) && window.orientation == 0)
	height += 64;
    var width = window.innerWidth;
    document.body.style.width = $('ctrl').style.width = width;
    $('page').style.height = $('ctrl').style.height = height;
    if (height/width >  Math.SQRT2){
        $('page').style.width = width;
        $('page').style.height = 'auto';
    }else{
        $('page').style.width = 'auto';
    }
    window.setTimeout(function(){
      window.scrollTo(0,1); // this hides address bar on iPhone;
    }, 100);
}
window.onresize = window.onorientationchange = resize;
setpage(curr);
resize();
</script>
</body>
</html>