2010年8月8日日曜日

[Programming] Mobile SafariでガンガンONLINEのFlashコンテンツを読むためのブックマークレット

先日、ガンガンONLINEのコンテンツ画像をZIPで保存するFirefox add-onを作ったんですが、画像を見るだけならブックマークレットでも出来そうだというのがわかりましたんで、とりあえず作ってみましたよ。
javascript:var%20_G04={imageList:[],ix:0,serviceType:"",part:[{u:"x1y1.jpg",dx:0,dy:0},{u:"x1y2.jpg",dx:0},{u:"x2y1.jpg",dy:0},{u:"x2y2.jpg"}],init:function(){document.body.bgColor="#eeeeee";document.body.innerHTML="<div%20id='fwd'%20onclick='_G04.forward()'%20ongesturestart='_G04.last()'%20style='position:absolute;left:0px;top:0x;width:100px;z-index:99;'></div><div%20id='bwd'%20onclick='_G04.backward()'%20ongesturestart='_G04.top()'%20style='position:absolute;top:0x;width:100px;z-index:99;'></div><div%20id='picture'%20style='position:absolute;left:0px;top:0px;width:768px;height:1024px;z-index:1;'></div><div%20id='indicator'%20style='position:absolute;-webkit-border-radius:16px;top:16px;width:200px;z-index:99;opacity:0.8;background-color:#aaaaaa;font-family:Copperplate,sans-serif;font-size:48px;font-style:bold;color:white;text-align:center;vertical-align:middle;'></div>";var%20u=document.baseURI;_G04.serviceType=_G04.getServiceType(u);if(_G04.serviceType=="unknown"){return;}var%20x=u.match(/(.*)_SWF_Window\.html.*/)[1]+"books/db/book.xml";var%20r=new%20XMLHttpRequest();r.open("GET",x,false);r.send(null);var%20d=(new%20DOMParser()).parseFromString(r.responseText,"text/xml");var%20z=d.getElementsByTagName("PageSize");var%20zoom=1;if(z.length){for(var%20i=0;i<z.length;i++){var%20v=z[i].getAttribute("zoom");if(v>zoom){zoom=v;}}}else{if(_G04.serviceType=="actibook1"){zoom=2;}else%20if(_G04.serviceType=="actibook2"){zoom=1.45;}}var%20p=d.getElementsByTagName("page");for(var%20i=0;i<p.length;i++){switch(_G04.serviceType){case%20"actibook1":case%20"actibook2":_G04.imageList.push(x.match(/(.*books\/)/)[1]+"images/"+zoom.toString()+"/"+p[i].getElementsByTagName("number")[0].firstChild.nodeValue+"."+p[i].getElementsByTagName("type")[0].firstChild.nodeValue);break;case%20"actibook3":_G04.imageList.push(x.match(/(.*books\/)/)[1]+"images/1/"+p[i].getElementsByTagName("image")[0].firstChild.nodeValue+"/");break;}}var%20h=d.getElementsByTagName("h")[0].firstChild.nodeValue*zoom;var%20w=d.getElementsByTagName("w")[0].firstChild.nodeValue*zoom;document.getElementById("picture").style.height=h+"px";document.getElementById("picture").style.width=w+"px";document.getElementById("fwd").style.height=h+"px";document.getElementById("bwd").style.left=w-100+"px";document.getElementById("bwd").style.height=h+"px";document.getElementById("indicator").style.left=w/2-100+"px";if(_G04.serviceType=="actibook3"){var%20c=document.createElement("canvas");c.width=w;c.height=h;c.id="tc";document.getElementById("picture").appendChild(c);}_G04.draw();},getServiceType:function(url){if(url.match(/_SWF_Window\.html.*$/)){var%20m=url.match(/\/\/(.+?)\/.+\/_SWF_Window\.html(.*)/);if(m[1].match("square-enix")){return%20"actibook1";}else%20if(m[1].match("kadokawa")){if(m[2]){return%20"actibook2";}else{return%20"actibook3";}}else{return%20"actibook1";}}return%20"unknown";},forward:function(){if(_G04.ix<_G04.imageList.length-1){_G04.ix++;_G04.draw();}},backward:function(){if(_G04.ix>0){_G04.ix--;_G04.draw();}},top:function(){_G04.ix=0;_G04.draw();},last:function(){_G04.ix=_G04.imageList.length-1;_G04.draw();},draw:function(){switch(_G04.serviceType){case%20"actibook1":case%20"actibook2":document.getElementById("picture").innerHTML="<img%20src="+_G04.imageList[_G04.ix]+">";break;case%20"actibook3":var%20ctx=document.getElementById("tc").getContext("2d");var%20img=new%20Image();img.src=_G04.imageList[_G04.ix]+_G04.part[0].u;img.onload=function(){ctx.drawImage(img,0,0);var%20dx=img.width;var%20dy=img.height;for(var%20i=1;i<4;i++){_G04.part[i].dx=(_G04.part[i].dx!=undefined)?_G04.part[i].dx:dx;_G04.part[i].dy=(_G04.part[i].dy!=undefined)?_G04.part[i].dy:dy;var%20aimg=new%20Image();aimg.src=_G04.imageList[_G04.ix]+_G04.part[i].u;aimg.onload=function(){var%20ci=arguments[0];return%20function(){ctx.drawImage(this,_G04.part[ci].dx,_G04.part[ci].dy);};}(i);}};break;}window.scroll(0,0);document.getElementById("indicator").innerHTML=_G04.ix+1+"%20/%20"+_G04.imageList.length;setTimeout(function(){document.getElementById("indicator").innerHTML="";},2000);}};_G04.init();

コンテンツビューワが呼び出されるページ(URLが_SWF_Window.htmlで終わる)は、Flashが動かないので当然画面が真っ白なままなのですが、そこでこのブックマークレットを呼び出すとページ情報(book.xml)を取得して各ページの画像を表示出来るようになります。画像の左端をクリックすると次のページが、右端だと前のページが表示されます。スワイプだとイベントハンドラ書くだけでコードが膨れ上がるんで普通にonclickにしましたわw

Mobile Safariへのブックマークレット導入法はググればいくつか出て来ますんでそちらを参照してください。それにしても、もっと簡単に導入できんもんですかね。簡単な導入法がsyncだけってのは、あまりにも御無体ってもんですわ。


2010/08/10 追記:若干修正しました
・画像の左端をタップ→次のページ
・画像の左端を2本指でタップ→最後のページ
・画像の右端をタップ→前のページ
・画像の右端を2本指でタップ→最初のページ

0 件のコメント:

コメントを投稿