ブラウザの開発者ツールとDreamweaverやテキストエディターで文字起こし

放送授業の音声の文字起こしについて前の記事に記したが、文字認識の精度は良いとは言えない。オンライン授業では、字幕をhtml(Javascript)で表示してくれる動画もあるので、その場合は、ブラウザの開発者ツールを使用した方が、音声文字認識より高精度(というか100%)のテキスト情報を入手できる。但し、スクリーンショットの保存も含めると、1授業あたり15分~20分程度の手作業になる。手順は以下の通り(Windows10)。

  1. オンライン授業で字幕をhtml表示している画面を開く
  2. Google Chrome、Fire Fox、Edgeのいずれかで、『F12』キーを押下し、開発者ツールを開く
  3. 字幕のあたりを右クリックして『検証』(Chrome)または『要素を調査』(FF)または『開発者ツールで調査する』(Edge)を選択
  4. pタグの上層のDivタグ(『div class=”notesText”』など)を右クリックして『Edit as HTML』(Chrome)または『HTMLとして編集』(FF、Edge)をクリック
  5. 罫線で囲まれたエリアを全選択・コピーし、エディターに貼り付ける(私はAdobeCCのDreamweaverを使用したが、Terapadなどのテキストエディターでも可)
  6. 余分なタグを一括置換で削除し、必要に応じてWord等に貼り付け、見出しや画面の番号などを追記する
  7. 画像は各シーンのスクリーンショットをWindows10の機能(Windowsキー+Shiftキー+S)で撮影してPhotoshopに貼り付け、ウィンドウ枠など余分な部分をトリミングして、「書き出し」→「レイヤーからファイル」で複数の画像ファイルに書き出して使用

貼り付け先のファイルの雛形を用意しておくと便利。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です