新たにオリジナルの関連記事表示を作成し、今まで使っていたものと入れ替えました。

以前のものでも機能的には問題ありませんでしたが、内部処理の効率が良くない部分があったので、旧バージョンをお使いの方は今回のものへの変更をおすすめします。

改良ポイント

以前の関連記事表示はdocument.write()を使っていてPSIに怒られていたので、使用しない形に変更しました。

コードの構成を最適化し、高速化を図りました。

記事にラベルが複数ある場合、いずれかのラベルに該当する記事をランダムに表示します。

コード・CSSを圧縮していない状態でご紹介するので、手軽にカスタマイズして頂けます。

導入方法

テーマのバックアップ

HTMLの編集をするので、バックアップを取っておきましょう。

管理画面から「テーマ」→「バックアップ」を選択し、ダウンロードしてファイルを保存します。

HTMLの編集

「テーマ」→「HTMLを編集」をクリックし、編集画面を開きます。

今回のコードでは投稿ウィジェット内のデータを使うので、投稿ウィジェット内のお好きな位置に以下のコードをコピー＆ペーストしてください。

<b:if cond='data:blog.pageType == "item"'>
  <div id='related-posts'></div>
  <script type='text/javascript'>
    const rp_current = "<data:post.url/>";
    const rp_max = 6; // 表示記事数
    const rp_head = "関連記事"; // タイトル

    //<![CDATA[
    (function(root, func) {
      if (!root.RelatedPosts) {
        root.RelatedPosts = func();
      }
    })(this, function() {
      let _this = function RelatedPosts_constructor() {};
      let count = 0;
      let limit = 0;
      let urls = [];
      let titles = [];
      let dates = [];
      let imgs = [];

      // フィード数分をカウント
      _this.counter = function RelatedPosts_counter() {
        limit++;
      };

      // 関連記事の書き込み
      function RelatedPosts_write() {
        // 重複処理
        let dups = [];
        let indexs = [];
        for (let i = 0; i < urls.length; i++) {
          if (dups.indexOf(urls[i]) == -1) {
            dups.push(urls[i]);
            indexs.push(i);
          }
        }

        // ランダムインデックス生成
        let idx, items = [];
        let a = [...Array(indexs.length).keys()];
        while (a.length > 0) {
          idx = Math.floor(Math.random() * a.length);
          items.push(a[idx]);
          a.splice(idx, 1);
        }

        // 関連一覧の作成
        let html;
        let i = 0;
        if (indexs.length > 0) {
          html = '<div class="related-text">' + rp_head + '</div><div class="p-container">';
          while (i < indexs.length && i < rp_max) {
            html += '<a href="' + urls[indexs[items[i]]] + '"><figure class="related-img"><img alt="" width="250" height="150" src="' + imgs[indexs[items[i]]] + '"/></figure><div class="related-date">' + dates[indexs[items[i]]] + '</div><div class="related-title">' + titles[indexs[items[i]]] + '</div></a>';
            i++;
          }
          html += '</div>';
          document.getElementById("related-posts").innerHTML = html;
        }
      }

      // フィードデータ追加
      _this.add = function RelatedPosts_add(json) {
        let m = rp_current.match(/^https?:\/\/(.+$)/);
        let http  = '';
        let https = '';
        if (m != null) {
          http  = 'http://' + m[1];
          https = 'https://' + m[1];
        }
        for (let i = 0; i < json.feed.entry.length; i++) {
          let entry = json.feed.entry[i];
          for (let j = 0; j < entry.link.length; j++) {
            if (entry.link[j].rel == 'alternate') {
              if (!(http == entry.link[j].href || https == entry.link[j].href)) {
                urls.push(entry.link[j].href);
                titles.push(entry.title.$t);
                let date = entry.published.$t.substr(0, 10).replace(/-/g, "/");
                dates.push(date);
                let img;
                if ("media$thumbnail" in entry) {
                  img = entry.media$thumbnail.url;
                  let re1 = /\/s72-.*\//;
                  let re2 = /=s72-.*$/;
                  if (img.match(re1)) {
                    img = img.replace(re1, '/w250-h150-n/');
                  } else if (img.match(re2)) {
                    img = img.replace(re2, '=w250-h150-n');
                  } else if (img.match(/default.jpg/)) {
                    img = img.replace('default.jpg', 'mqdefault.jpg');
                  }
                } else {
                  // NoImage画像
                  img = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJGufis0idCDqb29dBvyQCx5M5dHTE4bpc52w6WGtcdKpsQImJUUvWSFYn5k_IDsn1TjOhyfzw51TgvvabIrVAYjxasRmPjGTPdSKudZTYD6JA5DLW2rm-9fkahTfV4Cmn-GjsDaiCDnJ5/w250-h150-n-e365/noimg.jpg";
                }
                imgs.push(img);
              }
              break;
            }
          }
        }
        count++;
        if (count == limit) {
          RelatedPosts_write();
        }
      };

      return _this;
    });
    //]]>
  </script>
  <b:loop values='data:post.labels' var='label'>
    <script type='text/javascript'>RelatedPosts.counter();</script>
  </b:loop>
  <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.name contains "#" or data:label.name contains "/"'>
      <script>
      (function() {
        let encoded = "<data:label.name/>"
        const keys = [/・/g, /&amp;amp;/g, /#/g, /\//g];
        const reps = ["%E3%83%BB", "&amp;", "%23", "%2F"];
        for (let i = 0; i &lt; keys.length; i++) {
          encoded = encoded.replace(keys[i], reps[i]);
        }      
        const src = "/feeds/posts/summary/-/" + encoded + "?alt=json&amp;max-results=10&amp;callback=RelatedPosts.add";
        const js = document.createElement("script");
        js.type = "text/javascript";
        js.defer = true;
        js.src = src;
        document.head.appendChild(js);
      }());
      </script>
    <b:else/>
      <script defer='defer' expr:src='"/feeds/posts/summary/-/" + data:label.name + "?alt=json&amp;max-results=10&amp;callback=RelatedPosts.add"' type='text/javascript'/>
    </b:if>
  </b:loop>
  <style>
    #related-posts {
      margin: 2em 0 0;
    }
    .related-text {
      font-size: 1.35em;
      font-weight: 700;
      text-align: center;
      background: #f7f7f7;
      padding: 10px 14px;
      border-bottom: 2px solid #ddd;
      margin-bottom: 1em;
    }
    .p-container {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    .p-container:after {
      display: block;
      content: "";
      width: 32%;
    }
    #related-posts a {
      display: block;
      width: 32%;
      min-height: 200px;
      color: #444;
      box-sizing: border-box;
      margin-bottom: 1.5em;
      transition: all .3s ease;
    }
    .related-img {
      display: block;
      height: 140px;
      margin: 0;
      overflow: hidden;
    }
    .related-img img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 0;
      transition: .3s
    }
    .related-date {
      font-size: .8em;
      padding: .7em 0 .2em;
      opacity: .8;
    }
    .related-title {
      font-size: .9em;
    }
    #related-posts a:hover {
      text-decoration: none;
    }
    #related-posts a:hover .related-img img {
      transform: scale(1.1);
    }
    @media screen and (max-width:519px) {
      #related-posts a {
        width: 49%;
      }
    }
  </style>
</b:if>

導入例

テーマ「Contempo」への導入例をご紹介します。

Contempoの場合、post-outer-containerというクラス名のarticleタグを探し、画像のように</article>前に設置するとちょうど良い位置（コメント欄のすぐ下）に表示されます。設置の際の参考にしてみてください。

導入した場合のイメージ画像がこちら↓

スクリプト中のrp_maxで表示する最大記事数を、rp_headで「関連記事」部分の表記を設定できます。お好きな設定に変えて使ってください。

CSSについて、今回作成したコードは以前の記事の関連記事表示と互換性をもたせているため、こちらにある各スタイルにそのまま変更して頂くことが可能です。ただし、環境や設定によっては表示崩れが起きる場合があるためご注意ください。

なお、上記スクリプトの作成にあたり「バグ取りの日々」さんの記事を参考にさせて頂きました。

スクリプトに関する補足

今回のスクリプトは、現在の投稿と同じラベル（カテゴリー）のものを最新10件読み込み、それらの中からランダムに記事を表示する仕組みになっています。

ブログのフィード情報から関連記事のリンク、タイトル、投稿日、サムネ画像を取得し、整形して一覧表示します。

フィードを利用していますが、データタイプがsummaryかつmax-results=10と制限しているため、転送量が最小限で済んでいて軽量です。スクリプトはシンプルな構成ながらも、確実に重複なく＆ランダムに表示されるように設計しました。

追記（2022/3/27）

初期のスクリプトはラベルに空白や特殊記号が含まれている場合、エラーが出て関連記事が表示されないという致命的な欠陥がありました。

読者の方からご報告をいただいて修正を重ねた結果、ラベルに空白や「#」「☆」のような特殊記号が含まれている場合でも正常に動作するようになりました。ご報告いただいた皆さん、ありがとうございます。

あとがき

関連記事表示を改良したところ、読み込み速度が以前と比べて明らかに速くなりました。以前は読み込み時に関連記事の表示が遅れ、サイドバーがガクっと表示される感じだったのですが見事に解消。

主な犯人はdocument.write()だったと思いますが、結構露骨に影響が出るものなんですね。うっかり使ってしまわないように気をつけねば…