宇部高専 第61回高専祭のWebサイトを作りました

昨年の高専祭で広報部長を努めた際、宇部高専においては少なくとも4年ぶり¹にWebサイトを作りました。そして、今年もその流れでWebサイトを作らせていただきました。

正直あんまり書くようなことがないのですが、活動報告みたいな面もあるのでとりあえず書いておきます。最近このサイトに旧ブログの記事を移転した時、昔はカスみたいな内容でも記事書いてたの偉いなあ²という気持ちになったから、という理由もあります。

ところで、昨年ぼくが広報部長として取り組んだ内容を書いた記事も、よければご覧ください。こっちのほうが色々書いてて面白いと思います。

サイト概要

これです。

宇部高専 第61回高専祭https://nituc-fes61.org/2024年度 宇部工業高等専門学校 第61回高専祭「YOISYO!」 公式Webサイト | 実施日：2024年11月9日（土）・10日（日）

リポジトリはここです。

GitHub - watasuke102/nituc-fes2024: 宇部工業高等専門学校 第61回高専祭　公式サイトhttps://github.com/watasuke102/nituc-fes2024宇部工業高等専門学校 第61回高専祭　公式サイト. Contribute to watasuke102/nituc-fes2024 development by creating an account on GitHub.

昨年は二次配布を禁止しているアセットをうっかり追加してしまい、リポジトリをpublicに出来ないのですが、今年はGoogle Fontsから取ってきたアイコンを主に使っているので大丈夫だと思います。

ただし、ロゴおよびそれを用いた素材は今年の広報部長が作ったものなので、ライセンスの適用外としています。加工および再配布の許可はもらっています。

使用技術

開発に使用した技術それ自体は、昨年の最終的な構成とほぼ変わっていません。Gatsby, vanilla-extract, TypeScript, ESLint, Scaffdog, Prettierって感じです。去年との差異はStorybookおよびVitestを外したことですね。どっちもダルかったので……（カス）

これらについては特に不満はありませんでしたが、強いて言うならAstroを使う良い機会だったので使ってみればよかったかもな、と思いました。

昨年から大幅に変更した点はホスティング環境です。昨年は学内ネットに接続した上で暗号化を全て無効化した通信でなければ使えない FTP サーバーとかいう激ヤバ環境だったのですが、今年はなんとか独自ドメインを使用することに成功しました。ドメインはCloudflare Domains で買いました。

というわけなので、Cloudflare Pages でホスティングすることにしました。デプロイ環境を構築する練習として利用しようかとも思ったのですが、学校関連の情報をうちのVPSに置いておきたくないなと思ったので、Cloudflareに頼りました。なにもしていないのにpushするだけでデプロイしてくれて最高ですね。

デザイン

パンフレットと合わせるため、広報部長に選んでもらった色を使いました。以下は使用した色です。指定してもらったのは下2つのアクセントカラーで、上2つは勝手に決めました。

正直に言うと、警告色的な意味で目立ちすぎる赤っぽい色と蛍光イエローの組み合わせという感じで、デザインはかなり難しかったです。

UI的なデザインとしては、昨年度のサイトで採用したナビバー的なやつをやめて、画面右上にハンバーガーメニューとして追い出すことにしました。なんでこうしたんだっけ……？

マップ

昨年と違って経営棟が使われることになったので、表示しなければならない棟が増えました。というか、去年のWebサイトでは、そもそも展示についてのマップを表示していませんでした。

というわけで今年はちゃんと作りました。Inkscape製です。まあ去年作った校内マップを流用したのでそこまで大変ではなかったのですが、それでもこまごまとした作業が多くて大変でした。

ちなみに、「展示・バザー」ページではSVGを .tsx ファイルに埋め込んでいます。マップ内の番号をタップした時にモーダルで詳細を表示できるようにしたかったからなのですが、結局ダルかったのでやめました。

その他

スマートフォンは幅が小さいので、表やマップを一度に表示できません。というわけで、はみ出して表示させたうえでスクロール可能にし、「スクロールできますよ～」というインジケータを点滅させるようにしています。というと今年やったみたいですが、コードはほとんど流用です。

昨年からの変更点は、Intersection Observerを導入し、対象となるコンポーネントがそこそこ見えるようになってからインジケータのアニメーションを開始するようにした点です。思ってた以上に実装が簡単でうれしかったです。

薄々勘づいているかもしれませんが、けっこうな量のコードを流用しています。カウントダウン用のコンポーネントは開催日を示す変数を変えたくらいで殆どそのままだし、「マップ」ページもだいぶそのままです。

また、僕は昨年度もWebサイトにメッセージを仕込んでいたのですが、今年もやりました。イースターエッグ的な仰々しいものではなく、console.logを呼ぶだけの簡単なやつです。まあ見に行ってみてください。

ちなみに昨年は（容量削減に躍起になっていたため）英語で書いたのですが、もちろん来訪者のほとんどは日本人なので、今年は日本語で書きました。去年と違ってアホほどデカいGIFファイルとかは読み込んでいないので許してほしいです。というかログ表示部分に限って言えば、去年と比べたファイルサイズの増加量は200バイト未満らしいです。

分かる人に分かればいいやくらいの気持ちで入れていたし、そうであっても誰かに気付いてもらえたかどうかなんて知りようがなかったはずなのですが、高専祭を回っていたらなんとこのメッセージ経由で僕のことを認知してくれた人間に出会うことが出来ました。びっくりです。ありがとね～。

おわりに

高専祭において、4年間という長期にわたり、何らかの形で広報に関する仕事が出来て良かったです。今年のWebサイトは公開が予想よりだいぶ遅れてしまいましたが、10月中に完全版を公開できて良かったと思っています。以下は公開時のツイートです（反応が少なくて、かなしい）

ツイートを読み込み中...

今年は今までずっとやってきた「エンディング用の写真撮影」をせず³、完全に個人の趣味として写真撮影をしていたのですが、去年スマホで太刀打ちできなかったバンド演奏・ダンス等の写真を撮ることができて非常に良かったです。マジでカメラ買って良かったと思います。

というわけで、高専生としてはおそらく最後であるはずの高専祭を、Webサイト開発も含めて楽しむことが出来て、良かったです。