「Google Inside Music」で自分の好きな音楽を聞いてみる（local環境構築編）

「Google Inside Music」のプリセット曲PVまとめ

公開されているものは楽器パートごとに分かれているものなのですが、曲単体を複数並べたり出来るのかな？と気になったので、オープンソース拾って動かしてみたいと思います。

必要なもの

To build a local version of Inside Music, you will need to have Node.js and <a href="https://webpack.github.io/“>webpack installed.
（REDAME抜粋）

・Node.js

・webpack

・Inside Musicのソース（https://github.com/googlecreativelab/inside-music）

あと（いらないかもしれないけど）

・git（https://git-scm.com/download/win）

動かすまで（Windows 10 64bit 環境）

試したいことが出来たらゴール。いらない手順等あるかもしれませんが動けば満足なので気にしない。

README見ながら進めていきます。コマンド操作なのでコマンドプロンプトとかPowerShellを使います。

0.事前準備（Gitのインストール）

あると良いかもしれないので（多分）、Gitをインストールしておきます。
https://git-scm.com/

インストーラでnext連打（全部デフォルト設定）。

1.Node.jsをインストールする。

Node.js and installed.（抜粋）

てことで、Node.jsをインストールします。

https://nodejs.org/en/

現時点の安定版（6.11.4）をインストーラでインストール。

こちらもnext連打（全部デフォルト設定）なので特に説明することはございません。

2.webpackをインストールする。

【JavaScript】webpackのインストールと始め方

こちらを参考にすすめていきます。といってもコマンド一回実行するだけ。

npm install webpack -g

自分の環境では以前にNode.js使っていたこともあり、すんなりインストール出来ましたが、win環境だとエラーが出ることもあるそうなのでエラーが出た場合はこちらを参考にしてみてください。

Windows の Node.js 開発環境構築最小手順

4.「Inside Music」のインストール

ソースを貰ってきます。

https://github.com/googlecreativelab/inside-music

自分はzipダウンロードからの展開で取得。

ソースのあるディレクトリをカレントにして、インストール実行。

npm install

（README抜粋）

============================================================
[ .................] \ loadIdealTree:loadAllDepsIntoIdealTree: sill install loadIdealTree
============================================================

こんなのが出て止まってしまった場合は、”package-lock.json”を削除して実行してみてください。

したものの、

============================================================
[  ................] \ fetchMetadata: sill pacote range manifest for kind-of@^4.0.0 fetched in 1ms
============================================================

こんな感じでfetchMetadataで止まってしまったら…ググってください…

自分は解決方法が分からなかったので、”package.json”の中に書いてあるものを一個一個インストールしました。

npm install 書いてあるもの

5.webpackでビルド

webpack -p

（README抜粋）

READMEそのまま実行

>webpack -p

PS C:\gim\imm> webpack -p
Hash: cac1cc7b9c4ad398f681
Version: webpack 3.7.1
Time: 11808ms
Asset Size Chunks Chunk Names
./build/Main.js 258 kB 0 [emitted] [big] Main
./build/Fallback.js 1.19 kB 1 [emitted] Fallback
./build/vendor.bundle.js 1.08 MB 2 [emitted] [big] vendor
[5] ./src/Config.js 4.58 kB {0} [built]
[20] (webpack)/buildin/global.js 509 bytes {2} [built]
[53] ./src/Main.js 1.25 kB {0} [built]
[54] ./style/main.scss 1.27 kB {0} [built]
[58] ./src/splash/Splash.js 8.07 kB {0} [built]
[90] ./src/init-aframe-scene.js 12.4 kB {0} [built]
[99] ./src/environment/Floor.js 4.3 kB {0} [built]
[101] ./src/environment/sound-rings.js 6.51 kB {0} [built]
[103] ./src/environment/atmosphere.js 9.84 kB {0} [built]
[105] ./src/song/Tracks.js 3.8 kB {0} [built]
[129] ./src/component/Animate.js 1.69 kB {0} [built]
[135] ./src/Fallback.js 1.59 kB {1} [built]
[136] ./style/fallback.scss 1.28 kB {1} [built]
[137] ./node_modules/css-loader!./node_modules/autoprefixer-loader!./node_modules/sass-loader/lib/loader.js!./style/fal
lback.scss 540 bytes {1} [built]
[138] multi aframe aframe-auto-detect-controllers-component aframe-look-at-component @ekolabs/aframe-spritesheet-compon
ent/dist/aframe-spritesheet-component 64 bytes {2} [built]
+ 124 hidden modules
PS C:\gim\imm>

成功

6.http-serverのインストール

You can now run a local server such as http-server. To install http-server, run npm install -g http-server. You can now view the site in a browser.
（README抜粋）

README通りにhttp-serverをインストール。