高速化のため、今も旧画像URLで粘っているFumaです。

以前の記事でもご紹介した通り、少し前からBloggerにアップロードした際の画像URLが旧URL1.bp.blogspot.comから新URLblogger.googleusercontent.comに完全に切り替わりました。

しかし、新URLは画像の読み込みが遅かったりURLが異様に長かったりといった問題があります。幸い、現在でも安定的に旧URLを取得する方法があり、それを効率化するブックマークレットも作ったのでご紹介します。

旧URLを取得する方法

旧URLを取得する方法については、「水の中にはサメがいる！」さんの以下の記事を参考にさせて頂きました。

【Blogger】旧仕様の画像 URL を取得する

Blogger の画像 URL が 1.bp.blogspot.com から blogger.googleusercontent.com に変更されました。 新仕様の URL にはいろいろと問題があるようで、こちらの記事に書かれている方法で旧仕様の URL を取得していま...

mizunosame.blogspot.com

上の記事のやり方を基本に、旧URLの取得方法について説明していきます。

※今回の方法はWindows版Google Chromeにおけるものですが、他のブラウザでも同様にできると思います。対応する内容を適宜置き換えて読んでください。

下準備

1. 投稿エディタの「画像を挿入」→「パソコンからアップロード」を選択し、ファイルをアップロードします。
2. アップロードが完了すると、以下のように画像のサムネイルが表示されます。
3. サムネイルを右クリックし、「新しいタブで画像を開く」を選択します。
   新しいタブが開いたら、「キャンセル」でウィンドウを閉じて大丈夫です。
4. 新しく開いたタブでは、画像URLは以下のようにlh3.googleusercontent.comになっていると思います。
   ここでURLを手作業で旧URLに変換しても良いのですが、毎回手動でやるのは面倒なので、効率化のためのブックマークレットを登録します。以下の手順に従い、ブックマークレットの登録を行ってください。

ブックマークレットの登録（初回のみ）

今回作成したのは、lh3.googleusercontent.comの画像を旧URLの指定したサイズの画像に変換し、その<img>タグを出力するというものです。

自分の好みに合わせて自由にカスタマイズして頂けるよう、先に圧縮前のソースコードを載せておきます。カスタマイズをしない場合はスルーして頂いて大丈夫です。

ソースコード

javascript:(function() {
  // 画像サイズ入力
  const size = prompt('サイズ（px）を入力', '0');
  if (!size) {
    alert('キャンセルされました');
    return;
  }

  // URLの取得＆変換
  let url = location.href;
  const m = url.match(/\/[^/]*/g);
  const param = '/s' + size + '-e365';
  url = url.replace(m[1], '/1.bp.blogspot.com');
  url = url.replace(m[6], param);

  // 画像の読み込み処理
  const loadImage = (src) => {
    return new Promise((resolve, reject) => {
      const img = new Image();
      img.src = src;
      img.onload = () => resolve(img);
      img.onerror = (e) => reject(e);
    });
  };

  // imgタグ生成＆コピー
  loadImage(url)
    .then(res => {
      const width = res.width;
      const height = res.height;
      const imgTag = '<img alt="" width="' + width + '" height="' + height + '" src="' + url + '"/>';
      if (navigator.clipboard) {
        navigator.clipboard
        .writeText(imgTag)
        .then(() => {
          alert('旧URLの画像タグをコピーしました');
        })
        .catch((e) => {
          console.log(e);
        });
      } else {
        prompt('旧URLの画像タグをコピーしてください', imgTag);
      }
    })
    .catch(e => {
      console.log(e);
    });
})();

コードの実装にあたり、以下の記事を参考にさせて頂きました。

参考：Javascriptで画像サイズ(幅と高さ)を取得する方法 | Hirooooo’s Labo

では、まず以下のコードをコピーしてください。

javascript:(function(){const size=prompt('サイズ（px）を入力','0');if(!size){alert('キャンセルされました');return} let url=location.href;const m=url.match(/\/[^/]*/g);const param='/s'+size+'-e365';url=url.replace(m[1],'/1.bp.blogspot.com');url=url.replace(m[6],param);const loadImage=(src)=>{return new Promise((resolve,reject)=>{const img=new Image();img.src=src;img.onload=()=>resolve(img);img.onerror=(e)=>reject(e)})};loadImage(url).then(res=>{const width=res.width;const height=res.height;const imgTag='<img alt="" width="'+width+'" height="'+height+'" src="'+url+'"/>';if(navigator.clipboard){navigator.clipboard.writeText(imgTag).then(()=>{alert('旧URLの画像タグをコピーしました')}).catch((e)=>{console.log(e)})}else{prompt('旧URLの画像タグをコピーしてください',imgTag)}}).catch(e=>{console.log(e)})})()

コピーできたら、ウィンドウの右上端にある三点メニューをクリックし、「ブックマーク」→「ブックマークマネージャ」を選択します。

ブックマークマネージャが開いたら、三点メニュー「管理」→「新しいブックマークを追加」をクリックします。

「ブックマークを追加」という画面が開くので、「名前」は「旧URL画像タグ」などとしておき、「URL」部分に先ほどコピーしたコードを貼り付けます。

「保存」をクリックします。これでブックマークレットの登録は完了です。

旧URLの取得方法（続き）

ブックマークレットが登録できたので、手順の続きに戻ります。

1. 先ほどのlh3.googleusercontent.comの画像ページで三点メニューをクリックし、「ブックマーク」→「旧URL画像タグ」をクリックします。
2. サイズ設定のダイアログが表示されるので、お好きな数値を入力してください。（ここでのサイズは、画像の最長辺の長さです。幅x高さが600x300pxの画像の場合、幅の長さに相当します。）
   デフォルトは元画像と同じサイズを表す「0」になっています。
3. 「OK」を押すと、コピーに成功した場合は生成された<img>タグの内容がクリップボードにコピーされ、以下のようにダイアログが表示されます。
   今回の場合、以下の<img>タグが生成されました。

   <img alt="" width="643" height="800" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtdqW7-gXBKYX4W1Nuq7hRJkHGyIFh545tK4YcyzU-Les0lYHcom-WX5VIPYrq80LWBvBv8AydhfgTACIwkbvP2WJoPIaDx5VRVjTSXNIOtynyk1rQENwhgQamwOSQSu_MeLjl9M8RGz0/s0-e365/kids_chuunibyou_girl.png"/>

以上が新しい旧画像URLの取得方法です。

ブックマークレットについての補足

上記の例で見ていただいたように、ブックマークレットは指定されたサイズ（最長辺の長さ）に合わせてパラメータを変換し、変換された画像のサイズ（幅・高さ）を取得して<img>タグの指定に追加します。alt属性は後で画像の説明を書くことを考え、空で出力しています。

私は毎回手動でパラメータを付け加えるのが面倒だったので、パラメータ部分には最初からキャッシュの有効期限1年間を設定（-e365）するようにしています。軽量化にこだわりたい方は、コードのparam部分でさらに「-rw（WebP化）」などを付け加えても良いでしょう。

注意点として、最新記法のJavaScriptなのでIEには完全非対応です。IEユーザの方はご了承ください。

あとがき

今まで旧URLへの変換は1つ1つ手作業だったのでかなり大変でしたが、今回ブックマークレットを導入したことで作業効率が飛躍的に向上しました。

プログラム側で勝手に<img>タグの生成までやってくれるので、自分で画像のサイズを確認して設定して…なんてする必要ももうありません。煩わしい作業からおさらばです。

今回の新手法により、旧画像URLの使用に対するハードルが少しでも下がれば嬉しく思います。