ダンスのイベント情報をまとめたくて個人開発した話
はじめに
僕は趣味でAPOPダンスをやっています。APOPというのはアニソンやボカロなどの曲に合わせて踊るダンスイベントのジャンルで、全国各地でイベントが開催されています。
ただ、イベント情報がXやInstagramなど色々なところに散らばっていて、「来月どこでイベントあるんだっけ？」と探すのが地味に大変でした。
実は（こういう情報をまとめたサイトがあったらいいのに）とずっと考えていたんです。でも当時の自分には作る技術がありませんでした。その後エンジニアに転職して、ようやく「自分で作れるやん！」と気づいて、このサイトを作りました。
ちなみにWebサイトの立ち上げ自体は、Claude Codeを使って1日でできました。やりたいことを伝えながら一緒にコードを書いていく感じで、思っていたよりずっと早く形になりました。AIすごい。
🔗 APOP Dance Calendar: https://apop-dance.netlify.app
作ったもの
主な機能はこんな感じです。
- リスト表示 / カレンダー表示：好みに合わせて切り替え可能
- フィルター機能：地域、都道府県、主催者などで絞り込み
- キーワード検索：イベント名や会場名で検索
- X自動投稿：毎週金曜に今後2週間のイベントをまとめて投稿、毎日12時に個別イベントを紹介
特にX自動投稿は、サイトを見に来なくてもタイムラインでイベント情報が流れてくるので、自分でも重宝しています。
技術スタック
できるだけシンプルに、無料で運用できることを重視しました。
| 役割 | 技術 |
|---|---|
| フロントエンド | HTML/CSS/JavaScript（Vanilla JS） |
| データソース | Googleスプレッドシート |
| API | Google Apps Script |
| ホスティング | Netlify |
| 自動投稿 | GitHub Actions + Node.js |
なぜこの構成にしたか
Googleスプレッドシートをデータベース代わりに
イベント情報のデータは、ASHITAKAくん（b-boyでAPOPイベントのオーガナイザーでもある）が元々スプレッドシートで管理していたものをお借りしています。さらに今では全国各地のイベントオーガナイザーの方々にも協力いただいていて、各地域の情報を追加・更新してもらっています。いろんな方の協力でこのサイトが成り立っています。
スプレッドシートをそのままデータソースにすることで、普段通り更新するだけでサイトにも反映される仕組みにしました。GASでJSON APIとして公開すれば、フロントエンドから普通にfetchで取得できます。
フレームワークなしのVanilla JS
Reactなどを使うほどの規模でもないし、ビルド不要でindex.html一枚で完結する手軽さを優先しました。実際、デプロイはNetlifyにリポジトリを繋ぐだけ。
GitHub Actionsで自動投稿
毎週・毎日の投稿を手動でやるのは続かないので、最初から自動化前提で設計しました。GitHub Actionsなら無料枠で十分収まります。X APIのFree Planと組み合わせて、完全無料で運用できています。
工夫したポイント
投稿の重複回避
毎日投稿機能では、同じイベントを何度も投稿しないようにGitHub Gistで投稿履歴を管理しています。投稿済みのイベントIDを記録しておき、次回は未投稿のものから選ぶ仕組みです。
280文字に収める自動短縮
Xの文字数制限があるので、イベント情報が長い場合は自動で短縮するロジックを入れました。会場名やイベント名を適度に切り詰めつつ、必要な情報は残すようにしています。
レスポンシブ対応
ダンサーの皆さんはスマホで見ることが多いので、モバイルファーストで作りました。カレンダー表示もスマホでちゃんと使えるようにCSSを調整しています。
運用してみて
リリースしてから数ヶ月、自分自身がユーザーとして毎週使っています。「あ、来週このイベントあるんだ」とX投稿で気づくことも多くて、作ってよかったなと思います。
ダンス仲間からはもちろん、知らないフォロー外の方からも「こういうの待ってた！」とリプをいただいたときは本当に嬉しかったです。自分が欲しかったものは、他の誰かも欲しかったんだなと実感しました。
今後やりたいこととしてはなんだろう・・・ある程度自分のやりたかった事は実現できたので、「こんなの欲しいです！」というようなものがあれば、こっそり教えてください！
おわりに
「自分が欲しいものを自分で作る」という個人開発の醍醐味を、好きな趣味で実現できて本当に嬉しいです。
技術的には特別なことはしていませんが、Googleスプレッドシート + GAS + GitHub Actionsの組み合わせは、小規模な情報サイトを無料で運用したい場合に使えると思います。
同じように「この界隈のイベント情報まとまってないな」と思っている方の参考になれば嬉しいです。
Discussion