Caption is fun!

 ⼩嶋新/Arata Kojima
01 ⾃⼰紹介
⾃⼰紹介                        3
 名前        ⼩嶋新(こじまあらた)
 所属        特定⾮営利活動法⼈しゃらく
 ブログ       TRANS
 Twitter   @aratakojima...
4




http://d.hatena.ne.jp/aratako0/
02 アジェンダ
延々とキャプションを語る
7




http://www.slideshare.net/aratakojima/alt-presentation
03 イントロダクション
9




http://www.whitehouse.gov/photos-and-video/video/2010/10/08/president-
        obama-signs-21st-century-communicatio...
キャプションのメリットは
聴覚障害者だけではない。
キャプションのメリット     11
動画のコンテンツをテキストで⼊⼿し
 たい
外的な環境により⾳声を利⽤できない
コンテンツをテキストとして提供でき
 るので、さまざまな再利⽤が可能(検
 索エンジンのインデックスなど)
12




http://kokumaijp.blog70.fc2.com/blog-entry-40.html
13




http://googleblog.blogspot.com/2009/11/automatic-captions-in-youtube.html
14




http://www.youtube.com/watch?v=o7uLkVrY88k
04 キャプションの作り⽅
16




http://captiontube.appspot.com/
キャプションの作り⽅              17


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

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


2
00:00:05,224 --> 00:00:17,299
...
05 HTMLとキャプション
20




http://people.opera.com/brucel/demo/video/multilingual-synergy.html
WebSRT                        21
1
00:00:00.67 --> 00:00:05.22
インターネットをいつ頃からお使いですか?


2
00:00:05.22 --> 00:00:17.29
使い始めたの...
WebSRT                          22
1
00:00:00.67 --> 00:00:05.22
<i>インターネット</i>をいつ頃からお使いですか?
<i>       </i>


2
00:00:05.2...
WebSRT & CSS                      23
::cue {
    color: blue;
}
::cue-part(1, b) {
    font-style: normal;
    text-decora...
HTML5                                     24
<video src=“a11y.webm" controls>

<track label="English" kind="subtitles"
 sr...
HTMLとキャプション          25


 WebSRTとtrack要素の課題

 HTML5仕様書には記載がない
 ブラウザ未対応である
Caption is fun!
Upcoming SlideShare
Loading in …5
×

Caption is fun!

1,565 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,565
On SlideShare
0
From Embeds
0
Number of Embeds
193
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Caption is fun!

  1. 1. Caption is fun! ⼩嶋新/Arata Kojima
  2. 2. 01 ⾃⼰紹介
  3. 3. ⾃⼰紹介 3  名前 ⼩嶋新(こじまあらた)  所属 特定⾮営利活動法⼈しゃらく  ブログ TRANS  Twitter @aratakojima  Facebook aratakojima
  4. 4. 4 http://d.hatena.ne.jp/aratako0/
  5. 5. 02 アジェンダ
  6. 6. 延々とキャプションを語る
  7. 7. 7 http://www.slideshare.net/aratakojima/alt-presentation
  8. 8. 03 イントロダクション
  9. 9. 9 http://www.whitehouse.gov/photos-and-video/video/2010/10/08/president- obama-signs-21st-century-communications-video-accessibil
  10. 10. キャプションのメリットは 聴覚障害者だけではない。
  11. 11. キャプションのメリット 11 動画のコンテンツをテキストで⼊⼿し たい 外的な環境により⾳声を利⽤できない コンテンツをテキストとして提供でき るので、さまざまな再利⽤が可能(検 索エンジンのインデックスなど)
  12. 12. 12 http://kokumaijp.blog70.fc2.com/blog-entry-40.html
  13. 13. 13 http://googleblog.blogspot.com/2009/11/automatic-captions-in-youtube.html
  14. 14. 14 http://www.youtube.com/watch?v=o7uLkVrY88k
  15. 15. 04 キャプションの作り⽅
  16. 16. 16 http://captiontube.appspot.com/
  17. 17. キャプションの作り⽅ 17 YouTubeのキャプションフォーマット SubViewer (*.SUB) SubRip (*.SRT)
  18. 18. SubRip (*.SRT) 18 1 00:00:00,673 --> 00:00:05,224 インターネットをいつ頃からお使いですか? 2 00:00:05,224 --> 00:00:17,299 使い始めたのは中学校の授業からです。中⼀とかですね。 3 00:00:17,299 --> 00:00:27,701 普段はこの事務所で調べることがあればそのサイトを開いて調べたりと
  19. 19. 05 HTMLとキャプション
  20. 20. 20 http://people.opera.com/brucel/demo/video/multilingual-synergy.html
  21. 21. WebSRT 21 1 00:00:00.67 --> 00:00:05.22 インターネットをいつ頃からお使いですか? 2 00:00:05.22 --> 00:00:17.29 使い始めたのは中学校の授業からです。中⼀とかですね。 3 00:00:17.29 --> 00:00:27.70 普段はこの事務所で調べることがあればそのサイトを開いて調べたりと
  22. 22. WebSRT 22 1 00:00:00.67 --> 00:00:05.22 <i>インターネット</i>をいつ頃からお使いですか? <i> </i> 2 00:00:05.22 --> 00:00:17.29 <1>使い始めたのは<b>中学校の授業</b>からです。中⼀とかですね。 <b> </b> 3 00:00:17.29 --> 00:00:27.70 普段はこの事務所で調べることがあればそのサイトを開いて調べたりと
  23. 23. WebSRT & CSS 23 ::cue { color: blue; } ::cue-part(1, b) { font-style: normal; text-decoration: underline; }
  24. 24. HTML5 24 <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>
  25. 25. HTMLとキャプション 25 WebSRTとtrack要素の課題 HTML5仕様書には記載がない ブラウザ未対応である
  26. 26. Caption is fun!

×