はじめに
今回は、雑誌『日経ソフトウェア』に掲載されていた「生成AIで音声認識文章書き起こし＆校閲アプリを作る」という特集を実際に作成してみました。
この記事では、簡単に開発の流れと動作の説明、そして文系出身の自分が作業にかかった時間などを記録できたらと思っています。
具体的な機能
まず最初に、どんな機能を持つwebアプリなのかを説明します。
１．言葉を発すると、文章に書き起こされる（手入力＋修正も可）
２．書き起こされた文章が、選択した文章タイプに沿って変換される
３．変換した文章の校閲と、その校閲点が赤字表示される
音声の認識と文字起こしに関しては、webブラウザがもつ「SpeechRecognition」を使用し、文章タイプの変換と校閲には「Gemini API」を使用します。
手順
ここからは、アプリを製作するにあたって行って環境構築からの手順と、各作業時間について書いていきます。
① 開発用ディレクトリを作成する (10m)
まずは開発用のディレクトリを作成します。構造は以下の通りです。
project
├ .env
├ sever.js
└ public
├ index.html
├ client.js
├ client.css
├ mapping.json
└ diff_match_patch.js
雑誌ではcドライブ直下に作成とありましたが、今回は社用PCを使用して作成したため、cドライブ直下ではなく、既存の［user-pc個別フォルダ］の下に作成しました。
② Node.jsをインストールし、コマンドプロンプトを使用して先ほど作成したディレクトリに移動させる (15m)
https://nodejs.org/ja に行き、 画像左下の『Windows インストーラー(.msl)』をインストールします
③ アプリケーションで使用するライブラリ一覧を記録する「package.jsonファイル」を作成（2m）
【npm init -y】を実行すると、ファイルが生成されます。
このファイルには、アプリケーションで使用するライブラリ一覧が記録されます
④ ３つのライブラリ(axios,dotenv,express)をダウンロードする （13m）
【npm install axios dotenv express】を実行するとそれぞれのライブラリがダウンロードされます。
それぞれの機能は以下の通り。
axios→文章変換をするときにGemini APIへHTTPリクエストを行うためのもの
dotenv→.envファイル内に設定した値（APIキーなど）をコード内で使うためのもの
express→HTTPサーバーとして使うexpressサーバーを立ち上げるためのもの
⑤ 校閲の赤字表示用のライブラリをダウンロードし、開発用ディレクトリのpublicディレクトリ直下に配置する （6m）
＊diff_match_patch.jsがそのライブラリです。
⑥ Google Cloudでプロジェクトを作成し、APIキーを作成 （17m）
ここでは、取得したAPIキーを必ずコピーして安全な場所で保管し、プランがFreeになっていることを忘れずに確認します。
⑦ ひたすらコード入力 （3h）
今回は、雑誌のコードサンプルを見ながらひたすら入力していきました⌨️
動作
ここからは実際に完成したものを動かしてみたいと思います。
①変換したい文章を話すor入力します（今回は入力しました）
②［変換するカテゴリー］と［文章の種類］を選択して、変換します（今回は、［遊び］で［ギャル語］を選んでみました）
③［校閲］を押します
すると、「ちょ」が「ね」に変換されて、赤文字表記になりました。
一番苦労した点
今回の制作の中で一番苦労した点は、エラーの修正です。
まだ、どのコードがなにを意味しているのか、なんの動作のためなのかといったことが全く分かっていない状態のため、どこをどう直していったらいいのかわからない状況でした。
そのため、
・とにかく見本コードと見比べて誤字・脱字がないか
・バッククォートになっているか（自分はこのミスが多かった）
・コードの内容を確認しつつChatGPTに聞ける部分は質問して修正
というのを繰り返し行いました。
一番大きかった誤字は、GEMINI_API_URL部分で
/v1beta/を/vIbeta/と見間違えていたことです。（言い訳になりますが、雑誌だと本当に同じように見えましたので要注意です）
◆ エラー修正にかかった時間は、約5時間でした…。
おわりに
今回、コードの見本などはありながらも環境構築から完成までの作業を一人で進めてみて、とても大変でしたが完成した時の達成感は半端なかったです。
とにかく自分の手と目を信頼せずに何度も確認して進めること。うまく動作しなかったらコンソールで確認してその付近の行を一文字ずつ見ていくこと。これを肝に銘じ、今後も制作に取り組みたいと思います。