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、xamppやmamppなどを使うことが必要になってきます。
これらは決して難しいものではありません。しかし、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したときのファイル形式です。
音声データは、flvで作成してください。
参考までに、flvの作成手順の一例を以下に記述します。
1-1.ICレコーダーで録音したmp3をQuickTime proで読み込んで、前後の余分な音をトリミングします。
(QT Proは、簡単に前後のトリミングや音声の切り取りができるので簡単な編集にはオススメです。)
1-2.Flash8がインストールされていると、QT proのexportメニューからflvを出力することができるので、その機能を使ってflv出力します。
(または、Flash8 proに添付されているFlash 8 Video Encoderや、フリーの変換ツールを使ってください)
この作業が一番手間と時間がかかるので、できることであればセミナー会場で記録しておくことをオススメします。
画像ファイル名規則は、 [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.スライドおよびサムネイルファイルを、それぞれのフォルダに配置して完了です。
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 |
localhostなどで動作させているWebサーバ経由で動作確認するのが一番簡単です。
Webサーバを簡単に動かすには、xamppやmamppなどを使うのがオススメです。
この作品は、クリエイティブ・コモンズ・ライセンスの下でライセンスされています。
本スクリプトは無償にて公開しております。自己責任と自己の実装能力または努力の元にご利用ください。
とはいえ、どうしてもわからないことはあると思いますので質問等は、以下のblogエントリまでご質問ください。
がらくたラボ - Specialized F's Garage for Technologies -
簡単にオンラインセミナーを作れるplayback.js
ただし、すべてのご質問にお答えできるものではないことを予めお断りさせていただきます。
本スクリプトは、私がモデレータとして参加しているWebSig24/7 というコミュニティの第9回目会議「TVは死んでいない。そして、CGMからPGMの時代へ」 の内容をオンラインで配信するために開発したものです。
本会議の録音データおよびプレゼン資料の公開を快くご了承いただいた、シックス・アパート株式会社マーケティング担当執行役員 河野 武氏に厚くお礼を申し上げます。
また、本スクリプトにアドバイスおよび公開を了承いただいたWebsig24/7のモデレータ陣にもお礼を申し上げます。