運営 アドカレ2024

KINKI KNIGHTSのブログシステム

KINKI KNIGHTSのブログシステム

皆さんこんにちは。KINKI KNIGHTSのラーメンおじさんです。

この記事はKINKI KNIGHTSアドベントカレンダーの6日目の記事になっています。 12月1日からクリスマスまでの25日間、KINKI KNIGHTSのメンバーがロボコンや団体に関連する記事を、 様々なテーマで毎日綴っていきます。 お楽しみに！！

ここ四年間ほどはロボコンの人になっているラーメンおじさんですが、 実は大学入学当初はWeb系に興味があり、就職もその方面に進む物だとばかり思っていました。

ロボコンとの出会いで人生設計を大きく狂わせられてしまったわけですが、 過去に少し勉強したWeb周りの技術で、KINKI KNIGHTSのインフラ班的な立ち位置をやらせてもらっていたりします。

今回は、このアドベントカレンダーで使用されているKINKI KNIGHGTSのブログシステムについて紹介しようと思います。

システム概要

KINKI KNIGHTSのブログシステムは「誰でも簡単に投稿できる」をモットーに構築されています。 ロボコンのための団体なので、ブログの管理に手間とお金がかからないようシステム設計をしました。

esaを用いた記事執筆システム

ブログの管理・編集にはesaを採用しています。 esaはマークダウン形式で記述できるドキュメント共有サービスです。

特殊な記法への慣れを必要とするMediaWiki等と異なり、マークダウン形式で複数人が同時編集できるほか、 記事をフォルダ階層に分けて管理することができるのが大きな特徴です。

KINKI KNIGHSTではドキュメント管理にesaを日常的に使用しており、 会議議事録や仕様書、技術関連のノウハウなどを管理しています。

ブログシステムの導入にあたってCMSの使用も考えましたが、 エディター機能が優秀なのと、日常的に全員が使用しているツールであることから、 esaを用いて記事の管理・編集を行うことに決めました。

esaのGithub連携

esaで書かれた記事からサイトを生成するために、esaのGitHub連携機能を活用しています。

この機能が非常に優秀で、esaの特定の階層に保存された記事が更新されるたびに、その階層の中の記事を全てGitHubリポジトリにPushしてくれます。
esaの管理画面から簡単にGItHub連携の設定ができます。 image.png (23.0 kB)

GitHub連携の他にもesaのAPIが用意されており、こちらを叩いて記事を取得するという方法も検討していました。 しかしGitHub連携の方がシンプルな仕組みと設定で済むため団体内でロストテクノロジーになりにくいことと、後述する静的サイトジェネレータとの相性が良かったことからこちらを採用しました。

記事の設定

ブログ記事のタイトルやサムネイルは記事の最上段にTOMLを記述することで設定できるようにしています。 タグ等を設定することで、カテゴリごとに記事をまとめたページも生成されるようになっていたりします。

esaには、設定した特定のドメインのJavaScriptの実行を許可する機能があり、これを利用してTOMLをバリデーションしてプレビューに表示しています。 image.png (86.5 kB)

ブログの生成

esaで記事を保存すると、GitHubへのPushをトリガーとして、GitHubActionでブログの生成処理が走ります。 esaからブログ掲載対象の記事が全てマークダウンで吐き出されるので、冒頭のesaが生成したTOMLとブログ設定用のTOMLをいい感じに前処理します。 image.png (79.2 kB)

マークダウンからブログを生成するために、静的サイトジェネレータの一種であるHugoを使用しています。 リクエストのたびに動的にページを生成するWordpress等とは異なり、あらかじめサイト全体を静的サイトジェネレータで生成し、 ホスティング環境には生成した静的ファイルのみを置いておくというものです。 サーバーで動的処理を行う必要がないのでサーバー代が節約できます。

サイトのホスティングにはFireBaseのAppHostiongを使用しています。 今考えるとGitHubPagesでもよかったのですが、サイト作成当時は団体の3DプリンターやCNCを遠隔制御・監視できるポータルを作ろうという企みがあり、動的処理もいい感じにできるFireBaseを採用したという経緯があります。 こっちの企みの方は結局やっていないので、管理がめんどくさくなったらGitHubPagesに移行するかもしれません。

最後に

今回はKINKI KNIGHTSのブログシステムの構成について紹介しました。 正直今のWeb技術を追いかけれていないので、あまり参考にならないかもしれませんが、 楽しんでいただけたら幸いです。

最後までお読みいただき本当にありがとうございました！ 明日はまぁるいたこ焼きさんによる、ポケモンだいすきクラブの記事です。

ポケモン？KINKI KNIGHTS？お楽しみに！！

今後も、KINKI KNIGHTSとアドベントカレンダーをよろしくお願いいたします！！

お知らせ

KINKI KNIGHTSでクラウドファンディングを開始しました。

皆様の応援をよろしくお願いします！


All News →