[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 追記：若干修正しました
・画像の左端をタップ→次のページ
・画像の左端を２本指でタップ→最後のページ
・画像の右端をタップ→前のページ
・画像の右端を２本指でタップ→最初のページ

[Programming] ガンガンONLINE用の画像zipperを作ったんだけど...

先日、Firefox add-onでGoogle Books用の画像zipperを作ったわけですが、同様にiPadでは見れないからってことでガンガンONLINE用の画像zipperを作ったんですよ。ビューワがFlashなだけで、画像は別途jpgで取得出来ますんでね。やっぱり、PCの前で座って読むよりiPadに入れて寝転がって読むほうが、UX的に見て優れていると思いますわ。

ということなんですが、このadd-onは流石に公開出来ませんな。あからさまに「複製は法律により禁じられています」と来られちゃね。複製が駄目ということならば「ブックマークレットでdocumentをクリアして画像だけを表示する」という手もありなんでしょうが、流石に処理内容的にボリュームが大きいので手を出しづらいところです。mobile Safariにもユーザスクリプティング環境があればなぁと。

ということで本件に関しましては、個人でこっそりと楽しませていただく事にいたします。

[メモ] とりあえず

• 「みんな」という言葉が出て来たら、とりあえず疑ってかかった方が良い。
• 「美しくありたい」とか「強くなりたい」ってのは、ある種の狂気なんだよね。
• こだわりを持つという事はリスクを背負うという事に他ならない。
• 『リューシカ・リューシカ』をビルドゥングスロマンとして読むと、これがまたいいんだわ。
• 網膜は球面なのに「真っ直ぐ」を認識出来るという事は、すなわち、脳が球面補正処理をしてるって事。
• まずは「善き悪」と「悪しき善」が厳然と存在するという事を認めるべし。話はそれからだ。「悪しき善は善ではない」などとぬかすお子様は相手にするだけ無駄。
• チョムスキーの凄さは「言語はインスタンスにすぎない」と見破った点に尽きる。他は全部オマケ。GB理論とかね。
• ミニマリスムの要諦は「最小にする」ではなく「どこを最小とするか」である。
  

[メモ] ビットは撒き餌

早速買ったわけですよ『リューシカ・リューシカ（１）』と『男子高校生の日常（２）』

両者ともに素晴らしいという点につきましては、わたくしごときが申し上げるまでもないのでありますが、特にリューシカについては、これはもう万人が読むべき珠玉の一冊だと申し上げてよろしいかと存じます。読む人が何を意識しているかに応じて、ふさわしいシニフィエがページから立ち上がってくるのです。「わからない時はとにかくしゃべれ」という一節から、プログラマーならばコードレビュー、UIデザイナーならばスケッチやモックといった「アウトプット」を通じて新たなインプットを得るというフィードバック的・円環的開発姿勢に思い至ることでしょう。

で、内容についてもさることながら、IT托鉢たるわたくしといたしましては、電子書籍と従来型書籍の幸福な結婚により産まれたこの素晴らしいUXを褒め讃えずにはいられないのであります。ビットメディアで購入モチベーションを高め、紙メディアで通して読んで自らの血肉とするという、ある意味では昔から綿々と続いている黄金のパターンをガンガンONLINEは定着させたんだなという感がわたくしにはございます。ガンガンONLINEに限らず、『千夜千冊』然り『REWORK』然りでありまして、consumerにとってはもちろん、providerにとっても、まさに一粒で二度おいしいウハウハ状態だと申せましょう。

紙メディア全滅とか言ってる間抜けも居るようですが、アーカイビング・推敲・コンテキスト付与・校正といった紙メディアが培って来た編集的土壌は、ビットメディアが持つ低コスト・即時生といった価値とはまた別の価値を持ち、それはビットメディアだけではそう簡単に実現出来ないものであります。よって、紙メディアはビットメディアという良きパートナーを得て飛躍する可能性を掴んだと捉えるのが妥当であります。

逆に、紙メディアのコアコンピタンスである編集的土壌を持たないところはお役御免となるわけで、屍累々阿鼻叫喚はここしばらく続くのでしょう。S学館のアレとか見てるともうね、この内容でどうやって購入モチベーションを高めろと？としか言い様の無い状態ですしね。まぁ、淘汰されるべきはさっさと淘汰されるべしということかと存じます。

[メモ] 結局こういうことです

ハレの読書は紙の本でします。ケの読書はiPadでします。「瓦」版の延長線上にあるものは全て、文字通り、画面を持った "slate" で読まれるようになるってことです。えぇ、買いましたよ、『ばらかもん』も『男子高校生の日常』も。これぞ『FREE』の思う壺ってヤツですな。『リューシカ・リューシカ』はやく出ないかな。