初めましての人は初めまして。20BのRozelinです。先日、初音ミク「マジカルミライ2023」プログラミング・コンテストに応募したのでその応募作品を紹介したいと思います。
コンテストの概要
このコンテストは、Text Alive App APIという、楽曲を再生しながら再生位置や、再生位置に合わせた歌詞やサビ情報などを簡単に取得できるようにしてくれるJavaScriptライブラリを使用し、楽曲に合わせた歌詞演出を行うWebアプリを作成して、その面白さやクオリティを競うものです。
応募作品は審査員によって10作品の入選作品に絞られた後、一般人の投票によって最優秀賞・優秀賞が選ばれます。使用する楽曲は、プログラミング・コンテストより前に行われた楽曲コンテストでグランプリ・準グランプリに選ばれた曲の中から一つ以上を好きに選ぶことができます。
作品の概要
「Typing Lyrics」というタイトルで、楽曲の歌唱に合わせて歌詞をタイピングするタイピングゲームを作りました。歌詞を正しくタイプしていくことでスコアが加算されていきます。
純粋なゲーム要素に加えて、曲のテンポに合わせてミクさん、KAITOさんが画面上で走ったり、ミスタイプすると転倒してしまうなどの仕掛けや、自分の楽曲ごとのハイスコアがローカルストレージに保存されるなどの機能もあります。
難易度は楽曲のテンポや歌詞の密度にかなり左右されますが、今回の課題楽曲の場合、満点を取るのは不可能かなり難しいと思われます。是非高スコア目指して頑張ってください。
以下から遊べます(PC専用)
結果
入選作品にはなりましたが、残念ながら賞を獲ることはできませんでした。また機会があればリベンジしたいです。
技術選定
応募にあたって、過去の応募作品や受賞作品の実装を軽く見ましたが、どれも生JS+HTMLで書かれていて発狂しそうでした。TypeScriptの型の恩恵とフレームワークによるサポートに慣れ切った体では生JSは書けないと判断し、参考実装は少ないものの、公式チュートリアルでReactによる実装を一つだけ見つけたのでReactを利用することに決めました。当然、TypeScriptで書きます。スタイルは、ホバーなどの状態をネストで書けて可読性が良いという理由でSassを利用することにしました。
さらに、アイコン用ライブラリとしてReact Iconsを、トースト用ライブラリとして、React用かつデザインの柔軟性の高いReact Hot Toastを導入しました。
デザイン
デザインを考えるにあたって、ゲームの世界観を決めました。今年のマジカルミライのテーマは「ヒーロー」だったので、ヒーローのサポーターであるプレイヤーが、どこかのコンピュータールームから歌詞をタイプしてミクさんたちヒーローにパワーを送信しているという世界観にしました。そして、デザインはそれに合わせ、サイバー風にしました。
配色を決める際は、サイバー風という雰囲気に合わせつつも、カラーアクセシビリティに配慮した配色になるよう気を付けました。Adobeのアクセシビリティツールにはとてもお世話になりました。
実装
タイプされたキーの判定は、Keydownイベントを利用してサクッと書きました。問題は、タイピングの正誤判定です。Text Alive App API では、歌詞のローマ字表記や読み情報までは取得できないので、何かしらの方法でそれを作成するかハードコーディングする必要があります。今回は、プレイ対象の楽曲が限られているので、歌詞の読み情報をひらがなでハードコードし、ユーザー設定のローマ字表記に基づいてローマ字に変換して利用することにしました。こうすることで複数のローマ字表記法への対応が可能になりました。
ただ、ローマ字変換関数の実装は「ゃ」などの小文字や「ん」(特にヘボン式の場合)の変換への考慮が大変で苦労しました。このタイミングで、デバッグの手間を減らすためにテストの導入を決めました。(なんと最初は、実際にプレイしながら目視で変換が正しくできているか確認していました！)ビルドツールにviteを使っていたので、テストツールはvitestにしました。細かい実装はsrc/utils/roman.tsを見てください。()入選作品紹介ではテストを書いたことが評価されていて嬉しかったです。
特に気をつかったのはエラーハンドリングです。コンテストの審査基準に完成度の高さがある他、入賞作品を決めるのはコードを読んでいない一般人なので、何の告知も無く突然アプリが固まってしまっては困ります。楽曲情報の取得や楽曲再生処理など、Text Alive App API側の処理で、かつ、エラーが発生しうるものについては、エラーが発生した時点でトーストで知らせるようにしました。ローカルストレージまわりは、想定外の値が入っていたら値を削除し無視することにしました。
レポジトリはこちらです
Rozelin-dcイラスト
ゲーム中や終了後に画面上に表示されるミクさんとKAITOさんのイラストも自作しました。せっかくなのでイラストがよく見えるようにここに置いておきます。
反省
今回賞を獲れなかった原因として、タイピングゲームという特性上、PCでしか楽しめないアプリになってしまっていたことがあるかなと考えています。受賞した作品含め他の多くの入選作品は、タブレット・スマホでも楽しめるようになっていたので、PCでしか楽しめない私の作品は一般受けが悪かったのでしょう。リベンジする際はタブレットやスマホでも楽しめるアプリを作りたいと思います。
最後に
コンテスト運営の皆様、Text Aliveの開発者の皆様、楽曲製作者の皆様、そして本作品で遊んで下さった皆様、本当にありがとうございました。
明日の担当は @Hueter, @vPhos です。お楽しみに！
