| @技術/プログラミング

Google Readerみたく、iPhoneでアクセスしたときにJavaScriptで画像を縮小表示させるようにしてみた。当然ながら自サーバーにあるものだけでなく、Flickrとかの画像も縮小表示する。そしてこれまた当然ながら画像をリサイズするわけじゃなくてあくまで小さく表示させるだけなので、ページの読み込み速度とかは短くなったりしない。

    // fit image for iPhone
    function iPhone() {
        var userAgent, imgHeight, imgWidth, imgRatio;
        var newWidth = 440;
        userAgent = navigator.userAgent;
        if (userAgent.match(/iPhone/)) {
            for (i = 0; i < document.images.length; i++) {
                imgHeight = document.images[i].height;
                imgWidth = document.images[i].width;
                imgRatio = imgHeight / imgWidth;
                if (imgWidth > newWidth) {
                    if (imgWidth > imgHeight) {
                        document.images[i].width = newWidth;
                        document.images[i].height = newWidth * imgRatio;
                    } else {
                        document.images[i].width = newWidth;
                        document.images[i].height = newWidth * imgRatio;
                    }
                }
            }
        }
    }

関数名がアホっぽいのはご愛敬。

職場のサーバーは自分でセッティングしないと何もモジュール入ってないのでクライアントサイドで遊べるJavaScriptを気合い入れて勉強しようかな。