静的ホスティングサービスNetlifyで定期更新されるイベント掲示板を作った。

はじめに

転職し業務でプログラミングに関わり初めて一年が経ちました。しかし、全くアウトプットしていないなぁと思い、個人開発に挑みイベント投稿掲示板サイト「イベントボードforVRC」を作成しました。

目的

最近個人的にハマっているゲームのVRChatなるものがありまして。
そこで開催されるイベントを投稿、確認できるサイトを作成しようと思いました。

VRChatとは

VRChatとは？はじめ方や必要な機器、人気ワールドを紹介！【2024年3月版】

アバターを使ってバーチャルの世界で他の人たちと交流できるアプリです。

なぜ作ろうと思ったのか

と言っても既にVRChatイベントカレンダーというサイトが存在します。

ではなぜ作ろうと思ったのか。

自分のほうがもっといいものを作れるから！

既存のイベントサイトではイベントの登録やデザイン（googleカレンダーを使用しているため）に制限があると感じたため、もう少し柔軟なデザインや登録ができるサイトを作ろうと思ったから。

個人的な条件

• アウトプットも兼ねてるので最近使用しているreactを使用すること
• お金をかけたくない
  以上

ただイベントを表示するだけならアプリの中にイベント情報を持たせて、その情報を使用するだけでいいかなと。そうすれば、静的ホスティングサービス一つで運用できる！（静的ホスティングサービスなら無料で扱えるものも多いし）ただ、その情報をどうやって更新するかが問題。手動で毎回変えてでデプロイし直すわけにもいかないし。。。

ということで、考えたのがこちら。

無料で使用できる静的ホスティングサービスを調べているとNetlifyであればGitHub actions使用すると自動でデプロイをしてくれるみたい。

これなら、あとはGASからスプレッドシートの情報をリポジトリに書き込んでGitHub actionsでNetlifyデプロイすれば完了！

完璧だ！

イベント情報が更新されるまでの流れ

1.ユーザーがgoogleフォームからイベント情報を入力

2.スプレッドシートにイベント情報が保存される

3.定期実行されるように設定しているGASを実行

1.スプレッドシートの情報しjson形式へ整形

2.githubAPIを使用しイベント情報をリポジトリへ書き込み

4.コミットされたことを検知しworlflowが実行

1.ビルドしNetlifyへデプロイ

意識したこと

定期実行されるように設定しているGASを実行

フォームから送信したタイミングでGASを実行すれば即反映とまではいきませんが、比較的早く反映できたのですが（送信されるたびにビルドされるため）無料枠でビルドできる時間にも制限があるので定期実行にしスプレッドシートからまとめて更新することにしました。

githubAPIを使用しイベント情報をリポジトリへ書き込み

GitHubAPIを使用する際にトークンが必要で最初はPersonal access tokensを使用していたのですが、期限があるため手動で更新しないといけない無期限はセキュリティ面であまり良くないので無し。ということで、GitHub Apps の Access Token を取得する方法で必要なタイミングでトークンを発行する方法で行くことにしました。

その際に下記を参考にさせていただきました。
https://zenn.dev/hankei6km/articles/fetch-github-apps-token-by-google-apps-script

コミットされたことを検知しworlflowが実行

Netlifyでもビルドはしてくれるのですが、時間が300分と少なく超えてしまうと課金が始まってしまうのでNetlify側でのビルドの設定をオフにしGitHub Actionsでビルドするようにしました。（GitHub Actionsではパブリックリポジトリ: 無制限）

イベント表示ページ

画面全体のスクロールはしないようにし、開いた時の画面で全ての項目の情報が完結するように意識しました。

また、開催中のものと開催予定で分けサイドのボタンでカテゴリわけできるようにすることで必要な情報をわかりやすくしてみました。

赤枠の箇所では現在はランダムでイベントをピックアップするようにしています。
イベントが多くなった時に埋もれてしまってもイベントを見つけてもらえるようにするための措置

イベントをクリックすると詳細が確認できるようになっています。

スマホ用の画面

先ほどのページをスマホの画面で見ると見づらくなってしまうため別途スマホ用に用意しました。

以上となります。

まとめというか感想

デザインや機能に関してはまだまだ改善の余地がある状態ではありますが、とりあえず完成まで持って行くことを目標にもしちたので、結果的に形になったので良かったかなとは思います。
ただ、完成しこの記事を書いているときに知ったのですが、Netlify Functionsというサービスがあるらしくこれを使えば、回りくどいことをしなくとも、簡単にフロントエンドから関数を呼び出してスプレッドシート情報を取得することができそうでした。もっとちゃんと調べておけば良かった。
しかし、今回の開発で初めて触ったツールや知識も得ることができたので良かったと思います。
それに、Netlify Functionsを使用する方法や普通にバックエンドとデータベースを用意する方法に移行するとしても、json形式で情報を扱うことには変わらないのでそこまで移行コストはかからないと思ってます。
これを機にもっとアウトプットしていければなと思いました。