More than 1 year has passed since last update.

太鼓WebをWindowsで動かす。

Posted at 2022-06-21

太鼓ウェブって何だ？

私はプログラムを教えています。生徒が太鼓の達人が大好きで勉強の合間に時間を決めてやっているらしい。聞いてみると自作の曲を作れるらしく超絶技巧を要する曲もあるらしい。なんじゃそれは？自作曲なんて入れてもらえるのかいな？商用ゲームだろ？なになに？太鼓ウェブなるものがある？そりゃナムコがやってんのかいな？何？違う？

よくわかりませんね？？？

というわけで生徒からカルチャーショックを受けたところで、先生としては若干反撃したくなり太鼓ウェブについて調べる。なるほど、有志が作って運営してるんかいな。ライセンスは？少し揉めそうになったが、一応線引きができている（これも生徒から明確な説明を受けた。彼は優秀だ。）。なるほど、あ、githubにソース公開されてるやんけ。ざっと見たところLinuxなら簡単に構築できそうだな。

「構築してみるかい？」
「やるやる」

ということで先生としての面目躍如（？）で生徒も興味を示したんですが、Linuxは彼にとって障壁が高く家にも環境が無いので構築法を覚えても家でやることもできません。何とかWindowsでやれんかな？PythonやNginx、MongoDB、Redisとかは大丈夫だろう。Supervisorも使わなきゃいいわけだし。問題はgunicornかな？waitressで動くかな？ハマりそうで嫌だが、不安要素はこれだけかな？で、やってみました。

結論から言うと、動きました。
以下、わかりやすいかどうかわかりませんが、折角なのでセットアップの記録を残します。

サーバ要素と種類

必要なサーバ要素は、太鼓ウェブのgithubを見ればわかりますが、

Nginx
MongoDB
Redis
WSGI(waitress)
Application(Python)

です。1～3はサービスで動かせますね。問題は4と5です。本家はSupervisorで起動しておりまして本格的ですね。我々は練習なので手動でやります。今回はNginxも手動で動かしています。先ずは各要素のインストールです。省略してもいいのかもしれませんが、資料として記しておきます。

各種インストール

Pythonのインストール
Microsoft Storeでインストール。我々は3.8を使いました。
gitクライアントのインストール
Github Desktop Downloadからダウンロードしてインストールしました。
Nginxのインストール
Nginx Orgのダウンロードページからダウンロードして展開したところから管理者コンソールで起動しました。サービス化していません。手順は後述します。
MongoDBのインストール
MongoDB Community Server Downloadページからダウンロードしてインストールします。管理者権限でインストールすれば自動的にサービスに加えられ起動します。
MongoDB Toolsのインストール
MongoDB Toolsダウンロードページからダウンロードして展開して実行ファイルを得ます。後に示しますが、太鼓Web用データベースを初期化するのに必要です。
Redisのインストール
RedisのGithubからmsiをダウンロードして管理者権限でインストールすれば自動的にサービスに加えられ起動します。
virtualenvのインストール
Pythonインストール後にpipでインストールします。以下のように実行します。

pip install virtualenv

waitressのインストール
Pythonインストール後にpipでインストールします。以下のように実行します。

pip install waitress

アプリケーションのクローンと仮想環境の構築

各種インストールが終わったら次はGithubから太鼓ウェブのアプリケーションをクローンし、動作用の仮想環境を構築します。
私のユーザ(bunic)のホームディレクトリ(C:¥home¥bunic)にtaiko-webというディレクトリを作り、その下にサーバ環境用ディレクトリ(srv)を作りそこに以下のようにクローンしました。以下ホームディレクトリからの作業ログです。

cd taiko-web
git clone https://github.com/bui/taiko-web.git .¥srv¥taiko-web

次いで、以下のようにそこに仮想環境を作ります。

python -m virtualenv .¥srv¥taiko-web

仮想環境を有効化して必要なパッケージをインストールします。gunicornも入ってしまいますが使いません。

.¥srv¥taiko-web¥Scripts¥activate.bat
pip install -r .¥srv¥taiko-web¥requirements.txt

設定ファイルのサンプルを設定ファイルにコピーします。

cd .¥srv¥taiko-web
copy config.example.py config.py

初期データベースの作成

MongoDBに初期データベース(taiko)を作ります。
MongoDB Toolsの実行ファイルをMongoDB本体のbin以下のコピーしておいてそこにパスを設定しておきます。
MongoDBがインストール済みであればそこへのパスは自動的に設定されています。以下を実行します。

mongoimport --db taiko --collection categories --file .¥taiko-web¥srv¥taiko-web¥tools¥categories.json --jsonArray

Nginxの展開と設定

ウェブサーバ、Nginxを展開し設定します。

ダウンロードしたzipファイルの展開
zipファイルはホームディレクトリ以下のtaiko-webに置き、右クリックで展開します。今回は、1.21.6を使用しています。
設定
taiko-web¥nginx-1.12.6¥conf¥nginx.confを編集して、serverに以下を上書きします。


server {
	listen 80;
	#server_name taiko.example.com;
	
	location / {
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_set_header Host $server_name;
		proxy_pass http://127.0.0.1:34801;
	}
	
	location ~ ^/(assets|songs|src)/ {
		root C:/Users/bunic/taiko-web/srv/taiko-web/public;
		location ~ ^/songs/(\d+)/preview\.mp3$ {
			try_files $uri /api/preview?id=$1;
		}
	}
	
	location /p2 {
		proxy_http_version 1.1;
		proxy_set_header Upgrade $http_upgrade;
		proxy_set_header Connection "Upgrade";
		proxy_pass http://127.0.0.1:34802;
	}
}

太鼓ウェブの起動

ここまできたら太鼓ウェブを起動できます。MongoDBとRedisはサービスにより起動しているものとします。また、ここまで使用したコンソールはすべて閉じているとします。

WSGIサーバの起動
まず、一つ目のコンソールを起動し、WSGIサーバを起動します。
仮想環境を有効化してからwaitressを起動します。以下のようにします。

.¥taiko-web¥srv¥taiko-web¥Scripts¥activate.bat
waitress-serve --listen=127.0.0.1:34801 app:app

Applicationサーバの起動
二つ目のコンソールを起動し、アプリケーションサーバを起動します。
仮想環境を有効化してからアプリケーションサーバを起動します。以下のようにします。

.¥taiko-web¥srv¥taiko-web¥Scripts¥activate.bat
python .¥taiko-web¥srv¥taiko-web¥server.py 34802

Nginxの起動
MongoDBとRedisはサービスで起動していますのであとはNginxを起動するだけです。
今回は以下にある実行ファイルを管理者権限で実行しました。

C:¥home¥bunic¥taiko-web¥nginx-1.21.6¥nginx.exe

プレイ

起動が終了したらブラウザでhttp://localhost/にアクセスすると以下の画面が出てきます。

背景が青一色の画像になっており、リソースできちんと著作権の考慮がされているのがわかりますね。
ここではわかりませんが、起動時に発する声も本家の太鼓の達人のものとは違っています。
太鼓ウェブの中の人たちはバンダイナムコさんとの関係を尊重しているようです。

メニュー画面に進むと以下のようになります。

設定メニューに進むと以下のようになります。

生徒さんにもインストールしてもらい、既存のtjaファイルとoggファイルを使って曲が追加できるのも確認できました。こういうことが可能なことに驚いてくれましたし、家のPCにインストールしたいと言っておりました。めでたしめでたしです。インターネットに公開したいと言い出したらそれも教えてあげよう。将来は立派なサーバエンジニアになってもらいたいものだなと先生は思うのでした。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up