Bloggerのフィードからブログカードを一気に作成（３）ー使い方ー-しろうとチャリ改造日記

前回の記事でブログカードを作るJavaScriptについて解説しました。

Bloggerのフィードからブログカードを一気に作成（２）ーJavaScriptで実装ー

ブログ内に関連記事やおすすめの記事などのリンクを入れる際に、画像、題名、要約をまとめてブ ...

上の記事の最後に記載したコードをメモ帳などにコピーして適当な名前(blog-card.htmlなど)で保存してブラウザから開けばよいですが、この記事内の下にコードを埋め込んだので使ってみてください。

Bloggerのフィードを取得する

まずはBloggerの設定でフィードを取得できるようにしましょう。「設定」－「サイトフィード」－「ブログフィードを許可」で「完全」を選択します。

Bloggerで記事のフィードを取得するには、ブラウザに下記アドレスのうちいずれかを入力します。ブログIDは、Blogger管理画面にログインした際にURLに現れる数字の列です。

https://独自ドメイン名/feeds/posts/default
https://ブログ名.blogspot.com/feeds/posts/default
https://www.blogger.com/feeds/ブログID/posts/default

デフォルトでは数記事しか取得されません。published-min, published-maxパラメータで指定した期間の記事を取得できます。例えば、www.bchari.comから2018/9/16～2021/5/14までの記事を取得するには、ブラウザに下記アドレスを入力します。

https://www.bchari.com/feeds/posts/default?published-min=2018-09-16T00:00:00&published-max=2021-05-14T23:59:59&max-results=200

するとAtom1.0形式のフィードが表示されます。これをfeed.xmlなどの名前をつけて保存します。

ブログカード作成ツール

「ファイルを選択」ボタンを押して上で保存したファイルを選んだらテキストボックスに前記事のブログカードのHTMLが表示されます。

改善点

とりあえず自分で使う分にはこれをコピペして、エディタで開いて記事名を検索して貼り付けすれば十分ですが、記事名、投稿日、タグ、ブログカードと一覧にしてCSV出力すれば便利ですね。Pythonだと簡単にできるのですが、JavaScriptだと面倒そうで実装できていません。また、記事のスニペットをpタグで囲んでいない場合やサムネイル画像を指定したclassやidの画像を取るようにするなど、利用のしかたはいろいろあると思うのでこれを参考にいろいろ変更してみるのをおすすめします。

ということで、ブログカードを一気に作成でした！