この記事はjsysアドベントカレンダー25日目の記事です
私たちは筑波大学学園祭実行委員会 情報メディアシステム局です。現在は50名弱のメンバーが在籍しており、筑波大学の学園祭「雙峰祭（そうほうさい）」の開催のために必要なIT・映像など技術的な部分で幅広い活動を行っています。ここでは2024年に私達がやったことを100個ご紹介します。
いち学生組織としては非常に多岐にわたる活動をしていると自負しておりますので、ぜひ最後まで御覧ください！
1. 本番ウェブの準備
学園祭の実施期間に公開される、その年の学園祭を象徴するウェブサイトです。例年、非常に手の込んだウェブサイトを作成しています。Astroで作られています。
ウェブサイトのデザイン・情報収集・実装など、作成にかかる作業は幅広く、それぞれを得意な人が分担して作業を進めています。
本番ウェブはなんとしても学園祭当日に間に合わせる必要があるため、スケジュールを組み立てることが非常に重要です。
2. 委員会開催企画のウェブ作成
一部の委員会開催企画の特設ページの実装を担当しています。
ほとんどを１年生が実装しており、その実装力に圧倒されました。Astroですべて実装されています。
3. 企画検索システムの作成
企画を見つけるためのサイトを作っています。Next.jsが使われています。また、元データ作成にDenoを用いたスクリプトが用意されています。
今年度から、本番ウェブに先行して公開できるよう別で開発することになりました。
4. 準備期間ウェブ
本番直前以外の期間にsohosai.comで表示されるサイト。お知らせなどを掲載しています。Astro製です。
多言語対応に向けた準備を進めています。
5. 生配信ページの実装
雙峰祭では例年ステージの生配信をしています。昨年度まではYouTube上で配信していましたが、今年度から独自のサイトで配信することになりました。Reactで作られています。
そのため、ゼロから生配信を視聴するためのページをデザインしたり、プレイヤーの実装を行ったり、また実証実験を行ったりする必要がありました。
6. 生配信の仕様検討
生配信を自サイトで実施するのは数年ぶりのこととなり完全にゼロスタートでした。その中で、どの機能を実装しどの機能を実装しないのかというところをはじめ、どうすれば「雙峰祭らしい生配信を届けることができるか」ということを念頭に置き仕様を検討しました。
7. 生配信プレイヤーの実装
生配信を再生するプレイヤーにはHLS.jsをベースに独自のプレイヤーを開発しています。様々なデバイスで問題なく再生できる仕組みを作るため何度も試験を重ねました。[1]
8. 生配信のリアクション機能の実装
生配信ではリアルタイムでリアクションする機能を実装しました。バックエンドはGo言語、フロントエンドの状態管理にJotaiを利用しています。
仕組みは単純ですが、単純な仕組みに至るために何度も検討を重ねて開発されました。
9. 生配信タイムテーブルの実装
生配信で現在のコンテンツをリアルタイムで表示するタイムテーブルを実装しました。現在時刻に合わせて自動的にスクロールし、現在配信中のコンテンツを簡単に確認できるよう工夫しました。
10. 生配信の負荷テスト
独自プラットフォームでの配信は今年が初めてだったため、バックエンドが負荷に耐えられるのか・様々な端末で閲覧した際に問題なく再生されるかを確認する必要がありました。
300人以上が在籍する学園祭実行委員会の規模を活かして、一斉の配信テストを実施し事前に問題なく運用可能なことを確認しました。
11. 生配信の撮影
UNITEDステージで開催されるほとんどの企画を生配信しています。今回は3台のカメラを用意し、撮影・スイッチングなどを行いました。
12. 生配信告知ページ
生配信をやっていない時間に生配信ページに表示されるページです。
デザインを1年生がやってくれたのですが、イケていて良いです。
13. Go言語によるパトライトライブラリの開発
当日生配信が正しく配信されていることを視覚的に確認するためパトライトを利用しました。当日も実際にアラートが発報され、早期に対応を始めることができました。
14. 生配信映像のアップロード用ソフトウェアの準備
生配信映像アップロードには時雨堂が開発しているmomoというソフトウェアを利用しました。また、momoを映像配信サーバに特化して起動するヘルパーソフトウェアも開発しました。
このソフトウェアでは配信状況をリアルタイムでTUIで確認できるほか、パトライトでの異常通知も行いました。Go言語で開発されています。
15. 生配信映像転送用のネットワーク構築
生配信の映像はステージのある石の広場から、生配信本部に一度転送してからインターネットに配信されます。NDIを利用しています。
そのため、石の広場へネットワークを整備したり、学術情報メディアセンターの協力を得てこれらを同一ネットワークにする作業を行っています。
16. 生配信の配線図を書く
当日行う生配信では多くの機材を使用します。そのため、必要な機材やケーブルの数を割り出したり、できるだけ多くの人が配線を把握できるようにしたりする目的で、あらかじめできる限り詳細に配線図を書いています。
17. 生配信の視聴者数を測定するInfluxDB
生配信の視聴者数はInfluxDBに保存し、リアルタイムで確認できる仕組みを構築しました。具体的にはクライアントとサーバ間でWebSocketによる接続を行い新規接続から切断数を引いた数を視聴者数として管理していました。
18. 生配信の著作権契約
生配信で音楽を配信するため、著作権管理団体と契約しています。
契約書の作成や相手方とのやり取りといった契約のための手続きや、契約締結後の報告などをしています。
詳細はこちら→
19. 生配信で利用される楽曲の整理
ステージで利用される楽曲の情報を事前に収集し、整理しています。ここで収集したデータをもとに、著作権団体への報告や配信の可否を判断しています。
20. 雨天時対応
今年は、直前で当日の雨天が予想されたため、晴天時・雨天時両方のスケジュールを準備しました。精密機器を屋外で扱うことが多いため、雨に濡れないよう細心の注意を払いました。
21. 生配信のための配線
生配信実施のため、映像・音声を集約するための配線を行いました。
22. ネットワークの構築
生配信の会場は屋外にあるため常設されているネットワークがありません。そのため、生配信伝送のためのネットワークを敷設し、配信を行っています。
23. 片付け・撤収作業
学園祭終了後は2日後から通常授業が始まるためゴミの処分・配線の撤収・機材の撤収などの作業を1日で実施しています。
24. ステージPAとの連携
生配信向けの音声を受け取るため、PAさん（音響エンジニア）と連携しています。
25. SIPによるIP電話の実現
当日のステージと配信本部の連絡のためSIPサーバを構築し、IP電話を実現しました。当日は無線と比較し安定した通信が実現するほか、無線と異なり呼び出しが可能なため非常に役に立ちました。
26. テロップ送出システムの開発
タイムテーブルや使用楽曲に合わせて、現在の企画情報のテロップを自動で生配信映像に送出するシステムを作成しました。React・Go言語で開発されています。
実際にこのシステムを使い生配信にテロップが送出されていました。
27. 生配信告知看板の作成・設置
生配信を実施していることを学内に周知するため看板の作成・設置を行いました。
28. 広告の掲載
学園祭実行委員会では収入源として協賛企業の広告を掲載しています。情報メディアシステム局では「Web」「CM」「バナー」の3種類の広告を掲載しています。
29. 雙峰祭ダイジェストの作成
雙峰祭を振り返る「雙峰祭ダイジェスト」という動画を、雙峰祭の後夜祭までというタイトなスケジュールで作成しています。編集を複数人で分担して行い、最終的に一つの動画にまとめています。
30. 学園祭の様子の撮影
雙峰祭ダイジェストで利用するため、学園祭の各所を回り撮影にあたっています。
31. 委員会開催企画のCM作成
実行委員会開催企画のCMを作成しています。1年生もたくさん活躍してもらいました。ここでは紹介できないものも含めて、合計6本ほど作成しました。
生配信の中で配信したほか、SNS上での広報活動に展開されています。
32. 50周年記念映像の作成
今回で雙峰祭は50周年を迎えたため、50年間の歴史を紹介する映像を作成しました。関係機関や大学から過去の映像データのご提供をいただき、50年間の歴史を30分ほどの映像にまとめました。
33. 新歓PVの作成
新歓のため、学園祭を紹介するPVを作成しています。新入生オリエンテーションで利用されたほか、冒頭部分についてはYouTubeでも公開されています。
34. 雙峰祭オンラインシステムのデザイン
企画から電子申請を受け付けるためのシステム「雙峰祭オンラインシステム」を開発しています。
雙峰祭オンラインシステムは今年度ゼロベースで作り直し、デザインも刷新しました。新デザインは企画を実施するユーザからも非常に好評でした。
35. 雙峰祭オンラインシステムの開発
今年度はゼロから作り直しましたが、本当に大変でした。RustとNext.jsで作られています。
36. メーリングリストの整備
企画への一斉連絡に用いるため、企画区分ごとのメーリングリストを作成し運用しています。
37. 学内メールの一斉配信テスト
昨年度、雙峰祭オンラインシステムでのアカウント作成時にメールアドレス確認メールが届かない問題が発生しました。今年度は同じ事態を避けるため、学園祭実行委員全員にメールを同時配信するなど事前にシミュレーションを実施しました。
また、メールが届かなくなった場合も想定した運用フローを検討していました。
38. DMARCを検出するDMARC Visualizer
DMARC Reportを元に迷惑メール判定の原因を早期に検出するため、DMARCレポートをビジュアライズしています。
39. 物品管理システム
情報メディアシステム局では全ての物品にQRコード・バーコードを貼り効率的な物品管理を目指しています。
現在は1つのExcelで管理されていますが、参照や整理の効率化を図るため、将来的にはデータベース上に取り込まれる予定です。
40. 物品把握
情報メディアシステム局では年に1度所有している物品の数や所在を把握するため、物品の整理を行っています。
41. 機材の動作確認
定期的に当日利用する機材が利用可能か確認するため、動作確認を行っています。
42. 機材の選別
情報メディアシステム局は多くの物品を保有していますが、その中には古く使えないものも含まれるため、不定期に必要のない物品をより分ける作業をしています。
43. パソコンの作成
情報メディアシステム局では歴史的経緯により、様々なパソコンが混在しています。それらの中から動作する部品を組み合わせたり、必要最低限の部品を購入することで安価にパソコンを作成していました。
44. マザーボードの交換
マザーボードを購入しましたが、なぜか起動すると100度以上となるため返品し交換しました。販売店に迅速にご対応いただき学園祭当日に間に合わせることができました。
45. 外部団体への物品貸出への対応
学園祭実行委員会では学内の学生組織に対する物品の貸出を行っています。情報メディアシステム局の物品の貸出要請があった場合は対応しています。
46. 各種機材のレンタル
プロジェクターやカメラ・パソコンなどの高価で当日しか利用しない機材はレンタルにより調達しています。レンタルにかかる手続きや選定なども行っています。
47. 前夜祭・後夜祭開催に向けた支援
前夜祭・後夜祭は学園祭実行委員会が主体となって企画し、ステージ上で行われるイベントです。情報メディアシステム局ではプロジェクターの準備や投影などでその実現を支援しています。
48. 全体シフトの計算
当日の実行委員の全体シフトを、様々な条件を満たすように計算するためのスクリプトを作成しました。
49. k8sクラスタの構築
k8sクラスタとArgoCDを運用し、デプロイの容易なアプリケーション実行環境を整備しています。生配信のリアクションサーバはk8s上で動作していました。
50. k8sのTerraformによる自動構成
情報メディアシステム局のk8sはさくらのクラウド上のIaaS上で構築されています。この構築はすべてTerraformにより自動化されていて、再現性の高い環境が作られています。
jsysのサグラダファミリアと呼ばれていました
51. HashiCorp Vaultによる安全なクレデンシャルの管理
k8s上で動作するアプリケーションのクレデンシャルの管理のためHashiCorp Vaultをk8s上でホストし安全なクレデンシャルの管理を行いました。
52. k8s上で動作するGitHub Actions Self-Hosted Runnerの運用
k8sクラスタを構築し、その上で動作するGitHub Actions Self-Hosted Runnerを運用しています。
詳細はこちら→
53. GitHub Actions Runner Managerのホスト
GtiHubのセルフホステッドランナーを用いるためにGitHub Actions Runner Managerをホストしています。前述したk8s上での動作前は本ツールを利用していました。
54. モニタリングの実施
情報メディアシステム局で運用している各種インフラについて、モニタリングを実施しています。これにより予期しないアプリケーションの障害などにいち早く気づけるようになっています。
55. 過去のリソースの整理
情報メディアシステム局は在籍年限が2年である都合上過去の遺産が長期にわたり残ってしまう傾向があります。今年度は過去のリソースについて整理をし、不要なものについては終了しました。
56. Portainer
セルフホストしているツール群はすべて１つのVM上でDockerを用い起動しています。これらを制御するためPortainerを利用しています。
57. Headscale（VPN）
オンプレミス版TailscaleであるHeadscaleをセルフホストしWireGuardで簡単かつ安全に各サーバへアクセスできます。
58. 統一認証の運用
Auth0を用いて統一認証を実現しています。学園祭内部でホストしているシステムのほとんどにこの認証システムでログインすることができています。
59. 統一認証アカウント自動発行システム
先ほど紹介した統一認証はGoogle Formを通じて自動的に発行されています。フォームに回答すると自動的にアカウントが作成されます。
60. オンプレミスで運用するNAS
学園祭実行委員会の過去のデータを保管するためのNASを運用しています。今年度は無停電電源装置（UPS）を導入しました。
61. ownCloud Infinite Scaleのホスト
オンプレミスのNASは運用コストが高く不安定だったため、ownCloud Infinite Scaleをセルフホストしファイルの管理をオンプレのNASから脱却しようと試行しました。
しかし課題がいくつかあり、最終的には利用を終了しOneDriveに移行しました。
62. ノーコードツールn8n
ノーコードで様々な処理をするためにn8nをホストしています。メールをSlackに通知するといった自動化に使われています。
自局に関連するSlackのチャンネルをDiscordに転送するワークフロー
63. クラウド上で動作するアプリケーションをバックアップするBackrest
クラウド上で動作するアプリケーションのデータを定期的にオンプレミスのNASにバックアップするBackrestをセルフホストしています。
64. パスワードマネージャVaultwarden
利用しているアカウントのパスワードを一括で管理するためValutwardenをセルフホストしています。
65. Slackをアーカイブするソフト
学園祭実行委員会全体でSlackを採用していますが、無料プランのため90日間で自動的にメッセージなどの履歴が削除されてしまいます。そのため、リアルタイムでメッセージをバックアップするソフトを作成し利用しています。
このソフトを用いるとメッセージやスレッドの関係・投稿されたファイルなども自動的にアーカイブされます。
66. DiscordからGitHub Issueを作るBot
Discord上でメンションすると自動的にGitHubにIssueを作るBotを作成し利用しています。これによりGitHubを使うのに慣れていないメンバーもGitHubでタスク管理ができます。
またリアクションをつけることでIssueをCloseすることもできます。
67. 新歓LINEをSlackに通知するBot
新歓ではLINE公式アカウントで質問を受け付けており、これを自動的にSlackに通知するBotを運用しています。このシステムにより、返信者の整理や返信内容の相談をSlack上で実現でき品質の向上に寄与しました。
68. GitHub Issueに自動的にASAPラベルを付けるワークフローの整備
GitHub Issue作成時に"ASAP"が含まれると自動的にASAPのラベルが付くワークフローを整備しました。
69. Google Calendarから自動的にDiscordへイベント登録するワークフロー
Google Calendarに登録した予定を情報メディアシステム局で利用しているDiscordのイベントに登録するワークフローを用意しました。
70. 新着メールをSlackに転送するGASの作成
新着メールのタイトルと送信元をSlackに通知するGoogle Apps Scriptを動かしています。
71. 映像用語の解説集の作成
新入生に映像用語を解説する記事を内部向けに作成しています。これにより各用語を共通認識して使うことができています。
72. 雙峰祭リハーサルの実施
当日安定的な配信が可能かどうかテストするため、当日の2か月前に本番と同じ構成を実験しています。[2]
73. 大学会館でのリハーサル
生配信は雨天時に一部大学会館で実施することとなっていました。そのため、大学会館に配信場所が移った場合にも問題なく配信できることを事前に試験しました。
74. NDIの検証
生配信ではLAN内でNDIという規格を使いIPネットワークによる映像転送を実施しました。この取り組みは今年度初めて実施したものであり、実用上問題ないか・大学ネットワーク上でのパケットロスが許容範囲内に収まるかどうかを事前にチェックしました。
75. TSUKUBA COLLECTION事前収録映像の撮影
雙峰祭ではTSUKUBA COLLECTIONといういわゆるミス・ミスターコンが存在します。TSUKUBA COLLECTIONでは出場者の個性を競うため、パフォーマンスをする機会を出場者に対して提供しています。
情報メディアシステム局では、雨天時に放映するためのパフォーマンスの事前録画を担当しました。[3]
76. 新歓映像の録画
新歓の映像の録画を行いました。新入生へ配信予定でしたが、想定以上の応募があり利用されませんでした。
77. 雙峰祭ロゴ・ 50周年ロゴ ロゴアニメーションの作成
雙峰祭のロゴ・50周年のロゴアニメーションを作成しています。雙峰祭ダイジェストや新歓映像などで利用されています。
78. 実委人ダイジェストの作成
雙峰祭ダイジェストとは別に、実行委員会内用に1年間を振り返る「実委人ダイジェスト」を作成しています。
79. さくらのナレッジの執筆
ご協賛いただいている、さくらインターネットのオウンドメディアである「さくらのナレッジ」に寄稿しています。
80. 筑波大学新聞への取材対応
今年度は筑波大学新聞からの取材があったので対応いたしました。2024年12月18日発行の385号に生配信に関する記事が掲載されています。ぜひご覧ください。
81. 各種イラストの作成
そぽたんのリアクションをはじめとした、情報メディアシステム局内で利用するイラストの作成を行いました。[4]
82. 新入生へのウェブフロントエンド研修の実施
いなにわうどん先輩・ちゅるり先輩を中心に新入生への研修をお願いしました。結果、今年は1年生がバリバリコードを書けるようになり本当に助かりました。
83. 映像制作研修の実施
新入生に向けて映像制作を実際に体験する研修を実施しました。
84. 生配信研修の実施
新入生に向けて生配信ができるよう映像・音声の配線をしてみて、それぞれの機器の使い方を教育しています。
85. 開発合宿の実施
本番ウェブや雙峰祭オンラインシステムは明確に締め切りが決まっており、そこに間に合わせる必要があリます。そのため、短期間でガッと開発を進めるため開発合宿と銘打って丸一日開発に費やす日を何日か設定しました。
雙峰祭オンラインシステム（バックエンド）のコミットログ
86. スケジュールなどのマネジメント
情報メディアシステム局で扱う各プロジェクトごとに進捗を管理し、人員を采配しています。また、やること・やらないことの整理をするなど、キャパシティーオーバーを防ぐよう気をつけています。
87. GitHub Projectでのタスク管理
情報メディアシステム局ではやることをGitHub Projectというタスク管理ツールで管理していました。毎週のミーティングでやることへのアサインとIn Progressなタスクの進捗を確認することで全体の見通しを良くしたり、各個人へのフォローアップにつなげていました。
88. 各種反省会の実施
学園祭終了後は各プロジェクトごとに振り返りを行い、今後の運営のさらなる改善に活かしています。学園祭実行委員会は1年生と2年生のみで構成されるため、反省会が引き継ぎのために非常に重要となります。
89. 各種サポートの提供
学園祭実行委員会内から来る情報関連の様々な問い合わせに対応していました。WiFiへの接続方法から雙峰祭オンラインシステムの実行委員アカウントの発行など幅広い事項に対応しました。
90. 実行委員会室のインフラの整備
実行委員会室にあるプリンタやWiFiの整備を担当しています。
91. 学園祭実行委員会全体のSlack整備
学園祭実行委員会全体のコミュニケーションにSlackを利用しており、ここへの招待やチャンネルの管理を担当しています。
学園祭実行委員会全体で利用するSlackの整備を担当しています。
92. 各種申請手続き
学園祭実施に当たり、撮影場所の確保やネットワーク利用のための大学への各種申請手続きを行っています。
93. 協賛・協力企業・団体の掲載
学園祭にご協賛・ご協力いただいている企業の一覧をホームページに掲載しています。
94. 募集要項の執筆
企画募集要項で雙峰祭オンラインシステムの使い方を執筆しています。
95. GitHubの運用
雙峰祭のGitHubアカウントには歴史的経緯により大量のメンバーが登録されており、この管理も担っています。
96. Discordの運用
情報メディアシステム局ではDiscordでコミュニケーションを行っていました。このDiscordには過去のOB/OGを含め合計80人のメンバーが所属しており、それぞれに適切な権限管理を実施しました。
97. 学生生活課への報告
学園祭実行委員会は学生生活課による監督を受けているため、ネットワーク構成などについて定期的に報告をしています。
98. 百香亭に行く
私たちは百香亭という中華料理屋が大好きなので、何度も訪れています。詳細はこちらから。
99. どんぐりを食べる
今年情報メディアシステム局では、自然豊かな大学でどんぐりを食べることが流行しました。詳細は情報科学類誌WORD56号をご覧ください。
100. オレンヂへの寄せ書き
学園祭終了後は実行委員のスタッフウェア（通称: オレンヂ）に寄せ書きをしています。
ここには書くことのできない実現できなかったことももちろん多かったですが、全体として1つの学生組織としては非常に幅広く多くのことをしていたと思います。
筑波大学学園祭実行委員会の大きな特徴として、自分たちがやりたいことと学園祭の実現に必要なことの両方ができるということが挙げられると思います。学園祭という場ではあくまでも裏方としての活動が中心となりますが、その中で自分のやりたい技術的挑戦を支える土壌があると考えています。
筑波大学へ入学される方・筑波大学への進学を考えている方、情報メディアシステム局にてお待ちしています！
Discussion