【文化祭開発①】歌詞とタイトルをでかでかと表示した話
自己紹介
某県の共学化されかけている全寮制男子校に通う高校三年生です。
メイン言語でC#.Net、LINE Bot開発などにGASを多用しています。
超初心者で、基本知識もしっかりしていないと思いますので、温かい目でご覧ください。
0.何を作った？
今回、私は、体育館の舞台の上に、発表の内容を大きく表示するアプリを作りました。
こんな感じです。
1.制作経緯
実は、最初に作ろうとしていたのは、タイトル表示ではありませんでした。
YumNummさん含む横浜市立サイエンスフロンティア高校の方々が作ったプロジェクションマッピング@tweetを見て、感銘を受け、映像が得意な友人(移行Fと呼びます)にやってみようと話を持ち掛け、映像さえできればあとは放映するだけ、という状態にまでもっていきました。
じゃあせっかく強いプロジェクター(Epson EB-2165W)を使うんだから、もっと他のことがしたいなーと思い、タイトル表示と歌詞表示を思いつきました。
しかし、Fは学年の発表の編集にもかかわっていたため、プロジェクションマッピングにかかわるまでのキャパがなくなってしまいました。そのため、結果的にはこのタイトル表示と、歌詞表示だけが運用されることになったのです。
2.つくったものたちとその説明
2-1.TitleShower
実装
名前に何のひねりもなく、タイトルを表示するための本体です。
これに、2-2と2-3を連携させることで、タイトル表示が実現しています。
実装にはWPF(C#)を使用し、MainWindowをメイン画面に、TitleWindowをサブ画面(プロジェクター)に表示し、タイトル表示を行っています。
5秒に1度APIにアクセスし、タイトルの変更があれば変更する、という方式をとっています。
(今考えれば、MainWindowいらなかったような....)
舞台の方向に5500ルーメンの光を当てるため、演技中にまぶしくないよう、タイトルを表示する部分以外はすべて黒色に塗りました。
また、エラーが発生して万が一アプリが落ちようものなら、ステージ全面に向かって青色のWindows壁紙が投影され大惨事になってしまいます。
そのため、壁紙すらも黒に設定しておきました。
運用と問題解決
当日は学校のSurface Go 2にUSB-C to HDMIアダプタをつなげ、プロジェクタに拡張表示する方法を取りました。
しかし、前日のリハーサルで、思いもよらないエラーが発生しました。
学校のSurface Go 2はAzure経由で一括管理されていることから、設定が制限されており、ディスプレイをつけっぱなしにすることができませんでした。
結果的にはPowerToysのawake機能に力を借りたのですが、TitleShowerの方で実装しておくべきだったと反省しています。
2-2.nscultfes-title.pages.dev(現在も運用中ですが、今後クローズします。)
実装
TitleShowerに表示するタイトルと、発表学年を入力するためのものです。
プロジェクターを置く場所が2階、本部が1階、と離れていたため、離れた所から別のタブレットで操作が可能になるようにしたいと思い、作りました。
HTML、css、JavaScirptで作成し、CloudFlare Pagesでホスティングしました。
ただ、自己紹介で書いた通り、私にはGASとC#しか経験がなく、HTMLやcssは情報の授業程度の知識しかありませんでした。
その対策として、一部ChatGPTとGitHub Copilotの力を借り、何とか完成させました。
運用と問題解決
文化祭前日にページを公開し、URLがばれませんようにと願っていましたが、よくよく考えれば何かほかの方法はあっただろうなと思っています。
また、これはただの人的ミスですが、私が当日は他の業務で忙しく、入力が遅れてしまったことがありました。時間があれば自動で更新される機能もつけたかったな。
2-3.NSCultFes-Title_API
実装
2-1と2-2をつなぐ働きがあるAPIです。
GASで書き、2-1がGET、2-2がPOSTを行うことで、タイトルの出し入れを実現しています。
APIをGASでつくったことがあまりなかった(もっぱらLINE Botばかりだった)ため、ChatGPTとGitHub Copilotの力を借りました。
仕様としてはとても簡単で、POSTされたら紐づいているspreadsheetに値を書き込み、GETされた
ら最新の値を返す、という形です。
運用と問題解決
特になし。
2-4.LyricProjection
実装
歌詞を表示しようとしたときに、真っ先に思いついたのは動画を作ることでした。
しかし、音楽部も完璧ではなく、テンポが原曲とずれてしまうことはほぼ確実とのフィードバックを得たため、アプリにして、歌詞を手動で送る形で運用しました。
C# WPFを使用して実装しました。
基本的実装は2-1と同じですが、前述の通り、曲の進み方に合わせて手動で歌詞を表示させることから、こちらのアプリはプロジェクタ横のタブレットを直接操作する形を想定しました。
また、歌詞は中心、左上、右下の3か所に表示させたかったため、歌詞を入力するtxtファイルでは、以下のような形で位置を指定しました。
| 記述 | 意味 |
|---|---|
| SU [歌詞] | 左上に表示 |
| SD [歌詞] | 右下に表示 |
| F [歌詞] | 中心に大きく表示 |
| Clear | 歌詞を非表示にする |
例えば、以下のように記述しました。
SU そうだ
SD うれしいんだ
F 生きるよろこび
Clear
SU 愛と
SD 勇気だけが
F 友達さ
これにより、リアルタイムで歌詞を表示することができるようになりました。
問題解決
当日にしまったと思った点は、開始と同時に歌詞が始まる歌(今回の場合は怪獣の花唄)では、開始がどこかわからなかった点です。
これは、ただ私が音楽部との合わせ作業を怠ったために起きており、反省です。
3.感想
後輩や保護者に聞いたところ、反応は上々でした。
思い付きで作成しましたが、文化祭をさらに盛り上げられたようで、とても安心した思いと、やってよかった達成感が同時に来ました。
今回の開発で、ChatGPTの便利さをまた痛感させられました。
最後に、私の無茶に嫌な顔一つせず検討してくださった生徒会担当の先生、
前日・当日ともにプロジェクタ周りの操作をしてくださった後輩の〇〇くん、そして〇先生、
その他、文化祭にかかわったすべての方に感謝を申し上げます。ありがとうございました。
これからも、周りの人だけでなく、世界中の人を楽しませ、便利にさせられるようなアプリ、システムを作ることができるよう、邁進してまいりたいと思います。
最後になりましたが、こんな稚拙な文章を最後までお読みいただき、ありがとうございました！
よろしければ、私が文化祭のために作ったもう一つの企画についての記事もご覧ください！
それでは、またいつかお会いしましょう！
今回のアプリのリポジトリ
(GitHubも使い方微妙かもしれませんが悪しからず。)
Discussion