ksmxxxxxx.hatebu

11tyのブログにはてなブログの記事リスト表示するようにしてみた

JavaScript 11ty

やりたかったこと

11ty.jsで作ったブログにはてなブログの記事一覧を表示したい

f:id:ksmxxxxxx:20220305135209p:plain — 開発中のキャプチャ

docs.ksmxxxxxx.page

やったこと

axios.getで、はてなブログAtomPubのAPIを、XMLを取得するようにした
取得してきたXMLをxml2jsを使って、JSONに変換。
変換したJSONから、タイトルと投稿日時、記事のhrefを取り出してオブジェクトにする。オブジェクトを配列に突っ込む。
最新の5件だけ表示できればよかったので、突っ込んだ配列の先頭から5件をsliceした。
上記で生成した配列をJSONファイルで _dataディレクトリに保存して、11tyのGlobal Data Filesとして使えるようにした。
トップページのテンプレートに表示するためのHTML（Pug）を書く。
デプロイした時と、（いったん）一時間ごとにはてなブログの一覧を更新するようにGitHub Actionsを書く
- mainブランチにpushした時のworkflow
- mainブランチで一時間ごとに動くworkflow
- featureブランチにpushした時のworkflow

コード

ここに置いてあります。

はてなブログの記事一覧を取得してるJS

function extractBlogEntry (data) {
  const extractData = []
  for (const e of data) {
    if (e['app:control'][0]['app:draft'][0] === 'yes') continue
    const item = {
      htmldate: e.published.join('').toString(),
      displaydate: DateTime.fromISO(e.published.join('').toString()).toFormat('yyyy年MM月dd日 HH時mm分'),
      title: e.title.join('').toString(),
      href: e.link[1].$.href
    }
    extractData.push(item)
  }
  return extractData.slice(0, 5)
}

セルフレビューになるけど、for...of文で全部置き換えるより、mapとかreduceにして必要なものだけ取り出して配列につっこむ仕組みにもできたかもしれないと思った。（実際できるのかは試してみないとわからないけども）

参考記事

はてな APIキーの扱い

はてなブログAtomPub - はてなブログヘルプ

はてなブログのAPIを使うためにはAPIキーを使うことになるけど、これは第三者に見せたくないパスワードみたいなものなので、隠す必要がある。

基本的にはsecretsを使って、環境変数を作っておき、コードには${process.env.HOGE}という感じで環境変数に入ってる値を呼び出すようにする。

ローカルで開発するときは.zshrcとかに環境変数を書くこともできるし、してもいいけど変更するたびにshellを再起動したりするのもめんどくさいし、仰々しいというかスマートではないのでdotenvというnpm packageを使ってreposのディレクトリ内の.envファイルから環境変数を呼ぶようにした。

最初、グローバルにインストールして使えばいいかって思ったけど npm install -g dotenv して、ためしてみたら Error: Cannot find module 'dotenv'と言われたので、プロジェクトのnode_modulesにインストールした。

公式のオススメは--saveオプションらしいけど、ローカルでの開発でしか使わないと思うので--save_devオプションにしておいた。この辺は自分もよくわかってないので、あとで調べて必要に応じて修正するかも。

GitHubでの環境変数の設定

暗号化されたシークレット - GitHub Docs

公式に丁寧なドキュメントがあるので、ここを見ればだいたいわかる。

が、一応画像で用意しておきます。

f:id:ksmxxxxxx:20220305135404p:plain — Secretsの設定画面

GitHub Actionsのschedule

docs.github.com

f:id:ksmxxxxxx:20220305140225p:plain — GitHub Actionsのscheduleのドキュメントのキャプチャ

「よく読めや」っていわれたらそれまでの話だが、作業ブランチでscheduleを設定しても全然動く気配がなくて「なんで？？？」となっていたが、ドキュメントをよく見たら「デフォルトブランチが対象である」と書いてあった。

つまり作業ブランチでは動かない。

これはもう仕方ないので、作業ブランチをマージしたあとで確認することにした。
個人のブログだし、そこまでこだわることもないかな……と思いつつも、ちゃんと動くことを確認してからデプロイしたい気持ちがある。

ちなみに設定したScheduleは先程（2022年3月5日14:14時点）で確認したら元気に動いてくれてるようです。
よかったよかった( ˘ω˘)

🍙

はてなブログAtomPub - はてなブログヘルプをざっと読んでみると新規投稿でも使えるみたい。

VSCodeで記事を書いてそれをそのまま投稿するような仕組みにすればわざわざエディタからコピペ作業することもなく、画像を貼り直したりとかいうよくわからない作業をする必要もなくなる？って考えると夢が広がるし楽しそうなので、バックログに詰んでおきたいとおもう。