Flashのアクセシビリティについて考える

第4回音が聞こえない状況と映像の字幕

音が聞こえない状況

音が聞こえない状況はいろいろあります。

  • 聴覚障碍である
  • 会社のPCなので周りに気を遣う

聴覚障碍者といっても、障碍者手帳を交付されている方から、高齢化により難聴がすすんだ人までさまざまです。また、一説では、常に戦争をしている国などでは、兵士の約1割が聴覚障碍とも言われています。会社にあるPCでは,周りに気を遣うため音を出せない人が多く,昔はサウンド機能がないPCもありました。

意外に音を利用できない環境や人は大勢いるので、音に頼りっぱなしのUIなどはどのような結果を招くのか慎重にすべきです。

音をなくすには

音が利用できない状況を体験するのは非常に簡単です。スピーカーならボリュームを絞れば良いですし、PCサウンドのミュートをオンにしても良いでしょう。とにかく、PCからの音を聞けなくすれば良いだけです。

その状態で使って見ると、次のことがわかります。

  • 音に頼るインタラクションやゲームは楽しめない
  • アラート音は聞こえないので、画面上の変化が重要
  • 映像の内容を正しく理解するには言葉による解説が重要

1つ目の問題は、インタラクションやゲームの方向性なので、変えようがありません。

こういう性質のコンテンツが、万人に楽しめないのは仕方ないことなので、変に気を回さないことも重要だと筆者は考えます。

2つ目の問題は、たとえば、モーダルダイアログなどで、そのダイアログを閉じないと他の操作が不可能な場合、ダイアログ以外のところをクリックすると「カン!カン!」と硬いアラート音がして、なんとなく操作できないのがわかりますが、音が聞こえなければ、ただ反応しなくなっただけで、フリーズしたのと勘違いしてしまいそうです。

「音は複数ある意志伝達手段の1つ」にすぎません。実際、アラート音だけでなく、様々な部分で、音だけ・画像だけの変化を付けたとしたら、それは間違いで、どちらによる表現もすることで、より多くの人が使いやすいコンテンツになります。

両方が使える人にとっては、耳だけでなく目からも情報が入ってくるため、非常にわかりやすくなるはずです。また、携帯電話などモバイル機器でバイブレーション機能を活用するものもありますが、これも良い伝達手段です。

3つ目は、字幕(キャプション)のことです。次でより詳しく解説します。

映像につける字幕

字幕には、音を使用しないで、情報を伝達する目的以外にも、映像の理解を深めたり、複数言語に対応することで、通訳代わりになるという効果があります。

そこで、映像にはなるべく字幕を設けたいですが、映像に画像として埋め込んでしまうのではなく、テキストデータを字幕として表示する仕組みを利用しましょう。これの利点の1つは、1つの映像に複数言語の字幕を付けられることです。

Flashで字幕を付けるには、FLVPlaybackCaptionningコンポーネントを使用する方法がもっとも簡単でオススメです。

実際に作成してみましょう。

画面キャプチャは、CS5で撮影していますが、CS3以上は同じような操作が可能です。

こちらからpotemkin_sample_cs4.zip:flaファイル(CS4)、flvファイル、TTMLファイル)ダウンロードできます。

  1. Flashムービーは、ActionScript3で作成します。AS2では、ここに紹介するコンポーネントが機能しません。

     新規ドキュメントは「ActionScroipt3.0」で作成し、flvファイルと同じフォルダ内に保存する。
    図 新規ドキュメントは「ActionScroipt3.0」で作成し、flvファイルと同じフォルダ内に保存する。
  2. FLVビデオを表示するためにFLVPlaybackコンポーネントを使用します。ステージにドラッグしたらコンポーネントのプロパティで再生するFLVファイル(potemkin_open.flv)を指定します。

    CS4、CS3ではFLVPlaybackコンポーネントを使用します。

     ステージにFLVPlaybackコンポーネントを配置。
    図 ステージにFLVPlaybackコンポーネントを配置。 図 ステージにFLVPlaybackコンポーネントを配置。
  3. 字幕を表示するために、FLVPlaybackCaptioningコンポーネントをステージに配置し、TTMLテキスト(potemkin_ttml.xml)を指定します。FLVPlaybackCaptioningコンポーネントが見当たらないときは、AS3.0かどうかを確認しましょう。AS3.0以外では、このコンポーネントは動作しません。

     FLVPlaybackCaptioningコンポーネントは、同じステージ上であれば、どこでも良いので配置。
    図 FLVPlaybackCaptioningコンポーネントは、同じステージ上であれば、どこでも良いので配置。 図 FLVPlaybackCaptioningコンポーネントは、同じステージ上であれば、どこでも良いので配置。
  4. ムービープレビューすると、字幕がムービーの上に重なって再生されます。

     黒字に白文字で表示される字幕。
    図 黒字に白文字で表示される字幕。

字幕を表現するTimed Text Markup Language

先ほど、FLVPlaybackCaptioningコンポーネントで、指定したXMLファイルは、Timed Text Markup Language(以下TTML)とは呼び,FLVファイルに字幕を適用するために対応しているフォーマットです。W3Cによって決められているので、参考にしてください。

Timed Text Markup Language
http://www.w3.org/TR/ttaf1-dfxp/

ただし、ここの定義すべてが、FLVPlaybackCaptioningコンポーネントで有効なわけではないので、注意が必要です。

その有効/無効の切り分けは、以下のヘルプを参照してください。

「Timed Text キャプションの使用」
http://help.adobe.com/ja_JP/as3/components/WS5b3ccc516d4fbf351e63e3d118a9c65b32-7ee5.html

また、YouTubeなどのオンライン映像であっても、字幕は、SubRip(.srt)やSubViewer(.sub)といったDVDなどに利用されるフォーマットが使用されることも多いです。どちらも、テキストファイルで、基本的には、映像の中で時間を指定し字幕を表示するというものですが、それらを作成するための、オンラインで動作するエディタを2つ紹介します。

CaptionTube

YouTubeのサービスで、ビデオに字幕を付けられ、最後はYouTube内のビデオに適用することが可能なCaptionTubeというサービスです。まだ、ベータですが、本家Googleの提供するサービスです。

字幕を作成したら、YouTube内のビデオに直接適用したり、テキストファイルとして出力することが可能です。ただし、出力できる字幕用のファイルは、.subか.srtでTTMLはありません。また、ビデオファイルは一度YouTubeにアップする必要があります。

CaptionTubeの出力する字幕テキスト(.sub、.srt)はTTMLによく似たフォーマットなので、拙作簡易変換ツールを使えばTTMLとして出力可能です(このツールについては、後述します⁠⁠。

また、常に編集結果や字幕データはサーバーに残っていますので、後から修正を加えることも容易にできます。今回、CaptionTubeで作成した字幕付き映像は以下で確認できます。

開設の御口上字幕版
字幕はCC(クローズドキャプション)ボタンをクリックすると出ます。

 CaptionTubeは、Googleアカウントでログインします。
図 CaptionTubeは、Googleアカウントでログインします。
 字幕は映像を見ながら付け、時間調整も可能です。
図 字幕は映像を見ながら付け、時間調整も可能です。
 srtかsubフォーマットで出力可能。また、直接YouTubeに反映させることもできます。
図 srtかsubフォーマットで出力可能。また、直接YouTubeに反映させることもできます。

Online Subtitle/Captions Editor

Subtitle Horseが提供するオンラインの字幕テキスト作成ツールがOnline Subtitle/Captions Editorです。こちらも、ビデオを見ながら字幕を付けていきますが、flvファイルは自分のサーバで公開し(httpあるいはrtmp)アクセスする必要があります。

このオンラインエディタは、出力フォーマットが豊富です。YouTubeなどで使用できる.subや.srtをはじめ、FLVPlaybackCaptioningコンポーネントで使用するTTMLフォーマットにも対応しています。ただ、編集途中で保存することが難しいので、長い映像に字幕を付けるときは注意が必要です。

 トップ画面では、オンライン上にあるflvファイルを指定します。
図 トップ画面では、オンライン上にあるflvファイルを指定します。
 エディト画面。CaptionTubeよりも、細かな再生が可能です。
図 エディト画面。CaptionTubeよりも、細かな再生が可能です。
 出力画面。TTMLをはじめ、SubRip、SubViewerといったフォーマットに対応。
図 出力画面。TTMLをはじめ、SubRip、SubViewerといったフォーマットに対応。

sub2ttml変換ツール

CaptionTubeの出力するSubViewer形式のテキストファイルをTTML形式に変換するツールを作成しました。使い方は簡単です。SubViewer形式のテキストをステージ上にあるテキストフィールドにペーストしてから、ボタンをクリックすると、TTML形式に変換したテキストがクリップボードにコピーされます。

その内容は、最低限のTTMLでスタイルなどの定義はありませんので、修正する場合は、このファイルを編集します。ファイル「~.xml」という名前で「UTF-8」で保存してから、FLVPlaybackCaptioningコンポーネントで利用してください。

 実行サンプル。SubViewer形式をCaptionTubeからコピーし上のテキストフィールドにペーストしたら、ボタンをクリックしてTTML形式に変換する。変換後の内容はクリップボードに再び返る。
図 実行サンプル。SubViewer形式をCaptionTubeからコピーし上のテキストフィールドにペーストしたら、ボタンをクリックしてTTML形式に変換する。変換後の内容はクリップボードに再び返る。

上記ソースファイルは、CS4用です。ここからダウンロードできます。利用してください。なお、サーバにアップロードする場合、flvファイルや字幕用のxmlファイルも同じくアップロードする必要があります。

今回使用しているFLV映像のソースは、白井良明氏のWEBサイトにある「ポチョムキン放送室」のオープンを記念して作成・公開されたもので、今回、許可をいただき使用しています。映像の権利は、白井良明氏にあります。学習用以外の用途では使用できません。また、許可なく公開することもできません。

白井良明公式ホームぺージ:http://tonpi.net/

YOUTUBE版:http://youtube.com/watch?=-B4tQNGW-uM

おすすめ記事

記事・ニュース一覧