【Blogger】記事タイトルのみの最新記事ウィジェット

今までこのブログではフィードを配信しておらず、それを利用したウィジェットを設置できなかった。

そこで、フィードを使わずに最新記事を表示できる方法を【Blogger】フィード不要の最新記事ウィジェットという記事にまとめたものの、様々な利便性を考えた結果フィードを配信するに至った。

ネット上には、有識者の方々が作成した最新記事ウィジェットがいくつでも転がっている。

それらを改変して自分好みにすることも考えたが、いい機会なので 1 から自分で作ってみることにした。

---

巷にあふれる最新記事ウィジェットは大抵、記事タイトルとサムネイル（と、URL）が最低限の構成要素として存在するように見受けられる。

おしゃれなイラストやら写真やらがふんだんに使われているようなブログならば、色とりどりでさぞかし見栄えがいいだろう。

ただし、こういうツールを作ったにもかかわらずはなからアイキャッチ作成を放棄しているこのブログでは、サムネイルが表示されたとて、である。

もともと記事一覧にもサムネイルを表示させていないし、最新記事も記事タイトルだけ載せときゃいいだろうと思った。

そこで以下のようなコードを書いた。

<ul class='recent-posts'>
  <li>Now Loading...</li>
</ul>

<script>//<![CDATA[
(function(){
  const script = document.createElement('script');
  script.src = '/feeds/posts/default?alt=json&max-results=5&callback=recentPosts';
  document.body.appendChild(script);
})();
//]]>

function recentPosts(data){
  const current = '<data:blog.url.canonical/>';
  //<![CDATA[
  let html = '';
  data.feed.entry.forEach((entry) => {
    const title = entry.title.$t;
    const url = entry.link.find((link) => link.rel === 'alternate').href;
    if(url == current){
      html += `<li>${title}</li>`;
    } else{
      html += `<li><a href='${url}'>${title}</a></li>`;
    }
  })
  document.querySelector('.recent-posts').innerHTML = html;
}
//]]></script>

Blogger の独自タグを使用しているため、HTML/JavaScript ウィジェットを使って表示させるときは、テーマ編集上で <data:content/> と置き換えてコードを追加する。

フィードを読み込む script タグは直接 HTML 上に書くのではなく、動的に生成することにした。

直接埋め込むと URL の & を & に変換するのが面倒なのと、上のコードではやっていないが、DOMContentLoaded などで実行タイミングを遅らせるのが容易になると思ったからだ。

リスト数を変更したい場合は、フィード URL の max-results=5 の 5 を好きな数字に置き換える。

フィードが読み込まれたら、関数 recentPosts が実行され、以下のような HTML 構造の最新記事リストが表示される。

<ul class='recent-posts'>
  <li><a href='【記事 URL】'>【記事タイトル】</a></li>
  <li><a href='【記事 URL】'>【記事タイトル】</a></li>
  <li><a href='【記事 URL】'>【記事タイトル】</a></li>
  <li><a href='【記事 URL】'>【記事タイトル】</a></li>
  <li><a href='【記事 URL】'>【記事タイトル】</a></li>
</ul>

ひとつこだわったのは、現在表示している記事の URL <data:blog.url.canonical/> と最新記事リスト上のページの URL が一致している場合は、記事タイトルをリンク化しないという処理。

<ul class='recent-posts'>
  <li>【記事タイトル】</li> ←現在表示している記事と一致する場合ここだけリンク化しない
  <li><a href='【記事 URL】'>【記事タイトル】</a></li>
  <li><a href='【記事 URL】'>【記事タイトル】</a></li>
  <li><a href='【記事 URL】'>【記事タイトル】</a></li>
  <li><a href='【記事 URL】'>【記事タイトル】</a></li>
</ul>

サイドバーのラベル（カテゴリ）リストや月別アーカイブなどでも独自タグを使って同様の処理をしていたので、手前味噌な発言だけれども、表示が統一できて満足している。

---

シンプルな最新記事ウィジェットを作成したのでこうして記事にした。

せっかくフィードを公開したからには、最新記事だけでなく他にもウィジェットを作ってみようと思う。