Caption is fun!

26
Caption is fun! Caption is fun! ⼩嶋新/ ⼩嶋新/ Arata Arata Kojima Kojima

description

「ワイワイガヤガヤアクセシビリティ」 ドットコーダーセッション5で使用したスライドを公開します。 http://tweetvite.com/event/dotcoder_s5

Transcript of Caption is fun!

Page 1: Caption is fun!

Caption is fun!Caption is fun! ⼩嶋新/⼩嶋新/ArataArata

KojimaKojima

Page 2: Caption is fun!

01 01 ⾃⼰紹介⾃⼰紹介

Page 3: Caption is fun!

3⾃⼰紹介⾃⼰紹介名前名前

⼩嶋新(こじまあらた)⼩嶋新(こじまあらた)

所属所属

特定⾮営利活動法⼈特定⾮営利活動法⼈しゃしゃらくらくブログブログ

TRANSTRANS

TwitterTwitter @@aratakojimaaratakojima

FacebookFacebook

aratakojimaaratakojima

Page 4: Caption is fun!

4

http://d.hatena.ne.jp/aratako0/http://d.hatena.ne.jp/aratako0/

Page 5: Caption is fun!

02 02 アジェンダアジェンダ

Page 6: Caption is fun!

延々とキャプションを語る延々とキャプションを語る

Page 7: Caption is fun!

7

http://http://www.slideshare.net/aratakojima/altwww.slideshare.net/aratakojima/alt--presentationpresentation

Page 8: Caption is fun!

03 03 イントロダクションイントロダクション

Page 9: Caption is fun!

9

http://www.whitehouse.gov/photoshttp://www.whitehouse.gov/photos--andand--video/video/2010/10/08/presidentvideo/video/2010/10/08/president-- obamaobama--signssigns--21st21st--centurycentury--communicationscommunications--videovideo--accessibilaccessibil

Page 10: Caption is fun!

キャプションのメリットはキャプションのメリットは 聴覚障害者だけではない。聴覚障害者だけではない。

Page 11: Caption is fun!

11キャプションのメリットキャプションのメリット動画のコンテンツをテキストで⼊⼿し

たい外的な環境により⾳声を利⽤できないコンテンツをテキストとして提供でき

るので、さまざまな再利⽤が可能(検 索エンジンのインデックスなど)

Page 12: Caption is fun!

12

http://kokumaijp.blog70.fc2.com/bloghttp://kokumaijp.blog70.fc2.com/blog--entryentry--40.html40.html

Page 13: Caption is fun!

13

http://googleblog.blogspot.com/2009/11/automatichttp://googleblog.blogspot.com/2009/11/automatic--captionscaptions--inin--youtube.htmlyoutube.html

Page 14: Caption is fun!

14

http://http://www.youtube.com/watch?vwww.youtube.com/watch?v=o7uLkVrY88k=o7uLkVrY88k

Page 15: Caption is fun!

04 04 キャプションの作り⽅キャプションの作り⽅

Page 16: Caption is fun!

16

http://http://captiontube.appspot.comcaptiontube.appspot.com//

Page 17: Caption is fun!

17キャプションの作り⽅

YouTubeのキャプションフォーマット

SubViewerSubViewer

(*.SUB)(*.SUB)SubRipSubRip

(*.SRT)(*.SRT)

Page 18: Caption is fun!

18SubRipSubRip

(*.SRT)(*.SRT)100:00:00,673 --> 00:00:05,224インターネットをいつ頃からお使いですか?

200:00:05,224 --> 00:00:17,299使い始めたのは中学校の授業からです。中⼀とかですね。

300:00:17,299 --> 00:00:27,701普段はこの事務所で調べることがあればそのサイトを開いて調べたりと

Page 19: Caption is fun!

05 HTML05 HTMLとキャプションとキャプション

Page 20: Caption is fun!

20

http://people.opera.com/brucel/demo/video/multilingualhttp://people.opera.com/brucel/demo/video/multilingual--synergy.htmlsynergy.html

Page 21: Caption is fun!

21WebSRTWebSRT100:00:00.67 --> 00:00:05.22インターネットをいつ頃からお使いですか?

200:00:05.22 --> 00:00:17.29使い始めたのは中学校の授業からです。中⼀とかですね。

300:00:17.29 --> 00:00:27.70普段はこの事務所で調べることがあればそのサイトを開いて調べたりと

Page 22: Caption is fun!

22WebSRTWebSRT100:00:00.67 --> 00:00:05.22<i><i>インターネット</i></i>をいつ頃からお使いですか?

200:00:05.22 --> 00:00:17.29<1>使い始めたのは<b><b>中学校の授業</b></b>からです。中⼀とかですね。

300:00:17.29 --> 00:00:27.70普段はこの事務所で調べることがあればそのサイトを開いて調べたりと

Page 23: Caption is fun!

23WebSRTWebSRT

& CSS& CSS::cue {

color: blue;}::cue-part(1, b) {

font-style: normal;text-decoration: underline;

}

Page 24: Caption is fun!

24HTML5HTML5<video src=“a11y.webm" controls>

<track label="English" kind="subtitles" src=“a11y_eng.wsrt" srclang="en">

<track label=“Japanese" kind="subtitles" src=“a11y_ja.wsrt" srclang=“ja">

</video>

Page 25: Caption is fun!

25HTMLとキャプション

WebSRTとtrack要素の課題HTML5HTML5仕様書には記載がない仕様書には記載がないブラウザ未対応であるブラウザ未対応である

Page 26: Caption is fun!

Caption is fun!Caption is fun!