動画眼用のインデックス打ちを実査セッション中にリアルタイムで行うWebアプリ、動画眼マーカーを更新しました。

■V1.2の更新内容

スマホ用のシェアボタンを設置

これまでPCブラウザなら動画眼で直接読み込める.dggn.txtファイルに保存できましたが、スマホではそれができずやむを得ずコピーボタンでクリップボードの格納になっていました。別途なにがしかのアプリにペーストして保存や送信をする必要がありました。それがシェア（共有）ボタンになったことで、スマホにインストールしてある任意のメッセンジャーアプリ（SlackやLINE、Messengerなど）で送信できるようになり、ちょっぴり楽になると思います。私の周りの現場でも関係者Slackがあることが多く、セッション後すぐにSlackにアップできたら重宝しそうです。

iOS15 Safari向け最適化

iPhoneのEdgeでばかり検証していましたが、Safariだと要素が画面に収まらずスクロールが必要になっていたのを最適化しました。iOS15以降のSafariはアドレスバーが下側になり太さが動的にかわるので新しい調整が必要だったようです（height: 100dvhという新しい単位を使うといいらしい）。

またフォントや文字サイズをいじって視認性を向上させました。

再読込時の最新CSS適用

いわゆるキャッシュバスターを仕込み、常に最新のCSS（レイアウト設定）が読み込まれるようにしました。これはどちらかというと自分のように開発作業で繰り返し読み込む時くらいしか影響しないかもですが一応。

■動画眼マーカーのURLルール

動画眼マーカーはWebアプリなのでURLで簡単にバージョン切り替えができるようにしておきます。もし最新バージョンで不具合があれば以下のルールで古いバージョンをご利用ください。

• 最新版：https://do-gugan.com/tools/marker/
• Ver1.1：https://do-gugan.com/tools/marker/1.1/
• Ver1.0：https://do-gugan.com/tools/marker/1.0/

/marker/に続けてバージョンナンバーを入れれば当該バージョン、なにも指定しなければ最新版、というルールです。

■今後のアップデート予定

本ツールのキモとなるタイムスタンプ同期をテコ入れしようと思っています。現在の手動同期（「せぇの」で合わせ）に加え、OBS StudioやATEM MINIなどのAPIからタイムコードを取得して同期する実装を考えていたんですが、もう少しシンプルに、時刻を使った方法にしてみようかなと。マーカー上では、「現在時刻　メモ　話者コード」のような形式で記録します。

録画ファイル側でどうやって正確な時刻を取得するかですが、

• ファイルの生成時刻
• ファイル名
• 手動入力

辺りから選べるようにしようと思います。例えばOBS Studioの場合、デフォルトではファイル名に時分秒が入るのでそれを自動識別するようにします。（クラッシュ時のデータ保存のため）mkvで録って後からmp4に再多重化する運用の場合、mp4のファイル生成時刻は再多重化時点のものになってしまいます。運用によってファイル名かファイル生成時刻のどちらかを保全するようにします。あるいはOBSであればタイムスタンプを映像に合成しておくのも良いでしょう。これで再生開始時刻を見て手打ちできるようにしておきます。

言葉でみるとちょっと手間にも思えますが、できるだけ動画眼3側で自動化を試みるので、実査開始時に同期を気にする必要がなるメリットの方が多きかなと現時点ではイメージしています。もちろん従来の方法も残すようにします。

OBS StudioやATEM MINIの同期は同一PCや同一ネットワークで使う場合には確実、便利そうですが、自分の関わる現場だとリモートで見学している人がマーカー入力をする場合が圧倒的に多いのであまり活躍の場がないのが実情でちょっと優先順位を落とそうと思います。

リアルタイムクロックを使う場合、各PCの時計がきっちりあっていることが必須ですが、今時インターネットにつながっていればデフォルトでMicrosoftやAppleのNTPサーバーが使われてるでしょうし問題ないかなと。またリモートの場合、タイムラグが気になりますがたぶん多くの実務ではYoutube Liveなどの配信プラットフォームよりもラグが出にくいZoomやTeams、Meetといったオンライン会議サービスを使うことが多いと思うので、そう何秒もズレることは考えにくいかなと思っています。一応動画眼3インポート時にオフセット秒数を指定できるようにしてもいいかなと思っています。

なんとか夏休みの宿題ということで着手したいと思ってますが、動画眼マーカーと動画眼3の両方を更新しないとなので、ちょっとお待たせするかも知れません。

前記事のチラ見せからそう間を置かずリリースしていたのに、ブログでお知らせするのを忘れていました。

道具眼的blog

2021.04.05

UT/インタビュー動画見返しツール「動画眼」の簡易ビューワーをチョイ見せ

https://do-gugan.com/blog/archives/2021/04/do-gagan_lite.html

謹製の動画再生ツール「動画眼2」は動画再生中のメモをタイムインデックスとセットで記録し、メモをクリックすることで簡単に当該シーンを頭出しして再生できるツールです。最近、手軽に利用できるようになってきた各種クラウド音声書き起こしサービスを使ってUT／インタビューの全発話を文字起こしすることで、全文検索などの新しい利用方法が見えてきており、先日も動画編集ソフトのAdobe Premiere Proが先行公開機能として「音声テキスト化」をリリースして、早速その結果を取りこめるバージョンアップをいたしました。こうして利用...

ひと言でいうと、インストール不要でWindows以外でも使える動画眼のビューワーを作ったよ、というお話です。JavaScriptベースの専用データ形式ファイルを用意する必要がありますが、同時にリリースした動画眼2.4で出力できるようにしてあります。なので、インデックスデータを作る人だけはWindows版動画眼をインストールして使う必要がありますが、閲覧オンリーであれば動画ファイル、htmlファイル、JSファイルの3点セットがあればWebブラウザを使ってインデックス付き動画を再生、頭出しすることができます。Macはもちろん、Webサーバーに置けばタブレットOS（iPadOS、Android、ChromeOS）でも利用可能です（スマホは画面レイアウト的に未対応です）。

動画眼Liteの詳細はこちら。GitHubリポジトリはこちら。ただしわざわざダウンロードしなくても、動画眼2.4からJSファイルをエクスポートする時にHTMLファイルも自動的に最新版を落として適切にリネーム保存してくれるようになっています。

動画眼Liteの動作デモはこちら。ガチのUT動画素材で公開可能なものがないので、個人でYoutubeにアップしたレビュー動画です。またテキストはPremiere Proのβ版機能の「音声のテキスト化」を使って書き起こしたものです。この機能で書き起こしたデータを動画眼にインポートする機能を2.3で実装しています。

道具眼的blog

 

1 Pocket

2021.03.28

Premiere Proの音声テキスト化をユーザテスト見返し効率化に活用する

https://do-gugan.com/blog/archives/2021/03/premiere-pro.html

■Long story short... Adobe Premiere Proがクラウド音声書き起こし機能を実装し、簡単に字幕付き動画が作成できるようになった 書き起こしたテキストはsrtフォーマットでエクスポート可能だった 拙作の動画インデクシングツール「動画眼」をsrtインポートに対応させた ユーザテスト（UT）やインタビュー動画をテキスト検索で頭出ししながら視聴できるようになった！■Premoiere Proの「音声テキスト化」機能がβリリース中Adobeの動画編集ソフトPremiere Proが音声テキスト化に対応しました。2021年3月現在、まだ正式リリースではな...

組み合わせてご活用いただくとかなり簡単／安価にテキスト書き起こしUT動画見返し環境が構築できると思います。

謹製の動画再生ツール「動画眼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で同一フォルダ内のファイル一覧が取得できればプルダウンで複数動画選択とかもできそうとか。でもこれもセキュリティ上の制約でできない気がします。

■Long story short…

• Adobe Premiere Proがクラウド音声書き起こし機能を実装し、簡単に字幕付き動画が作成できるようになった
• 書き起こしたテキストはsrtフォーマットでエクスポート可能だった
• 拙作の動画インデクシングツール「動画眼」をsrtインポートに対応させた
• ユーザテスト（UT）やインタビュー動画をテキスト検索で頭出ししながら視聴できるようになった！

■Premoiere Proの「音声テキスト化」機能がβリリース中

Adobeの動画編集ソフトPremiere Proが音声テキスト化に対応しました。2021年3月現在、まだ正式リリースではなく、事前登録制なのですが、こちらのページから申し込みをしておくと順次利用可能になるようです。

pages.adobe.com

 

2 Users

Premiere Proに搭載される最新の機能、「音声のテキスト化」をいち早く試しませ

https://pages.adobe.com/premiere/jp/speechtotext/index.html

私は12月に申し込んで3月までかかりました。今はもっと早く有効化されるかも知れません。正規機能となった後の料金システムは不明ですが、AdobeのクラウドAI機能はいままで追加料金をとったケースがない気がするので、このまま無料で使えるのかなという望みを抱いています。

精度は他のSTT（Speech To Text）サービス同様、完璧とはいきません。Watsonのように辞書登録機能もないので、例えばユーザーテスト動画を食わせた場合、製品固有の機能名とか画面名みたいな台詞はほぼ壊滅的でしょう。

それでも動画をドロップして数クリックでテキスト化され、字幕として動画に入れることができてしまうので非常に重宝すると思います。

■このテキストを「動画眼」でも使いたい！

動画眼は私が作って配布している動画インデックス付き再生ツールです

do-gugan.com

動画眼2

https://do-gugan.com/tools/do-gagan2/

ユーザリサーチなどのビデオを効率的に見返すツールです。

動画を再生しながらメモを書くと再生タイムインデックスとセットで記録してくれて、次にそのメモをクリックすると当該シーンが瞬時に頭出しされる、という特徴をもっていて、ユーザテストやインタビュー動画の見返しやプレゼンテーションに活用できます。現状Windows向けでフリーで配布しており、オープンソース化もしています。

GitHub

do-gugan/do-gagan2

https://github.com/do-gugan/do-gagan2

C#/WPF full-scratched Do-gagan scince 2019. Contribute to do-gugan/do-gagan2 development by creating an account on GitHub.

このツールで、自分でメモを手打ちするのではなく、各種STTサービスの出力データを食わせて、全発話をインデックス化したら検索とかもできて便利じゃね？ということは3年くらい前に思いつきました。ちょうどAmazonやGoogle、Microsoft、そしてIBMなどがこぞってクラウドSTTサービスに参入しだした頃です。これらのサービスを使えばGoogle Documentなどで書き起こすのと違って、タイムインデックス情報付きの結果が得られるのでフォーマットさえあわせてやれば「動画眼」で簡単にインポートすることができるのです。ただこれらのAPIサービスは初心者には利用が難しく、また動画から音声データを抽出して送信する必要もあったため、そこら辺をGUIで簡単にできるツールとしてLynxTipsをかなり動くところまで作成しました（今はちと事情があってしばらく放置中）。

そんな折り、今回Premiere Proが音声テキスト化機能をβながらサポート。この手のでいつも後回しにされがちな日本語もいきなり対応しています。これなら黒画面（ターミナル）を叩くことなくGUIで動画ファイルから直接書き起こしができます。しかも無料（執筆時点）！これを使わない手はないだろうというわけです。

■Premiere Pro → srt形式書き出し → 動画眼2読み込み → (ﾟдﾟ)ｳﾏｰ

早速同サービスを申し込んで試して見たところ、書き起こしたデータはsrt形式という動画字幕形式のデファクトスタンダード的なフォーマットでエキスポートできることがわかりました。動画字幕用なので当然タイムコードも含んでいます。

そこで早速「動画眼2」にもsrt形式のインポート機能を追加（v2.3）。黒画面なし、マウスクリックだけで発話インデックス再生、検索ができるUTふり返り環境が構築できるようになりました！

実際の様子をYoutubeにあげておきますので、よろしければ見てみてください。

なお、Adobe Premiere Proはサクブクリプション形式のソフトウェアです。

Adobe Creative Cloud コンプリート|12か月版|Windows/Mac対応|オンラインコード版

78,192円(12/24 04:59時点)

Amazon楽天市場

Amazonの情報を掲載しています

単品、もしくはPhotoshopやIllustratorとセットのコンプリートプランを契約する必要があります。安価で買い切りのPremiere Elementsではこの機能は使えないのでご注意ください。

2004年からごく一部の方に愛用いただいているUT動画分析支援ツール動画眼をスクラッチから作り直した「動画眼2」を公開しました。

もはや自分自身、VB.NETを触りたくないし当時の稚拙なコードをメンテナンスするのも苦痛だったので今回C#でゼロから書き直し、UIなどもモダンなシングルウインドウにしました。また別途開発中（現在クローズドベータ段階）のWatsonを使ったかんたん書き起こしツールのログをインデックスとして使うユースケースを強く意識した作りになっています。公開された暁には是非組み合わせてご活用いただければと思います。

動画眼2は引き続きフリーソフト、オープンソースでの公開です。

詳細はこちら↓。

https://do-gugan.com/tools/do-gagan2/

動画眼Noteも雪が降る前くらいには2にしたいなと。

当サイトでもいくつかのツールをClickOnceで配布していますが、Windowsの設定によってはブロックされることがあります。ActiveDirectoryで企業のセキュリティポリシーが適用されている場合もありますが、個人PCでレジストリなどを編集できる場合は以下の手順で回避することができる場合があります。

（レジストリの編集は自己責任でお願い致します。また編集方法の詳細は適宜ググってください。また本来ブロックするべき出所不定（未署名）のアプリケーションを使えるようにするわけですので、ご自身で安全と判断できるアプリケーションにのみ実行してください。）

現象：「セキュリティ設定は、このアプリケーションがこのコンピューターにインストールされることを許可していません。」と表示され先へ進めない。

本来なら警告が出つつも「閉じる」の左に「インストール」ボタンが並び先へ進めるはずですが、それがありません。

Winキー押して「regedit」などと入れ、レジストリエディターを開きます。そして、上部の検索欄に「コンピューター\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\.NETFramework\Security\TrustManager\PromptingLevel」をコピペしていれるか左のツリービューから辿って書きの画面に行きます。

右ペインの上から2番目の「Internet」をダブルクリックし、「値のデータ」欄をDisabledからEnabledに書き換えOKを押します。

これで先の画面に「インストール」ボタンが出現すると思います。ただしツール自体が未署名の場合は依然としてスマートスクリーンの警告（青ダイアログ）が出ます。そちらは「詳細」リンクをクリックすると進めると思います。

ちなみにこの編集は保存操作や再起動なしに適用されます。なので、必要なツールのインストール中にだけ一時的にEnabledにしてOKし、レジストリエディターをそのままにしておいて、インストール終了後にまたすぐDisabledに戻しておくのも良いかも知れません。

7月に予定していた仕事がことごとく延期になったヒマになったので、以前から取り組もうと思っていたUT支援ツール2本に本格的に着手しました。

一般公開まではもうちょっとテストを重ねてからと思っていますが、だいぶ動くようになっているので動画でチラ見せです。

■UT音声書き起こしツール

以前にもトライアルを記事にしてますが、IBM CloudのSpeech to Text（音声からのAIテキスト起こし）サービスを使ってユーザテストの音声を書き起こすツールです。IBM CloudのAIサービス（いわゆるWatson）は有料サービスですが、ユーザ辞書登録的なことができるので、ユーザテストのような業務文脈の対話では有用です。例えば会話の中に出てくる固有製品名や部位名などをあらかじめ学習しておくことで認識精度を上げることができます。一応簡単なWeb UIは提供されていますが、本ツールの優位点として、

• 動画から音声を自動抽出してアップロードする（Watsonは音声データしか受け付けない）
• 複数のファイルを一括処理できる
• 辞書学習周りもGUIで行える
• 後述の動画眼で読み込めるタブ区切りテキストファイルで書き出す（標準の出力はJSON形式で扱い辛い）

以下、少し古いバージョンですが動いている様子。

■動画眼2

2004年から公開しているビデオインデックス付けツール「動画眼」を完全フルスクラッチで作り直しています。本ツールは動画の特定タイムコードに対してメモを記入し、そのメモを選択することでタイムコードの位置を頭出し再生するというものです。UTなどの記録と分析、プレゼンにと開発してきました。

現行版はVisual Basic.NET/Windowsフォームで作っておりもはや設計も古い為、メンテナンスがしづらくなっていました。今ならもう少し腕前も上がってるぞということでC#/WPFでゼロから作り直しています。

また分析工程でゼロからインデックスメモを書き込んでいくのも大変で現実の業務でもなかなかやらないだろうということで、先のクラウド書き起こしした全発話インデックスをとりこんで、それをみて当該箇所を探してジャンプする、というユースケースを優先した作りになっています。

こちらも動いている様子を動画に録ってみました。

どちらもそう遠からずリリースできると思うのでご興味のある方はこちらのブログかTwitterアカウントをウォッチしておいていただければと思います。