初音ミク「マジカルミライ 2021」

初音ミク「マジカルミライ 2021」 プログラミング・コンテスト
応募者向けサポートページ

Art by © CFM

このページでは、初音ミク「マジカルミライ」で開催されるプログラミング・コンテストについて紹介しています。

プログラミングの力で創作文化に参加しましょう!

SNSで共有

プログラミング・コンテストについて

TextAlive App API は音楽に合わせてタイミングよく歌詞が動くWebアプリケーション(リリックアプリ)を開発できるJavaScript用のライブラリです。

初音ミク「マジカルミライ 2021」では、このAPIを使って、マジカルミライ 楽曲コンテストの採用作品6曲にあわせて魅力的に動く歌詞などの映像演出をプログラミングするコンテストが開催されます。昨年のコンテスト受賞作や一般公開されているアプリもぜひご覧ください。

プログラミング・コンテストの参加方法

応募方法や応募のきまり、リリックアプリの作り方の概要は、YouTube動画「TextAlive App API講座」をご覧ください。

このページ下部の「作品応募に向けて」もぜひ参考にしてみてください。

TextAlive App API でできること

TextAlive App API を使うと、Web上で公開されている楽曲と歌詞を利用して、タイミングよく歌詞が動くWebアプリケーションを開発できます。楽曲と歌詞はいずれもURLが TextAlive サービスサイトに登録されている必要がありますが、コンテスト参加者のみなさまは心配ご無用です。

コンテストの対象となる課題曲は 6 曲とも TextAlive への登録が済んでおり、API上で楽曲のURL(いずれもYouTubeのURLです)を指定すれば、それと紐づいた歌詞(いずれもピアプロのURLです)が自動的に読み込まれるので、すぐに演出をプログラミングできます。

APIを使うと、例えば次のようなリリックアプリが作れます。

次の作例では、HTML/CSS/JSのリンクをクリックするとソースコードを見ることができます。「EDIT ON CODEPEN」をクリックすると、ソースコードを編集できます。(スマートフォンでは動作しないので、パソコンで試してみてください。) もっと作例を見たいときは「サンプルコード」をご覧ください。

TextAlive App API の使い方

TextAlive App API は script タグでWebサイトに読み込んだり、 npm パッケージ textalive-app-api をインストールすることで使えるようになります。 API の呼び出しには「開発者登録」 で入手できるアプリトークンが必要となります。詳しい使い方は「TextAlive App API チュートリアル」をご覧ください。

TextAlive App APIについて技術的に分からないことやバグ報告などがあれば、GitHub IssuesまたはGitter Chatまでお願いいたします。

HTML
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/textalive-app-api/dist/index.js"></script>
<script>
const { Player } = TextAliveApp;
</script>
コマンドライン
npm install textalive-app-api
import { Player } from "textalive-app-api";

作品応募に向けて

プログラミング・コンテストはクリプトン・フューチャー・メディア株式会社が主催し、産業技術総合研究所(産総研) RecMusプロジェクトが協力しています。基本的な情報やお問い合わせ先は 公式サイト をご覧ください。ここでは、作品応募に向けて、技術面でのポイントをご紹介します。

GitHub プライベートリポジトリ

プログラミング・コンテストへ作品を応募するには、作品のソースコードをソーシャルコーディングプラットフォーム「 GitHub」上にアップロードする必要があります。また、主催者による審査が終わるまで他の人に作品のソースコードが見られないようにするため、「プライベートリポジトリ」を作成する必要があります。

詳しい方法は Web 検索 で見つかるチュートリアルを参考にしてみてください。

Webアプリケーション

主催者による審査は、 GitHubからダウンロードしたソースコードを実際のWebアプリケーションとして動作させて行われます。また、入選作品は主催者のWebサーバなどに配置され、一般に公開されてユーザ投票が行われ、入賞を競うことになります。

こうしたことから、今回、応募作品はHTTPサーバ上に設置するだけで動作する静的アプリケーションに限られています。

しかしながら、一般的なWebブラウザで動作するものであればよいので、さまざまなライブラリと組み合わせて開発して構いません。例えば、three.jsPixiJSp5jsのように、映像演出に便利なライブラリは凝ったことをしようとすればほとんど必須かもしれません。

ネットワーク接続を前提としてよいので、Web APIの類を活用してもよいでしょう。Web標準に則ってデバイスのハードウェアを活用するAPIを使っても面白いかもしれません。

READMEファイル

応募フォームに記入できるアピールはプレーンテキストのみで情報量が限られていますが、リポジトリに配置できるREADMEは自由に編集可能で、画像ファイルを貼り込んだりすることもできます。

サンプルコードのREADME のようにWebアプリケーションのビルド、実行手順を書くことはもちろん必要ですが、開発した作品の魅力をアピールできるチャンスとしても、ぜひ活用してください。

デモアプリの設置・動画の撮影と編集

審査に際しては極力READMEファイルなどを見ながらWebアプリケーションを応募者の意図通り動作させようと試みますが、それでも応募者の環境で動いていたものが動かなくなってしまうことはありえます。

そのような場合の保険として、また、作品のアピールのため、応募時にはWebアプリケーションを設置したサイトのURLとデモ動画のURLを入力することをおすすめします。 動画撮影には、macOSの標準機能Windows 10の標準機能が使えます。詳しくは Webで検索 してみてください。

なお、審査自体は原則として作品そのものを対象として行われるため、デモ動画のURL入力は必須ではありませんのでご注意ください。

バージョンの固定

審査対象の楽曲は、歌詞タイミングやサビのタイミングが固定されるように、Webアプリケーションの中で以下のように指定しておいてください。(審査希望の楽曲に関する createFromSongUrl メソッド呼び出し部分のコメントを解除してください。)

バージョンの固定について詳しくは チュートリアル「楽曲情報の活用」ページのTips をご覧ください。

player.addListener({
onAppReady: (app) => {
if (!app.managed) {
// ---
// // blues / First Note
// // https://piapro.jp/t/FDb1/20210213190029
//
// player.createFromSongUrl("https://piapro.jp/t/FDb1/20210213190029", {
// video: {
// // 音楽地図訂正履歴: https://songle.jp/songs/2121525/history
// beatId: 3996956,
// chordId: 2130399,
// repetitiveSegmentId: 2099561,
// // 歌詞タイミング訂正履歴: https://textalive.jp/lyrics/piapro.jp%2Ft%2FFDb1%2F20210213190029
// lyricId: 52065,
// lyricDiffId: 5093,
// },
// });
//
// // ---
// // chiquewa / Freedom!
//
// player.createFromSongUrl("https://piapro.jp/t/N--x/20210204215604", {
// // YouTube: https://www.youtube.com/watch?v=pAaD4Hta0ns
// video: {
// // 音楽地図訂正履歴: https://songle.jp/songs/2121403/history
// beatId: 3953761,
// chordId: 2130375,
// repetitiveSegmentId: 2099586,
// // 歌詞タイミング訂正履歴: https://textalive.jp/lyrics/piapro.jp%2Ft%2FN--x%2F20210204215604
// lyricId: 52094,
// lyricDiffId: 5171,
// },
// });
//
// // ---
// // ラテルネ / その心に灯る色は
//
// player.createFromSongUrl("http://www.youtube.com/watch?v=bMtYf3R0zhY", {
// // ピアプロ: https://piapro.jp/t/FLj2/20210222225003
// video: {
// // 音楽地図訂正履歴: https://songle.jp/songs/2121404/history
// beatId: 3953902,
// chordId: 2130383,
// repetitiveSegmentId: 2099660,
// // 歌詞タイミング訂正履歴: https://textalive.jp/lyrics/www.youtube.com%2Fwatch%3Fv=bMtYf3R0zhY
// lyricId: 52093,
// lyricDiffId: 5177,
// },
// });
//
// // ---
// // 真島ゆろ / 嘘も本当も君だから
//
// player.createFromSongUrl("https://piapro.jp/t/YW_d/20210206123357", {
// // YouTube: https://www.youtube.com/watch?v=Se89rQPp5tk
// video: {
// // 音楽地図訂正履歴: https://songle.jp/songs/2121405/history
// beatId: 3953908,
// chordId: 2130374,
// repetitiveSegmentId: 2099661,
// // 歌詞タイミング訂正履歴: https://textalive.jp/lyrics/piapro.jp%2Ft%2FYW_d%2F20210206123357
// lyricId: 52061,
// lyricDiffId: 5123,
// },
// });
//
// // ---
// // シロクマ消しゴム / 夏をなぞって
//
// player.createFromSongUrl("https://piapro.jp/t/R6EN/20210222075543", {
// // YouTube: https://www.youtube.com/watch?v=3wbZUkPxHEg
// video: {
// // 音楽地図訂正履歴: https://songle.jp/songs/2121406/history
// beatId: 3953764,
// chordId: 2130372,
// repetitiveSegmentId: 2099662,
// // 歌詞タイミング訂正履歴: https://textalive.jp/lyrics/piapro.jp%2Ft%2FR6EN%2F20210222075543
// lyricId: 52062,
// lyricDiffId: 5133,
// },
// });
// ---
// 濁茶 / 密かなる交信曲
player.createFromSongUrl("http://www.youtube.com/watch?v=Ch4RQPG1Tmo", {
video: {
// 音楽地図訂正履歴: https://songle.jp/songs/2121407/history
beatId: 3953917,
chordId: 2130385,
repetitiveSegmentId: 2099665,
// 歌詞タイミング訂正履歴: https://textalive.jp/lyrics/www.youtube.com%2Fwatch%3Fv=Ch4RQPG1Tmo
lyricId: 52063,
lyricDiffId: 5149,
},
});
}
}
});

TextAlive について

TextAliveは、産業技術総合研究所メディアインタラクション研究グループが研究開発しており、学術研究目的で公開しながら実証実験中です。

本研究はWeb上にコンテンツを公開されている多くの方々によってはじめて可能になったプロジェクトであり、Webを前提としたコンテンツ制作の可能性を追求しています。

TextAliveの実証実験として、以下のとおり「初音ミク『マジカルミライ 2021』プログラミング・コンテスト」の企画に協力しています。本研究の一部は、JST CREST (JPMJCR20D4) の支援を受けています。

主催
クリプトン・フューチャー・メディア株式会社
協力
産業技術総合研究所(産総研) RecMusプロジェクト
産総研本企画関係者
加藤 淳(総括・管理・企画・TextAlive開発)
後藤 真孝(総指揮・企画)
お問い合わせ先
textalive-ml [at] aist.go.jp

更新履歴

このページに英訳を追加しました。英語版のWebブラウザでアクセスすると読めます。
2021/9/17
TextAlive App API講座のYouTube動画を埋め込みました。また、YouTubeとピアプロの両方に公開されている楽曲について、バージョン固定時に使えるサンプルコードへ楽曲URLを追加しました。
2021/9/15
特設ページを公開しました。
2021/7/16 17:00