Move Around the Music Rooms は TextAlive App API を用いたリリックアプリです。
本アプリは、初音ミク「マジカルミライ 2023」 プログラミング・コンテスト応募作品になります。
ミクさんをドラッグして移動させ、曲をモチーフにした部屋に近づくと対応した曲を聴くことができるアプリです。
楽曲コンテストの全曲が同時に流れており場所によっては複数の曲が聴けるようになっていますので自由な位置で楽しんでみて下さい。
開始位置では何も聴こえないようになっていますので、いろんな場所に移動してお好みのスポットを探してみて下さい。
部屋を巡りシームレスに変わっていく曲の変化を楽しんだり、一つの場所でじっくり曲を聴き入ったり自由に楽しんで下さい。
- アプリを起動し画面に「READY! / タップ or クリックでスタート」と表示されたら画面を押すことでアプリが開始します
- ドラッグすることで、ミクさんを移動させることができ、部屋に近づくことで歌詞が表示され、曲が聴こえてくるようになります
下記の環境で動作確認していますが、OS/ブラウザのバージョン、ハードウェア構成によっては正しく動作しない可能性があります。
- Windows: Google Chrome, Firefox, Edge
- Android: Google Chrome
下記の環境では、ミクさんの位置にかかわらず全楽曲が最大音量で流れます。
- iOS: Safari, Google Chrome
こちらiOSでのメディアの取り扱いポリシー都合か、TextAlive App API都合か原因が特定できていない状態です。
現状、アプリ開発側からの不具合対応が難しい為、iOS以外の環境からご確認いただけますと幸いです。
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 のポート番号)
- しろねぎ
- minatty
- 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
- 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