Recollection MAGICAL MIRAI は TextAlive App API を用いたリリックアプリです。
本アプリは、初音ミク「マジカルミライ」10th Anniversary プログラミング・コンテスト応募作品になります。
これまでのマジカルミライを想起させるような演出を組み込んだライブをイメージした作品です。
- 歴代のマジカルミライやバーチャルシンガー Anniversary テーマソングをモチーフにした演出
- 各種テーマソングがマジカルミライのライブで演奏された際にスクリーンに出ていた歌詞表示やMVの歌詞表示を再現した演出
- 歴代のマジカルミライをモチーフにした演出中にスクリーン風のオブジェクトでその旨をアピール（歌詞演出の元ネタ補足など）
- ライブのラストで行われる（行われるはずだった）銀テープ演出
- etc.
- アプリを起動し画面に「READY! / タップ or クリックでスタート」と表示されたら画面を押すことで曲が再生されます
- 曲再生中は画面を押すとペンライトを振りパーティクルが生成されます
- パーティクルはステージ上に溜まり、ラストのサビでステージに降り注がれます
- パーティクルはペンライトを振らない場合でも一定時間ごとに自動で生成されます
- 画面左下に表示されている「penlight」の項目を選択することで、ペンライトや振った際に生成されるパーティクルの色を変えることができます
- 曲の再生が終わり「THANK YOU / EVERYBODY / タップ or クリックで最初からスタート」が表示されたら画面を押すことで再度、アプリを体験できます
下記の環境で動作確認していますが、OS/ブラウザのバージョン、ハードウェア構成によっては正しく動作しない可能性があります。
- Windows: Google Chrome, Firefox, Edge
- Mac: Safari, Google Chrome
- Android: Google Chrome
- iOS: Safari, Google Chrome
Node.js をインストールして下さい。
package.json のあるディレクトリ (app) にて下記コマンドを実行し、パッケージをインストールして下さい。
npm install
トークンを下記のjsonファイルに設定して下さい。（トークンは https://developer.textalive.jp/ から取得して下さい。）
- 本番用：app/src/textalive/textalive_config.json
- 開発用：app/src/textalive/dev_textalive_config.json
app/src/textalive/TextAlivePlayer.ts 内にjsonファイルを読み込んでいる箇所がありますので、適時書き換えてアプリを動作させて下さい。
import config = require("./dev_textalive_config.json");
下記コマンドを実行することで、サーバが起動します。
npm run build-dev
下記の出力が表示されていればOKです。
そのurlにアクセスすることでアプリを確認することができます。
Server running at
http://localhost:****(**** はデフォルト 1234 のポート番号)
app/src/index.ts 内に class MainSequence が実装されており下記の値を変更することで別の楽曲でもアプリを再生することができます。
private static musicInfoIndex = 0;
再生可能な楽曲は下記の通りです。
| 値 | 再生楽曲 |
|---|---|
| 0 | Loading Memories / せきこみごはん feat. 初音ミク |
| 1 | 青に溶けた風船 / シアン・キノ feat. 初音ミク |
| 2 | 歌の欠片と / imo feat. MEIKO |
| 3 | 未完のストーリー / 加賀（ネギシャワーP） feat. 初音ミク |
| 4 | みはるかす / ねこむら（cat nap） feat. 初音ミク |
| 5 | fear / 201 feat. 初音ミク |
- gansakudo
- takanosuke
- ya2ha4
- dat.gui
本アプリではApach License 2.0 のライセンスで配布されているパッケージがインストールされます
Apache License 2.0 http://www.apache.org/licenses/LICENSE-2.0
https://github.com/dataarts/dat.gui/blob/master/LICENSE - textalive-app-api
https://github.com/TextAliveJp/textalive-app-api/blob/master/LICENSE.md - three
Copyright © 2010-2022 three.js authors
https://github.com/mrdoob/three.js/blob/dev/LICENSE - copy-files-from-to
Copyright (c) 2017 webextensions.org
https://github.com/webextensions/copy-files-from-to/blob/master/LICENSE - del-cli
Copyright (c) Sindre Sorhus sindresorhus@gmail.com (https://sindresorhus.com)
https://github.com/sindresorhus/del-cli/blob/main/license - glslify-bundle
Copyright (c) 2014 stackgl contributors
https://github.com/glslify/glslify-bundle/blob/master/LICENSE.md - parcel
Copyright (c) 2017-present Devon Govett
https://github.com/parcel-bundler/parcel/blob/v2/LICENSE - process
Copyright (c) 2013 Roman Shtylman shtylman@gmail.com
https://github.com/defunctzombie/node-process/blob/master/LICENSE - typescript
本アプリではApach License 2.0 のライセンスで配布されているパッケージがインストールされます
Apache License 2.0 http://www.apache.org/licenses/LICENSE-2.0
https://github.com/microsoft/TypeScript/blob/main/LICENSE.txt
- ボックスミク ver1.1
daniwell
https://aidn.jp/mmd/box_miku/ （ライセンスはモデルデータに同梱） - ボックスリン ver1.2
daniwell
https://aidn.jp/mmd/box_rin/ （ライセンスはモデルデータに同梱） - ボックスレン ver1.2
daniwell
https://aidn.jp/mmd/box_len/ （ライセンスはモデルデータに同梱） - ボックスルカ ver1.1
daniwell
https://aidn.jp/mmd/box_luka/ （ライセンスはモデルデータに同梱）
- Mplus 1 Code
Copyright 2021 The M+ FONTS Project Authors
https://github.com/coz-m/MPLUS_FONTS - 自家製 Rounded M+
自家製フォント工房
http://jikasei.me/font/rounded-mplus/about.html