Webページ作成覚書: Blogger：投稿一覧を表示する（更新順、ラベルごと）

Bloggerから投稿一覧情報を取得して、各ページにリンクを貼った目次を作成する。
取得できる情報は今のところ以下の通り。
　タイトル
　リンクのアドレス
　作成日
　更新日
　ラベル

以下のコードをBloggerのHTML編集モードで貼りつける。
貼りつけた後、編集すると不具合が発生する場合があるので、編集する場合は別のエディタで編集してから貼りつけて、そのまま公開ボタンをクリックする。
以下の例では、ラベルに"javascript"がついた投稿を作成日順にソートして表示する。

コード

<!-- これを全部コピーして貼り付けること。bloggerのhtmlエディタで編集するとエラーが出る -->
<div style='margin:0.5rem;'>
  <a href="https://s104bntmp.blogspot.com/2015/10/javascript-javascript.html">javascript とは</a>
</div>
<div style='margin:0.5rem;'>
  <a href="https://s104bntmp.blogspot.com/2020/04/javascript-jquery.html">基本形（jQueryを用いたスクリプトの基本形）</a>
</div>
<div style='margin:0.5rem;'>
  <a href="https://s104bntmp.blogspot.com/2013/10/javascripttips.html">TIPS</a>
</div>
<div style='margin:0.5rem;'>
  <a href="http://s104bntmp.blogspot.jp/2013/10/jquerytips.html">jQuery：TIPS</a>
</div>
<script type="text/javascript">
 
function loadtoc(data) {
 
    let entry = [];
 
    for (i = 0; i < data.feed.entry.length; i++) {
        //   ラベルの探索
        let label = [];
        if (data.feed.entry[i].category) {
          for (let j=0; j<data.feed.entry[i].category.length; j++) {
            label.push(data.feed.entry[i].category[j].term);
          }
        }
        
        // リンク先の探索
        let href;
        for (j = 0; j < data.feed.entry[i].link.length; j++) {
            if (data.feed.entry[i].link[j].title == data.feed.entry[i].title.$t) {
              href = data.feed.entry[i].link[j].href
            }
        }
 
        entry[i] = {
          title: data.feed.entry[i].title.$t + " (" + data.feed.entry[i].published.$t.slice( 0, 10 ) + " 作成)",
          href: href,
          label: label,
          published: data.feed.entry[i].published.$t,
          updated: data.feed.entry[i].updated.$t,
          summary: data.feed.entry[i].summary.$t
        };
    }
 
    //   並べ替え（作成順）
    entry.sort(function(a,b) {
        return (a.published < b.published ? 1 : -1);
    });
 
    for (i = 0; i < data.feed.entry.length; i++) {
      if ( entry[i].label.includes("javascript") ) {
        document.writeln("<div style='margin:0.5rem;'><a href=\"" + entry[i].href + "\">" + 
            escapeHTML(entry[i].title) + "</a><br /></div>");
      }
    }
 
    // テキストをエスケープ処理する
    function escapeHTML(html) {
 
        var div = document.createElement("div");
        if (div.innerText !== void 0) div.innerText = html;          // innerText が定義されていれば innerText へ設定
        else div.textContent = html;                                 // Firefox のように innerText がないブラウザ向け
 
        return div.innerHTML;
    }
}
 
</script>
<script type="text/javascript" src="https://s104bntmp.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=loadtoc&max-results=500&redirect=false"></script>

以下の部分で投稿情報を取得して、loadtocにコールバックしている。
"s104bntmp.blogspot.com"を自分のブログに変更してください。
scriptタグの前のdivタグは関係ない（このようにhtmlと組み合わせることも可能）。

<script type="text/javascript" src="https://s104bntmp.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=loadtoc&max-results=500&redirect=false"></script>

参考：
Blogger:投稿一覧を作成する-最もシンプル
Blogger のフィード URL 構成とパラメタ― まとめ

以上

ページ

2020-07-01

Blogger：投稿一覧を表示する（更新順、ラベルごと）

コード