27Tech での企画のために初対面の相手とお話するときに話題が枯渇していまうのを回避できる web アプリ「話題提案サイト」を作成しました。
27Tech とは
27Tech は、名古屋の 27 卒学生の交流を深め、X,Qiita など外部への情報発信を活発に行なっていく仲間との出会いを目的とした学生エンジニアコミュニティです。
話題提案サイト
今回制作したアプリはランダムで会話のタネとなるテーマを 3 つ提供します。話題は何度でも交換可能で話したい話題が見つかるまで抽選ができます。
デプロイ先はこちら
https://27-tech-topic-words.vercel.app/
目的
エンジニア系イベントに参加する時点で他の人と話したいという気持ちはあるのでしょうが、実際に会場で初めましての人と話すのは難しいです。特に懇親会のみの形式だと話始めに話題を見つけるのが大変だという課題があります。そこで一番初めの話題作りをサポートする企画を催し、アプリとしてローンチしました。
構成
フロントはNext.js(TS + CSS Modules + Biome)で構築されており、データはGoogle Spreadsheets と Github を GAS で連携させて同期するようにしています。
デプロイには Vercel を利用しています。
webにした理由
もともとアプリではなく、紙を使ってアナログにやる予定でした。印刷する枚数自体も膨大な数にはならないですし、印刷も大学の施設を借りれば負担は少ないです。しかし印刷用のフォーマットを用意したり、そのフォーマットに合わせて、話題を差し替えて印刷するというの手間がかかるためなるたけ楽な方法が取れないかを模索し、真っ先にwebに辿り着きました。webサイトはそのまま印刷が可能なので、フォーマットをマークアップで書いてしまえば簡単にデータの差し替えが行えます。話題の提案を複数人で行うためにスプレッドシートを利用していたのですが、まだまだ話題のテーマが挙がっていない状態だったので、後から内部のデータを変更可能できるという意味でもwebを採用しました。
データの管理
共同でデータの編集を行いつつ、追加されたデータで随時webアプリの更新を行いたいと考えていました。そこでスプレッドシートでの編集を継続したまま、集まった話題のテーマを随時 Github に同期するように実装を行いました。GASを記述し、任意のタイミングでスプレッドシートの内容を csv として Github 上のレポジトリ（mainブランチ）にプッシュするようにしました。 デプロイを行なっている Vecerl が Github の変更をみて再デプロイを行なってくれるためスプレッドシートを操作するだけで、ハードコーディングを行わずに済むようにしていました。
終わりに
1 日 4 時間のハッカソンの末に作成しました。ぱっと思いついたアイデアをパッと作成できるのが web のいいところですね。みんなが使えるようなアプリを生み出して、実際に使ってもらってフィードバックを得るというルーティンを繰り返しやすいのが便利だと感じます。ネイティブの機能に依存したアプリではこうはいかないので…。
最初は紙でやる予定だったのですが、web上で閲覧できるフォーマットが完成した時点で同じサークルの子に見せたら、このままwebアプリとして提供すればいいんじゃないかと言われてそのまま少し体裁を整えてwebアプリとして提供するように決めた経緯もあります。情報系のイベントですし、このイベントのために作ったサービスとかちょっといいかなと思ったりもしました。会場で冗談で「バグがあったら教えてください」と言ったら、キラキラと目を輝かせて見つけたバグを報告してくれる人もおりましたで、間違いではなかったのかなと思っています。でもそんなに熱心にバグを探さなくてもいいんだよ。
久しぶりの実用的なwebアプリの開発で楽しかったのですね。今の開発の本筋は XR なので、今回みたいにアイデアが生まれたとき、そのアイデアを活かせるときがあったらまた開発していきたいですね。それでは。