Golbym!: Mobile Safari 用フォントサイズ変更ブックマークレット

iPhone でブログやテキスト系 Web サイトを見ていると、フォントサイズが微妙に小さくて読み辛かったりすることがあるため、Web ページの~~ブロック毎に~~フォントサイズを変更するブックマークレットを作りました。

ブックマークレットの登録方法

以下の「Change FontSize」リンクを開き、適当な名称でブックマーク登録後、URL 先頭の http://t.co/? を削除して保存してください。「そもそもブックマークレットってなんぞ！？」という方はググりましょう。慣れている方はコードを直接コピペしてお使いください。

Change FontSize ver.0.3r1 - CC BY-SA 2.1
javascript:(function(a,b,c,f,g,h,e,i,j,l,k)%7Bc=a.body;e=%22data-fs-ratio%22;j=%22-webkit-text-size-adjust%22;c.getAttribute(e)%7C%7C(c.setAttribute(e,100),c.style%5Bj%5D=%22100%25%22,f=function()%7Bg=b%7D,h=%22gesture%22,i=%22touch%22,k=function(d,a)%7Bg===!b&&d.touches.length&&d.changedTouches.length&&(a=Math.max((0%7Cc.getAttribute(e))+(d.touches%5B0%5D.clientX%3Cd.changedTouches%5B0%5D.clientX?10:-10),50),c.style%5Bj%5D=a+%22%25%22,c.setAttribute(e,a),d.stopImmediatePropagation(),d.preventDefault());f()%7D,a.addEventListener(h+%22start%22,function()%7Bg=!b%7D,b),a.addEventListener(h+%22change%22,f,b),a.addEventListener(i+%22cancel%22,f,b),a.addEventListener(i+%22end%22,k,b))%7D)(document,!1);

旧バージョン（タップしたブロックのみ拡大/縮小）

タップした要素が特定のブロック要素の場合はその要素を、そうでない場合は親のブロック要素を対象としてフォントサイズを変更します。対象ページの構造やスタイル指定に依存します。上手く動かない場合が多いです。

Change FontSize ver.0.2r3-rel2
javascript:(function(d,n,b,c,f,g,k,t,z)%7Bb=d.body,k='data-fs-ratio';if('_fsc'%20in%20window)return;else%20window._fsc=!n;c=function()%7Bf=n%7D;g='gesture';t='touch';z=/%5Ebody%7Cdiv%7Cp%7Cpre%7Cheader%7Carticle%7Csection%7Caside%7Cnav%7C%5Boud%5Dl%7Ccenter%7Ctable$/i;d.addEventListener(g+'start',function()%7Bf=true%7D,n);d.addEventListener(g+'change',c,n);d.addEventListener(t+'cancel',c,n);d.addEventListener(t+'end',function(e,o,r,x)%7Bif(f===true&&e.touches.length&&e.changedTouches.length)%7Bx=function(a)%7Breturn(!a)?b:(z.test(a.nodeName))?a:x(a.parentNode)%7D;o=x(e.target);if(!o.getAttribute(k))o.setAttribute(k,100);r=Math.max((o.getAttribute(k)%7C0)+((e.touches%5B0%5D.clientX%3Ce.changedTouches%5B0%5D.clientX)?10:-10),50);o.style.fontSize=r+'%25';o.setAttribute(k,r);e.stopImmediatePropagation();e.preventDefault();%7Dc(e);%7D,n);%7D)(document,false);

ブックマークレットの使用方法

フォントサイズを変更したいページにて本ブックマークレットを実行。実行しても表面上は何も変化が起こりません
TipTapRight（人差し指をタッチしたまま中指でタップ、左手の場合は指を入れ替えて読んでください）を行うと、Web ページ全体のフォントサイズが 10% 大きくなります。
同様に、TipTapLeft（中指をタッチしたまま人差し指でタップ、左手の場合は以下略）を行うと、フォントサイズが 10% 小さくなります。
一度ブックマークレットを実行すれば、そのページから移動するかリロードしない限り、上記ジェスチャにてフォントサイズを変更可能です

January 4, 2012