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

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

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

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

1. BGM音声ファイル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>

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

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>

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

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

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

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

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

4. まとめ

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

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