ウェブベース遠隔文字通訳システムcaptiOnline3の説明
2020/7/16 若月大輔waka.icon
筑波技術大学 産業技術学部
目次
目的
captiOnline3の概要と構成を把握する
captiOnline3の機能を学び，基本的な使い方を習得する
captiOnline3の概要
構成等
ウェブブラウザだけで遠隔文字通訳を実現するシステム
クライアント：HTML5とJavaScriptで記述
サーバ：Node.js環境でJavaScriptで記述
しくみ
ウェブページ上で文字通訳に必要なデータを高速にやりとりすることで遠隔文字通訳を実現
利用者側のPC等の端末に音声を入力し，サーバを介してすべて入力者へ配信
captiOnline3では映像を配信する機能は実装されていない
入力者は配信された音声を文字化して字幕を生成する
互いの入力がリアルタイムに確認できるので連係入力が可能
生成された字幕はサーバを介してリアルタイムに利用者に提供される
https://gyazo.com/96849a7adc4857621b89a672b9b1810b
主な機能
ウェブブラウザだけで文字通訳に必要な環境が整う
アプリのインストール等は不要
OSを問わない（Windows，MAC，Linuxなどどれでも利用できる）
通信はすべてウェブベース
ウェブページが見れるネットワークに接続していれば利用できる
通信の暗号化
HTTPS通信時，WebSocketも同様に暗号化
文字通訳に必要な機能を実装
実際の文字通訳者の意見を元にインタフェースを設計
高速な通信により連係入力も可能
1つのサーバに複数のルームを生成可能
複数のルームで同時に文字通訳できる
文字の修飾
太字，斜体，色などの設定可能，リッチテキスト
字幕への画像挿入
ハイブリッド字幕
音声配信が可能
音声認識を利用した文字通訳
入力ページ入門
用意するもの
パソコン
ネットワークインタフェースを備えたもの
インターネット環境
高速で安定なもの（光回線等，有線推奨）
モバイルルータ等でも実施は可能
ウェブブラウザ
Google Chrome推奨（開発環境）
Edge，Safari等でも可能（音声配信，音声認識等の一部機能が利用できない）
連係入力を行う場合はFirefoxは不可（他の入力者の入力の様子がリアルタイムに表示されない）
おおらかな心（コレとても重要）
完璧ではなくベストを尽くすことを目指しましょう
入力者ががんばったところでネットやシステムなどの環境上の制限もある
インターネットを使用した通信なので不安定なこともある（ネットは水物）
遠隔情報保障が普及しはじめたのは最近なのです（研究は20年くらい前から）
浸透していなくてあたりまえ，完璧じゃないのはあたりまえ
入力者，利用者ともに現状の理解が必要
遠隔情報保障では横のつながりが増えます
異なる地域の入力者間で連係入力→作法の違いなど→よく相談して合理的に解決しましょう
あなたのせいじゃありません
きっとシステムのせいです（人がつくったものですから…ぜひ開発者へのフィードバックを！）
captiOnline3サーバへのアクセス
ウェブブラウザでURLを開く
入力者ページのキーボードアイコンをクリック
ダイアログが出たらとりあえず「OK」を押す
https://gyazo.com/10f87d146d2afd68186ed6b6e514b856
captiOnline3の画面（入力者ページ）
メインバー
表出パネル
連係入力パネル
連絡パネル
交代タイマーパネル
Fキーパネル
文訂正パネル
公開チャットパネル
原稿パネル
音声パネル
音声認識パネル
https://gyazo.com/7dc2dbb3435afdd7979028a13d5d93aa
初期設定
メインバーに自分の名前を入れる（最初は「47(anonym)」みたいになっている）
パネルの配置を好みに合わせて変更する
各パネルに関連した設定は各パネルの歯車アイコンをクリック
困ったときはメインバーの歯車アイコン→全ての設定を初期化
質問：設定や字幕のログはどこに保存されるの？
すべてブラウザに保存されます．サーバには保存されません．
メインバー
特徴
captiOnline全体についての設定をする
各パネルの開閉ができる
接続状況や時間の確認ができる
https://gyazo.com/87c47f34ec1fa7ced1907070c0194627
設定
歯車アイコン：全体に関係する設定や全ての設定の初期化
入力ページ全体のフォントや背景などの設定
設定したファイルのダウンロード／アップロード
全ての設定の初期化
文字修飾カラーの設定
ウインドウが重なったアイコン：各パネルの開閉
入力者名：自分の入力者名の設定（何も設定しないとランダムな2桁の数字+(anonym)）
顔アイコン：緑の場合はサーバに接続中，赤の場合は接続できていない状態
人のアイコン＋数値：ルームに接続している数，［］内に内訳（左から利用者｜入力者｜管理者｜不明のページを開いているクライアントの数）
時計：仕事のしすぎに注意
質問：設定にあるスクロール固定ってなんですか？
パネルが画面外にある場合に標準では画面全体をスクロールできるようになっていますがこれを固定します
タブキーでフォーカスを移動させるさいに，不慮のスクロールが発生しないようにする機能です
入力ページを操作する際は，全てのパネルが画面に入るように調整して，スクロール固定をONにするのがオススメです
連携入力パネル
特徴
自分の入力領域と他の入力者の領域が一緒に表示される
自分の入力領域を複数設けることができる
ドラッグで表示する順番を変更可能
https://gyazo.com/90ff5b2939e52905799c7300f5e4f568
使用方法
自分の入力領域に文をタイプしてエンターキーで送出
Shift+エンターキーで改行が可能
連係入力に必要な基本的なFキー機能を備えている
Fキーパネルを参照
自分の入力領域と他の入力者の領域は名前の部分をドラッグして順番を変更できる
2人連係入力をする場合は，パートナーを自分の入力領域の上に配置すると良い
領域の高さを領域の下の部分をドラッグすることで調整できる
自分の入力領域を高くすることで，変換候補が下の人に重なるのを防ぐことができる
設定
歯車アイコン：連携入力に関係する設定
自分の入力領域の表示設定
他の入力者の領域の表示設定
自動改行する文字列
送信抑制する行頭文字列 ※他の入力者のアシスト等
文の送出ごとに改行 ※送出する時必ず文末に改行が挿入される
文をドラフトとして送信 ※送信→文訂正→表出
丸矢印アイコン：他の入力者の情報更新 ※いないはずの人がいる，いるはずの人がいない時クリック
＋アイコン：自分の入力領域を増やす
人に吹き出しアイコン：チャットモードの有効無効を切り替えます ※文の頭に自分の名前が挿入される
表出パネル
特徴
連係パネル等で入力された結果を字幕として表示する
フォントや行数などの表示設定が可能
https://gyazo.com/59251784e287744e5c7ce6b99c76691f
使用方法
送出された字幕の確認
設定
歯車アイコン：字幕の表示設定
文字色，背景色の設定
フォントや表示行数，スクロール速度などの設定
入力中，修正中の文表示の有効／無効設定
文書アイコン：ログの消去や保存
利用者ページ側ではダウンロードは不可にしてある
ピンアイコン：ログの自動スクロールの停止／再開
質問：入力者側から利用者側の表示設定はできますか？
できません．利用者，入力者それぞれで設定します
使用する端末や表示したい行数などは利用者によって異なるからです
質問：入力途中の表示を標準でOFFにできませんか？
入力途中の表示は，いま話している最中なのか，その内容はなんなのかをリアルタイムに把握する上で非常に重要です
利用者にまずその機能があることを示すために標準でONになっています．利用者が不要だと感じたらOFFにでき設定も保存されます
連絡パネル
特徴
入力者間でメッセージを送り合うことができる
特定の入力者にメッセージを送ることができる
https://gyazo.com/d99698423d8698504abebefd25cd6db9
使い方
パネルの下部にある入力領域に文をタイプしエンターキーで送信
定型文を設定して，クリックで送信可能
送信先を選択して特定の入力者へのメッセージ送信
設定
歯車アイコン：表示設定
フォントや色，スクロール速度などの設定
メッセージのタイムスタンプ表示の有効／無効
ニコ動風通知の有効／無効 ※メッセージ受信時に連係パネルの場所にメッセージがニコ動っぽく流れる（意外と人気）
文書アイコン：ログの操作
ダウンロードや消去が可能
送信先ドロップダウンメニュー：全員に送るか，特定の入力者に送るかを切り替える
交代タイマーパネル
特徴
設定した時間間隔で交代メッセージなどを通知することができる
再生，停止，次へなどの操作ができる
残り時間をプログレスバーで視覚的に表示
https://gyazo.com/28e7b5fbee4e3232a549fc9d9f3fad7b
使用方法
交代間隔と交代文を設定する
再生ボタン▶をクリックして開始
適宜，一時停止，停止，次へボタンでタイマーを操作
設定
歯車アイコン：タイマーの設定と表示設定
交代間隔で，交代する時間を設定する
交代文で交代時に送信するメッセージを設定する
若月と天久保が入力
天久保と春日が入力
春日と若月が入力
上記のように設定すると3つのメッセージが設定した交代間隔で順に通知される
フォントサイズやスクロール速度などの表示設定
通知時の背景色の設定 ※メッセージが通知された際に設定された色で背景を明滅させる
連係入力通知の設定 ※さらに連係パネルの背景も明滅させる
ニコ動風通知の設定 ※さらにニコ動風のメッセージで通知を知らせる
注意
交代タイマーを操作すると全ての入力者に設定が反映される
複数名で同時に操作すると意図しない設定になることも
交代タイマーの操作役は事前に相談して1名に決めておく
Fキーパネル
特徴
事前に定型句を設定しておいて，ファンクションキーでそれを利用
https://gyazo.com/fd5f43bc8b247d0b41952d9da33d6b7f
使用方法
各ファンクションキーに定型句を入力し設定する
改行も定型句に含めることができる
連係パネルで設定したファンクションキーを押すと，その定型句が挿入されます
チェックボックスにチェックを入れておくと直接送出できます
設定
歯車アイコン：ファンクションキーや表示設定
F1のふりがな設定 ※利用できません
F8の括弧の設定
フォントの設定
文訂正パネル
特徴
ｆ
https://gyazo.com/02a522dc6789ccfcc4131c54ed5e574e
使用方法
訂正する必要がある文にフォーカスをあわせて，修正してエンターキーを押す
設定
歯車アイコン：表示設定など
フォントやスクロール速度を設定できる
訂正箇所を斜体や太字等で表示する設定
文書アイコン：ログのダウンロード，削除
公開チャットパネル
特徴
字幕上にニコ動形式でメッセージを送信できる
利用者間の意見交換，利用者と入力者間の連絡などの利用を想定
https://gyazo.com/60a4b575cfba41730ca1e8f58ff072ad
使用方法
下部の入力欄に文を入力してエンターキーを押すとメッセージが送信される
送信者名を付けることができる
定型文を設定して送信することができる
設定
歯車アイコン：表示設定等
フォントやスクロール速度の設定
文書アイコン：ログのダウンロード，削除
注意
利用者側では標準で利用できないように設定してある
荒らされる可能性があるため
オプションをつけることで利用可能に ※利用希望者は若月大輔まで
原稿パネル
特徴
事前に作成した原稿を順に送出できる
原稿のアップロード，ダウンロードが可能
https://gyazo.com/c8e03fa7f8eeb1756231ef684cd8ec22
使用方法
F1キーでキャレットがある1行を送出
F12キーで行頭に改行を付けて1行を送出
F2キーで連係パネルに1行を送る
設定
歯車アイコン：設定無し
＋アイコン：新しい空の原稿の生成
トレイ上矢印アイコン：新しい原稿のアップロード
トレイ下矢印アイコン：対象の原稿のダウンロード
音声認識パネル
特徴
Web Speech APIを利用して音声認識した結果を利用できる
結果を直接表出したり連絡パネルに送るなど応用ができる
https://gyazo.com/34f53e0bcd89dd6be39de6fad2e896ab
使用方法
ドロップダウンで音声認識結果を送る先を選択する
開始ボタン▶をクリックする
終了するときは■ボタンをクリックする
設定
歯車アイコン：音声認識と表示設定
音声認識の言語設定 ※日本語と英語が選べます
認識間隔の設定 ※長めと短めを設定できます．長めにすると認識に時間がかかることがあるようです
句点，読点の設定
フォントやスクロール速度などの設定
ドロップダウンメニュー：音声認識結果の送出先を選択
「連絡」を選択すると連絡パネルに直接送出され，口頭でやりとりも？
音声パネル
特徴
ブラウザ上で音声を送受信できる
会場の音声を入力者に送信する
入力者間で会話する（エンコードに少々パワーがいるので低スペックPCでは困難，エコーキャンセリングなしなのでヘッドセット必須）
https://gyazo.com/c8b2c04ae6b1c7e4b564297a4e3f61b8
使用方法
送信方法
マイクボタンをクリックして配信開始
マイク斜め線ボタンで配信終了
送信音量（ゲイン）を調整できる
受信方法
受信すると自動的に音声が流れる
スピーカー✕ボタンでミュートできる
ボリューム調整ができる
設定
歯車アイコン：エンコーダの設定
基本的に標準設定のままでOK
注意
Chromeの仕様変更により標準では利用できなくなってしまった
マルチメディア系のAPIを有効にするためにはユーザがページに対してアクション（マウスやキー操作）を入れる必要がある
captiOnline3ではページを開いた際にこのAPIを参照しようとするので失敗する
ファミコン的裏技：適当なキーを押しながらブラウザのリロードボタンを押す（ほんとスミマセン）
captiOnline3がAPIを参照する前にアクション（キー入力）が入り，APIが利用可能になる
captiOnline4では対応済み
利用者ページ入門
用意するもの
パソコンやスマートフォンなど
インターネット環境
モバイルルータ
データ通信など
ウェブブラウザ
Google Chrome推奨（開発環境）
Safari，Edgeなどでも可
おおらかな心（コレとても重要）
文字通訳者はベストを尽くしています！
トラブルはネットワークやシステムのせいです
インターネットを使用した通信なので不安定なこともある
やはりネットは「水物」です
遠隔情報保障が普及しはじめたのは最近なのです（研究は20年くらい前から）
浸透していなくてあたりまえ，完璧じゃないのはあたりまえ
入力者，利用者ともに現状の理解が必要
captiOnline3サーバへのアクセス
ウェブブラウザでURLを開く
利用者ページのディプレイとスマートフォンのアイコンをクリック
https://gyazo.com/10f87d146d2afd68186ed6b6e514b856
captiOnline3の画面（利用者ページ）
上部にメインバーがある
中央に入力された字幕が表示される
点線の下に入力中の字幕が表示される
https://gyazo.com/154e4e47aaa15ddfceaf5fa9da1954fa
メインバー
特徴
captiOnline全体についての設定をする
接続状況や時間の確認ができる
https://gyazo.com/dbbf5b6f2cb15a23236b10f0bc8d0c2c
設定
歯車アイコン（左）：設定の保存や読込，全ての設定の初期化
歯車アイコン（右）：字幕の表示設定
字幕の文字色，背景色の設定
表示行数等の設定
スクロール速度の設定
修正中および入力中の文表示
文書アイコン：字幕ログの消去
ダウンロード機能は無効にしてあります
ピンアイコン：字幕の自動スクロールの停止
字幕に新しい文が挿入されると自動スクロールするので，それを停止する．
顔アイコン：緑の場合はサーバに接続中，赤の場合は接続できていない状態
人のアイコン＋数値：ルームに接続している数