フィードを利用して、最新コメントを表示するウィジェットを作成しました。ブログ内のコメントが一覧で確認できるようになる便利なウィジェットです。

特徴

PSIに怒られがちなdocument.write()を使用していません。

コードと内部処理の最適化にこだわりました。

投稿者アイコンと時刻が付いており、パッと見て確認しやすいです。

単体で機能するウィジェットなので、導入がとても簡単です。

導入方法

ソースコード

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

<div id='recent-cmt'></div>
<script type='text/javascript'>
  const maxnum = 50; // コメント数
  const maxstr = 200; // コメント文字数
  const c_link = true; // コメントへのリンク
  let a_names = [];
  let a_imgs = [];
  let a_times = [];
  let csums = [];
  let curls = [];
 
  function loadcmt(json) {
    if (typeof (json) == 'undefined' || !('entry' in json.feed)) {
      document.getElementById('recent-cmt').innerHTML = '表示できるコメントがありません。';
      return;
    }    
    
    function getData() {
      let entry, a_name, a_img, a_time, csum, curl, curl2;
      for (let i = 0; i < json.feed.entry.length; i++) {
        entry = json.feed.entry[i];
        a_name = entry.author[0].name.$t;
        if (a_name == 'Anonymous') {
          a_name = a_name.replace('Anonymous', '匿名');
        }
        a_img = entry.author[0].gd$image.src;
        if (a_img.match(/blank.gif/)) {
          a_img = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1WLXoit5wbywP-medekmQAuu7RVv-k6Tl9qZq8ni4c-XH06K60I7cYmOQ1zvy07b6II4pEv4-k5HTvz6cAgpA43y3Sw9WF_oBH6HCLAx-0dxL0xNeYFuS6g0jkWxQUrjn35Y3a8t2O6BU/s35/user.png"; //匿名画像
        }
        a_time = new Date(entry.published.$t);
        a_time = a_time.getFullYear() + '/' + ('0' + (a_time.getMonth() + 1)).slice(-2) + '/' + ('0' + a_time.getDate()).slice(-2) + ' ' + ('0' + a_time.getHours()).slice(-2) + ':' + ('0' + a_time.getMinutes()).slice(-2);
        csum = entry.summary.$t;
        csum = csum.replace(/<\S[^>]*[>]?/g, ' ');
        if (csum.length > maxstr) {
          csum = csum.substring(0, maxstr).replace(/<\S[^>]*$/, '') + ' ...';
        }
        if (entry.link.length < 3) {
          continue;
        }
        for (let j = 0; j < entry.link.length; j++) {
          if (entry.link[j].rel == 'alternate') {
            curl = entry.link[j].href;
            if (!c_link) {
              curl = curl.replace(/\?showComment.*$/, '');
            }
          } else if (entry.link[j].rel == 'self') {
            curl2 = entry.link[j].href; 
          }
        }
        if (curl.indexOf('#') == -1 && c_link) {
          curl2 = curl2.split('/');
          curl2 = curl2[curl2.length - 1];
          curl += ('#c' + curl2);
        }
        a_names.push(a_name);
        a_imgs.push(a_img);
        a_times.push(a_time);
        csums.push(csum);
        curls.push(curl);
      }
    }
    getData();
    displaycmt();
  }
 
  function displaycmt() {
    let html = '<div class="rc-note">最新' + maxnum + '件を表示しています。</div>';
    let i = 0;
    while (i < maxnum && i < curls.length) {
      html += '<a class="rc-block" href="' + curls[i] + '"><div class="rc-head"><img loading="lazy" alt="" width="38" height="38" src="' + a_imgs[i] + '"/><div class="rc-author">' + a_names[i] + '</div><div class="rc-time">' + a_times[i] + '</div></div><div class="rc-body">' + csums[i] + '</div></a>';
      i++;
    }
    document.getElementById('recent-cmt').innerHTML = html;
  }
 
  const scr_rc = document.createElement('script');
  scr_rc.src = '/feeds/comments/summary?alt=json-in-script&max-results=' + maxnum + '&callback=loadcmt';
  document.getElementById('recent-cmt').after(scr_rc);
</script>
<style>
  .rc-note {
    margin-bottom: 2em;
  }
  .rc-block {
    display: block;
    font-size: 0.9em;
    color: #444 !important;
    padding: 1em 0.5em;
    border-top: 1px dashed #bbb;
    word-break: break-all;
    transition: 0.3s;
  }
  .rc-block:hover {
    text-decoration: none;
    background: #fafafa;
  }
  .rc-head {
    display: flex;
    height: 40px;
    line-height: 40px;
    margin-bottom: 10px;
  }
  .rc-head img {
    display: block;
    width: 38px;
    height: 38px;
    border: solid 1px #ccc;
    border-radius: 50%;
    margin: 0;
  }
  .rc-author {
    font-weight: bold;
    margin: 0 10px;
  }
  .rc-time {
    color: #777;
  }
</style>

maxnumは表示コメント数、maxstrは最大表示文字数で、お好きな値に設定して頂くことができます。

追加機能（2022/6/22）

ご要望を頂き、コメントリンクを対象コメント自体へのリンクと（対象コメントがある）ページへのリンク両方に設定できるようにしました。

デフォルトは対象コメント自体へのリンクとなっており、c_linkの部分をfalseに設定すればページへのリンクに切り替えることができます。

HTML/JavaScriptガジェットを利用する場合

HTML/JavaScriptガジェットのコンテンツにコードを貼り付け、保存をクリックすれば導入完了です。サイドバーなどお好きな場所に設置してください。

削除する際は「編集」→「削除」で簡単に削除できます。

ページを利用する場合

ページを利用する場合は、同じく本体にコードを貼り付けて保存すればOKです。

こちらも削除の際はページごと削除するか、本体をクリアしてください。

解説

実際に使用するとこのような感じになります。

今回のウィジェットはフィードからコメント情報を取得し、maxnumに指定した数までコメントを表示する仕組みになっています。

各コメントは全体がリンクとなっており、対象コメント部分にすぐ移動できるようになっています。また、コメント部分はHTMLタグを全て除去しているため、本体部分の表示が崩れる心配もありません。

補足

HTMLタグを除去しているため改行がなく、少し読みにくいかもしれません。気になる方は、32行目csum部分のコードを以下のように置き換えてください。違うタグの箇所は表示に違和感が出てしまうかもしれませんが、読みやすくはなると思います。

cmtsum = cmtsum.replace(/<\S[^>]*>/g, ' ');

cmtsum = cmtsum.replace(/<\S[^>]*>/g, '<br/>');