作ったもの
高校時代に、東海中学・高等学校の第134回記念祭向けWebサイトを作りました。Nuxt 2とVuetifyで作った静的サイトです。
知人にデザインを依頼し、最低限の告知とSNS導線の配置から作りました。OGPやTwitterカード、Google Analyticsも入れていました。今見るとかなり素朴ですが、ウェブサイト開発に一切触れてこなかった私の最初のウェブサイトとしては良い出来栄えだと感じます。
担当したところ
生成AIの存在しない時代だったので、Nuxt、Vuetify、静的生成、レイアウト、OGP、SNS埋め込みなど、何一つ分からない状態から、先輩とGoogleの助けを借りて開発を行いました。
レイアウト、イラスト、文章はそれぞれ別のメンバーが担当していて、私はそれをWeb上に組み込む役割でした。デザインの注文を受けて、Vuetifyのグリッドやカードで実装を行いました。今の基準で見ればコンポーネント分割もCSSも荒いですが、きれいな設計よりもまず期日までに公開できることが大事だと考えていました。
Cloudflare Pagesは当時SSRをサポートしていなかったため、問い合わせフォームとしてGoogle Formsをラップし、簡易的にreCAPTCHAで保護して配置していました。
周辺システム
当時は新型コロナウイルスが流行していたため、文化祭は完全予約制での開催となりました。予約の管理をするにあたって必要だった予約システムにはVercel、Nuxt、Vuetifyを使い、認証にはFirebase AuthenticationとGCP IdPを使いました。バックエンド側にはAzure FunctionsとAzure SQL Databaseが使われ、Firebase Admin Java SDKでBearer認証を行う構成です。
QRコードの扱いも、校内に生徒が自由に使えるWi-Fiが整っておらず、常時接続できる端末も用意しづらかったため、各クラスには入場情報をローカルDBに保存したタブレット端末を配布し、各日終了後にインターネット環境下でAzureへ吸い上げる方式をとりました。そのため、QRコードにはUUIDだけでなく、氏名や来場者種別をMessagePackし、さらに暗号化した情報を入れていたようです。
この周辺システムに関しては主に私の上司にあたる先輩が開発を担当していました。私はデバッグ程度にしか携わっていませんでしたが、近くに凄腕プログラマーがいることは私にとって大きな刺激となりました。
当時の難しさ
高校の文化祭ウェブサイトは、実行委員会の中でなんとかWeb担当を選出して、なんとかウェブサイトを作るという方式でした。仕様書があるわけでもなく、多くの人の意見を聞き、助けを得ながら少しずつウェブサイトを組み立てていきました。今ならもっと整理して進められると思いますが、当時はとにかく動くものを出すのに必死でした。それでも初めてのWeb制作として、ルーティング、静的生成、レスポンシブ、SNS埋め込み、アクセス解析まで触れたのは大きな自身につながりました。
所感
このときの開発は、今見ると技術的に洗練されているとは言いづらいです。むしろ、未整理なところがたくさんあります。それでも、学校行事の公式サイトを自分たちで作って公開した経験は、その後の開発に大きな影響を与えました。自分のつくったウェブサイトを、同級生や来場者が見るという経験を通じて、ウェブサイト開発のやりがいを知ることができました。
リンク
kinensai.jp (現在のウェブサイトです。私が開発したウェブサイトとは異なります)