26.10.03:エディタの改造を行ないました。内容としては、BGMや音声ファイルを合成する機能を追加しました。

今回の投稿は、前回の投稿ID-29651「VTT字幕の全自動生成」とペアになる投稿です。

以下のビデオは、

前回の投稿である動画音声ファイルからVTT字幕を生成するパートと、今回の投稿のメインであるエディタで編集するパートを一緒にしたものです。ご視聴ください。

２　ウインドウを統合したエディタを作った

ID-27063「字幕かんたん作成～」にてご案内しましたが、ウインドウがバラバラに配置され使いにくさがありました。

今回、大幅に改善しました。各ウインドウを統合して使いやすくしました。誰でも簡単にインストールできるようにしました。

３　字幕かんたんエディタの特徴

（１）字幕ファイルはvttを使う

動画アプリの殆どが字幕はsrtファイルを出力する形になっていますが、これは大手プラットフォームのプレーヤーの標準がsrt使用になっているからです。ところが私はWordpressプレーヤーを改良したハンドメイドプレーヤーでの再生を基本に考えていますので、Wordpressの字幕ファイルの標準であるvttを使うことにしています。

（２）文字情報はプレーンテキストが基本

私は字幕を動画に焼き付けることは基本的にはしません。その動画の中に焼き付けられた文字の理解のためには、コンピュータの頭脳にかなり大きなエネルギーを使わせることになります。

最近、YouTubeなどの動画そのものを生成AIに読み込ませてマルチモーダルに理解させることを売りにしているようですが、こんなことをするとユーザーそれぞれが金太郎飴のように同じことをやり出すわけで、膨大な資源の無駄遣いのように感じます。やはり文字情報はプレーンテキストで記録するのが基本だろうと考えます。

だから私は、動画ファイルと字幕ファイルは別々に作ります。再生するときにプレーヤー上で合体させますし、ブログ記事をソース化するときも貼り付けた動画の字幕一覧情報を含めています。

（３）字幕一覧txtファイルも同時生成する

字幕vttファイルと同時にセットで字幕一覧txtファイルも出力するようになっています。

字幕一覧は、見たい場面に瞬時に移動できる点と、前後の字幕の見逃しや先読みに役に立つ点、それらに加えて、実は、翻訳した時の精度のばらつきをカバーするのに役に立ちます。どういうことかというと、Google翻訳は字幕一覧の中まで綺麗に翻訳出来るのに対して、Apple翻訳は字幕一覧の中の翻訳は使い物にならないほど酷いのにかかわらず画像内の文字列の翻訳は見事に出来るなど、得手不得手がバラバラです。いずれにしても字幕一覧があれば、その凸凹な翻訳レベルを補ってくれます。

４　実装

（１）Macの条件

このアプリをインストールできるのは、

Apple Silicon (M1以降) を搭載したMac

対応OS：macOS 11 (Big Sur) 以降
必要なソフト：なし（完全スタンドアロン）

Pythonの環境構築や追加ライブラリのインストールは一切不要です。ダウンロードしてすぐに使用できます。

ちなみに私は、M2 Mac mini Sonomaです。

（２）インストール方法

必須の操作：初回起動時のセキュリティ許可

初回のみ、readme.txt に記載の「右クリック ➔ 開く」によるGatekeeper（開発元未確認）の回避操作が必要です。

関係スクリプトおよびインストーラ(クリック)

関係するスクリプトは全て公開します。 関係スクリプト要約： 「字幕かんたんエディタ」は、PyWebViewとBottleで構築されたmacOS向け字幕編集アプリケーションです。動画への字幕付け、BGMの追加・合成などの機能を持ち、WebKitのファイルスキーム制約回避やFFmpeg連携による効率的な処理を実現しています。配布はbuild_dmg.shスクリプトで生成されるDMGパッケージを通じて行われ、readme.txtには初回起動や日常的な動画ファイルからの起動方法が案内されています。 本システムは、Gemini 3.6 Flash APIを利用した高度な自動字幕生成ワークフローも提供します。multimodal_vtt_pipeline_auto.pyスクリプトは、入力された長尺動画をFFmpegで精密に分割し、Gemini APIで高精度なWebVTT形式の字幕を生成。同時に、ウェブページ埋め込み用の字幕一覧HTML（_listJ.txt）も自動作成します。このスクリプトは、処理完了後に「字幕かんたんエディタ.app」に動画パスを渡して自動起動し、シームレスな編集フローを実現します。 エディタ連携を伴わない単体で字幕を生成するmultimodal_vtt_pipeline.pyスクリプトも存在し、日本語の不自然な空白除去や話者区分の自動判断なども行います。 スクリプト↓

インストーラ↓SubtitleEasyEditor.dmgをクリックしてアプリをドラッグ&ドロップしてください。

内容に関するお問い合わせは以下へ↓

付録： 動画を360p音質キープに変換.workflow 要約： このワークフローは、入力された動画ファイルを一括して360p解像度に変換するシェルスクリプトです。入力された各ファイルについて、新しいファイル名（元のファイル名に_360pを付加）を生成し、動画処理を行います。 動画はアスペクト比を保ちつつ、高さが360ピクセルになるようにスケーリングされます（または幅が360ピクセルになるよう調整され、もう一方が-2で自動設定）。映像コーデックにはH.264（libx264）を使用し、品質はCRF 23、エンコード速度はveryfastプリセット、ピクセルフォーマットはyuv420pが設定されています。 音声に関しては、ffprobeで元の音声コーデックとビットレートを判定します。もし元の音声がAACであればcopyモードで劣化なく複製され、それ以外のコーデックであれば、元のビットレート（取得できない場合は256kbps）に近い値でAAC形式に再エンコードされます。最終的に、データサイズの最適化とWeb再生に適した形式で360p動画が出力されます。 スクリプト↓

５　使用方法

説明不要なくらい簡単です。上に貼り付けたビデオでざっくりと説明していますのでご覧ください。

６　使用上の注意

私は、字幕vttファイル、字幕一覧txtファイルを新規に作成するときは、自動送信用のmmedia pmediaフォルダではない、別の静的なローカルフォルダに作成するようにしています。その後の、数分で済むような小さな修正は、自動送信用フォルダ内で行います。送信用フォルダは更新の都度、毎分そのファイルを配信所へ送信しますので、あまり処理のラッシュにならないようにしています。

７　まとめ

今回の開発で、私にとって「字幕工房」は不要になりました。
DIYで作れてしまいます。
つくづくアプリ開発で、収入を得るのは、大変な時代になったと感じます。

私としては、デジタル創作物もそれなりに広がりと奥行きがついてきました。これまでも意識してきたことではありますが、もっと、このimakatブログを、読者の皆さんの実装に役立つように、充実していきたいと思います。

26.10.09: Google無料アカウントのユーザーは本日からFlash-Liteのみに制限されるようです。変化が目まぐるしくて困ります。下の記事は「そんなことできた時があったんだ！」と驚かれる内容かもしれません。

今日は、夏休みの工作のようなアプリを一つ。

「Finderから動画・音声ファイルを右クリックするだけで、完全に結合・調整された1本のVTT字幕ファイルが自動でピコンと出来上がる」という、全自動連続パイプラインを開発しました 。これもギターコードアプリと同様、自分専用の介助ロボットづくり、ともいえます。

無料アカウントのままで利用可能ですのでご安心ください。

２　なぜGeminiの文字起こしは、VrewやCapCutより優れているのか？

一般的に使われている文字起こしツールは、純粋に「音声だけ」を聴いて文字に起こす仕組みになっているようです。そのため、同音異義語や画面に映っている言葉と乖離した誤変換が起きやすく、後からの手直しが避けられません。

しかし、Gemini 1.5 Pro（またはFlash、今回制作したPythonの中ではgemini-3.6-flashを使っています。）などGeminiモデルの最大の特徴は～「目（映像解析）」と「耳（音声解析）」の両方を同時に使うマルチモーダル処理～が可能なことです。 動画内のスライド、背後のホワイトボードの文字、話している文脈をGeminiが総合的に理解して文字起こしを行うため、専門用語や固有名詞の変換精度が非常に高く、手直しの手間がとても少なくなります。

３　拡がる字幕情報の活用

さらに今回は、～「映像と音声から複数人の会話（対談やインタビュー）だと自動判断した場合のみ、字幕の先頭に [男性]： [女性]： などの話者ラベルを自動で付与する」～という命令（話者判別ロジック）をプロンプトに組み込みました。これにより、例えば、Notebookで2人の音声解説を作る→それをこのアプリでVTT形式で文字起こしする→それをそのままPodcastや音声ブログにする、あるいはさらに、そこから動画を生成することもできます。

４　サンプルとして「聴くブログ」の字幕の出来栄えをご確認ください。

今回のアプリで作成したサンプルです。以下の「聴くブログ」をクリックすると表示されます。内容は結構お硬いですが高校生に理解できる程度の会話です。音声と連動して表示される字幕を確認ください。サイドバーにも掲載しています。

読み込み中…

この字幕情報の作り方ですが、Notebookで20分程度の音声解説を作りそれを今回のアプリで時刻付きの文字起こしVTTファイルを作成→次にそれをインタラクティブ・トランスクリプト(Interactive Transcript/対話型文字起こし型txtファイル)形式のtxtファイルに変換して同期させています。
インタラクティブ・トランスクリプト形式のtxtファイルの記述例：

<details translate="yes"><summary translate="yes">字幕一覧(クリック)</summary> <p translate="yes">
(<a href="#" class="imk-cue" data-seek="0:16" translate="no">00:00:16</a>) ディープダイブへようこそ。<br>
(<a href="#" class="imk-cue" data-seek="0:17" translate="no">00:00:17</a>) [男性]：今日のテーマなんですが、ずばり「妥協なきデジタル主権への挑戦」ということで。<br>
(<a href="#" class="imk-cue" data-seek="0:25" translate="no">00:00:25</a>) [女性]：デジタル主権、響きからして壮大ですよね。巨大IT企業に依存しないで、自分自身でデータを完全にコントロールするインフラをどうやって獲得するのか。<br>

</p> </details>
<style>
details { font: 16px "Open Sans", Calibri, sans-serif; width: 100%; }
details > summary { padding: 2px 6px; width: 100%; background-color: #ddd; border: none; box-shadow: 3px 3px 4px black; cursor: pointer; list-style: none; }
details > p { font: 14px "Open Sans", Calibri, sans-serif; height:150px; overflow: scroll; background-color: #EDF7FF; padding: 2px 6px; margin: 0; box-shadow: 3px 3px 4px black; }
</style>

なお、このテストでは、字幕作成の対象ファイルに、動画ではなくmp3音声ファイルを選んでいますが問題なく処理されています。

全自動作成後のVTTに対する修正箇所ですが、ロールバック機構→フォールバック機構、DR52.php→dr52.php、MyBox→mybox、 MyBox_1→mybox_1、の修正だけです。句読点もそのまま、時刻もそのままです。このサンプルは動画内に表示された文字を理解させるテストにはなっていませんが、それにしてもかなり高い精度です。

５　無料アカウントでも20分以上の動画がエラーなく処理できる秘密

Google AI Studio（API）の無料枠を利用する場合でも、長尺の動画は容量や処理限界の壁にぶつかります。 今回のパイプラインスクリプトは、以下の工程をすべて「Python」とMac標準ツールがバックグラウンドで全自動実行します。

（１）自動・無音分割（FFmpeg）: 動画を読み込み、1.0秒以上の無音区間を自動で探し出し、キリの良いポイント（デフォルト4分30秒）で動画を再エンコードなし（一瞬）で自動分割。

（２）クリーンな並列API送信: 分割した各動画を、それぞれ毎回クリーンな別のAIセッションにアップロードして文字起こしを依頼（AIの脳内メモリの混線を100%防止）。

（３）自動クリーンアップ: 処理が終わった動画ファイルは、APIサーバー上から直ちに自動削除（サーバー容量を圧迫しません）。

（４）自動タイムシフト＆マージ: 0秒リセットで返ってきた各字幕のタイムスタンプに、分割時のオフセット秒（ズレ）を自動で足し算して復元。

（５）通し連番の再編成: 結合された巨大なVTTデータを走査し、1から始まる綺麗な通し連番に一瞬で自動振り直し。

（６）デスクトップ通知: すべてが完了すると、Macの画面右上に「字幕作成が完了しました！」と通知が表示されます。

人間がやることは～「右クリックして待つだけ」～です。

６　実装手順

それでは、実装手順は以下です。

実装手順(クリック)

🛠️ 実装手順 （１）Geminiの「APIキー」を無料取得する APIを利用するための「鍵」を入手します。 Google AI Studioの公式サイト（ https://aistudio.google.com/ ）にアクセスします。 画面左上の 「Get API key」 ボタンを押し、プロジェクト用のキー（無料）を作成してコピーします。 （２）MacにPython 3とFFmpegをインストールする お使いのMacのターミナル（黒い画面）を開き、以下のコマンドが通る状態にしてください。 （※すでにHomebrewが導入されている環境を推奨します） brew install ffmpeg pip install google-genai （３） スクリプトの保存 １）Python 以下の青ボタンからPythonコードをダウンロードまたはコピーし、プログラム内の `API_KEY` の部分にご自身のAPIキーを貼り付けた上で、Macの適当なフォルダ（例: `/Users/（あなたのユーザー名）/python_scripts/` ）に **`multimodal_vtt_pipeline.py`** という名前で保存します。 ２）AppleScript 同じく以下の青ボタンからAppleScriptコードをダウンロードまたはコピーして、 ①Mac標準の 「Automator」 アプリを起動し、新規作成から 「クイックアクション」 を選択します。 ②画面最上部の設定を以下のように設定します。 「ワークフローの受け取る項目:」 ➔ 「ファイルまたはフォルダ」 「検索対象:」 ➔ 「Finder.app」 ③左側のアクション一覧から 「AppleScriptを実行」 を探し、右側のワークフローエリアにドラッグ＆ドロップします。 ④AppleScriptのコード入力欄に、ダウンロードしたコードを貼り付けます。 （※保存したPythonスクリプトのパスやPython実行環境のパスは、ご自身の環境に合わせて適切に書き換えてください） ⑤名前(全自動VTT字幕作成)をつけて保存します。

内容に関するお問い合わせは以下へ↓

７　運用上の注意

（１）ターミナルが起動するようにしてあります。

私は有料AI Proですが、それでも使用制限は結構な頻度で生じます。エラーやトラブルも時々生じます。そうした異常が生じた時、ターミナルに表示された文字列をコピーして、GeminiやGemなどの生成AIに貼り付けて、その末尾を改行してその下に「エラーが生じました。対策を教えてください。」と書いて、送信することになります。
その時の別な方法として、logを調べてそれをターミナルにコピペする方法もありますが、分かりにくく一手間余分に掛かりますので、ターミナルを常に表示するようにしておくのが、私にとっては安心に感じています。

（２）GeminiやGemなど生成AIはすぐに使えるようにしておく

ブラウザのブックマークや専用アプリなどを用意して、Gemini/Gem/生成AI、がすぐに使えるようにしておきましょう。エラーやトラブルの時、すぐにターミナルのコピペができるようにしておきましょう。

以上

別の投稿で紹介したいと思いますが、字幕起こしを伴う字幕作成サービスについては日進月歩でして、どんどん高品質になっています。大きく分けると、ローカルで処理する方法（大抵は無料でできる）と外部サーバーで処理する方法（大抵は使用量課金かサブスク提供)がありまして、外部サーバー利用の方については激しい競争下にあるためかなり高品質で、生成AI系企業のサービスが群を抜いています。

最近、AIの進展で、動画をアップロードするだけで音声を取り出しその内容をAIに理解させることができるようになってはきましたが、やはり字幕ファイルによる文字情報で内容を理解させる方が圧倒的に迅速で正確です。しかも動画からの読み込みは多大なリソースを消費するので、追加料金も発生するかも知れません。そんな意味で、ブログ投稿をAIに学習させる場合も、動画には字幕ファイルを別添して貼り付けるようにして、字幕ファイルからの情報吸い上げを重視すべきだと私は思います。

そんな中で、ここで紹介する方法は、無音声の動画に解説用の字幕をサクッと付ける場合、に役立つものです。

ポイント解説

１　VTTで編集ができます：
簡易な字幕作成ツールとしては、「字幕工房」が優秀であるという見方は変わりませんが、SRTファイルでの書き出しです。私はWordPressブログに掲載する動画が殆どですので、毎回VTTファイルへ変換することになり面倒です。「字幕工房」に限らず、動画作成アプリで出力される字幕は、殆どがSRTファイルなのですね。

２　ローカルファイルの更新をそのまま反映します：
動画共有サービスに共通することですが、字幕もそのほかのメディアアセットもローカルからアップロードした時点で切り離されてしまうので、ローカルファイルを更新しても自動では反映されません。図の下段は、今運用しているマイ・メディアライブラリの機能ですが、ここでもその威力が発揮されます。ローカルでVTTファイルをTextEditで開いて手直しすれば、そのまま自動的に、ブログの表示が変更されます（数分のタイムラグはあり）。

３　停止位置の時刻を自動で取得します：
QuickTimePlayerで動画を停止した場所の時刻(時点)を自動で取得して、テキストとともに、VTTファイルへ書き込みます。さらに、書き込んだ情報を読み込んで、HUD(ディスプレイ)に即座に表示します。

主な特徴点は以上ですが、かんたんな点では、「字幕工房」を上回っています。

４　わずか2ステップ：

①対象の動画をクリックして開く(デフォルトはQuickTimePlayer)。

②フォルダの上で右クリックして、「字幕かんたん作成」を立ち上げ、VTTファイルを作る。

だけです。

５　キビキビと動きます：
字幕作成アプリを探すと、ブラウザアプリが主流になっています。そのブラウザアプリですが、欠点は、「もったりヌルヌルした動作」にあります。iPad iPhoneでは仕方ないにしても、Macでも感じるところがあるので、それはなんか疲れるわけですね。QuickTimePlayer、TextEdit、標準スクリプト、そういった標準搭載ツールは、実にキビキビと動きます。

実装の手順

(1)	下の青色のボタンから、スクリプト(txtファイル)をダウンロードします。
(2)	生成AI( Gemini、ChatGPTなど)を利用すると簡単です。AIのチャット欄に、 ①ダウンロードしたスクリプトをアップロードします。 ②以下を記述します。 「私のMacに、添付したスクリプトを実装する手順を作ってください。それをtxt形式で提供ください。 私のMacは、[機種名][OSバージョン]です。よろしくお願いします。」
(3)	提供された、実装手順を記載したtxtファイルに基づき、生成AIとやりとりしながら、実装してください。 ※txtファイルを開いたまま生成AIとやり取りし、修正後のtxtを再度送って「これで大丈夫ですか」と確認する方法を取れば、更新内容を逐一手元に残せるため、作業の履歴管理として便利で安心です。

以上です。

現状では、世界のどこかの人が何かのデバイスで、このブログを見て、その中の動画を視聴した時に、言葉がわからないという問題にぶつかります。ですから、そのブログの中に、言葉をわかるようにする「手掛かり」を配置しておきたいと思います。

ただその「手掛かり」と言っても、なかなか簡単ではありません。
条件が複雑過ぎるからです。

現在、条件がどうマチマチであるか眺めてみます。まず、デバイスとしてポピュラーなものをピックアップすると、WindowsPC,Mac,iPhone,iPad,Android携帯、Androidタブレット、以上になるでしょうし、OSでポピュラーなものは、Windows,Mac,iPad/iPhone,Androidになるでしょうし、ブラウザでポピュラーなものは、Chrome,Edge,Safariになるでしょうし、さらに動画の配信側は、YouTube,Vimeo,WordPress,Dropboxなどクラウドサービス、自宅サーバーなど。。
こんな複雑な条件の中で、今、こうしたブログさらにその中の動画などが配信されているわけですね。ですから、全てのユーザーに、「言葉がわかるようにする」のは無理と言っていいでしょう。

結論が遅れました。

それほど、手の込んだ工夫ではありません。

動画の下に、タイムコードあるいは番号が付いた「字幕一覧」を配置すべし。
具体的には以下です。

このような折りたたみの字幕一覧を用意しておくと、ブログの翻訳をすれば、この部分も翻訳されます。(1)(2)などの番号でもいいですが、動画の中の位置が分かりません。タイムコードなら動画のバーを近くに持っていけます。YouTubeなどで字幕の自動翻訳もありますが、速く進み過ぎて目が追いつけません。だから、自分のペースで追いたいです。逆に、急いでいるので動画の要点をサラッと知りたいということもあります。いわば「本屋の立ち読み」です。音声の早送りより、はるかに生産性は高いです。10分の動画でも字幕一覧をみれば30秒で概略がわかります。

AIの解読力ですが、動画を理解することもできるようになってきてはいます。しかし多大なリソース消費の問題もあり正確性も今一歩のところがあります。Geminiに質問してみましたが、動画に字幕ファイルが別添されている形が、AIとすると一番ありがたい形式、と言う返答でした。

いずれにせよ字幕一覧形式は非常に優れています。翻訳した字幕一覧を自分のメモに貼り付けることも出来ます。字幕が邪魔なら、動画の字幕を非表示にして、この字幕一覧を折り畳めばいいです。

ちなみに、上の折りたたみ字幕一覧を、左上のGoogle翻訳で試してみてください。翻訳の途中から改行がされない現象が生ずる場合があります。これはChromeからChromeの翻訳機能を使っても同じ現象になるでしょう。
次に、AppleやWindowsの翻訳を試してみてください。ブラウザから利用できると思います。それを使うと、正しく改行されるはずです。

Macで使う場合、Vimeoの動画に表示される字幕の翻訳は、Google翻訳では翻訳不可ですが、Apple翻訳ではVimeoの動画に表示される字幕を翻訳してくれます(動画無音)。iPad,iPhoneではそれが難しいのでWordPress固定ページに字幕一覧を読み込んで工夫することにします(動画有音)。

Apple翻訳で気づいた欠点の一つは、WordPress動画プレーヤーで表示される字幕について翻訳しようとする時パカパカと点滅状態になるため(動画無音)字幕は非表示にせざるを得ない点があります（2024.2月現在)。

なお、WindowsのEdgeにより、vimeoのプレーヤーを直接に呼び出す場合ですが、AppleのSafariと同じく、字幕は直接に翻訳されます(動画無音)。

総じて、各社の字幕や翻訳の対応は、まだまだバラバラな状況と言っていいです。そこへ群がるように、各社がAI生成画像、音楽などのサービスをくっつけてきているというのが現状です。

そこで、振り回されないように、字幕一覧を配置して、Apple/Windows翻訳とGoogle翻訳の両方を使い分けるようにしよう。というのが、この投稿の主張です。

＜字幕作成に関するオリジナルスクリプト一覧表＞

ポイント解説

１　その他

WindowsPCでのこのブログにリンクした動画の再生についてです。Dropboxの動画についてですが、Dropboxの動画は、ブログに貼り付けた場合は、そのまま素直にストリーミング再生されます。しかし、URLをリンクで再生しようとした場合、ダウンロードしてからの再生を求められます。それはとても面倒なこと。その点も勘案して、Google翻訳アイコン、動画、字幕一覧の各場所をテンプレートにして、動画については、Vimeo、Dropbox、WordPressサーバー、YouTubeなどを貼り付けられるようにして、WordPressの固定ページで動画ライブラリーとしてひとまとめにするように改善中です。

以上