Require node.js 10.x higher.(Recommended 12.x)
npm install -g yarn && yarn
yarn dev
yarn updateResources:dev
ディレクトリ構造から音声一覧ファイルを生成し、 next.js の SSG にてHTMLを生成するという仕組みになっている。
audiolist.sh を実行すると、このディレクトリ内を find コマンドで音声ファイルを列挙し、 static/audiolist.json が生成される。
audiolist.json は、 next.js 立ち上げ時に getStaticProps 内にて読み込まれ、コンパイル時にボタンの HTML が自動生成される。
各カテゴリ内の数字だけの名前のディレクトリに、NN_ボタン名.mp3 という命名規則のファイルを置き、リソースアップデートを行うと追加されます。 また、数字のディレクトリはサブカテゴリのような扱いになっており、ディレクトリを分けることでページ上でもある程度のまとまりを表現出来ます。
例
static/audio/1_汎用/12/00_バケモノ！1.mp3
static/audio/1_汎用/12/01_バケモノ！2.mp3
static/audio/1_汎用/12/03_バケモノ！3.mp3
static/audio/1_汎用/12/04_バケモノ！4.mp3
static/audio/1_汎用/12/05_バケモノ！5.mp3
static/audio/1_汎用/12/06_バケモノ！6.mp3
static/audio/1_汎用/12/07_バケモノ！7.mp3
static/audio/1_汎用/12/08_バケモノ！8.mp3
static/audio/1_汎用/12/09_バケモノ！9.mp3
static/audio/1_汎用/12/10_バケモノ！10.mp3
手作業でこれを行うのがつらい場合はカテゴリを分けるに止め、サブカテゴリに無理に分ける必要はないですが、ボタンの使い勝手を考えるなら整理されているのが良いと思います。
ぶっちゃけると決めてないけどレイアウト系には独自のクラス名を付けてフォントの大きさとか色とか見た目は専用のクラスを作ってそれを個別に当てる運用にしたいなって思ってる（適当）
ここに配置されているファイルは、カバー株式会社(cover corp.)の所有物です。 よって、公式の二次創作ガイドライン に従うものとします
MIT