『どうぶつの森音声ジェネレーター』が死んでいた

いつからかわかりませんが、『どうぶつの森音声ジェネレーター』が死んでいました。

どうぶつの森音声ジェネレーターとは？

これです↓

animal-crossing.utakata.app

なぜ死んでいたのか

おそらく、Heroku の無料プランが無くなったためだと思われます。無料プランが廃止されたのはだいぶ前ですが、Heroku によって停止処理が行われたのが最近だったのかもしれません。

問い合わせが来たのが 2024/12/13 で、それより前にすでに止まっていたのかもしれません。

フロントエンドには Netlify を使っていたため、フロントエンドは生きていたのですが、音声生成のサーバーが死んでいる状態でした。

どうやって復活させたのか

サーバーを新しく作り直すことで復活させました。

ついでに技術スタックも刷新しました。

技術スタック

元々、フロントエンドは Vue.js を使っており、Netlify にデプロイしていました。

バックエンド（音声合成サーバー）は、Python + Django で実装されており、Heroku にデプロイされていました。

しかし、Vue.js を使っておきながら Vue.js の機能が必要なほど複雑な実装はしていなかったことや、 React.js の流行により Vue.js が下火になってきたこともあり、Vue.js を廃止し、ただの html で実装することにしました。

バックエンドについては、これまで Django 2 を使っていたのを、最新の Django 5 にアップデートしました。Python を脱却することも考えましたが、再実装するのが大変すぎたので、Python を継続して使うことにしました。

Python + Django + ただの HTML（Django のテンプレートエンジン）を使うことで、フロントエンドとバックエンドのデプロイが一本化でき、メンテナンスコストが下がりました。

移行メモ

とりあえず pyenv をインストールして、pyenv 経由で Python をインストールしました。Python アプリの環境構築などには Pipenv を使いたく、 Pipenv を入れました。

Python の最新版は 3.13 でしたが、音声合成に使っている pydub というライブラリが Python 3.13 には対応していないようで、 3.12 で環境構築しました

Pipenv 環境構築

pipenv --python 3.12

必要なライブラリを入れていきます

# 仮想環境に入る
pipenv shell

# 必要なライブラリのインストール＆Pipfileへ依存関係を保存
# == でバージョンを指定しないと、 Pipfile でバージョンが固定されないので注意
pipenv install django==5.1.4
pipenv install pydub==.25.1. # 音声合成のライブラリ
pipenv install gunicorn==23.0.0"  # 本番でアプリケーションを動かすためのライブラリ

これで、 Pipfile の中身はこんな感じになる

[[source]]
url = "https://pypi.org/simple"
verify_ssl = true
name = "pypi"

[packages]
django = "==5.1.4"
pydub = "==0.25.1"
gunicorn = "==23.0.0"

[dev-packages]

[requires]
# pydub が Python 3.13 に対応していないので Python 3.12 を使う
python_version = "3.12"
python_full_version = "3.12.8"

Django プロジェクト作成

Django のバージョンをがっつり上げることになるので、Django プロジェクトを作り直すことにした

# 以下は pipenv 仮想環境の中で実行する
# django がインストールされていることを確認する
$ python -m django --version
5.1.4

# Django プロジェクトを作成
$ python -m django startproject animal_crossing_voice_generator
$ cd animal_crossing_voice_generator

# プロジェクトの中にアプリを作成（詳細は Django のチュートリアルなどを参考にしてください）
$ python -m django startapp app

Django は、「プロジェクト」の中に「アプリケーション」を作成してアプリを構築していく感じになります。今回は animal_crossing_voice_generator の中に app というアプリを一つだけ作成することになります。

アプリを作成したら、古い Django 2 のアプリの、音声合成部分をそのままコピーしてきます。

大体そのままコピーすれば動きました。

HTML の作成

app/templates/index.html というファイルを作成し、HTML を書く。

settings.py の INSTALLED_APPS に app が追加されていることを確認します。これをしないと app/templates を読み込んでくれません。 templates は Django で決められた名前なので、このディレクトリ以下に html を置くといい感じに読み込んでくれます。

通常は TemplateView というクラスを継承して独自のビュークラスを作成して... みたいにするのですが、この templates は引数を受け取らないので、以下のようにしても OK です。

from django.urls import path
from app.views import generate_voice
from django.views.generic import TemplateView

urlpatterns = [
    path("", TemplateView.as_view(template_name="index.html"), name="index"),
]

Heroku へのデプロイ

今回はデータベースなども使わないので、シンプルです。

Procfile という、Heroku で Django を起動するための設定ファイルを書きます。このファイルは GitHub リポジトリのルートに置いておきます。

web: gunicorn animal_crossing_voice_generator.wsgi

Heroku に GitHub リポジトリを連携し、main ブランチをデプロイすると、自動的に Python アプリだと判断されて、アプリケーションがデプロイされます。

音声合成に ffmpeg を使っているので、ffmpeg をインストールする必要があります。Settings から Buildpacks で https://github.com/jonathanong/heroku-buildpack-ffmpeg-latest を追加すると、ffmpeg が使えるようになります。

さらに、 Heroku の設定画面から SSL Certificates を有効にして、 Domains に animal-crossing.utakata.app というドメインを追加します。DNS Target が発行されるので、 DNS に CNAME としてこれを登録すれば OK です。

DNS は Cloudfrare のものを使っており、 SSL やキャッシングも Cloudfrare を使っていたのですが、新しい環境では SSL は Heroku のものを使うようにし、Cloudfrare は単なる DNS として使っています。

復活！

こうして、無事に『どうぶつ語音声ジェネレーター』が復活しました。