マジカルミライ プログラミングコンテスト挑戦録 ~2024年編~
はじめに
本記事は、クリプトン社様が主催するマジカルミライプログラミングコンテストに参加した2024年の記録です。
マジカルミライプログラミングコンテストの概要について知りたい方は、2022年編をご覧ください。
- マジカルミライ プログラミングコンテスト挑戦録 ~2022年編~
- マジカルミライ プログラミングコンテスト挑戦録 ~2023年編~
- マジカルミライ プログラミングコンテスト挑戦録 ~2024年編~👈
- マジカルミライ プログラミングコンテスト挑戦録 ~2025年編~
3年目の参加動機
前年はコンテストの要件を十分に満たすことができず、入選には至りませんでした。その経験から、この年は作品要件を改めて丁寧に捉え直し、再挑戦したいと考えるようになりました。
また、前年の最優秀賞作品を見た際に感じた「身近にあるものに TextAlive を組み合わせたらどうなるか」という考え方で制作したいと考えていました。
加えて、PlayCanvas のような 3D 作品開発ツールではなく、Reactのような一般的なWebフレームワークを用いて制作したいという思いがありました。ちょうど Web エンジニアとして働き始めたこともあり、実務で用いている開発手法でコンテストに挑戦してみたいと考え、入選を目標にこの年も参加することを決めました。
制作物概要: Magical Car Navigation
実際に提出した作品紹介文:
「Magical Car Navigation」は、カーナビと音楽を掛け合わせたリリックアプリです。 今年度のマジカルミライのテーマである「ファンファントリップ」から、音楽と共に旅を楽しむ作品を実現したいという想いで制作しました。 曲が始まると、ユーザーを乗せた車は道中の音符を集めながら、目的地へと向かいます。 道中にある様々なイベントアイコンをクリックして立ち寄ることで、旅の充実感を高められます。 曲終了後は、立ち寄ったイベントを基に、旅を振り返ることができます。 曲に合わせた画面の演出、様々なイベントの種類、細かなカーナビ機能の再現がこの作品の魅力です。 是非、色んな場所に立ち寄って、音楽と共にあなたの旅を楽しんでみてください！
曲に合わせて出現する音符を拾いながら旅をする、カーナビをモチーフにしたリリックアプリを制作しました。
この年のマジカルミライのテーマは「FAN FUN TRIP」であり、“旅”を切り口に楽曲の魅力を引き出す作品を作りたいと考えました。
そこで、車におけるカーナビは音楽と高い親和性を持つ存在であることに着目し、カーナビと TextAlive を組み合わせることで、「音楽で楽しむ旅」を表現するリリックアプリを制作することにしました。
前年の反省を踏まえ、単なるゲーム性に留まらせるのではなく、「楽曲をどのように表現するか」を作品の核に据えた結果、ゲーム要素は控えめにし曲の表現にこだわるようにしました。
また、「身近なものに TextAlive を組み合わせたとき、音楽体験はどのように変化するのか」という視点も重要視していました。そのため、今回題材とした「身近な存在」であるカーナビについては、UI や挙動をできる限り精緻に再現することを意識して制作しました。
👇👇以下のサイトから体験できます👇👇
作品デモ動画
Features
曲選択画面
- 曲を選んでマップ画面に遷移します
マップ画面
- カーナビ画面をモチーフとし、画面左にマップ、画面右に旅の記録、画面下部に曲情報を表示しています
- マップの経路上の音符を集め、その音符を拾ったミクが歌った歌詞が地図上に散らばることをイメージしました
- カーナビ画面は細かいカーナビ要素を沢山再現しています
- VICS: 渋滞や事故情報の最終更新時間を表示
- 方位磁針:地図の方向
- SCALE:地図の縮尺
- 曲を一時停止したらドラッグやマウスホイールで地図を動かせ、縮尺も変わります
- GOALまでの距離
- カーナビの画面は曲が進むに従って朝→昼→夜に変化します
- 目的地までの経路探索にはA*法を使用しています
- 使用楽曲は限られているので、あらかじめ曲ごとに経路を決めておいてもよかったのですが、汎用性を求めて毎回計算する設計としました
- 旅の記録表示
- カーナビ画面のシンボルをクリックした際に、その地点に旅の途中で訪れて体験したこととして追記されていきます
リザルト画面
- マップ画面で取得したシンボルや経路を元に旅の振り返りを表示します
- 文章は取得したシンボルに従ってテンプレート生成されます
- 文章は取得したシンボルに従ってテンプレート生成されます
開発体制
開発体制は前年と同様に、2名で行いました。
この年は、私は大学を卒業し時間に余裕があった一方で、もう一人のメンバーは研究で多忙な状況ではありましたが、結果として双方ともこれまでで最も開発に時間を確保できる年となりました。
また、前年試験的に導入した丸一日一緒に開発する「Happy Hacking Day」が非常に効果的だったため、この年はHappy Hacking Dayを毎週行うこととしました。その結果、コミュニケーションの齟齬が大きく減り、開発効率も大幅に向上しました。
また、2Dアプリを制作することから、前年まで用いていたPlayCanvasから一般的なWebのコードベース開発体制へと移行しました。本作は地図上での表現や操作が重要となる Web アプリケーションであったため、フロントエンドには React、地図表示には Leaflet と OpenStreetMap を採用しました。また、GitHub との連携が容易で、無償で利用できることから、デプロイ先には Netlify を採用しました。
開発スケジュール
- この年は 4 月中に企画内容および使用技術を確定できたため、5 月から 7 月にかけての期間を実装に充てることができました
- 開発は、基本的に土曜日または日曜日のいずれかを「Happy Hacking Day」とし、朝から晩まで一緒に集中的に作業するサイクルで進めていました
- 開発を常に一緒に行っていたことで、随時認識のすり合わせが可能となり、制作物に対する共通理解が自然と揃いやすい体制となりました。その結果、WBS の作成や細かなスケジュール管理にかかるコストは、これまでと比べてかなり抑えられたと感じています。
開発エピソード
- シンボルを地図に配置するためにGISでデータ加工を行った
- 出てくるシンボルや地図は大阪をモチーフにしている
- 終着点をマジカルミライ会場にしたかった点、開発チームが関西出身だった点から大阪を選択しました
- この年からDiscordでやりとりするようになった
- 今まではLINEでした
- スレッドやチャンネルで会話を分けることができるのはやっぱり良いですね
- 開発メンバーの1人はこの年に初めてマジカルミライのライブに参加した
結果・感想
最優秀賞！！！！
当初の目標は入選だったので、入選で既に喜んでいたのですが最優秀賞までいただけてビックリでした。
審査員のコメントは以下の通りでした
- まさかカーナビがリリックアップリになるというユニークな発想力
- 技術力が高い
- A*アルゴリズムで毎回経路探索をしており汎用性がある
- 既存のWebライブラリを組み合わせて新鮮な体験を作った
- アイデアと実装力の両方が高い
この年は、制作を通してアイデアの軸が最後までぶれることなく進めることができたため、自分たちが特に力を入れた部分を評価していただけたことが、すごく嬉しかったです。
また、複賞としてライブチケットもいただき、実際に現地で自身の作品が紹介される様子を見ながら、表彰状とともに写真を撮ることができました。
最終目標であった最優秀賞を受賞し、コンテストとしての一つの到達点には辿り着いたと感じています。一方で、入選作品紹介後のエクストラステージで紹介された、AIとTextAliveを組み合わせた作品「CooMA 音楽情報収集型生成AI」を見たことや、世間的に LLM が急速に盛り上がりを見せている流れを受け、次は AI と TextAlive を組み合わせた作品に挑戦したいという思いが強くなりました。
そのため、来年度も引き続き本コンテストに挑戦することを決めました。
入選作品発表会
Magical Car Navigation
受賞作品発表会
Discussion