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

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 + '枚の数式画像をリサイズしました');
})();
広告
正規表現の先読み・後読みを極める! PHPでsubstrをファイルポインタ操作に対応させるとこうなる
※このエントリーははてなダイアリーから移行したものです。過去のコメントなどはそちらを参照してください