謹製の動画再生ツール「動画眼2」は動画再生中のメモをタイムインデックスとセットで記録し、メモをクリックすることで簡単に当該シーンを頭出しして再生できるツールです。
最近、手軽に利用できるようになってきた各種クラウド音声書き起こしサービスを使ってUT／インタビューの全発話を文字起こしすることで、全文検索などの新しい利用方法が見えてきており、先日も動画編集ソフトのAdobe Premiere Proが先行公開機能として「音声テキスト化」をリリースして、早速その結果を取りこめるバージョンアップをいたしました。
こうして利用シーンが広がってくると、足枷になるのが
- 専用ツールのインストールが必要になること
- Windows専用であること
といった部分になってきます。動画眼2はフリーで提供しているため、年額数万円かかる電子署名を取得するに至っておらず、Windows8/10ですとダウンドーロ／インストール時にSmartScreenによる警告が出る状態です。法人ですとPCへのソフトインストールは許可制だったりして、私自身も実務でクライアントに薦めづらい状況があります。Mac版も作りたいと思いつつなかなか着手できていません。
そんな状況を改善するため、HTML5/JavaScriptを使った簡易ビューワー「動画眼Lite」を作ってみました。特徴として、
- 動画ファイル、発話データファイルに加えHTMLファイルを同一フォルダにおくだけ
- Webサーバーに配置せず、PCのローカルストレージ上に置いた状態からでもOK
- 互換ブラウザさえ入っていれば追加インストール無しで使用可能（現状ChromeとChromeium Edgeで優先検証。FireFoxとSafariも一応動くが一部表示が崩れる。Web経由ならiPadのSafariでも動きました）
となっています。これなら動画と一緒にHTMLファイルと書き起こしデータファイル（せいぜい数KB）を渡せば相手にも簡単に使ってもらえるのではないかと。
実際にこちらで動いている状態をご確認いただけます。UTの動画は使えないのでプライベートで録ったレビュー動画ですが、、また書き起こしはPremiere Proによる処理ママですので一部不正確な部分もありますが、逆にPremiereに放り込むだけでこれくらいの品質の書き起こし＆閲覧環境ができますよというサンプルとして。
アプリ版「動画眼2」と比べての制約としては、
- テキストの編集はできない
検索もできない（ブラウザの検索機能は利用可能）話者毎の色付け非対応
となります。編集はJavaScriptのセキュリティモデル（ブラウザでローカルファイルを上書きできると危ないから禁止されている）の関係上、実装は難しそうです。検索と色付けは正式リリースまでにはなんとかしたいと思っています。検索と色付けは対応しました。
またデータファイル形式も動画眼2の.dggn.txtを直接読み込むことは難しいので、動画眼2側で動画眼Lite形式のファイルを吐き出す機能を追加する予定です。
■技術的詳細
以下、JavaScriptの制限など技術的なメモ、課題を書き記しておきます。どなたかお詳しい方に「こんなやり方あるよ」などアドバイスをいただければ有り難いです。
・ファイルを減らす
動画に同梱するファイルをなるべく減らすという意図で、CSSなども久しぶりにHTMLのヘッダー内に置く書き方をしました。またjQueryなどの外部ライブラリも基本使わないでPure JavaScriptで書いています（単に私がjQueryあまり得意でないというのもあるけど…）。
再生制御系のアイコン（▶／II）くらいはもう少し綺麗に描画したいんですが、font-awesomeみたいな外部記号フォントやビットマップを使うとファイルが増えるので躊躇しています。インターネット上のリソースにリンクするのも手だと思いますが、どうせここまでやったなら完全スタンドアローンにこだわってみたいなとか。フォントとかビットマップのようなバイナリをbase64でHTMLに埋め込む方法もあるんでしたっけ？でももし下記のようにメモデータもHTMLに埋め込む場合、あんまりHTMLの可読性が落ちるのもなんだなという気がしますね。
・データファイルの読ませ方
HTMLファイル上のJavaScriptに外部ファイルを自動で読ませるには、外部.jsファイルしかなさそうで、現状はタイムコードとメモのレコードをjson形式にしてあります。HTML側にフォームをもたせて、INPUTタグでユーザがファイルを選択すれば任意のデータファイルを食わせられるんですが、ユーザビリティとしてHTMLファイルを開いたら動画もメモ一覧もパっと出る方が楽だし間違いなくていいかなと思って、自動で読めることを重視しています。
.jsファイル内でオブジェクトを宣言するのであればjsonにこだわらず、オリジナルの.dggn.txtに近いカンマ区切り形式でもいいはずと思ったんですが、なんとなくJavaScriptならjsonだよね、みたいな感覚があったのと、手編集時にもミスが起きにくいかなくらい（そうでもないかな？）。
もっといえば、HTMLファイル内にデータまでもたせてしまえば、動画とHTMLファイルの2つだけで完結できるのでそれはそれでアリかも知れないとか思っています。どのみち動画ファイルのファイル名はハードコーディングするしかないなと思ってますし。1つのフォルダに複数セッションの動画をつっこんで渡すような場面で、ファイルが1つでも減るのは良いかも知れません。
あるいはJavaScriptで同一フォルダ内のファイル一覧が取得できればプルダウンで複数動画選択とかもできそうとか。でもこれもセキュリティ上の制約でできない気がします。