Blogger用の個性溢れる最新コメント表示を作ってみました。

基本的なコメント表示の仕組みはこちらの通常版と同じです↓

Bloggerで最新コメントを一覧表示 | IB-Note

フィードを利用して、最新コメントを表示するウィジェットを作成しました。

itblogger-note.blogspot.com

Bloggerユーザーさんならどれも基本的にコピペで大丈夫ですが、お使いの環境や設定によっては調整が必要になる場合もあるのでご注意ください。

字幕テロップ風

字幕テロップ風のコメント表示。一定期間内に投稿されたコメントにはNew!が付きます。

ソースコード

<div id='telop'></div>
<script type='text/javascript'>
  const maxnum = 5; // コメント数
  const maxstr = 50; // コメント文字数
  const periodDay = 7; // New!表示日数
    
  let telop = document.getElementById('telop');
    
  function disp_telop(json) {
    if (typeof (json) == 'undefined' || !('entry' in json.feed)) {
      telop.innerHTML = '<ul><li>コメントはまだありません</li></ul>';
      return;
    }    
    let entry, name, csum, date;
    let html = '<ul>';
    let current = new Date();
    for (let i = 0; i < json.feed.entry.length; i++) {
      entry = json.feed.entry[i];
      name = entry.author[0].name.$t;
      if (name == 'Anonymous') {
        name = name.replace('Anonymous', '匿名');
      }
      csum = entry.summary.$t;
      csum = csum.replace(/<\S[^>]*>?/g, ' ');
      if (csum.length > maxstr) {
        csum = csum.substring(0, maxstr) + ' ...';
      }
      date = new Date(entry.published.$t);
      date.setDate(date.getDate() + periodDay);
      html += '<li>';        
      if (current < date) {
        html += '<span class="new">New!</span>';
      }
      html += '<span class="name">' + name + '</span><span class="csum">' + csum + '</span></li>';
    }
    html += '</ul>';
    telop.innerHTML = html;
  }
  let cs = document.createElement('script');
  cs.src = '/feeds/comments/summary?alt=json-in-script&max-results=' + maxnum + '&callback=disp_telop';
  telop.after(cs);
</script>
<style>
  #telop {
    width: 100%;
    height: calc(1em * 1.8); /* 親要素のline-heightをもとに計算 */
    font-size: 20px;
    text-align: center;
    border: 3px solid #ddd;
    overflow: hidden;
  }
  
  #telop ul {
    display: inline-block;
    line-height: 1em;
    padding-left: 100%;
    margin: 0;
    white-space: nowrap;
    animation: scroll 40s linear infinite; /* 流れるコメントのアニメーション */
  }
  
  #telop ul li {
    display: inline;
    margin: 0 50px 0 0;
  }
  
  .new {
    color: red;
    margin-right: 10px;
    animation: blink 1s ease-in-out infinite alternate;
  }
  
  .name {
    font-weight: bold;
    margin-right: 10px;
  }
  
  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  
  @keyframes blink {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
  }
</style>

スクリプト中の設定可能なパラメータは以下の通りです。

パラメータ	説明
maxnum	最大表示コメント数
maxstr	最大表示文字数
periodDay	コメントにNew!を付けておく期間

periodDayはデフォルトの場合、1週間以内のコメントにNew!が表示されます。（例は10日）

テロップ表示のアニメーションは#telop ulのanimation部分で設定を変更できます。スクロール時間等、お好みに合わせて調整してください。

電光掲示板風

懐かしさを感じる電光掲示板風のコメント表示です。

ソースコード

<div id='c-display2'></div>
<script type='text/javascript'>
  const maxnum = 5; // コメント数
  const maxstr = 30; // コメント文字数
    
  let cd = document.getElementById('c-display2');
    
  function loadcmt(json) {
    if (typeof (json) == 'undefined' || !('entry' in json.feed)) {
      cd.innerHTML = '<ul><li>コメントはまだありません</li></ul>';
      return;
    }    
    let entry, name, csum, date;
    let html = '<ul>';
    for (let i = 0; i < json.feed.entry.length; i++) {
      entry = json.feed.entry[i];
      name = entry.author[0].name.$t;
      if (name == 'Anonymous') {
        name = name.replace('Anonymous', '匿名');
      }
      csum = entry.summary.$t;
      csum = csum.replace(/<\S[^>]*>?/g, ' ');
      if (csum.length > maxstr) {
        csum = csum.substring(0, maxstr) + ' ...';
      }
      date = new Date(entry.published.$t);
      date = date.getFullYear() + '.' + ('0' + (date.getMonth() + 1)).slice(-2) + '.' + ('0' + date.getDate()).slice(-2) + ' ' + ('0' + date.getHours()).slice(-2) + ':' + ('0' + date.getMinutes()).slice(-2);      
      html += '<li><span class="date">' + date + '</span><span class="name">' + name + '</span><span class="csum">' + csum + '</span></li>';
    }
    html += '</ul>';
    cd.innerHTML = html;
  }
  let cs = document.createElement('script');
  cs.src = '/feeds/comments/summary?alt=json-in-script&max-results=' + maxnum + '&callback=loadcmt';
  cd.after(cs);
</script>
<style>
  #c-display2 {
    position: relative;
    width: 100%;
    height: calc(1em * 1.8); /* 親要素のline-heightをもとに計算 */
    font-size: 30px;
    font-weight: bold;
    color: #ffb400;
    background: #333;
    overflow: hidden;
  }
  
  #c-display2:after {
    position: absolute;
    display: block;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(#0a0600 1px, transparent 0px), linear-gradient(0, #0a0600 1px, transparent 1px);
	background-image: -webkit-linear-gradient(#0a0600 1px, transparent 0px), -webkit-linear-gradient(0, #0a0600 1px, transparent 1px);
	background-size: 2px 2px;
    z-index: 10;
  }
  
  #c-display2 ul {
    display: inline-block;
    line-height: 1em;
    padding-left: 100%;
    margin: 0;
    white-space: nowrap;
    animation: scroll2 40s linear infinite; /* 流れるコメントのアニメーション */
  }
  
  #c-display2 ul li {
    display: inline;
    margin: 0 50px 0 0;
  }
  
  .date, .name {
    margin-right: 10px;
  }
  
  @keyframes scroll2 {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }
</style>

CSSのbackgroundプロパティの活用で良い具合にドット感が出ています。

参考：CSS3で電光掲示板風のスクロールを再現する | クリエイタークリップ

スターウォーズ風

スターウォーズのプロローグ風コメント表示です。需要があるかは謎ですが、面白そうなので作ってみました。ウケは狙えると思います。

ソースコード

<div id="screen"><div id="c-display3"></div></div>
<script type='text/javascript'>
  const maxnum = 10; // コメント数
  const maxstr = 100; // コメント文字数
    
  let cd = document.getElementById('c-display3');
    
  function loadcmt3(json) {
    if (typeof (json) == 'undefined' || !('entry' in json.feed)) {
      cd.innerHTML = '<div id="contents"><p>コメントはまだありません</p></div>';
      return;
    }
    let entry, name, csum;
    let html = '<div id="contents">';
    for (let i = 0; i < json.feed.entry.length; i++) {
      entry = json.feed.entry[i];
      name = entry.author[0].name.$t;
      if (name == 'Anonymous') {
        name = name.replace('Anonymous', '匿名');
      }
      csum = entry.summary.$t;
      csum = csum.replace(/<\S[^>]*>?/g, ' ');
      if (csum.length > maxstr) {
        csum = csum.substring(0, maxstr) + ' ...';
      }
      html += '<p><span class="name">' + name + '</span><span class="csum">' + csum + '</span></p>';
    }
    html += '</div>';
    cd.innerHTML = html;
  }
  let cs = document.createElement('script');
  cs.src = '/feeds/comments/summary?alt=json-in-script&max-results=' + maxnum + '&callback=loadcmt3';
  cd.after(cs);
</script>
<style>
  #screen {
    width: 100%;
    height: 400px;
    background: #000;
  }
  
  #c-display3 {
    position: relative;
    height: 100%;
    overflow: hidden;
    transform-origin: 50% 100%;
    transform: perspective(250px) rotateX(25deg);    
  }
  
  #c-display3:after {
    position: absolute;
    content: "";
    bottom: 60%;
    width: 100%;
    height: 100%;
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);    
    background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
    pointer-events: none;
  }
  
  #contents {
    position: absolute;
    top: 100%;
    left: 8%;
    width: 80%;
    font-size: 1.5em;
    font-weight: bold;
    color: #ff0;
    text-align: justify;
    animation: scroll 80s linear infinite; /* スクロールアニメーション */
  }
  
  .name {
    margin-right: 10px;
  }
  
  @keyframes scroll {
    0% {
      top: 100%;
    }
    100% {
      top: -600%;
    }
  }
</style>

※表示するコメント量やアニメーションの時間によって微調整が必要です。

参考：[CSS]数行のスタイルシートで、スター・ウォーズのオープニング風アニメーションを簡単実装 | コリス

マトリックス風

マトリックスコードを彷彿とさせるコメント表示です。見やすさについては触れないお約束。

ソースコード

<div id="matrix-div" style="height: 500px;">
  <canvas id="c"></canvas>
</div>
<script>
  const maxnum = 5; // コメント数
  const maxstr = 50; // コメント文字数
  let comments = [];
  
  function get_comments(json) {
    if (typeof (json) == 'undefined' || !('entry' in json.feed)) {
      comments.push('コメントはまだありません');
    }
    let entry, csum;
    for (let i = 0; i < json.feed.entry.length; i++) {
      entry = json.feed.entry[i];
      csum = entry.summary.$t;
      csum = csum.replace(/<\S[^>]*>?/g, ' ');
      if (csum.length > maxstr) {
        csum = csum.substring(0, maxstr) + ' ...';
      }
      comments.push(csum);
    }
  }
  
  const s = document.getElementById("matrix-div");
  const c = document.getElementById("c");
  const ctx = c.getContext("2d");
  const width = c.width = s.clientWidth;
  const height = c.height = s.clientHeight;  
  const font_size = 10;
  const columns = c.width / font_size;

  let matrix, text;
  let idx = 0;  
  let j = 0;
  let drops = [];
  
  for (let x = 0; x < columns; x++)
    drops[x] = 1;  

  function draw() {
    ctx.fillStyle = "rgba(0, 0, 0, .04)";
    ctx.fillRect(0, 0, c.width, c.height);
    ctx.fillStyle = "#0f0";
    ctx.font = font_size + "px Arial";
    matrix = comments[idx].split("");
    for (let i = 0; i < drops.length; i++) {
      text = matrix[j];
      ctx.fillText(text, i * font_size, drops[i] * font_size);
      if (drops[i] * font_size > c.height && Math.random() > 0.975)
        drops[i] = 0;
      drops[i]++;
    }
    j++;
    if (j >= matrix.length) {
      j = 0;
      idx = Math.floor(Math.random() * comments.length);
    }
  }
  
  let cs = document.createElement('script');
  cs.src = '/feeds/comments/summary?alt=json-in-script&max-results=' + maxnum + '&callback=get_comments';
  s.after(cs);
  setInterval(draw, 50);
</script>

※表示されるコメントは最初以外ランダムです。

参考：映画『マトリックス』の背景エフェクトを canvas で実装してみた。 - 株式会社オンズ

導入方法

まず、お好きなコメント表示のソースコードをコピーします。

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

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

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

ページを利用する場合

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

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