*この記事はClaudeさんとのあるチャットの履歴をそのまま記事にしてもらったものです。
こんにちは、今回は私がまったくの初心者から挑戦した、Whisperを使った音声文字起こしWebアプリ開発の道のりを共有します。エンジニアでもない私が、ターミナルとにらめっこしながら作り上げた奮闘の軌跡です。
きっかけ
ターミナルでPythonを使い、WhisperでMP3からの文字起こしを行っていました。でも毎回コマンドを打ち込むのが面倒になり、「ブラウザでファイルをドロップするだけで文字起こしできたら便利なのに」と思ったのが始まりです。
開発環境の構築：最初の壁
まずはプロジェクトディレクトリと仮想環境を作ることから始めました。
mkdir whisper-webapp
cd whisper-webapp
python -m venv venv
source venv/bin/activate
一見簡単そうに見えたこの手順、実は最初の壁でした。コマンドを打ち込んでも何も起こらない…。「あれ？動いてないの？」と不安になりましたが、コマンドが成功していても何も表示されないことを知りませんでした。
必要なファイル作成：複雑さに戸惑う
次に以下のファイルを作成しました：
- requirements.txt（必要なパッケージのリスト）
- app.py（Flaskアプリケーションのメインファイル）
- templates/index.html（ファイルアップロード用のフォーム）
- templates/result.html（文字起こし結果を表示するページ）
コードの書き方は調べながら進めましたが、app.pyの書き方でつまずきました。特に**name**を__name__と書かなければならないことを知らず、最初は動きませんでした。
依存パッケージのインストール：混乱と苦悩の連続
依存パッケージのインストールでは本当に苦労しました。
pip install -r requirements.txt
これが一番厄介でした。パッケージは正常にインストールされたはずなのに：
Requirement already satisfied: flask==2.0.1 in ./venv/lib/python3.11/site-packages (2.0.1)
こんなメッセージが出るのに、いざアプリを実行すると：
ModuleNotFoundError: No module named 'flask'
この矛盾に何時間も頭を悩ませました。仮想環境が正しく有効化されているのに、なぜPythonがFlaskを見つけられないのか…。
バージョン互換性という罠
問題の核心はバージョン互換性でした。Flaskが古いバージョンのWerkzeugの関数url_quoteを使おうとしていましたが、インストールされているWerkzeugは新しすぎました。
ImportError: cannot import name 'url_quote' from 'werkzeug.urls'
この解決に辿り着くまでに、何度も仮想環境を削除して作り直し、さまざまなバージョンの組み合わせを試しました。
最終的に：
pip3 uninstall -y flask werkzeug
pip3 install flask==2.2.0
という方法で問題を解決できました。
NumPyバージョン問題：さらなる障壁
Flaskの問題が解決したかと思いきや、今度はWhisperとNumPyのバージョン互換性問題に直面しました：
A module that was compiled using NumPy 1.x cannot be run in NumPy 2.1.3
NumPyを1.x系にダウングレードする必要がありました：
pip3 uninstall -y numpy
pip3 install numpy==1.26.4
ポート競合：最後の関門
いざアプリを起動しようとすると：
OSError: [Errno 48] Address already in use
デフォルトのポート5000が他のプロセスで使われていました。さらに5001も使われていることが判明。最終的にapp.pyを編集して8080ポートを使うように変更しました：
if __name__ == '__main__':
app.run(debug=True, port=8080)
ついに動いた！…のはずが
ブラウザでアプリにアクセスして、喜びもつかの間、音声ファイルをアップロードすると：
Request Entity Too Large
ファイルサイズ制限にぶつかりました。app.pyを再度編集して、制限を128MBに引き上げる必要がありました：
app.config['MAX_CONTENT_LENGTH'] = 128 * 1024 * 1024 # 128MB制限
成功！そして待ち時間との闘い
やっとアプリが動き出し、30分程度の音声ファイルを文字起こししてみることに。「処理中です。しばらくお待ちください…」の表示を見ながら、ほぼファイルの長さと同じくらいの時間待つことになりました。
学んだこと
この開発プロセスから多くのことを学びました：
- エラーメッセージを丁寧に読む重要性 – エラーの原因はメッセージに隠されていることが多い
- バージョン互換性の重要性 – 特にPythonのライブラリはバージョンが命
- デバッグの根気強さ – 一つずつ問題を解決していく忍耐力
- ドキュメントの価値 – 公式ドキュメントを読む習慣の大切さ
今後の改善点
今回作ったアプリはまだまだ改善の余地があります：
- 進捗バーの実装
- 音声ファイルの分割処理
- バックグラウンド処理
- UIの改善
終わりに
初めてのWeb開発は想像以上に大変でしたが、それだけに動いたときの喜びもひとしおでした。エンジニアでなくてもプログラミングを学び、自分の欲しいものを作れるようになるというのはとても楽しいことです。
これからも少しずつスキルを磨いて、もっと便利なツールを作っていきたいと思います。皆さんも何か「あったら便利だな」と思うツールがあれば、ぜひチャレンジしてみてください！
