BASEプロダクトチームブログ

ネットショップ作成サービス「BASE ( https://thebase.in )」、ショッピングアプリ「BASE ( https://thebase.in/sp )」のプロダクトチームによるブログです。

Hatena-Blog-Workflows-Boilerplateつかって BASEのブログ書いてみた

<この記事はHatena-Blog-Workflows-Boilerplateによって作成されました>

皆さんこんにちは!
BASE株式会社 BASE BANK Divisionにて、Dev TOPとしてBASE BANKのエンジニア組織全体を見ている傍ら、このBASE product blogの編集長も務めている @applepine1125です。

今回は2023年9月に公開されたHatena-Blog-Workflows-Boilerplate をつかって、BASE product blogの新たな執筆フローを作ってみました。

今のBASE product blog

執筆の流れ

現在、BASEでは社内のドキュメントツールとして Notion を使っています。
Notionのデータベース機能などを駆使し、以下のような流れで執筆、レビュー、公開を行っています。

  1. Notion上で下書き記事を執筆
  2. 下書き記事のステータスを変更すると自動でブログ編集部員に通知
  3. Notion上でレビュー
  4. LGTMをもらったらはてなブログに転記
  5. 公開

改善点

Notionを使った記事公開のフローでは、ステータスの変更により自動で通知が飛んだり、コピーすればmarkdown形式でコピーされます。
はてなブログへの転記も比較的簡単なため、それなりにスムーズにフローが回っています。
しかしそもそも転記が面倒だったり、転記してフォーマット崩れの確認、修正作業が多少必要など、もっと記事執筆にフォーカスできるようにしたいなという声がちらほらありました。

そんなときに今回紹介するHatena-Blog-Workflows-Boilerplateが公開されたので、アドベントカレンダーネタがてら新しい執筆フローを試してみるか〜と思い、触ってみました。

Hatena-Blog-Workflows-Boilerplate

Hatena-Blog-Workflows-Boilerplateは、株式会社はてなさんが公式で公開しているはてなブログ執筆、運営支援用ワークフローのボイラープレートです。
このボイラープレートを使ってリポジトリを作成し、簡単な設定をすることで、PRの作成、レビュー、マージを通じてWebエンジニアの手に馴染んたフローで記事の執筆、公開、編集を行うことが出来ます。

github.com

本記事執筆時点でベータ版であり、さらなる機能拡充も予定しているそうです。
ぜひ皆さんも利用して、改善点があればissueを立てたりコントリビュートしてみてください。

Hatena-Blog-Workflows-Boilerplateを使ってみる

セットアップ

https://github.com/hatena/Hatena-Blog-Workflows-Boilerplate/blob/main/README.md に非常に丁寧に記載してあるため、何の問題もなくセットアップすることが出来ました。圧倒的感謝!

記事の作成

READMEによると、下書きの作成方法が2つあります。

下書きの作成方法は以下の2通りの方法があります。

  • ブログメンバーが個人のアカウントで投稿する(記事の署名は個人のアカウントになります)
  • ブログオーナーのアカウントで投稿する(記事の署名はブログオーナーアカウントになります)

BASEの場合、記事は個人のはてなアカウントで署名されています。

その場合、ブログメンバーが個人のアカウントで投稿する場合 の項にあるように、一度ブログの編集画面上で空の下書きを作成し、Actionsから下書きをpullしてきてPRを作成、記事の編集を行う必要があります。

画像の投稿

staff.hatenablog.com にもあるように、2023/12時点で画像の投稿機能はHatena-Blog-Workflows-Boilerplateでは提供されていません。編集画面やはてなフォトライフへ手動で画像をアップロードをしてURLを取得、記事に貼り付けて対応します。

レビュー

実際に作成されたPR

上記画像のようにPRが作成されます。
pushした時点で下書きがはてなブログに同期され、PR上に記事編集画面のURLが記載されます。 そこから下書きプレビューのURLを発行してPRに追記するか、レビュワー/レビュイーが記事編集画面経由で下書きプレビューの確認を行います。

公開

記事内のDraft設定を削除しmainブランチにマージすると記事が公開されます。簡単!

修正

通常の開発のように、対象記事を修正、PRの作成、レビュー、マージによって修正が反映されます。

執筆フローを構築してみた所感

BASE Product blogは様々な職種のメンバーが記事を書いていますが、メインの執筆者であるエンジニアが普段慣れ親しんだGitHubでのレビューワークフローに則って公開できるのは強みだなと思いました。
記事のレビューも、内容だけでなく実際の表示までまとめて確認ができるので楽だなと感じました。

また、このボイラープレートを導入したからといって、このフローにロックインされるわけではありません。
これまで通りNotionや直接はてなブログの下書きを書いてレビューするフローは残せるので、エンジニアに限らず他執筆者の手に馴染んだフローで執筆することが可能です。(あまりフローの種類が多いと大変なのである程度絞る必要はありますが・・・)

とはいえ画像の投稿は一気通貫でできるようになるとより執筆効率をあげられそうですね。今後の予定として記載されているので楽しみです。
幸い、はてなフォトライフにはAPIがあるため、自前で画像アップロードCLIなどを作ることはできそうです。今回間に合いませんでしたが、また暇なときに作ってみます。

下書き作成に関しては、記事が個人のはてなアカウントに紐づく運用の場合に一旦編集画面で空の記事を作成するフローはうまいことやって自動化したいです。どうやるといいんだろうか・・・

あとは予約投稿機能もよく使うので、その設定もできると嬉しいな〜と思いました。

おわりに

まだあくまでベータ版ではありますが、普段慣れ親しんだレビューワークフローで執筆ができるのはストレスフリーでとてもよいOSSだな〜これが公式から提供されるのはとても意義があるな〜と思いながら構築しました。
今回は一旦自分が試験的に導入しましたが、もうちょっと整備して正式なフローの一つとして加えられるようにしていきたいです!

今後の機能拡充もとても期待しています。最後になりますがこのOSSを開発してくださった皆様、本当にありがとうございます!
ぜひこの記事を読んだ皆様も導入してはいかがでしょうか?

さて、明日は@shiiyannnさんによる、「小数点の罠：メンバーシップポイント計算の裏側」です。お楽しみに!