この度、手のひらサイズの格闘ロボット競技『ミニかわロボ』の公式製作ガイド&ルールをまとめたWebサイトをついに公開しました!

これまでバラバラに管理していた情報やルール、サンプルコードなどを一箇所にまとめ、これから「ミニかわロボ」を始めたい方にも、すでに楽しんでくださっている方にも、より分かりやすい情報拠点を目指して作りました。
サイトの見どころ
公式サイトでは、以下のような情報をまとめています。
- 公式ルール: 競技のレギュレーションや対戦ルール
- 製作ガイド: 初心者でも分かるロボットの作り方やヒント
- サンプルコード: 実際のロボットを動かすためのプロジェクト一式
- ギャラリー: これまでに製作された魅力的な機体の紹介
スマホからでも綺麗に見られるようにデザインしているので、作業の合間や大会会場でもサクッと確認できるようになっています!
サイト構築の裏側(技術的な工夫)
せっかくなので、今回のサイト構築でこだわった「技術的な工夫」についても少し紹介させてください。
今回は**「GitHub Pages + Jekyll」という構成でサイトを構築し、テーマにはドキュメントサイトに最適な「Just the Docs」**を採用しました。ただ作るだけでなく、運用を楽にするためにいくつかの環境構築を行っています。
- GitHub Pages: プログラムのコードを管理するサービスである「GitHub」が、無料で提供しているWebサイト公開機能です。アップロードしたファイルをそのままWebサイトとして世界中に公開してくれる、とてもありがたい仕組みです。
- Jekyll(ジキル): テキスト(Markdown)で書いた記事と、デザインの型(テンプレート)を自動で組み合わせてして、Webブラウザで読める「完成済みのWebページ(HTMLファイル)」に自動変換してくれるシステム(静的サイトジェネレーター)です。GitHub Pagesの裏側で動いているメインエンジンです。
- Just the Docs: Jekyllで使える「公式ドキュメントやマニュアルに特化したデザインテーマ」です。画面左側の見やすいメニュー(サイドバー)や、スマホ対応、サイト内検索機能(日本語非対応…)などが最初から備わっており、ルールやガイドを整理して伝えるのに適切であることから選定。
ローカルプレビュー環境の構築
毎回GitHubにアップロードして表示を確認するのは非効率なため、手元のPC(VSCode)上でサイトの完成形を確認できるローカルサーバー(jekyll serve)を構築しました。
記事の修正やデザインの調整を行った際、ファイルを保存するだけで数秒後にブラウザ上のプレビューが自動更新されるため、開発スピードが格段に向上しています。
Julesとの連携
複数ページにわたる細かい修正(例えばページ番号やリンクとか)は非常に手間で面倒な作業なので、AIに頼みました。JulesはGithub前提のAgent型AIで相性が良いです。
ある程度作業時間がかかるので離席する前に投げるのが良いでしょう。
おわりに
環境構築には少し手間取りましたが、一度ベースが完成したことで、これからはMarkdownファイルを書くだけでサクサクと情報が更新できるようになりました。
今後も『ミニかわロボ』の輪を広げていくために、サイトのコンテンツをどんどん充実させていく予定です。ぜひ一度サイトを覗いてみて、ロボット製作の参考にしていただけると嬉しいです!
引き続き、ミニかわロボをよろしくお願いいたします!