連載

2012年4月20日

Cuepoint.jsでさくっと字幕付ムービーをつくろうぜ！：HTML5アプリ作ろうぜ！（2）（2/2 ページ）

ムービーと連携した“文章・説明文”を表示させ、リアルタイムに文章を編集できる「Cuepoint.js」。ムービーに簡単に字幕を付けてみよう

[山崎大助，魚津システム] PC用表示関連情報

LINE

Hatena

前のページへ | 　　　　　　

まずは、“VIDEOタグ”基礎

1．コーデックの種類

　Webブラウザで使用できるコーデックにはいくつか種類があり、以下がその一覧です。

H.264（mp4）：Safari、（Chrome）
ogv：Chrome、Firefox、Opera
webm：Chrome、Opera、（Firefox）
ブラウザごとに違うため、3つのムービーを準備する必要があります。
※唯一ここが面倒です（ogvとmp4、2つでもだいたいはカバーできます）

2．VIDEOタグ

［サンプルコード：１］cuepoint.html：34行目～39行目

     <video id="video" width="768" preload="auto" controls="" poster="images/poster.jpg">
                <source src="http://cuepoint.org/dartmoor.mp4">
                <source src="http://cuepoint.org/dartmoor-mobile.mp4">
                <source src="http://cuepoint.org/dartmoor.webm">
                <source src="http://cuepoint.org/dartmoor.ogv">
       </video>

※音声が出ない場合：
　“.htaccess”ファイルを作成し以下を記述する。

AddType  video/ogg .ogg .ogv
AddType video/mp4 .mp4
AddType audio/ogg .ogg
AddType application/ogg .ogg .ogv

“ｎ秒～この文章を表示”する仕組みを理解する

1．slides配列変数を理解する

　cuepoint.htmlコード内10行目に“var slide= {”が記述されていると思います。10行目～18行目“}”までが「タイムライン(時間)と表示文章」を設定する箇所になります。

［サンプルコード：１］cuepoint.html：10行目～18行目

var slides={
0:   "This is the first subtitle. You can put html in here if you like",
4:    "A fluffy thing eating some grass.",
12:  "Oh look it's a castle on a hill. Nice", 
23:  "Some horses", 
34:  "Wow look at those woolly sheep eating grass.", 
40:  "For more information on this plugin visit github/owainlewis or email  owain@owainlewis.com", 
50:  "Cuepoint.js is an open source plugin for adding subtitles and cue-points to your HTML5 video"
}
//Start cuepoint and pass in our the subtitles we want
cuepoint.init(slides);

　記述方法は、見ての通り規則性があるので理解しやすいと思います。

例 )

0:   ”This is the first subtitle. You can put html in here if you like”

解　）

 ｎ秒 ： “文章”

　この繰り返しですね。

★注意する点：

　上記［サンプルコード：１］には、7行ほど（0,4,12,23,34,40,50秒）文章がセットされています。

文章を追加したい場合：行末に“,”を付ける必要があります。
最後の行には、“,”は付けません。“,”は次にまだ文章が続くよ！といった意味になります。

※［サンプルコード：１］１７行目を参照してください。最後の行にはカンマはありません。

2．Cuepoint Jsを実行（処理）する

［サンプルコード：１］ cuepoint.html： 20行目

 cuepoint.init（slides）;

　この20行目：“cuepoint.init（“ここ”）;”へslides配列変数を渡すことで、“0秒からこの文章を表示”、“4秒からこの文章を表示”といった設定を一括処理されます。

3．これで、“ｎ秒～この文章表示”といったことができます。とてもシンプルでしたね、覚えることが細かいことがあるにせよ、実質１つですね！

“slides配列変数”に追加・変更・削除することで文章の表示を変更

　これだけですね！ムービーを表示して確認してください。

タイムラインを意図的にコントロールする

［サンプルコード：１］cuepoint.html：27行目～32行目

        <section>
            <button onclick="cuepoint.setTime(20);">[20]</button> 
            <button onclick="cuepoint.setTime(30);">[30]</button> 
            <button onclick="cuepoint.setTime(40);">[40]</button> 
            <button onclick="cuepoint.setTime(50);">[50]</button> 
        </section>

　button要素内にクリックイベントを設定しています。

例）

onclick="cuepoint.setTime(20);"

解　）

 このボタンをクリックしたら＝“タイムライン：20秒へ移動”

　略すとそういう意味になります。

例）

onclick="cuepoint.setTime(４０);"

解　）

　このボタンをクリックしたら＝“タイムライン：40秒へ移動”

　となるということです。

DEMO＋αの紹介

URL：demo/index.html
サンプルダウンロードはこちら：※zip圧縮(demo/demo.zip)

内容：上記内容をベースにアレンジしたサンプルです。今後のアイデアの創出につながればうれしい限りです。

使用ライブラリ：
Cuepoint Js
JTicker.js（未紹介）

2つのライブラリを組み合わせて作成しています。

メモ

ムービー箇所は今回の内容をデザイン変更しただけです。
文字がタイプしているような動作・画面右画像が切り替わる動作などは、“ｊTicker.js”です。

　サンプルコードは自由自在にお使いください。上記「DEMO＋α」のサンプルコードも自由にお使いください。

終わりに

　Cuepoint Jsは、ムービーに“●秒からこの文章を表示させられる”素晴らしいライブラリです。筆者はムービーに何かしら説明を入れるとなると……いつもあきらめていました。

　理由は、専用ツールが必要になったりツールがあったとしても、文字を編集するたびにムービーの書き出しで時間を取られるからです（ご存じの方はムービーの書き出しに時間がかかるのはよくご理解いただけるのではないでしょうか？）

　しかし、去年このCuepoint Jsを知ったことでHTML/JavaScriptを知っていれば他のツールが必要なく、ムービーにも手を入れずに文章も即座に変更できます。

　これからは、ムービーというコンテンツを上手に使っていけそうです。

　この記事の最初の方にも書きましたが、このライブラリは実はそんなに大したことはしてないのです。HTML5の恩恵があり、そのAPIをうまく利用しています。

　内容的にはJavaScript初～中級レベルの方でも同様のライブラリが作成できると思います。

　HTML5のAPI群を使用した開発ではJavaScriptはマストになりますので、苦手な方もぜひ今のうちに習得することをオススメします。JavaScriptは今後必ず強い味方になるはずです！

著者紹介

山崎　大助（魚津システム　所属）

現在はデジタルハリウッド講師を務める他、SoftwareDesign、日経ソフトウエア、ITPro、WebCreatorsなどのWeb業界誌での執筆。日経PC21「名作フリーソフトを訪ねて」では自ら開発した「AIRNote！」が選ばれ掲載。impress.jsを簡単に作成する「 Impress.js design 」アプリもGithubにて公開してます。最近ではHTML5やPHP関連のセミナー・勉強会を開催。＠IT「HTML5アプリ作ろうぜ！」の連載記事を執筆。

「次回」へ

「HTML5アプリ作ろうぜ！」バックナンバー