← ヘルプ一覧へ戻る

scenario

AIを使って機能を足す

VOICEVOXで読み上げ機能を作る

無料の音声合成ソフト「VOICEVOX」のインストールから、AIエージェントとの対話でプラグインを作り、実際に本文を読み上げて確かめるまでを、通しでご案内します。プログラミングの知識は使いません。

VOICEVOX読み上げプラグインの画面。パネルと、黄色くハイライトされた本文が並んでいる

このプラグインは、公式サイトのプラグイン一覧からもダウンロードできます。VOICEVOXのインストールと設定だけを知りたい場合は、VOICEVOXを小説エディタで使えるようにしたいにまとめています。

この記事の流れ

手順

①VOICEVOXの公式サイトを開き、「ダウンロード」ボタンを押します

公式サイトのトップページ。VOICEVOXのロゴと「ダウンロード」ボタンが表示されている

OS・対応モード・パッケージを選ぶ画面が出ます。すべて既定のまま「ダウンロード」を押します

ダウンロード選択ダイアログ。OS・対応モード・パッケージの3項目が選べる

ダウンロードしたインストーラーを起動し、「次へ」を押します

インストーラーのようこそ画面

音声データなど約1.78GBの追加ファイルがダウンロードされます。回線速度によっては数分かかります

追加ファイルをダウンロード中の画面

「現在のユーザーのみにインストールする」が既定で選ばれています。そのまま「次へ」を押します

インストール対象ユーザーの選択画面

インストール先フォルダを選ぶ画面です。既定ではCドライブの個人用フォルダになっています

インストール先フォルダの選択画面(既定のパス)

Cドライブの空き容量が少ない場合は、「参照」からインストール先を空き容量に余裕のある別ドライブへ変更できます(VOICEVOXのインストールには約2.3GBが必要です)

インストール先を別ドライブに変更した画面

「インストール」を押すとセットアップが始まります

インストールの開始画面

インストールが進みます。パソコンの性能により数分かかることがあります

インストール中の進捗バー

「完了」を押すとVOICEVOXが起動します

インストール完了画面

②初回起動時、利用規約への同意を求める画面が出ます。内容を読んで「同意して使用開始」を押します(利用規約の要点は本記事末尾で紹介しています)

利用規約に関するお知らせ画面

続けて、収録されているキャラクターの紹介画面が出ます。「完了」を押します

追加キャラクターの紹介画面

ソフトの利用状況データ収集への協力を求める画面が出ます。入力したテキストや音声は収集されません。「拒否」「許可」どちらを選んでも以降の手順に影響はありません

使いやすさ向上のためのお願い画面

メインの編集画面が表示され、VOICEVOXを使い始められます

VOICEVOXのメイン画面(トーク)

③VOICEVOXは小さなサーバーとしても動いていますが、既定の設定では知らないアプリからの接続をブロックする仕組み(CORS)が働きます。ブラウザで http://127.0.0.1:50021/setting を開くと、エンジンの設定画面が出ます

VOICEVOXエンジン設定画面(CORS Policy Mode・Allow Origin欄)

「Allow Origin」欄に、許可したいアドレスを入力します。公式サイト版の小説エディタなら「https://unnamed-editor.pages.dev」、パソコンに保存したファイルを直接開いて使う場合は「null」も追加します(スペース区切りで複数指定できます)。入力すると自動で保存されます

Allow Origin欄に入力した後の画面

設定を反映するにはエンジンの再起動が必要です。VOICEVOXの「エンジン」メニューから「再起動」を選びます

VOICEVOXのエンジンメニュー(再起動)

「エンジン起動中・・・」と出て、しばらくすると元の画面に戻ります。これで小説エディタからVOICEVOXを呼べるようになります

エンジン起動中の画面

④小説エディタで「⚙全般設定」→「⚠機能拡張」タブを開きます。「+新規」「サンプル」「AI開発指示書」の3つのボタンがあるので、「AI開発指示書」を押します

小説エディタの全体設定「⚠機能拡張」タブ

AIエージェントへの依頼書(小説エディタ拡張プラグイン_AI開発指示書.md)のダウンロードが始まり、この後の進め方も画面に表示されます

拡張機能開発ガイドのモーダル。ダウンロード開始の案内と手順1〜9

専用の作業フォルダを新しく作り、依頼書と小説エディタ.html本体の2つだけをそこへ置きます

作業フォルダの中身。小説エディタ.htmlと依頼書(AI開発指示書.md)の2ファイルだけが入っている

⑤作業フォルダでAIエージェント「CODEX」を起動します。「--yolo」はCODEXが行う確認をすべて省略するモードのため、依頼書とアプリ本体だけが入った専用フォルダのように、影響範囲が限られる場所でのみ使います

CODEXをyoloモードで起動するコマンド

起動すると、「Ask Codex to do anything」という入力欄が出ます

CODEXの起動完了画面(YOLO mode)

「依頼書を最初に全文読み込み、その指示に従ってください」に続けて、「書いた文章を読み上げてほしい」「声は選べるようにしてほしい」「読んでいる場所が分かるようにしてほしい」といった、技術用語を使わない言葉で作ってほしいものを書き、Enterで送ります

CODEXの入力欄に、依頼文を貼り付けた画面

依頼書を読み込んだCODEXから、「新しくプラグインを作成する」「不具合調査をする」「既存のプラグインを改造する」等の5つの選択肢が示されたので、「1」(新規作成)と答えました

依頼書を読み込んだCODEXが、5つの選択肢を提示した画面

CODEXは「読み上げボタンを押すと、選んだ文章があればそこを、なければカーソルのある段落を読みます」「声は選べて次回も覚えます」「読んでいる段落には色が付きます」というように、作る内容を平易な言葉で確認してきたので、「はい」と答えました

CODEXが「1」への回答を受け、作る内容を確認してきた画面

CODEXは実装・自己チェック・実機での動作確認までを自律的に進め、約24分でプラグイン(voicevox_read_aloud.js)を完成させました。VOICEVOXの43人分の声を確認し、実際に小説エディタへ試験登録して「読み上げパネルが動くこと」まで確かめたという報告がありました

CODEXからの完成報告。できること・確認内容・保存範囲・セーフモードの案内が表示されている

⑥AIの報告を鵜呑みにせず、コードを一から読んで確かめた上で、あらためて「⚠機能拡張」タブの「+新規」からテンプレートを作ります

機能拡張タブの「新規」テンプレート画面

テンプレートの中身を、完成したコードにまるごと差し替えます

完成したコードを貼り付けた画面

「保存」を押すと、一覧の名前がコード内のマニフェスト(設定部分)に書かれた名前「VOICEVOX 読み上げ」に変わります

コードの保存が完了した画面

「仮登録で再試行」を押すと、対象の名前・作者・説明文を示す有効化の確認画面が出ます。内容を確認し「有効にする」を押します

拡張機能の有効化の確認ダイアログ

「provisional / active」と表示され、プラグインを試しに使えるようになります。画面には読み上げ用のパネルも現れます

有効化に成功した状態(provisional / active)

⑦読み上げの対象になる文章を試すため、「ファイル」→「テキスト読込」でサンプル原稿を読み込みます。文字数の確認が出るので「OK」を押します

サンプル原稿の読込確認ダイアログ

本文が執筆ウィンドウに表示されます

原稿読込後の執筆ウィンドウ

読み上げパネルには声(四国めたん・ノーマル)が自動で選ばれ、「VOICEVOXを使えます。」と表示されます。読みたい段落の中に実際にカーソルを置きます

読み上げパネルと本文ウィンドウが並んだ画面

「▶ 読み上げ」を押すと、対象の段落が黄色くハイライトされ、状態が「読み上げ中です。」に変わります。VOICEVOXと実際に通信し、音声データ(WAV形式、約745KB、約16秒分)が作られて再生されます

読み上げ中、対象の段落が黄色くハイライトされている画面

読み終わるとハイライトが消え、「読み上げが終わりました。」に変わります

読み上げが終わった画面

⑧「仮登録」のままだと小説エディタを開き直したときに自動で無効へ戻るため、「⚠機能拡張」タブで状態を「登録」に切り替え、「登録状態で再試行」を押します。「registered / active」に変わると、次回からも使えるようになります

本登録が完了した状態(registered / active)

補足

VOICEVOXの権利関係について

VOICEVOXは無料で使えますが、いくつかの条件があります。公開・配布される際は、必ず最新の規約をご自身でも確認してください(本記事は法的な助言ではありません)。

関連記事