Google Docsのドキュメントで数式画像をキレイにリサイズするブックマークレット

2010-06-05

JavaScript

2011/2/14 追記
Google Docsがいつの間にか仕様変更したようで，現在の数式はjsMathのフォントを使っているため拡大（というより文字サイズを大きく）してもキレイです．
その分使える数式が格段に減りましたが…

Google Docsのドキュメントでは数式を挿入するときにGoogle Chart APIを使っていますが，リサイズしてもimgタグのサイズが変わるだけで，元の画像のサイズは変わりません．そのため，拡大すると悲惨なことになってしまいます．

そこで，リサイズした数式画像を少しでもキレイに表示するために，現在のimgタグのサイズを取得して，適切なサイズの画像を取得し直すブックマークレットを作成しました．

使い方

1. 次の内容をコピーします．

javascript:(function(){var allImages=wys_frame.document.getElementsByTagName('img');
var pattern = new RegExp('(^|\\s)ee_img(\\s|$)');var c=0;
for(var i=0,len=allImages.length;i<len;i++){
if(pattern.test(allImages[i].className)){allImages[i].src=allImages[i].src
+'&chs='+allImages[i].width+'x'+allImages[i].height;c++;}}
alert(c + '枚の数式画像をリサイズしました');})();

2. Google Docsのドキュメントを開いた状態でロケーションバー(URLの表示されているところ)にコピーした内容を入力してEnterを押します．

3. サイズに合った数式画像を取得し，リサイズを行った数式画像の枚数が表示されます．
※一度リサイズを行っている画像も枚数に含まれます

4. 何度も使うようであれば，お気に入りに登録して（URLを上記のコピーした内容にする），ドキュメントを開いた状態で登録したURL（というよりJavaScript）にアクセスしてください．
詳しくは「ブックマークレット」という単語で検索してください．

かなり細かい解説

Google Docsのドキュメントでは数式画像のimgタグにee_imgというクラスが割り当てられるので，その情報をもとに数式画像の要素を取得することが可能です．
また，数式画像は前述したようにGoogle Chart APIから取得しており，chsパラメータを付加することで画像のサイズを指定可能となっています．

javascript: (function () {
    // ドキュメントの部分はwys_frameというiframe
    // wys_frameという名前のiframeから全てのimgを取得する
    var allImages = wys_frame.document.getElementsByTagName('img');

    // 文字列がee_imgを含んでいるか？
    // ee_imgは文字列の先頭にあるか末尾にあるかスペースで囲まれている
    // (例えば a，b，c というクラスを持つ場合， 'a b c'という文字列が取得される)
    var pattern = new  RegExp('(^|\\s)ee_img(\\s|$)');
    var c = 0;     // 数式画像の数

    for (var i = 0, len = allImages.length; i < len; i++) {
        // クラス"ee_img"を持つ場合，src属性(画像のURL)を変更する
        // （URLにGETパラメータchsを付加する）
        if (pattern.test(allImages[i].className)) {
            allImages[i].src = allImages[i].src
              + '&chs=' + allImages[i].width + 'x' + allImages[i].height;
            c++;
        }
    }
    alert(c + '枚の数式画像をリサイズしました');
})();