去年辺りからマイペースにだが、Google スプレッドシートでコンテンツ管理ができて、かつ、AMPに最初から対応しているCMS的なものを作ってきた。 これをCMSと読んでいいものか、今このブログを書きながら少し疑問に思ったが、コンテンツを管理できるシステムでもあることから、一応はCMSを名乗っても良いかと思い直し、このままCMSと書かせていただく。
ずっとプライベートリポジトリで時間を見つけては開発をしてきたが、そのうち公開リポジトリに移そうと思っていたので、本日公開リポジトリに移した。
今まではJavaScriptで書かれていたが、公開前に大半のコードをTypeScriptに移行し、かつ、eslintやhuskyなどの設定も行った。
ここらへんの作業は急ピッチで進めたので、例えば@ts-ignoreでしのいでいるところとかがあったりするが、ここはまあ、今後解消していこうという流れにした。
リポジトリはこちら。
サクッと手間なくAMP対応のウェブサイトを作れる手段が欲しかった
去年辺りからAMPに対応したウェブサイトをサクッと作れる手段を探っていて、Next.jsをベースに色々と試していた結果として、この Habanero Beeが生まれた。
このツールを作るにあたって、自身のポートフォリオサイトで採用した手法を結構取り込んでいて、わかりやすいところだとサイトの基本的なデザインなどもこちらのサイトとほぼほぼ同じものとなっている。
また、この Habanero Bee は最終的に開発者以外の人にも使えるようにしたいと思っており、直接プロジェクト内のmarkdownやコードをいじってコンテンツを作成・修正するのではなく、Googleスプレッドシートを用いてコンテンツを管理できるようにした。
なお、似たような設計としてHeadless CMSなどと連携させる手法もあるが、Google スプレッドシートであれば割と敷居高くなく触れる人も多いだろうということで、こちらを採用した形となる。
Google スプレッドシートにコンテンツとして出力する内容を記載し、Netlifyのデプロイボタンを押すことでAMP対応のサイトを簡単にデプロイできる、というのが Habanero Bee の特徴となる。
なお、今書いたとおり、このツールを使うにはGitHubとNetlifyのアカウントが必須となる。
「おいおい、それじゃ、やはり開発者以外の人には敷居が高いんじゃないか？」と突っ込まれそうである。
確かにそこは指摘のとおりだが、そこはドキュメントでカバーかな...という感じである。
あまりそういう解決法はスマートではないと思うが、ドキュメントを見ながらデプロイまで行うのはそこまで難しくはならなそうだし(それほど手順は多くならなそうな気がしている)、何よりこの設計の場合、そこまでたくさんのアクセスがないサイトであれば、サイトホスティングのための代金についてはNetlifyの無料のプラン内でいける、というのも優位性の一つとなる。
サイトを作成・運用したい人がgitコマンドなどを触ることなく管理ができるし、やはりこの設計のまま進んでいってみようと思う。
というわけで、まだまだ色々と先がぼんやりとした状況ではあるが、そのようなイメージで少しずつ開発を進めていこうと思う。
なお、プロジェクトのロゴもまだないが、これについては現在作成をお願い中なので、完成が楽しみな状況である。
GitHubにてIssueやPRもいただけたら幸いです。
