Slideshowの作り方

       [English version is HERE]

スライドショーSlideshowとは、枚数の多いデジタル カメラ等で撮った写真を連続して、自動化して表示する形式のことである。
普通デジタル写真Viewerのツールには、スライドショーのボタンが有ってクリックすると連続して全写真を表示する、
簡単な機能のものが着いている場合が多い。しかし、これらのツールはインターネットでの開示には使えないし、
単純すぎて魅力もない。では、インターネット(ホームページ等)に使えて、
しかも必要ならPC内部(オフライン)でも使えるツールとは?
要求される機能をひとつひとつ確認しながら、シンプルで使いやすい形にまとめたJavaScriptツールを紹介しましょう。

1. 枚数の多い写真をHPに載せるのは大変だ
  デジタル カメラ等で撮った写真をHPに載せたい場合、枚数が多いとSlideshow 形式で行いたくなります。
  そこで最もシンプルにはこうなります。Sample01

2. コントロールバーを付けたい
  しかし、上記の例では自動で流れて、よく見たい所でストップさせたり、先送り・後戻りして見たりしたい事が出来ない。
  シングルステップで確認しながら進めたい等、各種コントロールボタンとショーの進行状態の表示するプログレスバーが欲しい等もあります。
  そこで、コントロールバーを付けたい。Sample02
  
  コントロールバー

3. バックグラウンドに音楽を
  Slideshowの内容に合ったバックグラウンド音楽も流してみたい。Sample03

4. 音楽のコントロールバーを付けたい
  バックグラウンド音楽も、音量の調節やミュウティング、停止のコントロールが出来るようコントロールバーを付けたい。
  SlideshowとAudioの2つのコントロールバーは不要では、一つににできないか? はい、必要ならばオプション設定で表示オフは自由です。
  SlideshowのコントロールバーのStart/StopボタンはAudioのStart/Stopボタンをも同期してコントロールしますので、
  AudioのコントロールバーなしでもOKです。Sample04
  
  音楽のコントロールバー
  
  注: スマートフォンやタブレットでは "Autoplay" Mode にして設定していても自動ではスタートしない仕様にしているので、
     コントロールバーなしの設定にすると。音楽をスタートさせることが出来なくなるので注意。
     音楽を自動スタート設定で、コントロールバーなしの場合であっても、現在はPC/スマートフォンともアプリでコントロールしなくても、
     ブラウザーから可能になっており、むしろスマートフォンなどは画面を有効に使うためにコントロールバーなしの設定が推奨されます。

5. 写真の表示時間を自由に設定したい
  写真の表示切替時間を自由に設定し、又、各フレームを必要ならフレームごとにも設定出来るようにしたい。
  上記の例では1秒間隔で画面切り替えでしたが、デフォールトを5秒間隔に変え、一部フレームを10秒に設定しています。
  従って、コントロールバー上のプログレスエリアが時間長に比例した長さになっております。Sample05
  
  プログレスエリア

6. タイトル/クレジットフレームを入れたい
  タイトルや終了フレーム(クレジットフレーム)を入れてショーのタイトルや内容、作成日等を入れたい。Sample06

7. 音楽とSlideshow を同期させたい
  バックグラウンドミュージックによっては必ずしも映像と同期が必要でない場合もありますが、披露宴の新郎・新婦登場のシーンで
  ファンファーレの音を新郎新婦登場シーンフレームに同期して表示したい、あるいは音楽終了と同時にショーを終了したい等の場合、
  上記の方法でも実現可能だが、同期フレームが多数の場合、1フレーム追加・削除の変更だけで、後ろの全フレーム修正が必要になる。
  不便だ。心配ご無用。フレーム間隔モードからフレーム開始時間モードを使用すれば、各フレームのスタート時を指定出来て
  フレームの追加・削除に対しても音楽との同期操作が容易です。
  又、相互に変換するデバッグツールが組み込まれているので、ラフに間隔モードで作成し、開始時間モードに変換し微調整するのが便利です。
  Sample07

8. 各フレームにもコメント・日付等を入れたい
   タイトル・終了フレーム以外の、各フレームにもコメント・日付等をそれぞれ入れて説明が出来るようにしたい。Sample08

9. 各フレームのテキストに変化を持たせたい
  各フレームのテキストに色、フォント、動き、フェード等を付けて変化を持たせたい。Sample09
  
  参考:テキストの特殊効果とは
  次の図はSlideshowがサポートしている全機能です。
  
      テキストの特殊効果
  
  又、テキスト内にはHTMLタグを使用出来るので、フレーム内で独自のFONTの使用のみならずAUDIO, VIDEO, IMG等を
  使用して変化を付けることがも可能です。
  この sample09 でもフォントに「UD デジタル 教科書体N-B」や「HG行書体」の使用や文字にシャドウ付けを行うのに使用しています。
  

10. 各フレームにZooming/Panningを行いたい
  各フレームの画像にZooming/PanningやScrollingを行いスティール画像にVideo Movieのような効果を付けたい。Sample10
  
  参考:Pan/Zoom/Scrollとは
  次の図はSlideshowがサポートしている機能の全てです。
  
      Pan/Zoom/Scroll
  
11. テキストだけでなく画像切替時にトランジッションを適用
  画像切替時にトランジッションを適用し切替に変化を付けたい。Sample11
  Microsoft IE (IE Ver8までのDocument Mode)では23種類のReveal Transition及びBlend Transitionの独自サポートをしている。
  :IE Ver8以降のIEではこの機能が非サポートとなりましたので、同等の機能をCSS3等により当Slideshowはサポートしております。
  逆に、IE Ver8以前にIEではこの機能は当Slideshowはサポート非サポートとなります。
  
  参考:Reveal Transitionとは
  次の図はSlideshowがサポートしている全トランジッションで、フレームの切り替え時に画像に施される効果のことです。
  
      トランジッション
  
  :お使いのブラウザーは最新のため、サポートしていない可能性があります。
  Microsoftは自社独自機能は新バージョンでは非サポートにして行く方針です。HTMLの代わりにHTAにするとOKのようです。
  しかし、HTAはInternetから直接起動はさせない設定になっているのが普通なので、ローカルで実行してください。
  参考のためにsample11.zipをここに付けておきます。クリック後”開く”を選んでHTAを実行してください
  
  参考:HTAとは
  実際はHTMLファイルの拡張子をHTAに変えただけです。ただ、HTAアプリケーションはローカルPC上だけ、
  あるいは社内Intranet上だけでの運用を前提にしているので、セキュリティ上HTMLでは出来ないことも出来る追加機能があり、
  Internet上では直接起動はさせない設定になっているのが普通です。


12. 3:4画像のみでなくHD(9:16)画像も使いたい
  Standard (3:4)画像、High Definition (9:16) 画像双方使えるようにしたい(SampleはHDです) 。3:4画像の例は Sample12 参照。

13. Music File (.MP3)はライセンスが有って使い難い
  YouTube   バックグラウンド音楽には主にMP3のファイルが使われるが、ライセンス問題が在り使用しづらい。
  ライセンスが問題にならずに、音楽を使用出来ないだろうか。
  YouTubeには多くの音楽付きの映像や静止画だけので音楽がUploadされているが、バックグラウンドでYouTubeをプレイさせ、
  Audio部分をチャッカリ、Slideshowのバックグラウンド音楽として合法的に使用する方法も有ります。
  Sample13
  

   Youtubeコントロールバー

  注: Youtubeのコントロールバーは上記のようになっておりましたが、最近のYoutubeのUI変更で表示スタイルが変更されております。
  (追記3 参照)
  

14. 他のサンプルも見てみたい
  趣味にしておりますFlamenco演奏をテーマにしたものです。バックグラウンド音楽としてYouTubeを利用しております。Flamenco
  日本の四季をテーマにしたサンプルです。Demo1Demo2
  

15. ランタイム オプションが多数設定可能ですが、実行時に変える事が出来ますか
  はい。AudioのコントロールバーやSlideshowのコントロールバーの表示のON/OFF、フレーム切り替えの
  Default Duration Timeの変更など、全てのオプションはUploadされたHTML Fileの指定を実行時に変える事が出来ます。
  この実行時指定機能により、UploadされているサイトのSlideshowを他のサイトやブログなどにオプションを変えて
  Embedして使用する時などに便利です。Callの仕方は http://xyz.html#option2=0;1,option3=0;1 の様にします。
  #マーク以降がパラメータで ',' (comma)で複数設定可能です。
  例えば、次の例はSample11.htmlで使用したものを、iFrame内にEmbedし、Audio ControlなしのShowのAutoplayをOFFにしてます。
  SlideshowはStart Resume ButtonかSingle Step Forward待ちであり、Slideshowのコントロールバーの操作待ちになりました。
  
    

16. 興味があり、自分も使ってみたい
  HTML知識もJavascript知識も必要ありません。Slideshowに使用したい写真(.jpg/.png/.gifなど)ファイルのリストアップと音楽ファイルの指定、
  各フレームでの表示オプション等の指定をするだけで、出来上がるのです。全てはJavaScriptのLibrary "slideshow.js"が
  面倒見てくれます。"slideshow.js"のDownloadも必要ありません、Sample HTMLのように当方の使用サーバーからダイレクトに
  利用できます。それでは、sample04.htmlの例を示しましょう。プログラムがほとんど無いことがわかります。Sample04.htmlソース
  <head>tag内の13個(speedからoption9まで)のパラメータ・オプションがあり、説明がコメントとして各行に付けてあります。
  これらは実行時変更も可能です。"slide[n++]="の行はSlideshowに使う写真のデータで、使う枚数分あり、
  前後にある写真ファイル名ブランクの行(使用は任意でグレイの無地画面になる)はタイトルや終了画面に使っています。
  画面やテキストの表示効果付加のパラメータの解説が必要でしたらどうぞ。表示効果のパラメータです。
  実際はコメント行として入れてあります。表示効果に関しては前項までの図による紹介の方が、視覚的で分かりやすいと思います。
  JavaScriptのLibrary "slideshow.js"を使って見たければここからDownloadも可能ですが、利用するだけならばDownloadも必要なく、
  SampleのようにBody Tag内に一行入れるだけで十分です。その方が"slideshow.js"のUpdateがあっても自動的に
  改訂版の更新の必要も無く、その機能を享受できメンテナンスフリーに出来ます。
  
  この様に、比較的高機能のスライドショーが作ることが出来ますが、作成のためのアプリなどは無くインストールする必要もありません。
  「メモ帳」等で最低限30行のHTMLファイルを作るのも面倒くさいと云う方には、30行のHTMLファイルをここに載せておきましたので
  テンプレートとして使用して手間を省いてもかまいません。必要に応じて画像の追加、パラメータの変更を行って下さい。
  取り込み方法はコピー・ペーストして、「メモ帳」等に取り込んで下さい。
  
17. 使ってみたいがもっと簡単にならないか
  Movie Maker to Slideshow Conversion Toolそれでも、コンピュータには全くの素人で、「Notepad」が何かも分からないと言う人もおります。
  少しのプログラミング センスも持ち合わせてないと言う人にはマウスのクリックだけで出来る方法もあります。
  Microsoft Windows Live Movie Maker (無料で提供されている)を使って作成し、完成したら当方が開発した、
  Movie Maker to Slideshow Conversion Toolで変換です。自分のPC上で楽しむだけならMovie Makerは
  最高ですが、MP4などのVideo形式にしないとインターネットに公開出来ません。
  Video形式では100MB以上のサイズを超えることは、ザラです。自分のHPで公開するにはすぐに容量パンクになります。
  例えば、サンプルの Sample11 Slideshowはファイルサイズが約2.3MBですが、この約3分のSlideshowを
  ビデオCaptureしたものは73.9MBのファイルサイズで、約32倍の大きさになっております。
  参考のために、MP4 Version のものをここのせておきます。
  
  興味のある方はここからMovie Maker to Slideshow Conversion Tool - wlmp2html はDownload可能です。
  又、説明(開発のきっかけの経緯のようなもの)は当方のBlogに英文ではありますが、興味のある方は参考にしてください。
  

    Movie Maker to Slideshow Conversion Tool

18. 将来の機能拡張は
  HTML5迄は、各Browserによってサポートされる機能が違ったり、同じメーカーでもバージョンによって差異がありましたが、
  これらのコードをHTML5標準で、全てのメーカー共通になるよう、CSS3の新しい機能を使ってTransitionやEffect処理を
  標準化する予定です。現バージョンはMicrosoft IEとGoogle Chromeでテストし動作確認しておりますが、
  TransitionやEffect処理にMicrosoft独自の機能を使っており、プログラム内でユーザーが使用しているBrowserの種類や
  バージョンを自動判別して、サポートされない機能は代替えや無効化しています。
  又、IEでもIE9からHTML5準拠に変わっているため、従来のAPIが非サポートになったりしているので、
  必要に応じてQuirks Modeや明示的IE8指定をしています

  
  追記1: IEはその後、IE10、IE11、IE12(SPARTAN) と改訂版が次々と発表され、最新版IE(Windows 10 SPARTAN)では従来の
  Document Mode から決別、<meta http-equiv="X-UA-Compatible" content="IE=n"> tag による過去バージョンの
  エミュレーションの無効化などHTML5はじめとした最新の標準化機能のみをサポートするように表明しています。
  W3CではCSSのさらなる標準化が進められておりますが、それらを考慮しながら取り込み"slideshow.js"を順次改訂して行く予定です。
  
  追記2: Microsoft IE Ver8までは23種類のReveal Transition及びBlend Transitionをサポートしており、当slideshow.jsでも
  その機能を取り入れておりましたが、全てCSS3/HTML5及びJavascriptにより再構築し同機能を提供しました。
  従って最新のIE版やGoogle Chromeでもこの機能が利用可能になりました。但し、CSS3/HTML5の機能を使っておりますので、
  これらをサポートしていないIE Versionでは逆に無効化されています。
  
  追記3: Youtubeでの最近のUI変更で、コントロールバーの表示方法が変更されて、固定表示されなくなり、小さいビデオ窓が表示されます。
  そのため、対策としてコントロールバーの表示なしの設定をお勧め致します。設定方法は option2="0;1"; です。
  ただし、欠点としてはスマートフォンやタブレットでは "Autoplay" Mode にして設定していても自動ではスタートしない仕様にしているので、
  コントロールバーなしの設定にすると。音楽をスタートさせることが出来なくなるので注意。
  
  追記4: Microsoft new Edge browser 及び Google Chrome browser サポートに関して。
  当ライブラリは古いIEのバージョンもサポートしておりましたが、メンテナンスの軽減を図るため、Edge 及び Chrome に限定して更新することにしております。   
  

© Kisozaemon 2010, All rights reserved.  Last update:
inserted by FC2 system