字幕一覧(字幕リスト)は、さりげなく役に立つ。

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

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

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

結論が遅れました。

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

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

字幕情報を全行表示します(クリック)

(00:00:01) 今回は「音声認識字幕ちゃん」のですね。
(00:00:10) サイズを調整する、というテーマでやっていきます。
(00:00:15) 「音声認識字幕ちゃん」はですね。
(00:00:18) Google Chromeでしか起動できないのです。
(00:00:23) で、このhttps以下ここにある、
(00:00:30) これを入れて立ち上げるのですが、そうすると下のように、
(00:00:38) ホームページが出てくるのですが、
(00:00:41) この中で、Google Script API-KEYがありますが、
(00:00:46) ここに、API KEYを入れるんですね。
(00:00:52) それはちょっとまた別の場面で、ここのURLからですね、
(00:00:58) 設定方法を見て、取得して入力してください。
(00:01:05) それは今回は説明しません。
(00:01:13) それで、まず、
(00:01:15) Google Chromeを、表示するのですけれども、
(00:01:20) Google Chromeから、
(00:01:22) 「音声認識字幕ちゃん」を表示するのですけれども、
(00:01:27) それが、OBSの画面上のどの位置に配置するか、
(00:01:33) どの大きさで配置するか、というのは、
(00:01:36) 人によって様々だと思いますので、
(00:01:42) それに合わせるために、
(00:01:45) ウィンドウサイズを、
(00:01:47) 色々変えれるようにしておく必要があるんですね。
(00:01:51) それでこのプラグインを入れます。
(00:01:55) Window Resizerというものです。
(00:02:01) Chromeウェブストアから拡張機能を選んで、
(00:02:07) その中で検索のところに、
(00:02:11) Window Resizerと入れて、このアプリケションを探して、
(00:02:19) それでダウンロードしてください。
(00:02:26) で、次にWindow Resizerの設定をします。
(00:02:31) すでに既定値として、ご覧のように320以下ですね、
(00:02:38) この1920までが既定値としてあるのですけれども、
(00:02:43) サイズのですね、
(00:02:44) ところがやっぱり私としては、
(00:02:48) OBSの画面の右下のところに、翻訳が出るなら出したいので、
(00:02:54) もうちょっと小さいサイズのものを作りたいです。
(00:02:58) そこで819 x 614というものを作りたいと思うので、
(00:03:04) 自分で作ります。
(00:03:07) このpresetsのところの、+のところを押して、
(00:03:12) そうすると別の画面に移行して設定ができます。
(00:03:16) で、それの設定が済みますと、
(00:03:19) このpresetsの一番上段のところに、
(00:03:23) 今設定した新しいものが出てきます。
(00:03:34) Window Resizer設定のもう一つです。
(00:03:39) それは、hotkeysでpresetを設定します。
(00:03:46) presetの上から、
(00:03:49) presetが1,2,3,4,5…と順番が付いてますけども、
(00:03:54) これが先程のこの順番と対応してます。
(00:04:00) したがって、
(00:04:01) 今私が作った819 x 614は、
(00:04:07) この下の、Resize to preset 1 に対応しています。
(00:04:13) 従って私はここに、登録しました。次に。
(00:04:25) もう一つ準備することがあります。
(00:04:29) Google Chromeで、
(00:04:31) 「音声認識字幕ちゃん」を起動させるための、
(00:04:35) Appleスクリプトが必要になることです。
(00:04:40) それは既定ブラウザをChromeにしていない場合も多いためです。
(00:04:51) スクリプトは簡単です。
(00:04:54) tell application “Google Chrome”
(00:05:00) activate open location
open locationの後は、
(00:05:05) 「音声認識字幕ちゃん」のURLを入れます。
(00:05:11) そして、end tell です。
(00:05:19) その設定したものを、Stream Deckへ登録します。
(00:05:26) Stream Deckで、マルチアクションという形で登録します。
(00:05:30) 一つ目は、Chromeで、
(00:05:33) 「音声認識字幕ちゃん」を開くAppleスクリプトです。
(00:05:40) 二つ目は開いたChromeのサイズ合わせをします。
(00:05:48) 先ほど設定したホットキーです。
(00:05:56) 以上で設定は終わりです。
(00:06:00) で、Stream Deckからそのマルチアクションを起動します。
(00:06:05) そうすると下のようにですね、Chromeが立ち上がります。
(00:06:12) 最初に立ち上げた時は、
(00:06:14) マイクの使用がまだ許可されてないと思いますので、
(00:06:18) それを許可します。
(00:06:21) そうすると以下のように表示されます。
(00:06:24) おはようございます
(00:06:26) Good morning、早上好。
(00:06:30) 既にですね。第一翻訳語として英語、第二翻訳語として中国語を設定してあります。
(00:06:38) なのでこういうふうに出てきます。以上で準備が終わりまして、
(00:06:49) 次のステップはこれをOBSへ取り込む、
(00:06:54) そういう流れになります。

このような折りたたみの字幕一覧を用意しておくと、ブログの翻訳をすれば、この部分も翻訳されます。(1)(2)などの番号でもいいですが、動画の中の位置が分かりません。タイムコードなら動画のバーを近くに持っていけます。YouTubeなどで字幕の自動翻訳もありますが、速く進み過ぎて目が追いつけません。だから、自分のペースで追える、字幕一覧形式が優れています。翻訳した字幕一覧をメモに貼り付けることも出来ます。字幕が邪魔なら、動画の字幕を非表示にして、この字幕一覧を折り畳めばいいです。


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

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

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

なお、WindowsのEdgeにより、vimeoのプレーヤーを直接に呼び出す、つまりhttps://player.vimeo.com/video/xxxxxxxxxを入力する場合ですが、AppleのSafariと同じく、字幕は直接に翻訳されます(動画無音)。

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

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


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

スクリプト名説明補足
srtからvttを生成する動画(無音)
新たに作ったVTTファイルに対して、
(1) 先頭行に文字列”WEBVTT”を含む行を挿入する。
(2) 2行目に空白の行を挿入する。
(3) 3行目以降から、読み込んだデータを書き込む。
(4) “–>” がある行は、行の中の”,”を”.”に置き換える。
AppleScriptクイックアクション
vttからsrtを生成する動画(無音)
新たに作ったSRTファイルに対して、
(1) 文字列”WEBVTT”のある行は削除する。
(2) “–>” がある行は、行の中の”.”を”,”に置き換える。
AppleScriptクイックアクション
vttからタイムありvttを生成する動画(無音)
文字列の先頭に、開始時刻(00:01:23)を追記する。ファイル名に_timeaddedを追記する。私はカモメ→(00:01:23)私はカモメ
AppleScriptクイックアクション
vttから字幕一覧用txtを生成する動画(無音)
字幕一覧用txtは、動画の外側に配置するので、Google翻訳される。
AppleScriptクイックアクション
DropboxリンクをWordPress用に変換する(クリップボード保存)動画(無音)
Dropboxのメディアを外部リンクするために、URLに指定された変更を加える。URLの記述の中の “www.dropbox.com”は、そのまま使うようにとりあえず判断した。
AppleScriptクイックアクション
★WordPress動画貼り付けコード生成(クリップボード保存)動画(無音)
WordPressのカスタムhtmlへ貼り付ける。初期画面用画像、動画本体、字幕のファイルを予め用意。
AppleScriptアプリケーション
★字幕一覧用txtからカスタムhtmlを生成(クリップボード保存)動画(無音) 動画(無音)
字幕一覧用txtを表示するボックスレイアウトを作る。Google翻訳の表示にて改行がうまくいかない状態がある。
AppleScriptクイックアクション
vimeo_auto_generated_captions.vttの修正をするVimeoの字幕自動生成からダウンロードしたファイルの、文字列の空白を削除する。AppleScriptクイックアクション
★Vimeo登録用htmlコード生成方法1:WordPressで、カスタムhtmlブロックへ登録して、パターンを作成しておく。
方法2:Stream deckなどで文字列として登録しておく。
方法3:Appleクイックアクションで登録しておく。など。
字幕作成とは直接に関係ありませんが、迷子にならないように。

ポイント解説

1 この投稿で追加したAppleスクリプト

字幕一覧用txtからカスタムhtmlを生成(クリップボード保存)するAppleスクリプト

-- 手順1:クイックアクションを選択
on run {input, parameters}
	-- 手順2:txtファイルを開きデータをクリップボードにコピー
	set filePath to input as text
	set fileContents to read file filePath as «class utf8»
	set the clipboard to fileContents
	
	-- 手順3:テンプレートhtmlにデータを埋め込む
	set templateHTML to "<details><summary>字幕情報を全行表示します(クリック)</summary> <p>readdata</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>"
	
	set finalHTML to replaceText("readdata", fileContents, templateHTML)
	
	-- 手順4:クリップボードにHTMLを書き込む
	set the clipboard to finalHTML
	
	-- 手順5:確認メッセージを表示
	display dialog "クリップボードにカスタムhtmlコードを保存しました" buttons {"OK"} default button "OK"
	
	return input
end run

-- テキストの一部を置換する関数
on replaceText(find, replace, subject)
	set prevTIDs to AppleScript's text item delimiters
	set AppleScript's text item delimiters to find
	set subjectParts to text items of subject
	set AppleScript's text item delimiters to replace
	set subject to subjectParts as text
	set AppleScript's text item delimiters to prevTIDs
	return subject
end replaceText

vttから字幕一覧用txtを生成するAppleスクリプト

-- 手順1 内容を複製した新たなtxtファイルを作成する。
on run {input, parameters}
	set vttFilePath to POSIX path of input
	
	-- 拡張子をTXTに置き換える
	set newFilePath to replaceExtension(vttFilePath, "txt")
	
	-- ファイル名を作成する
	set fileName to do shell script "basename " & quoted form of vttFilePath
	set baseName to text 1 thru ((offset of "." in fileName) - 1) of fileName
	set newFileName to baseName & ".txt"
	
	-- 新しいファイルのパスを生成する
	set newFilePath to (text 1 thru -((count fileName) + 1) of vttFilePath) & newFileName
	
	-- ファイルをコピーして新しいファイルを作成する
	do shell script "cp " & quoted form of vttFilePath & " " & quoted form of newFilePath
	
	-- 手順2に新しいファイルのパスを渡す
	return {newFilePath}
end run

-- 拡張子を置き換える補助関数
on replaceExtension(filePath, newExtension)
	set AppleScript's text item delimiters to "."
	set pathItems to text items of filePath
	set lastItem to last item of pathItems
	set last item of pathItems to newExtension
	set AppleScript's text item delimiters to "."
	set newPath to pathItems as text
	return newPath
end replaceExtension
-- 手順2   次に、手順1で新たに作ったTXTファイルに対して、

(1)文字列”WEBVTT”のある行は削除する。

(2)数字だけがある行は削除する

(3)タイムラインがある行は削除する

(4)文字列の行の後ろに<br>を追記する

(5)空白の行を削除する。

を最後まで繰り返し、更新する。

on run {input, parameters}
	set newFilePath to POSIX path of (first item of input)
	
	-- ファイル内容を読み込む
	set fileContent to read newFilePath as «class utf8»
	set fileLines to paragraphs of fileContent
	
	set newContent to ""
	
	-- 条件に基づいてファイル内容を更新
	repeat with i from 1 to count fileLines
		set lineText to item i of fileLines
		
		-- (1) 文字列”WEBVTT”のある行は削除する
		if lineText does not contain "WEBVTT" then
			-- (2) 数字だけがある行は削除する(長い桁数も含む)
			set isNumber to true
			repeat with j from 1 to (length of lineText)
				if ((character j of lineText) is not in {"0", "1", "2", "3", "4", "5", "6", "7", "8", "9"}) and ((character j of lineText) is not ".") then
					set isNumber to false
					exit repeat
				end if
			end repeat
			
			if not isNumber then
				-- (3) タイムラインがある行は削除する
				if lineText does not contain "-->" then
					-- (4) 文字列の行の後ろに<br>を追記する
					set lineText to lineText & "<br>"
					
					-- (5) 空白の行を削除する
					if lineText is not equal to "<br>" then
						set newContent to newContent & lineText & linefeed
					end if
				end if
			end if
		end if
	end repeat
	
	-- ファイルに新しい内容を書き込む
	set fileHandle to open for access newFilePath with write permission
	set eof of fileHandle to 0
	write newContent to fileHandle as «class utf8»
	close access fileHandle
	
	return input
end run

vttからタイムありvttを生成するAppleスクリプト

-- 手順1 内容を複製した新たなファイルを作成する。
on run {input, parameters}
	set vttFilePath to POSIX path of input
	
	-- 拡張子をVTTに置き換える
	set newFilePath to replaceExtension(vttFilePath, "vtt")
	
	-- ファイル名に_timeaddedを追加する
	set fileName to do shell script "basename " & quoted form of vttFilePath
	set baseName to text 1 thru ((offset of "." in fileName) - 1) of fileName
	set newFileName to baseName & "_timeadded.vtt"
	
	-- 新しいファイルのパスを生成する
	set newFilePath to (text 1 thru -((count fileName) + 1) of vttFilePath) & newFileName
	
	-- ファイルをコピーして新しいファイルを作成する
	do shell script "cp " & quoted form of vttFilePath & " " & quoted form of newFilePath
	
	-- 
	return {newFilePath}
end run

-- 拡張子を置き換える補助関数
on replaceExtension(filePath, newExtension)
	set AppleScript's text item delimiters to "."
	set pathItems to text items of filePath
	set lastItem to last item of pathItems
	set last item of pathItems to newExtension
	set AppleScript's text item delimiters to "."
	set newPath to pathItems as text
	return newPath
end replaceExtension
-- 手順2 次に、手順1で新たに作ったVTTファイルに対して、以下のアクションを実行する。
on run {input, parameters}
	set vttFilePath to POSIX path of (first item of input)
	
	-- ファイル内容を読み込む
	set fileContent to read vttFilePath as «class utf8»
	set fileLines to paragraphs of fileContent
	
	set newContent to ""
	set inStartTimeBlock to false
	repeat with i from 1 to count fileLines
		set currentLine to item i of fileLines
		if inStartTimeBlock then
			-- Start timeが記述された行の、次の行に書かれた文字列をtxtexpへ入れる
			set txtexp to currentLine
			-- Start timeが記述された行の、次の行に、文字列[letterstartTime] と文字列txtexpを連結する
			set newContent to newContent & "(" & letterstartTime & ") " & txtexp & return
			set inStartTimeBlock to false
		else if (offset of "-->" in currentLine) > 0 then
			set startTime to text 1 thru 8 of currentLine
			set letterstartTime to replace_chars(startTime, ":", ":")
			set startTimeFormatted to "(" & letterstartTime & ")"
			set newContent to newContent & currentLine & return
			set inStartTimeBlock to true
		else
			set newContent to newContent & currentLine & return
		end if
	end repeat
	
	-- ファイルに新しい内容を書き込む
	set fileHandle to open for access vttFilePath with write permission
	set eof of fileHandle to 0
	write newContent to fileHandle as «class utf8»
	close access fileHandle
	
	return input
end run

on replace_chars(txt, search_string, replacement_string)
	set AppleScript's text item delimiters to the search_string
	set txtItems to every text item of txt
	set AppleScript's text item delimiters to the replacement_string
	set txt to txtItems as text
	set AppleScript's text item delimiters to ""
	return txt
end replace_chars

2 その他

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

以上

↑広告-Google AdSense-