playback.js ver1.0~簡単にスライドプレゼンテーションが作れるスクリプト

by Shinichi Fujikawa (f-shin [at] milkstand.net)

概要

簡単に音声-スライド同期型プレゼンテーションが作れるスクリプトです。

スライド同期型プレゼンテーションとは、音声にあわせて自動的にスライドが切り替わっていくものです。
WebSig24/7にて行われたセミナーイベントで録音した音声と、スライド情報を組み合わせて、当日の内容をオンラインでも見られるようにしたことが、本スクリプト開発のきっかけです。

lightbox.js ver2.0で表示される画像を音声にあわせて自動的に切り替えていきます。

サンプル

以下のURLにて本スクリプトを使ったプレゼンテーションを公開しています。

第9回WebSig会議~CGMからPGMへ:第一部 10年足跡メソッドによる自己紹介とセルフブランディングのススメ~

第9回WebSig会議~CGMからPGMへ:第二部 ホリスティック・コミュニケーション~

ダウンロードで配布しているサンプルファイル

対象ユーザー

flashとJavaScriptを組み合わせたプログラムを動かすには多少なりともWeb制作の知識が必要です。

まず、sample.htmlを動かすには、Webサーバ経由で起動するのが一番簡単ですので、apache、xamppmamppなどを使うことが必要になってきます。

これらは決して難しいものではありません。しかし、xamppのインストールなどの細かいところは本ドキュメントでは説明しません。

必要なソフト

本スクリプト以外に、スライドプレゼンテーションを作るにあたって必要な有償のソフトは特にありません。

しかし、作業効率化のために私は以下のソフトを使っています。
・Flash 8 (flv作成のために使用)
・Fireworks 8 (スライド画像、サムネイル画像生成に使用)
・QuickTime pro (mp3の切り取りに使用)
・Acrobat (Adobe Readerではない。PDFから画像を出力するのに使用)

材料

本playback.jsを使ってオンラインプレゼンテーションに作るには以下のものを用意します。

1.playback.js一式

2.音声をエンコードしたflv

3.スライド画像 
ファイル名規則は、「[prefix] + [01] + .jpg」 という形式となります。PDFをAcrobatでJpeg画像にexportしたときのファイル形式です。

 

作り方

1.音声データを作成します。

音声データは、flvで作成してください。

参考までに、flvの作成手順の一例を以下に記述します。

1-1.ICレコーダーで録音したmp3をQuickTime proで読み込んで、前後の余分な音をトリミングします。
     (QT Proは、簡単に前後のトリミングや音声の切り取りができるので簡単な編集にはオススメです。)

1-2.Flash8がインストールされていると、QT proのexportメニューからflvを出力することができるので、その機能を使ってflv出力します。
      (または、Flash8 proに添付されているFlash 8 Video Encoderや、フリーの変換ツールを使ってください)

2.スライド切り替えタイミングの秒数データを作成します。音声を聞きながら、スライドの切り替え時間を測定してください。

この作業が一番手間と時間がかかるので、できることであればセミナー会場で記録しておくことをオススメします。

3.スライド画像を生成します。

画像ファイル名規則は、 [slide_prefix設定] + [01](連番) + .jpg となります。(例:sample_slide01.jpg,sample_slide02.jpg....)

サムネイルと通常表示の2種類が必要です。サムネイルと通常スライドのファイル名は同じ名前で、フォルダ名にて識別します。

参考までに、スライドデータを作る一例を示します。

3-1.資料がPowerpointデータの場合は、Acrobat Distillerなどで一度、PDFにします。

または、「名前をつけて保存」で、bmpを出力してもかまいません。この場合は、画像ファイル名を仕様にあわせてリネームしてください。

3-2.AcrobatでPDFを開いて、名前をつけて保存で一度、jpegに出力
     (本画像ファイル規則は、Acrobatからの出力ファイル名仕様にあわせてあります。)

3-3.Fireworksのバッチ処理で、連番ファイルをWebで見やすいサイズにリサイズします。
sample.htmlでは、スライド画像を、横640px 縦480pxで出力し、サムネイル画像を横240px , 縦180pxで出力しています。

3-4.スライドおよびサムネイルファイルを、それぞれのフォルダに配置して完了です。

4.htmlを作ります。

playback.jsに直結したところをsample.htmlを参考にして説明します。

4-1.下記の必須JavaScriptライブラリをインポートします。

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<script src="js/playback.js" type="text/javascript"></script>

4-2.lightbox.cssは必須です。添付のplayback.cssは必須ではありませんが、sampleでは必要です。

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />  //lightboxで必要
<link rel="stylesheet" href="css/playback.css" type="text/css" media="screen" /> //sample.htmlでは必須

4-3.playback.jsからHTMLへの出力について

playback.jsからは、再生情報やスライドなどをHTMLへ画面出力を行います。
もし改造したい場合は、sample.htmlを雛形として、デザインや出力を改造する場合には、IDと関連メソッドの対応を参考にしてください。

ID 機能 関連メソッド
nowSlideView 現在再生中のスライドを表示します。 OnPlayHeadChange
time 再生ステータスや、再生時間などを表示します。 OnPlayHeadChange
playerArea 重要なdivで、FlashのPlayerを出力します。

CPlaybackのgetPlayerTmpl
imgArea サムネイルスライドを出力します。 CPlaybackのgetSlideTmpl

4-4.プレゼンテーションの設定データを作成します。

playback.jsのCPlayBackクラスをインスタンス化すると、再生が開始します。
sample.htmlでは、htmlのonLoadイベントで再生を開始しています。
CPlaybackをインスタンス化する時に、コンストラクタの引数としてプレゼンテーションの設定データを渡してください。

function init(){
  myPlayback = new CPlayback(   {     contentPath : "../sample/sample.flv" ,     slidePath : "sample/" ,     thumbPath : "sample/t/",     slidePrefix : "sample_slide" ,     slideTime : [0.1,20,40] } );
}
重要パラメータ
変数名 内容 備考
contentPath 音声データ(flv)を、swf/player.swfからの相対パス記述か絶対パスで書いてください。 必須
slidePath スライド画像のパス。htmlからの相対パス記述となります。
必須
thumbPath サムネイル画像のパス。htmlからの相対パス記述となります。 必須
slidePrefix 画像の先頭部分の固定文字列部です。 スライド出力にAcrobatなどを使ったら、多分、必須となります。
slideTime スライド切り替え時間を数字の配列形式で記述してください。スライドの枚数分必要です。 必須
slideTitle スライドタイトルを文字列指定すると、lightbox.jsのスライド拡大表示時にタイトルも一緒に出力されます。 必須ではない。

オプションパラメータ

sample.htmlでは記述を省略してあります。もし変更したい場合は重要パラメータと同様の記述方法で追加してください。
変数名 内容 備考
thumbWidth imgAreaに出力するサムネイル一覧の画像横幅を変更したい場合は指定 初期値:120px
thumbHeight imgAreaに出力するサムネイル一覧の画像縦幅を変更したい場合は指定 初期値:90px
startSlide 0枚目のスライドなどを再生したくない場合は、再生開始するスライド番号を指定(先頭は0から。例えばスライド3枚目だったら2を記述) 初期値:0
imgId サムネイル一覧を出力するidを変更したい場合は指定 初期値:imgArea
playerId flashによる音声プレーヤhtmlが出力されるidを変更したい場合は指定 初期値:playerArea

5.動作確認します。

localhostなどで動作させているWebサーバ経由で動作確認するのが一番簡単です。
Webサーバを簡単に動かすには、xamppmamppなどを使うのがオススメです。

ライセンス

Creative Commons License
この作品は、クリエイティブ・コモンズ・ライセンスの下でライセンスされています。

サポート

本スクリプトは無償にて公開しております。自己責任と自己の実装能力または努力の元にご利用ください。

とはいえ、どうしてもわからないことはあると思いますので質問等は、以下のblogエントリまでご質問ください。

がらくたラボ - Specialized F's Garage for Technologies -
簡単にオンラインセミナーを作れるplayback.js


ただし、すべてのご質問にお答えできるものではないことを予めお断りさせていただきます。

 

謝辞

本スクリプトは、私がモデレータとして参加しているWebSig24/7 というコミュニティの第9回目会議「TVは死んでいない。そして、CGMからPGMの時代へ」 の内容をオンラインで配信するために開発したものです。

本会議の録音データおよびプレゼン資料の公開を快くご了承いただいた、シックス・アパート株式会社マーケティング担当執行役員 河野 武氏に厚くお礼を申し上げます。

また、本スクリプトにアドバイスおよび公開を了承いただいたWebsig24/7のモデレータ陣にもお礼を申し上げます。

免責


本スクリプトを利用することで発生するいかなることの責任は負いかねます。


by Shinichi Fujikawa(f-shin at milkstand.net)