ウェブベース遠隔文字通訳システムcaptiOnline3の説明

captiOnline
ウェブベース遠隔文字通訳システムcaptiOnline3の説明
2020/7/16 若月大輔
筑波技術大学 産業技術学部

目次
	目的 ウェブベース遠隔文字通訳システムcaptiOnline3の説明#ca2a9b
	captiOnline3の概要 ウェブベース遠隔文字通訳システムcaptiOnline3の説明#ca2a9f
	入力者ページ入門 ウェブベース遠隔文字通訳システムcaptiOnline3の説明#ca2aba
	利用者ページ入門 ウェブベース遠隔文字通訳システムcaptiOnline3の説明#ca2a9c

目的
	captiOnline3の概要と構成を把握する
	captiOnline3の機能を学び，基本的な使い方を習得する

captiOnline3の概要

構成等
	ウェブブラウザだけで遠隔文字通訳を実現するシステム
	クライアント：HTML5とJavaScriptで記述
	サーバ：Node.js環境でJavaScriptで記述
	通信：HTTP/HTTPS，WebSocket（Socket.IO）
	音声配信コーデック：Opus
	音声認識エンジン：Web Speech API

しくみ
	ウェブページ上で文字通訳に必要なデータを高速にやりとりすることで遠隔文字通訳を実現
	利用者側のPC等の端末に音声を入力し，サーバを介してすべて入力者へ配信
		captiOnline3では映像を配信する機能は実装されていない
	入力者は配信された音声を文字化して字幕を生成する
		互いの入力がリアルタイムに確認できるので連係入力が可能
	生成された字幕はサーバを介してリアルタイムに利用者に提供される

主な機能
	ウェブブラウザだけで文字通訳に必要な環境が整う
		アプリのインストール等は不要
		OSを問わない（Windows，MAC，Linuxなどどれでも利用できる）
	通信はすべてウェブベース
		ウェブページが見れるネットワークに接続していれば利用できる
	通信の暗号化
		HTTPS通信時，WebSocketも同様に暗号化
	文字通訳に必要な機能を実装
		実際の文字通訳者の意見を元にインタフェースを設計
		高速な通信により連係入力も可能
	1つのサーバに複数のルームを生成可能
		複数のルームで同時に文字通訳できる
	文字の修飾
		太字，斜体，色などの設定可能，リッチテキスト
	字幕への画像挿入
		ハイブリッド字幕
	音声配信が可能
	音声認識を利用した文字通訳

入力ページ入門

用意するもの
	パソコン
		ネットワークインタフェースを備えたもの
	インターネット環境
		高速で安定なもの（光回線等，有線推奨）
		モバイルルータ等でも実施は可能
	ウェブブラウザ
		Google Chrome推奨（開発環境）
		Edge，Safari等でも可能（音声配信，音声認識等の一部機能が利用できない）
		連係入力を行う場合はFirefoxは不可（他の入力者の入力の様子がリアルタイムに表示されない）
	おおらかな心（コレとても重要）
		完璧ではなくベストを尽くすことを目指しましょう
			入力者ががんばったところでネットやシステムなどの環境上の制限もある
		インターネットを使用した通信なので不安定なこともある
			やはりネットは「水物」です
		遠隔情報保障が普及しはじめたのは最近なのです（研究は20年くらい前から）
			浸透していなくてあたりまえ，完璧じゃないのはあたりまえ
			入力者，利用者ともに現状の理解が必要
		あなたのせいじゃありません
			きっとシステムのせいです（人がつくったものですから…フィードバックが大切）

captiOnline3サーバへのアクセス
	ウェブブラウザでURLを開く
	入力者ページのキーボードアイコンをクリック
		ダイアログが出たらとりあえず「OK」を押す

captiOnline3の画面（入力者ページ）
	メインバー
	表出パネル
	連係入力パネル
	連絡パネル
	交代タイマーパネル
	Fキーパネル
	文訂正パネル
	公開チャットパネル
	原稿パネル
	音声パネル
	音声認識パネル

初期設定
	メインバーに自分の名前を入れる（最初は「47(anonym)」みたいになっている）
	パネルの配置を好みに合わせて変更する
	各パネルに関連した設定は各パネルの歯車アイコンをクリック
	困ったときはメインバーの歯車アイコン→全ての設定を初期化
質問：設定や字幕のログはどこに保存されるの？
	すべてブラウザに保存されます．サーバには保存されません．

メインバー
特徴
	captiOnline全体についての設定をする
	各パネルの開閉ができる
	接続状況や時間の確認ができる
設定
	歯車アイコン：全体に関係する設定や全ての設定の初期化
		入力ページ全体のフォントや背景などの設定
		設定したファイルのダウンロード／アップロード
		全ての設定の初期化
		文字修飾カラーの設定
	ウインドウが重なったアイコン：各パネルの開閉
	入力者名：自分の入力者名の設定（何も設定しないとランダムな2桁の数字+(anonym)）
	顔アイコン：緑の場合はサーバに接続中，赤の場合は接続できていない状態
	人のアイコン＋数値：ルームに接続している数，［］内に内訳（左から利用者｜入力者｜管理者｜不明のページを開いているクライアントの数）
	時計：仕事のしすぎに注意
質問：設定にあるスクロール固定ってなんですか？
	パネルが画面外にある場合に標準では画面全体をスクロールできるようになっていますがこれを固定します
	タブキーでフォーカスを移動させるさいに，不慮のスクロールが発生しないようにする機能です
	入力ページを操作する際は，全てのパネルが画面に入るように調整して，スクロール固定をONにするのがオススメです

連携入力パネル
特徴
	自分の入力領域と他の入力者の領域が一緒に表示される
	自分の入力領域を複数設けることができる
	ドラッグで表示する順番を変更可能
使用方法
	自分の入力領域に文をタイプしてエンターキーで送出
	Shift+エンターキーで改行が可能
	連係入力に必要な基本的なFキー機能を備えている
		Fキーパネルを参照
	自分の入力領域と他の入力者の領域は名前の部分をドラッグして順番を変更できる
		2人連係入力をする場合は，パートナーを自分の入力領域の上に配置すると良い
	領域の高さを領域の下の部分をドラッグすることで調整できる
		自分の入力領域のを高くすることで，変換候補が下の人に重なるのを防ぐことができる
設定
	歯車アイコン：連携入力に関係する設定
		自分の入力領域の表示設定
		他の入力者の領域の表示設定
		自動改行する文字列
		送信抑制する行頭文字列 ※他の入力者のアシスト等
		文の送出ごとに改行 ※送出する時必ず文末に改行が挿入される
		文をドラフトとして送信 ※送信→文訂正→表出
	丸矢印アイコン：他の入力者の情報更新 ※いないはずの人がいる，いるはずの人がいない時クリック
	＋アイコン：自分の入力領域を増やす
	人に吹き出しアイコン：チャットモードの有効無効を切り替えます ※文の頭に自分の名前が挿入される

表出パネル
特徴
	連係パネル等で入力された結果を字幕として表示する
	フォントや行数などの表示設定が可能
使用方法
	送出された字幕の確認
設定
	歯車アイコン：字幕の表示設定
		文字色，背景色の設定
		フォントや表示行数，スクロール速度などの設定
		入力中，修正中の文表示の有効／無効設定
	文書アイコン：ログの消去や保存
		利用者ページ側ではダウンロードは不可にしてある
	ピンアイコン：ログの自動スクロールの停止／再開
質問：入力者側から利用者側の表示設定はできますか？
	できません．利用者，入力者それぞれで設定します
	使用する端末や表示したい行数などは利用者によって異なるからです
質問：入力途中の表示を標準でOFFにできませんか？
	入力途中の表示は，いま話している最中なのか，その内容はなんなのかをリアルタイムに把握する上で非常に重要です
	利用者にまずその機能があることを示すために標準でONになっています．利用者が不要だと感じたらOFFでき設定も保存されます

連絡パネル
特徴
	入力者間でメッセージを送り合うことができる
	特定の入力者にメッセージを送ることができる
使い方
	パネルの下部にある入力領域に文をタイプしエンターキーで送信
	定型文を設定して，クリックで送信可能
	送信先を選択して特定の入力者へのメッセージ送信
設定
	歯車アイコン：表示設定
		フォントや色，スクロール速度などの設定
		メッセージのタイムスタンプ表示の有効／無効
		ニコ動風通知の有効／無効 ※メッセージ受信時に連係パネルの場所にメッセージがニコ動っぽく流れる（意外と人気）
	文書アイコン：ログの操作
		ダウンロードや消去が可能
	送信先ドロップダウンメニュー：全員に送るか，特定の入力者に送るかを切り替える

交代タイマーパネル
特徴
	設定した時間間隔で交代メッセージなどを通知することができる
	再生，停止，次へなどの操作ができる
	残り時間をプログレスバーで視覚的に表示
使用方法
	交代間隔と交代文を設定する
	再生ボタン▶をクリックして開始
	適宜，一時停止，停止，次へボタンでタイマーを操作
設定
	歯車アイコン：タイマーの設定と表示設定
		交代間隔で，交代する時間を設定する
		交代文で交代時に送信するメッセージを設定する
			> 若月と天久保が入力
			> 天久保と春日が入力
			> 春日と若月が入力
			上記のように設定すると3つのメッセージが設定した交代間隔で順に通知される
		フォントサイズやスクロール速度などの表示設定
		通知時の背景色の設定 ※メッセージが通知された際に設定された色で背景を明滅させる
		連係入力通知の設定 ※さらに連係パネルの背景も明滅させる
		ニコ動風通知の設定 ※さらにニコ動風のメッセージで通知を知らせる
注意
	交代タイマーを操作すると全ての入力者に設定が反映される
		複数名で同時に操作すると意図しない設定になることも
	交代タイマーの操作役は事前に相談して1名に決めておく

Fキーパネル
特徴
	事前に定型句を設定しておいて，ファンクションキーでそれを利用
使用方法
	各ファンクションキーに定型句を入力し設定する
		改行も定型句に含めることができる
	連係パネルで設定したファンクションキーを押すと，その定型句が挿入されます
	チェックボックスにチェックを入れておくと直接送出できます
設定
	歯車アイコン：ファンクションキーや表示設定
		F1のふりがな設定 ※利用できません
		F8の括弧の設定
		フォントの設定

文訂正パネル
特徴
	字幕として表出された文が順に表示される
	文を修正することで，字幕上の文も同時に修正される
		修正した文は赤枠になる
	ドラフト（字幕として表示しない文をためる場所）としても利用できる
		ドラフト文は緑枠で表示→エンターキーで表出→赤枠へ
使用方法
	訂正する必要がある文にフォーカスをあわせて，修正してエンターキーを押す
設定
	歯車アイコン：表示設定など
		フォントやスクロール速度を設定できる
		訂正箇所を斜体や太字等で表示する設定
	文書アイコン：ログのダウンロード，削除

公開チャットパネル
特徴
	字幕上にニコ動形式でメッセージを送信できる
	利用者間の意見交換，利用者と入力者間の連絡などの利用を想定
使用方法
	下部の入力欄に文を入力してエンターキーを押すとメッセージが送信される
		送信者名を付けることができる
		定型文を設定して送信することができる
設定
	歯車アイコン：表示設定等
		フォントやスクロール速度の設定
	文書アイコン：ログのダウンロード，削除
注意
	利用者側では標準で利用できないように設定してある
		荒らされる可能性があるため
		オプションをつけることで利用可能に ※利用希望者は若月大輔まで

原稿パネル
特徴
	事前に作成した原稿を順に送出できる
	原稿のアップロード，ダウンロードが可能
使用方法
	F1キーでキャレットがある1行を送出
	F12キーで行頭に改行を付けて1行を送出
	F2キーで連係パネルに1行を送る
設定
	歯車アイコン：設定無し
	＋アイコン：新しい空の原稿の生成
	トレイ上矢印アイコン：新しい原稿のアップロード
	トレイ下矢印アイコン：対象の原稿のダウンロード

音声認識パネル
特徴
	Web Speech APIを利用して音声認識した結果を利用できる
	結果を直接表出したり連絡パネルに送るなど応用ができる
使用方法
	ドロップダウンで音声認識結果を送る先を選択する
	開始ボタン▶をクリックする
	終了するときは■ボタンをクリックする
設定
	歯車アイコン：音声認識と表示設定
		音声認識の言語設定 ※日本語と英語が選べます
		認識間隔の設定 ※長めと短めを設定できます．長めにすると認識に時間がかかることがあるようです
		句点，読点の設定
		フォントやスクロール速度などの設定
	ドロップダウンメニュー：音声認識結果の送出先を選択
		「連絡」を選択すると連絡パネルに直接送出され，口頭でやりとりも？

音声パネル
特徴
	ブラウザ上で音声を送受信できる
		会場の音声を入力者に送信する
		入力者間で会話する（エンコードに少々パワーがいるので低スペックPCでは困難，エコーキャンセリングなしなのでヘッドセット必須）
使用方法
送信方法
	マイクボタンをクリックして配信開始
	マイク斜め線ボタンで配信終了
	送信音量（ゲイン）を調整できる
受信方法
	受信すると自動的に音声が流れる
	スピーカー✕ボタンでミュートできる
	ボリューム調整ができる
設定
	歯車アイコン：エンコーダの設定
		基本的に標準設定のままでOK
注意
	Chromeの仕様変更により標準では利用できなくなってしまった
		マルチメディア系のAPIを有効にするためにはユーザがページに対してアクション（マウスやキー操作）を入れる必要がある
			captiOnline3ではページを開いた際にこのAPIを参照しようとするので失敗する
		ファミコン的裏技：適当なキーを押しながらブラウザのリロードボタンを押す（ほんとスミマセン）
			captiOnline3がAPIを参照する前にアクション（キー入力）が入り，APIが利用可能になる
		captiOnline4では対応済み

利用者ページ入門

用意するもの
	パソコンやスマートフォンなど
	インターネット環境
		モバイルルータ
		データ通信など
	ウェブブラウザ
		Google Chrome推奨（開発環境）
		Safari，Edgeなどでも可
	おおらかな心（コレとても重要）
		文字通訳者はベストを尽くしています！
			トラブルはネットワークやシステムのせいです
		インターネットを使用した通信なので不安定なこともある
			やはりネットは「水物」です
		遠隔情報保障が普及しはじめたのは最近なのです（研究は20年くらい前から）
			浸透していなくてあたりまえ，完璧じゃないのはあたりまえ
			入力者，利用者ともに現状の理解が必要

captiOnline3サーバへのアクセス
	ウェブブラウザでURLを開く
	利用者ページのディプレイとスマートフォンのアイコンをクリック

captiOnline3の画面（利用者ページ）
	上部にメインバーがある
	中央に入力された字幕が表示される
	点線の下に入力中の字幕が表示される

メインバー
特徴
	captiOnline全体についての設定をする
	接続状況や時間の確認ができる
設定
	歯車アイコン（左）：設定の保存や読込，全ての設定の初期化
	歯車アイコン（右）：字幕の表示設定
		字幕の文字色，背景色の設定
		表示行数等の設定
		スクロール速度の設定
		修正中および入力中の文表示
	文書アイコン：字幕ログの消去
		ダウンロード機能は無効にしてあります
	ピンアイコン：字幕の自動スクロールの停止
		字幕に新しい文が挿入されると自動スクロールするので，それを停止する．
	顔アイコン：緑の場合はサーバに接続中，赤の場合は接続できていない状態
	人のアイコン＋数値：ルームに接続している数


#captiOnline3