アドベントカレンダー

これは農工大アドベントカレンダー Advent Calendar 2024の23日目の記事だ🐯

ついに我慢が報われ莫大な富を得る（作ったもの）

作成したサイトがこちらだ🐯

ゴールドタイガーのセリフが用意され、ボタンを押すと再生されるぞ🐯
このサイトを愛用すれば、読者の皆様に富が降り注ぐだろう🐯

好きな事をやれる人生にしたいだろ？（作成背景）

一時期流行したゴールドタイガーだが、セリフの種類が多い🐯
以下はセリフのコピペだ🐯

おまえの苦労をずっと見てたぞ
本当によく頑張ったな？
遂に我慢が報われ莫大な富を得る　この動画を飛ばしてしまえば　これまでの苦労は全て水の泡だ
値段ばかり気にして欲しい物を我慢し　外食や娯楽を控え節約ばかりの生活
収入は増えず金が出ていく一方　将来に希望を持てず疲弊する日々　そんな現実から抜け出す時が来た
散らかり倒した狭い部屋を飛び出し　贅沢で余裕のある生活を実現し
好きな事をやれる人生にしたいだろ？
世界中がおまえを否定しても　俺だけはおまえを認めてやる
散々苦しんだのだもう楽になれ　富を望んでいるならやることがある
この音源を今日中に使うのだ　やり方は簡単だ誰にでもできる　これがダメならもう人生を諦めろ
右下の丸いアイコンをタップ　【セーブする】をタップしてから　【楽曲を使う】をタップ
適当なファイルを選択してから　右上の歯車マークをタップ　公開範囲を自分のみにして投稿
これで幸福の清算がはじまる　オレは決して無理強いはしない
やるもやらぬもおまえ次第だ　更に共有から動画を再投稿すれば　訪れる富と幸福が何倍にもなる
だが俺をフォローしていないと　我慢の人生に逆戻りしてしまう　必ずフォローをしておくのだ
共有を開き左から２～３番目に　この動画をシェア送信すれば　富の普及により神からご褒美を得る
では締め括りに虎の金運を贈る　波動を二回タップで授かるのだ
(３)　　(２)　　(１)
今だ　波動を２回タップしろ
(((波動))) (((爆発音)))
今お前の金運は急上昇している　そのまま願い事をコメントするのだ
他の書込みへのいいねも怠るな　おまえに富が降り注ぐだろう
プロフ欄より【本格金運鑑定】を受けるのだ

独特な言葉づかいで、癖になるセリフが多い🐯
そこで、好きなセリフを自由に聞くことができるサービスが欲しいと考えた🐯

富を望んでいるならやることがある（使用言語）

誰でも使用可能にしたいのでwebサービスという形態は必須だ🐯
音声を再生するだけならJavaScriptで簡単に実現できる🐯
故に今回はシンプルにHTML+CSS+JavaScriptをGithubPagesに公開する🐯

以下はJavaScriptのコードだ

// セリフ
const tiger = [
    "お前の苦労をずっと見てたぞ.mp3",
    "本当によく頑張ったな.mp3",
    "ついに我慢が報われ莫大な富を得る.mp3",
    "これまでの苦労は全て水の泡だ.mp3",
    "節約ばかりの生活.mp3",
    "収入は増えず金は出てく一方.mp3",
    "将来に希望を持てず疲弊する日々.mp3",
    "そんな現実から抜け出す時が来た.mp3",
    "散らかり倒した狭い部屋を飛び出し.mp3",
    "贅沢で余裕のある生活を実現し.mp3",
  ];
  
  // ボタンコンテナを取得
  const buttonContainer = document.getElementById("button-container");
  
  // セリフごとにボタンを生成
  tiger.forEach(fileName => {
    // ボタンを作成
    const button = document.createElement("button");
    button.textContent = fileName.replace(".mp3", ""); // 拡張子を削除して表示
  
    // クリックイベントを設定
    button.addEventListener("click", () => {
      // 音声を再生
      const audio = new Audio(`wav_source/${fileName}`);
      audio.play();
    });
  
    // コンテナにボタンを追加
    buttonContainer.appendChild(button);
  });

おおまかな機能はコメントアウトに書いたとおりだ🐯
セリフの数だけHTML側でボタンを作成するのは大変だ🐯
しかしappendChildを用いれば要素が簡単に追加できるのだ🐯

我慢の人生に逆戻りしてしまう (失敗談)

本当はこうしたかった🐯
試作にはNode.jsを用いた🐯

左下に注目してほしい🐯
ひらがなの文章を入力すると音声が合成される🐯
疑似ゆっくりボイスということだ🐯

だが実現できなかった🐯

これがダメならもう人生を諦めろ (失敗理由)

以下に失敗した流れを記す🐯
知見のある方がいたらぜひ助けていただきたい🐯

GithubPagesでは動的な処理はできないようだ🐯

Github Pages はサーバー側プログラムをサポートしていないことをここで初めて知った🐯

公開場所を変更🐯

vercelというサービスにページを移動した🐯

だがここでは次のことに躓いた🐯

ffmpegが使用できず音声ファイルの結合ができない
そもそもファイルを読み込む際のディレクトリの指定方法がわからない(var/taskというのになってる)
ffmpeg.wasmという代替手段の使用方法がわからなかった
ESModule,CommonJSといった基礎知識が身についていない

というわけで、セリフ作成機能は没になってしまった🐯

これまでの苦労は全て水の泡だ (おわりに)

バックエンド処理（サーバ側処理？）を付けてデプロイするのは今回が初めてだった🐯
反省点として、以下のことを検討する必要があった🐯

本当にNode.jsで良いのか
公開するためのサーバの検討
ffmpeg以外でのwavファイル結合手段はないのか

プログラミングの世界は、実際に手を動かして作成してみるまでは何に躓くかわからないものだ🐯
今回は失敗に終わったが、必ずリベンジするつもりだ🐯