はじめに
この記事は 「MM2025 開発記」 シリーズ第1回です。
『初音ミク「マジカルミライ 2025」 プログラミング・コンテスト』に応募したので、この記事ではまず作品の概要・制作に至った経緯・コンセプトと、導入としてTextAlive App APIについて紹介します。
技術的な詳細は次回以降の記事で扱います。
入選はできませんでしたが、来年以降参加される方の参考になれば幸いです。
応募動機
現在高校生で、学校に掲示されているポスターを見て興味を持ったのがきっかけだった。
プログラミングを始めたのは高校からで、Webアプリケーションを作った経験などは全くなかったが、「リリックアプリって面白そう！作ってみたい！」と思ったのでとりあえず応募することにした。
コードを書くにあたってAIの使用が制限されていないのもあり、結構気軽な気持ちで制作を始めた。（「ChatGPTに聞きながらやればいけるやろ！」的なフィーリング...）
作品の概要
レトロな音ゲー風リリックアプリ「MIKU RUN ADVENTURE!」という作品を制作した。
コンセプトとしては、「ミクさんと一緒に歌詞を集める冒険に行く」 という感じで設定している。
ドット絵のミクさんをジャンプさせ、歌詞コインを集める2Dランゲームとなっている。
↑ スタート画面
↑ プレイ中画面
アイデア出し
募集作品は「リリックアプリ」と幅が広く、中々具体的なイメージが決まらなかった。そこで、
- 自分が好きな 「2Dゲーム」 という要素を入れる
- 使用する楽曲
の2点を先に決め、そこから作品のコンセプトなどを決めることにした。（楽曲を1つに絞り込む必要はなかったが、作りやすさのため1つに絞った）
また、画力が無いので、アプリに使用する絵はドット絵にする、というのも自然と決まった。
このあたりからレトロゲーム風という方向になり、イメージが固まっていった。
具体的なゲーム性の部分はあまり最初からは決めておらず、公式サイトに上がっているサンプルコードを動かしたり、実際に作っていく間に決めていった。
使用技術
- 言語: JavaScript / HTML / CSS
- ビルド: Parcel
- ホスティング: Vercel
- ドット絵エディタ: EDGE
苦労した点
1. Web初心者
まずJavaScriptなどを触ったのがほとんど初めてだったため、それらを新しく学ばなければいけないという難しさがあった。（ChatGPTなどに質問できるとはいえ、普通にAIも間違えたコードを出力してくるため、エラーを直すために最低限コードで何をやっているかなどは理解できる必要はある。）
ビルドやWebサイトのホストも理解するのが大変だった。
2. TextAlive App API の導入が難しい
リリックアプリを作成するために利用するTextAlive App APIというJavaScript用ライブラリを導入するところで非常に苦労した。このライブラリは利用例・使用方法のネット記事なども少なく、どこから手を付ければいいのか分からなかった。
一応コンテスト公式サイトに応募者用サポートページが存在するが、自分にはそれだけで理解＆利用するのは難しかった。
3. ドット絵制作が思った以上に大変
主に以下のような理由で、予想以上に手間取った。
- 使用した「EDGE」が独特な操作で慣れるまで大変だった
- そもそもドット絵を作るのが想像以上に難しかった（完全にドット絵を甘く見ていた）
このあたりの詳細は、次回以降の記事の中で解説していきたい。
上記以外にも挙げようと思えば様々な点が挙げられるが、とりあえずこれくらいにしておこうと思う。自分は応募を決めたのも結構遅く、時間にも余裕が無かったが、しっかり余裕を持って開発を始めていればそこまで苦労しないかもしれない。
TextAlive App APIとは？
ここからは、導入としてTextAlive App APIについて紹介していく。
概要
TextAlive App APIとは、リリックアプリを制作するために利用できるJavaScript用ライブラリのことである。楽曲・歌詞の両方が「TextAlive サービスサイト」に登録されている楽曲であれば、それらをリリックアプリに利用できる。
※『初音ミク「マジカルミライ 2025」 プログラミング・コンテスト』の課題曲はすでに登録されているので、すぐに利用できる。
単に「歌詞を表示する」だけでなく、ビート・サビ・コード進行・声量・感情値など音楽地図 を取得できる仕組みがあり、これを活かせば音楽に同期した複雑な演出やインタラクションが可能になる。
また、歌詞の「テキスト情報」「発声タイミング (いつ歌われるか)」も取得できるため、タイミングに応じた文字アニメーションやエフェクトを制御できる。
利用方法
このAPIを使用するためには、事前に
- TextAlive にログイン
- 開発者登録を行う
- アプリトークンを取得
という手順を終えておくことが必要になる。コンテスト応募者向けサポートページの右上にあるログインというボタンを押してやっていけば、数分で完了できる。
実際に使用する際には以下の2つの方法があるが、公式でも言われているように本番用作品はnpmパッケージ経由で行うのが一般的である。
| 方法 | 使用シーン |
|---|---|
| scriptタグで読み込み | 練習時 |
| npmパッケージ経由 | 本格的に開発する際 |
しかし、私はscriptタグで読み込み方式を採用して開発を行った。理由は、npmパッケージ経由でやった時よりscriptタグで読み込んだほうが簡単だと感じたからである。実際簡単だったのだが、外部CDNに依存した方法のため長期的視点で見ればnpmパッケージ経由で開発するほうが良いだろう。
さいごに
今回は『初音ミク「マジカルミライ 2025」 プログラミング・コンテスト』に応募した経緯や、リリックアプリ制作にあたって利用したTextAlive App APIについての紹介などを行いました。
次回はプロフェクトの環境構築について書いていきます。