【Blogger】短い新着情報をページで自由に投稿して、TOPページに表示させる

ここまでのあらすじ

カクヨムでよくWeb小説を読んでいるのですが、特にお気に入りの作品が、毎日更新されています。

が、時々更新されていない時があって、その時に近況ノートを見にいくと、「ネタ出しのため、◯日まで休みます」と書かれていることがあるんですよね。

定期更新がない時、こんな感じでお知らせがあるとなんとなく安心しますし、再開日まで楽しみに待っておこ！という気持ちにもなります。

ってわけで、自ブログにも、こういう短い休載情報や、その他お知らせを載せられる機能が欲しくなった、ってワケ...( ˘ω˘ )

いざ実装

ということで、実装しました。

こんな感じで指定のページに書き込んで投稿すると、

こうなる（TOPページアクセス後、表示に数秒かかります）。

更新のたびにいちいちコーディングし直すのは面倒なので、info専用のページを準備し、その中身をエディタ側から更新するだけで、自動で情報が反映されるような仕組みを作ってみました。

やってることとしては、投稿のデータをBlogger APIで取得してきて、それをJSで差し込んでいるだけです。シンプル！

実装方法

まず、コードはこちら。

今回は、TOPページのブログ記事一覧の上部に、infoが表示されるのをゴールとします。

一つ目のコードは、

使っているテンプレートのコードにもよりますが、

 <div class='blog-posts hfeed container'></div>の中に入れました。

こんな感じになった

ざっくり解説すると、

<b:if cond="data:blog.url == data:blog.homepageUrl">

というのが、いまいるページがTOPページだったら、という分岐です。

ここに、 id="short-info-page-title"と id="short-info-page-content"の要素を入れたらOKです。

styleベタ書きなのは手抜きです。ほんとはCSSでまとめて書いた方がいいよ。

---

二つ目のコードは、</body>の直前あたりに入れておけばOKです。

こちらもざっくり解説。

<b:if cond='data:view.isHomepage'>

というのが、いまいるページがTOPページだったら、という分岐です。

var blogId = "ここにBLOG ID";

var pageId = "ここにPage ID";

var apiKey = "ここにAPI KEY";

ここはそれぞれご自身のIDで置き換えてください。

BLOG IDは、投稿画面のリンクに出てくるURLの末尾の数字です。

オレンジの部分。

PAGE IDは、info用ページの作成画面のURLの末尾の数字です。

今回は投稿でなく、固定ページを使っています。

オレンジがBLOG ID。後に続く青がPAGE ID。

API KEYは、Google Cloud consoleに入って作成しましょう。

左の「認証情報」を開き、真ん中の「認証情報を作成」からAPIキーを選択すれば作れます。

緑の部分がAPIキー

ためしに、このURLをブラウザで叩いてみましょう。

https://www.googleapis.com/blogger/v3/blogs/${blogId}/pages/${pageId}?key=${apiKey}

https://www.googleapis.com/blogger/v3/blogs/1234567890/pages/1234567890?key=apiKeyIsHere

みたいなリンクになるはず。

こんな感じで、info用ページ内のデータが取れてたら成功！

もし400が返ってきたら、おそらくどこかの情報が違うので、修正しましょう。

あとは、データをfetchしてきて、もし投稿本文があるなら、infoのタイトルと本文を挿入するようにしています。

なければデータが表示されないようにしたので、特に新着情報がない場合はページ側で本文を空っぽにしておけば、TOPページに表示されなくなります。

あら便利ね〜！（自我自賛）

また、投稿側で色を変えたり、太字にしたりすれば、ちゃんと反映されます。

あら便利ね〜！（2回目）

まとめ

ということで、Bloggerで、新着情報を簡単に投稿できる機能を作ってみた日記でした。

これで安心して休載できそうだ。知らんけど。

それ以外の情報でも、気まぐれに更新するかもしれないので、時々のぞいてみーてね！＼( 'ω')／