Blogger:アップロードした画像の、取得時の画像サイズを動的に変更するための、JavaScriptコード

イントロダクション

Google のブログサービス「Blogger」にて、アップロードした画像の、取得時のURLのパターンと、動的に取得サイズを変更する方法について調べてみました。

Bloggerでアップロードした画像ファイルの、URLのパターン
http://upa-pc.blogspot.com/2015/04/blogger-image-url.html
Dr.ウーパのコンピュータ備忘録

Bloggerでアップロードした画像を、サーバから配信される画像のサイズを指定して表示する方法
http://upa-pc.blogspot.com/2015/04/blogger-image-url-change-size.html
Dr.ウーパのコンピュータ備忘録

今回は、それらの知見を活かして、アップロードした画像の、取得時の画像サイズを動的に変更するための、JavaScriptコードを作成してみました。

Blogger:アップロードした画像の、取得時の画像サイズを動的に変更するための、JavaScriptコード

概要

Blogger でアップロードした画像を取得するためのURLは、一般的に次の構造を持っています。

画像のURLの規則
http://[1].bp.blogspot.com/[2]/[3]/[4]/[5]/[6]/[7]

[6] の部分が、画像のサイズを指定している部分です。
詳細については、「Bloggerでアップロードした画像ファイルの、URLのパターン」をご覧ください。


そこで、正規表現によってURLの検査及び分解を実施し、[6]の部分を任意の文字列に差し替えることで、任意の画像を取得できる URL を生成します。

コード

        /*
        Blogger でアップロードした画像の url を加工して、
        任意のサイズの画像を取得できるようにするための関数

        url:
        元の画像のurl
        例）http://3.bp.blogspot.com/-Wj1NtDoDshI/VRzCRqN2qjI/AAAAAAAAEmo/xJc5EEH5DZg/s1600/simple_eye_catch_1_1_0_TEST.png
            
        size:
        任意のサイズ
        例）s400

        戻り値：
        任意のサイズの画像を取得できるようした url
        失敗した場合、undefined
        */
        function changeBloggerImageSize(url, size) {

            if (!url) return undefined;
            if (!size) return undefined;
                

            // URL 検査及び分解(この正規表現は厳密ではありません。目的に応じて手を加えてください。)
            var url_parts = url.match(/^\s*(https?:\/{2}\d+\.bp\.blogspot\.com\/.{12}\/.{11}\/.{11}\/.{11}\/)(.\d{2,4}(?:-c)?)(\/[^#?\s]+)/);
            if (!url_parts) return undefined;


            var url_head = url_parts[1];            // url の画像のサイズよりも前の部分
            var url_foot = url_parts[3];            // url の画像のサイズよりも後の部分


            return url_head + size + url_foot;
        }

使用例

コード

    オリジナル画像 : <br />
    <img src="http://3.bp.blogspot.com/-Wj1NtDoDshI/VRzCRqN2qjI/AAAAAAAAEmo/xJc5EEH5DZg/s1600/simple_eye_catch_1_1_0_TEST.png" id="local-img-org"/><br />
    url : http://3.bp.blogspot.com/-Wj1NtDoDshI/VRzCRqN2qjI/AAAAAAAAEmo/xJc5EEH5DZg/s1600/simple_eye_catch_1_1_0_TEST.png<br />
    <br />
    変更後の画像 : <br />
    <div id="local-result"></div>
    <script type="text/javascript">
    <!--
        /*
        Blogger でアップロードした画像の url を加工して、
        任意のサイズの画像を取得できるようにするための関数

        url:
        元の画像のurl
        例）http://3.bp.blogspot.com/-Wj1NtDoDshI/VRzCRqN2qjI/AAAAAAAAEmo/xJc5EEH5DZg/s1600/simple_eye_catch_1_1_0_TEST.png
            
        size:
        任意のサイズ
        例）s400

        戻り値：
        任意のサイズの画像を取得できるようした url
        失敗した場合、undefined
        */
        function changeBloggerImageSize(url, size) {

            if (!url) return undefined;
            if (!size) return undefined;
                

            // URL 検査及び分解(この正規表現は厳密ではありません。目的に応じて手を加えてください。)
            var url_parts = url.match(/^\s*(https?:\/{2}\d+\.bp\.blogspot\.com\/.{12}\/.{11}\/.{11}\/.{11}\/)(.\d{2,4}(?:-c)?)(\/[^#?\s]+)/);
            if (!url_parts) return undefined;


            var url_head = url_parts[1];            // url の画像のサイズよりも前の部分
            var url_foot = url_parts[3];            // url の画像のサイズよりも後の部分


            return url_head + size + url_foot;
        }


        // Blogger でアップロードした画像の url を加工して、任意のサイズの画像を取得するテスト
        (function () {

            // 元のBlogger でアップロードした画像のURL
            var org_url = document.getElementById("local-img-org").getAttribute("src");


            // s72-c (縦横72px、中心部抜出)に加工
            var new_url = changeBloggerImageSize(org_url, "s72-c");

            // img タグ生成・src セット
            var obj_new_img = document.createElement("img");
            obj_new_img.setAttribute("src", new_url);

            // 画面上に反映
            var obj_output = document.getElementById("local-result");
            obj_output.appendChild(obj_new_img);
            obj_output.appendChild(document.createElement("br"));
            obj_output.appendChild(document.createTextNode("url : " + new_url));

        })();


    //-->
    </script>

結果

オリジナル画像 :

url : http://3.bp.blogspot.com/-Wj1NtDoDshI/VRzCRqN2qjI/AAAAAAAAEmo/xJc5EEH5DZg/s1600/simple_eye_catch_1_1_0_TEST.png

変更後の画像 :

解説

今回作成した、changeBloggerImageSize という関数に Blogger でアップロードした画像の URL と、変更後の画像サイズを示す文字列を入力すると、変更後の画像サイズの画像を取得する URL を取得することができます。

Blogger でアップロードした画像の URL かどうかを解析し、画像のサイズを示す部分以外の URL の部分を抜き出すために、次の正規表現を用いています。

Blogger でアップロードした画像の URL かどうかを解析し、画像のサイズを示す部分以外の URL の部分を抜き出すための正規表現:
/^\s*(https?:\/{2}\d+\.bp\.blogspot\.com\/.{12}\/.{11}\/.{11}\/.{11}\/)(.\d{2,4}(?:-c)?)(\/[^#?\s]+)/

正規表現 - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions

なお、この正規表現は現時点で私が目にしたことがある Blogger でアップロードした画像を取得するための URL を基にしています。

そのため、どこかに見落としがある可能性は否定できません。
特に、\d+, .{12}, .{11}, .\d{2,4}(?:-c)?, [^#?\s]+ の部分には注意が必要かもしれません。


上記の changeBloggerImageSize 関数を利用する場合には、利用目的に応じて、その内部処理を検証してください。

まとめ

JavaScript を使用することで、Blogger でアップロードした画像の、取得時の画像サイズを動的に変更することができます。

この機能により、画面サイズや解像度に応じて最適な画像を、閲覧者へ提供することが可能になります。


なお、この関数を利用して作成したサービス「Bloggerでアップロードした画像を任意のサイズで取得するWebサービス」を試験的に稼働させています。

Bloggerでアップロードした画像を任意のサイズで取得するWebサービス
http://upa-pc.blogspot.jp/p/blogger-image-size-changer.html

その他

Picasa (Webアルバム)やGoogle+関係などで、上記と同じようなフォーマットで画像のサイズが URL で指定できるものがあるようです。

それらでは次のようなドメインで画像の URL が指定されています。

*.ggpht.com
*.googleusercontent.com


これらについては、現在調査中です。

このブログ内の、他の”Blogger”についての情報を見る

---

正規表現クックブック