高校在学中に作ったウェブサイトとシステムをまとめた
久しぶりに記事を書こうと思い、何にしようかな〜と考えた時に、これまで作ったシステムとウェブサイトをまとめておこうと思い、まとめていきます。
2022年
学園祭、体育祭、予餞会のウェブサイト
- 使用技術: STUDIO
- 開発期間: それぞれ1週間から2週間
- URL: 非公開
高校入学後からウェブサイトの作成を行っていました。
現在は全て非公開になっていますが、これまでになかった取り組みということもあり、かなり注目を集めました。
2023年
学園祭、体育祭のウェブサイト
- 使用技術: STUDIO
- 開発期間: それぞれ2週間
- URL: 現在非公開
高校2回目の学園祭、体育祭はどちらも一般入場が可能ということで、前年に比べてさらに作り込みました。ウェブサイトを作ってる間に、別のレジシステム等も開発していたので、とても過酷な2ヶ月くらいでした。
学園祭のレジシステム
- 使用技術: Next.js / Chakra-ui / FastAPI / MySQL
- 開発期間: 1ヶ月
- URL: 内部システムのため非公開
一般入場が行われることを受け、学園祭で使用するレジシステムを開発しました。初めてNext.jsを用いたシステムで、障害等が発生しない様にするために、技術選定もかなり考えて行いました。
オープンスクール用のチェックインシステム
- 使用技術: Next.js / Chakra-ui / QRコード
- 開発期間: 1週間
- URL: 内部システムのため非公開
オープンスクールに、1000人以上来場されることがわかったため、これまでの名簿を用いたチェック作業が困難になったため作成しました。オープンスクールのエントリーシステムが出力するCSVをシステムに取り込み、利用者にQRコードを発券するためのウェブサイトのURLを送信することで、予約情報の確認とQRコードの発券ができます。オープンスクール当日は、担当生徒が自分たちのiPadを用いてQRコードをスキャンもしくは、名簿から名前を選択することによってチェックインすることができます。
共学化制服特設サイト
- 使用技術: Next.js / TailwindCSS
- 開発期間: 1週間
- URL: https://2030.hfhs-digital.app
2025年、東福岡学園は「NEXT HIGASHI 2030」を掲げ、共学の道を歩み出すこととなりました。その際、新制服のデザイン案に関する意見を募集する必要があり、制服をまとめてみられるページを作成したいと思い作成しました。なぜか、作成依頼の週の最終日がサイトの公開日というハードスケジュールで依頼され、ブチギレながら作成したため、いまいちよろしくないデザインのサイトができました。もう二度とやりたくありません。
予餞会ウェブサイト
- 使用技術: Next.js / TailwindCSS
- 開発期間: 1ヶ月
- URL: 内部公開のためなし
3年生を送り出す予餞会のウェブサイトを作成しました。毎日ゲストの情報を1個ずつ公開していくことで、生徒を飽きさせない工夫をしていました。
修学旅行のSNSサイト
- 使用技術: Next.js / Firebase / Cloudflare R2
- 開発期間: 1ヶ月〜2ヶ月?
- URL: 内部向けシステムのためなし
修学旅行で、SNSに投稿することが禁止されており、写真を保護者や周りの友達と共有することができないという生徒からの不満を解決するために作成しました。これは先輩との共同制作で、ほとんど先輩がバックグラウンドを作ってくれました。評判としては、保護者にも生徒にも教員にも評判がよく、実施してよかったなと思います。安全に運用するために、システムへ投稿されたものはすぐに生徒・保護者に公開されるのではなく、一度先生方のチェックが必要という仕組みにしました。また、認証部分には学内で使用しているシステムを用いており、クラスの情報等はこちらで一切管理しないでいい様にしていました。
なんと投稿された写真数は、驚異の1万枚でした。めちゃくちゃみんな楽しんでいました笑
2024年
3年生になったので、ここからはかなり小規模です。
学園祭のサイト
- 使用技術: Next.js / Newt CMS / TailwindCSS
- 開発期間: 1ヶ月(デザイン込み)
- URL: https://schoolfes.hfhs-digital.app/
男子校最後の学園祭ということもあり、これまで以上にかっこいいウェブサイトを作ろうと同級生の子と5月に決意しました。そこからその子と2人で夜中まで作業を繰り返していき、めちゃくちゃ満足のいくウェブサイトに仕上がりました。大正レトロをモチーフにしたまとまりのあるウェブサイトに仕上がったのではないかと思います!ちなみにこのロゴもデザインを担当してくれた子が作ってくれました。本当に才能の塊だと思います。とにかく作っていて楽しかったし、先生方からもかなりお褒めの言葉をいただきました。ただ、一つ悔いなのは、企画の詳細情報を載せる暇がなかったことですね。これに関しては、完全に生徒会の連携ミスで、模擬店面接がギリギリまで終わらず、企画の詳細を生徒たちに書かせる暇がなかったことが原因です。来年に期待。
体育祭のサイト
- 使用技術: Next.js / Newt CMS / TailwindCSS
- 開発期間: 1ヶ月(デザイン込み)
- URL: https://sportsfes2024.hfhs-digital.app/
入試準備、連日の体育祭練習の運営、7月から22時まで毎日会議、吹奏楽コンクールの練習を行なっていたことにより、全く時間がない中で作成していったサイトです。その割にはカッコよくできてる...と思います(思いたい)。ただ、これも上と同様で時間と自分の中での体力のキャパシティがなく、一番未完で終わってしまいました。(これに加えて練習のハイライトの動画編集もしてたので、結構マジで体力が残ってませんでした。)しかし、後輩にCMSの管理を任せることができ、後輩が自らページを作成してくれていたので、彼の成長には間違いなく近づいたと思います。彼が来年どんなサイトを作るのか非常に楽しみ。
唯一こだわったポイントとしては、トップページのHero部分ですね。かなり位置を調整したりして頑張りました。
ちなみにこの時、適当に同期の友達に「なんか予告編的な動画欲しいんだよねー、作ってくんね？」って言ってみたら、めちゃくちゃクオリティ高い動画を持ってこられて、ビビり散らかしました。もしよければそちらもご覧ください:
高校3年間を振り返って
記事を書き始めて思いましたが、意外に色々作ってるんですよね。意外に。
いろいろな面の調整等でめちゃくちゃ苦労しましたが、同じ生徒会執行部の仲間、先輩・後輩、そして何より僕と出会ってしまったがために、僕の怒りを２年間聞かされていた顧問に感謝です。
特にこの顧問と生徒会長がいなければ、本当にストレスで大変なことになっていたと思います。しかし、いろんなことにチャレンジできる環境が整っていたという部分に本当に感謝だなとしみじみ思います。
また、高校3年間はプログラミングだけでなく、最後の1年はInstagramのアカウントの運用等もさせてもらえて、生徒一人一人の笑顔であったり、努力等を間近で見る機会も多く、本当に勇気づけられたと共に、「こういう投稿してほしい!」, 「この投稿めちゃくちゃよかった!」と声をかけてくれる生徒も多く、生徒一人一人と関わる時間も増えた1年だったなと思います。
大学でもこれらの経験が活かすことができればいいなと思います。
Discussion