【Blogger】フィード不要の最新記事ウィジェット

投稿日：

更新日：

ラベル：Blogger

Blogger にはデフォルトの最新記事ウィジェットが存在しない。フィードガジェットを使うか、フィードを JavaScript で操作して最新記事を表示させるのが一般的だ。

ただし当ブログでは諸般の事情からフィードを配信していないので、これらの方法は使えない。別にトップページにアクセスすれば最新記事が表示されるからいいんだけど、本当に他に手立てはないのかとも思い始めた。

そこで、フィードがなくても最新記事をトップページ以外で表示させる方法を考えてみた。

前提

次項から紹介するスクリプトでは、JavaScript でブログのトップページにアクセスし、そこに表示される記事一覧から記事のタイトルおよび URL を抽出して最新記事表示に利用している。

どちらの方法もスクリプトが作動するたびにトップページへのアクセス数が1増える。Blogger の統計情報やそれ以外のアクセス解析への影響が気になる人は真似しないほうがいい。

記事執筆時点での当ブログの記事一覧の1記事に対する HTML は以下のようになっている。

<article class='list'>
  <h2 class='post-title'><a class='post-link' href='【記事 URL】'>【記事タイトル】</a></h2>
  <time class='post-date'>【投稿日】</time>
  <div class='post-label'><a href='【ラベル URL】' rel='tag'>【ラベルタイトル】</a></div>
</article>

当記事ではこのコードを例にして、最新記事の表示方法を説明する。万が一自分のブログで使いたい場合は、それ用にコードを書き換える必要があるということを心に留めておいてほしい。

また、生成される最新記事表示の 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>

スクリプトの設置は無難に HTML/JavaScript ガジェットを使うのがおすすめ。一応テーマ編集にそのまま埋め込んでも使えはする。

XMLHttpRequest を使う

<ul class='recent-posts'></ul>

<script>//<![CDATA[
(function(){
  const siteurl = 'https://sui-gocha.blogspot.com';
  const postnum = 5;
  const xhr = new XMLHttpRequest();
  xhr.open('GET', siteurl, true);
  xhr.responseType = 'document';
  xhr.send();
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
      const postlink = xhr.response.querySelectorAll('.post-link');
    let recent = '';
    for(let i = 0; i < postnum; i++){
      recent += '<li><a href="' + postlink[i].href + '">' + postlink[i].innerHTML + '</a></li>\n';
    }
    document.querySelector('.recent-posts').innerHTML = recent;
    }
  }
})();
//]]></script>

siteurl にブログのトップページの URL を、postnum に最新記事ウィジェットに表示させたい記事数を設定する。トップページに表示されている記事数より大きい数字を postnum に設定してしまうと、当たり前だけどスクリプトが動かなくなる。

XMLHttpRequest は今は亡き Internet Explorer でも動く。もし万が一レガシーブラウザに対応しなければならないときはこちらを使い、そうでなければ次項の Fetch API を使うのがよさそう。

Fetch API を使う

<ul class='recent-posts'></ul>

<script>//<![CDATA[
(function(){
  const siteurl = 'https://sui-gocha.blogspot.com';
  const postnum = 5;
  fetch(siteurl).then(res => res.text()).then(data => {
    const parser = new DOMParser();
    const html = parser.parseFromString(data, 'text/html');
    const postlink = html.querySelectorAll('.post-link');
    let recent = '';
    for(let i = 0; i < postnum; i++){
      recent += '<li><a href="' + postlink[i].href + '">' + postlink[i].innerHTML + '</a></li>\n';
    }
    document.querySelector('.recent-posts').innerHTML = recent;
  });
})();
//]]></script>

前項の XHR とやっていることはほぼ一緒。個人的にはこっちのほうが行数が少なくて済むし、流れも比較的わかりやすく感じる。

先述のアクセス数加算の問題があるから積極的に使いはしないかもだけど、覚えていて損はない API だと思った。

あとがき

フィードを使わずにトップページ以外で最新記事を表示させるべく、JavaScript でなんとかしてみた。

何度も言うように最新記事表示のたびにアクセス数が増加するのはかなりネックだけれど、本家のフィードを使う方法もそうであるように記事の新規投稿やタイトル・URL 変更に瞬時に対応できるところは結構な利点に感じる。

編集
新しい投稿 前の投稿
ホーム