Javascript
秀逸なQPON高画質写真スライドショー・ストーリーショーの作り方

写真スライドショーの事例サンプルは、多数あるが、写真ストーリーショーの事例サンプルは数少ない。
その中で、QPON高画質写真ストーリーショーは、写真タイトル読上げ、BGM（MP3）やスマホなどをサポートした秀逸なサンプルである。
このページでは、つぎのサンプル事例を参照して、「Javascript、秀逸なQPON高画質写真スライドショー・ストーリーショーの作り方」 を紹介します。

「Javascript、秀逸なQPON高画質写真スライドショー・ストーリーショーの作り方」の完成イメージはつぎのとおりです。

以下に、QPON高画質写真ストーリーショーの作り方を述べます。

スライドショーは、作成したストーリーショーで動作できます。

1. BGM音声ファイルmp3の用意 （必要時）

必要に応じ、BGM音声ファイルmp3を用意します。現在手元にない場合は、下のmp3ファイルを使用してください。
・Etude5.mp3

2. 表示写真の定義および表示方法など-Javascript（<head>内に記述） 

<script>
//初期設定
dt=new Array();dt[0]="";n=0;
//写真およびBGM音声を置く場所（別の場所に置くときはそのＵＲＬ、同じフォルダーに置くときは「ur="./";」）
ur="./img/";	
//サムネール(sw=0;sh=0; とするかgaku=4;とするとサムネールを省略したスライドショーになります。)
sw=140;		//サムネールの横幅
sh=105;		//サムネルの縦幅
xn=4;		//サムネールの横に並べる枚数
gaku=1;		//０＝写真のみ/１＝額縁入り/２＝平面影/３＝立体影/４＝表示しない （注１）
gaku_color="#d9d7e3,#000000,16,#ccccdd";//サムネール額の色,文字色,文字サイズ,台紙の色
//拡大ウインド(
//kakudai="3,#88aaaa,,1,tori.mp3";//拡大形式，背景色，壁紙,ＤＬ可否,ＢＧＭ;
//スライドショート書式を合わせるため位置を変更（2020/05/29）新旧互換します
kakudai="3,#88aaaa,,1,,004-dream sate.mp3,3";//拡大形式，背景色，壁紙,ＤＬ可否,音量,ＢＧＭ,ナレーション;
	//拡大形式（２=フルスクリーン）
	//背景色（グランデーションにするには「;」で２色とタイプ［縦=0/横=1］をつないで「,#88aaaa;#000044;0,」のように書く
	//音量；０～１０（０は無音）
        //ＢＧＭは「***.mp3」形式のサウンドファイル
	//ナレーション：コメントを読み上げます（1～9で音量調整）0＝読み上げない
//写真表示形式
syasin=2;//（0=縦横100%/1=横100%（縦横比固定）/2=写真原寸）/3=タテ100%（縦横比固定)/4～=余白幅(100%-syasin)
//スライド切替タイプ
wip=0;	//
w_time="8,1,2";//スライド間隔（秒）,　ループ（０＝エンドレス　１＝１巡）,ストーリー比率；
		//ストーリー比率＝（何回に１回動かすかを指定、それ以外静止、省略時は全回動く）
//コメントの文字属性
moji_size=16;   //コメントの文字サイズ
moji_color="#666666";//コメントの文字色
//moji_bgcolor="transparent";//コメントの背景色（透明は"transparent"と書いてください）
moji_bgcolor="#000000,0";//コメントの背景色,透明度（透明＝0；半透明＝0.1～0.9：不透明＝1）
moji_align="right,,1";//コメントの表示位置,余白（中央="center" 左="left" 右="right"),ＮＯの自動付与
//個別データベース（あなたのデータに書き換える）
//　　　　　"サムネール ，原画 ，タイトル,コメント,ストーリータイプ（注２）,ストーリー時間,切替音,継続効果音”
//サムネールファイル名を省略すると原画ファイルで兼用します（「,」は残すこと）
//ストーリータイプを省略すると乱数表で自動選択します
//ストーリー時間を設定するとコマごとに切り替え時間が変えられます。
n++;dt[n]=",birds01-white-tailed-eagle-2015098_960_720.jpg, White-tailed eagle オジロワシ,White-tailed eagle 魚を狙うオジロワシ,5";
n++;dt[n]=",birds02-hummingbird-1854225_960_720.jpg, Hummingbird ハチドリ,Hummingbird 大空を舞うハチドリ,23";
n++;dt[n]=",birds03-bald-eagle-521492_960_720.jpg, Bald eagle ハクトウワシ,Bald eagle 大空を舞うハクトウワシ,6";
n++;dt[n]=",birds04-eagle-1753002_960_720.jpg, Eagle ワシ,Eagle 大空を舞うワシ,24";
n++;dt[n]=",birds05-seagull-2444497_960_720.jpg, Seagull カモメ,Seagull 大空を舞うカモメ,26";
n++;dt[n]=",birds06-puffin-1107405_960_720.jpg, Puffin ツノメドリ,Puffin 大空を舞うツノメドリ,10";
n++;dt[n]=",birds07-stork-3363503_960_720.jpg, Stork コウノトリ,Stork 大空を舞うコウノトリ,18";
n++;dt[n]=",birds08-flamingos-1835649_960_720.jpg, flamingos フラミンゴ ,flamingos 空を飛ぶフラミンゴ,19 ";
n++;dt[n]=",birds09-peacock-3098451_960_720.jpg, Peacock 孔雀,Peacock 孔雀,18";
n++;dt[n]=",birds10-bird-3652358_960_720.jpg, Tyto alba メンフクロウ,Tyto alba 舞い降りるメンフクロウ,10 ";
n++;dt[n]=",birds11-great-egret-5592300_960_720.jpg, Great egret ダイサギ,Great egret 飛び立つダイサギ,23";
n++;dt[n]=",birds12-swan-369090_960_720.jpg, Mute swan コブハクチョウ ,Mute swan 水辺のコブハクチョウ,19";
</script>
（注１）サムネール 額縁形状 デモ（gaku パラメーター）
   写真のみ（gaku=0）デモ ｜額縁入り（gaku=1）デモ ｜平面影（gaku=2）デモ ｜立体影（gaku=3）デモ
（注２）ストーリータイプ（省略すると乱数表で自動選択）
1 = 左下拡大　　 2 = 右下拡大　 3 = 左上拡大　 　4 = 右上拡大　 5 = 左中拡大
6 = 右中拡大　　 7 = 中上拡大　 8 = 中下拡大　 　9 = 中中拡大　 10 = 右上縮小
11 = 左上縮小　 12 = 右下縮小　 13 = 左下縮小　 14 = 右中縮小　 15 = 左中縮小
16 = 中上縮小　 17 = 中下縮小　 18 = 中中縮小　 19 = 左へ移動　 20 = 右へ移動
21 = 上へ移動　 22 = 下へ移動　 23 = 左下移動　 24 = 右下移動　 25 = 左上移動
26 = 右上移動　 27 = 左へ移動　 28 = 中央静止　

3. 写真タイトル、スライド起動ボタンなどの記述およびストーリーショー本体js読み込み - HTML（<body>内に記述） 

<h1>QPON高画質写真ストーリーショー</h1>
<script src="https://qpon-toyota.com/story/qponstory.js"></script> <!-- ストーリーショー本体js -->
<button onClick="story_op(1)" style="border-radius:12px;cursor:pointer" title="ストーリーショー開始">ストーリーショー</button><br>
<br>
<small>引用：ＱＰＯＮのJavaScript作品ソース集「高画質写真ストーリーショー」 <a href="https://qpon.fun/js/index.html" target="_blank">https://qpon.fun/js/index.html</a></small>
　　【説明】

4. まとめ

   これまでのまとめHTMLを下に表示します。
スライドショーの場合は、スライドショー起動ボタンを記述し、ストーリーショーの場合は、ストーリーショー起動ボタンを記述します。
また、スライドショーおよびストーリーショーの両方の場合は、スライドショー起動ボタンおよびストーリーショー起動ボタンを記述します。
なを、下のソースコードの文字コードは"Shift_JIS"ですが、"UTF-8"でも正常に動作します。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="Shift_JIS">
<title>QPON高画質写真ストーリーショー まとめデモ</title>
<script>
//初期設定
dt=new Array();dt[0]="";n=0;
//写真およびBGM音声を置く場所（別の場所に置くときはそのＵＲＬ、同じフォルダーに置くときは「ur="./";」）
ur="./img/";	
//サムネール(sw=0;sh=0; とするかgaku=4;とするとサムネールを省略したスライドショーになります。)
sw=140;		//サムネールの横幅
sh=105;		//サムネルの縦幅
xn=4;		//サムネールの横に並べる枚数
gaku=1;		//０＝写真のみ/１＝額縁入り/２＝平面影/３＝立体影/４＝表示しない
gaku_color="#d9d7e3,#000000,16,#ccccdd";//サムネール額の色,文字色,文字サイズ,台紙の色
//拡大ウインド(
//kakudai="3,#88aaaa,,1,tori.mp3";//拡大形式，背景色，壁紙,ＤＬ可否,ＢＧＭ;
//スライドショート書式を合わせるため位置を変更（2020/05/29）新旧互換します
kakudai="3,#88aaaa,,1,,004-dream sate.mp3,3";//拡大形式，背景色，壁紙,ＤＬ可否,音量,ＢＧＭ,ナレーション;
	//拡大形式（２=フルスクリーン）
	//背景色（グランデーションにするには「;」で２色とタイプ［縦=0/横=1］をつないで「,#88aaaa;#000044;0,」のように書く
	//音量；０～１０（０は無音）
        //ＢＧＭは「***.mp3」形式のサウンドファイル
	//ナレーション：コメントを読み上げます（1～9で音量調整）0＝読み上げない
//写真表示形式
syasin=2;//（0=縦横100%/1=横100%（縦横比固定）/2=写真原寸）/3=タテ100%（縦横比固定)/4～=余白幅(100%-syasin)
//スライド切替タイプ
wip=0;	//
w_time="8,1,2";//スライド間隔（秒）,　ループ（０＝エンドレス　１＝１巡）,ストーリー比率；
		//ストーリー比率＝（何回に１回動かすかを指定、それ以外静止、省略時は全回動く）
//コメントの文字属性
moji_size=16;   //コメントの文字サイズ
moji_color="#666666";//コメントの文字色
//moji_bgcolor="transparent";//コメントの背景色（透明は"transparent"と書いてください）
moji_bgcolor="#000000,0";//コメントの背景色,透明度（透明＝0；半透明＝0.1～0.9：不透明＝1）
moji_align="right,,1";//コメントの表示位置,余白（中央="center" 左="left" 右="right"),ＮＯの自動付与
//個別データベース（あなたのデータに書き換える）
//　　　　　"サムネール ，原画 ，タイトル,コメント,ストーリータイプ,ストーリー時間,切替音,継続効果音”
//サムネールファイル名を省略すると原画ファイルで兼用します（「,」は残すこと）
//ストーリータイプを省略すると乱数表で自動選択します
//ストーリー時間を設定するとコマごとに切り替え時間が変えられます。
n++;dt[n]=",birds01-white-tailed-eagle-2015098_960_720.jpg, White-tailed eagle オジロワシ,White-tailed eagle 魚を狙うオジロワシ,5";
n++;dt[n]=",birds02-hummingbird-1854225_960_720.jpg, Hummingbird ハチドリ,Hummingbird 大空を舞うハチドリ,23";
n++;dt[n]=",birds03-bald-eagle-521492_960_720.jpg, Bald eagle ハクトウワシ,Bald eagle 大空を舞うハクトウワシ,6";
n++;dt[n]=",birds04-eagle-1753002_960_720.jpg, Eagle ワシ,Eagle 大空を舞うワシ,24";
n++;dt[n]=",birds05-seagull-2444497_960_720.jpg, Seagull カモメ,Seagull 大空を舞うカモメ,26";
n++;dt[n]=",birds06-puffin-1107405_960_720.jpg, Puffin ツノメドリ,Puffin 大空を舞うツノメドリ,10";
n++;dt[n]=",birds07-stork-3363503_960_720.jpg, Stork コウノトリ,Stork 大空を舞うコウノトリ,18";
n++;dt[n]=",birds08-flamingos-1835649_960_720.jpg, flamingos フラミンゴ ,flamingos 空を飛ぶフラミンゴ,19 ";
n++;dt[n]=",birds09-peacock-3098451_960_720.jpg, Peacock 孔雀,Peacock 孔雀,18";
n++;dt[n]=",birds10-bird-3652358_960_720.jpg, Tyto alba メンフクロウ,Tyto alba 舞い降りるメンフクロウ,10 ";
n++;dt[n]=",birds11-great-egret-5592300_960_720.jpg, Great egret ダイサギ,Great egret 飛び立つダイサギ,23";
n++;dt[n]=",birds12-swan-369090_960_720.jpg, Mute swan コブハクチョウ ,Mute swan 水辺のコブハクチョウ,19";
</script> 
</head>
<body style="background:lightgreen">
<h1 style="text-align:center">QPON高画質写真ストーリーショー まとめデモ</h1>
<script src="https://qpon-toyota.com/story/qponstory.js"></script> <!-- ストーリーショー本体js -->
<center>
<button onClick="story_op(1)" style="border-radius:12px;cursor:pointer" title="ストーリーショー開始">ストーリーショー</button><br>
<br>
<small>引用：ＱＰＯＮのJavaScript作品ソース集「高画質写真ストーリーショー」 <a href="https://qpon.fun/js/index.html" target="_blank">https://qpon.fun/js/index.html</a></small>
</center>
</body>
</html>

▼これまでのまとめHTML（ストーリーショー）のデモ これまでのまとめHTMLのデモを新しいページで見る。
-

 最終更新日：2022.11.29
アクセス解析