技術

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

投稿日:

以前紹介した「Google Inside Music」。

「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

あと(いらないかもしれないけど)

・githttps://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をインストール。

npm install -g http-server
http-server

これでローカル起動出来るはず

これで環境構築は終了。

後は自分の音楽データを入れていくだけ。

長くなったので続きは次回。

-技術

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

【AngularJS】 $on, $emit, $broadcast

どうも、なかたです。 AngularJSのコントローラー(スコープ)間のデータや …

no image

[Angular]リアクティブフォームのHTML側の記法

Angularのリアクティブフォームではtsファイル側でネストした構成を組むこと …

[AWS Cli] brew install awscli が失敗!

どうも中田です awsコマンドがないよーって言われたので、再度インストールするこ …

ブラウザでRailsのrouting設定を確認する

こんにちは Railsでroutingを確認する時、コマンドでrails rou …

no image

javascriptで画面サイズ毎に処理をしたい時

こんにちは 今回はjavascriptで画面サイズ毎に処理をしたい時にオススメの …