記事タイトル
見出し
#プログラミング班
2025年度の桐朋祭コンピューター部(TCC)の展示作品を紹介、検索するためのWebサイトを制作しました。このページでは、その作品、制作方法や使用した技術、工夫した点などを紹介します。
なお、本サイトで使用しているCSSファイルなどの一部リソースは、制作者が運営するサイトのATSERVERより配信しています。
このサイトは、ユーザーが作品を快適に閲覧し、情報を簡単に見つけられるように、以下の言語を使用しました。 バックエンド処理が少ない静的なコンテンツが中心のため、フロントエンド技術を主軸に据えています。
その他、Font Awesomeによるアイコンの使用や、Google FontsのWebフォントを利用してデザイン性を高めています。
このWebサイトには、以下のような機能を実装しました。
制作にあたり、特にこだわったのは以下の点です。
苦労した点としては、JavaScriptによる動的コンテンツの制御や、異なる解像度の端末間での表示差異の調整などがありました。特に検索機能の実装では、効率的な絞り込みロジックを考えるのに時間を要しました。
検索システムを作成するにあたってお借りしたコード:ページ内検索を自ページに設置
ライトモードのCSS:Gemini + Goolg Cloud Code
エディタ:VSCode
画像作成:YMM4
現在のWebサイトでは、作品ごとに個別のHTMLファイルを作成し、部員から集めた情報を手作業で入力しています。そのため、作品ページのUIを更新する際には、全てのファイルを一つひとつ編集する必要があり、非常に手間がかかっていました。
来年度は、この課題を解決するために、PHPやSQL(データベース)の導入を検討しています。具体的には、ログイン機能を設け、部員が直接作品情報（説明文、動画、画像など）をアップロードできるシステムを構築します。
アップロードされたデータはデータベースに登録され、作品ページは単一のテンプレートファイルとIDによって動的に生成されるようになります。これにより、UIの変更や機能追加も効率的に行えるようになり、サイト全体のメンテナンス性が大幅に向上すると考えています。
使用した素材、フォント、ソースコードやその説明は以下のリンクから閲覧できます。
リンク
このWebサイト制作を通じて、フロントエンド開発の面白さや奥深さを改めて感じることができました。来場者の皆様に、コンピューター部の活動や作品の魅力を少しでもお伝えできれば幸いです。 ぜひ、サイト内の様々な作品をご覧ください。
© Aoki Takuma
作品の無断転載を禁じます