JavaScriptでスライドショーを作る【自動的に画像切り替える】

f:id:you_key69:20220208232441j:plain

JavaScriptでの画像切り替えをためしてみたくて、スライドショーを作ってみました。

元ネタは先日Excelで動かしたロックマンですｗ

前半はスライドショーという名のアニメーションのお披露目。

後半ははてなブログへの埋め込み方を紹介します。

JavaScriptで作ったスライドショー
はてなブログへの埋め込み方
- 画像のアップロード
- はてな記法でJavaScriptを書く
参考Web
まとめ

JavaScriptで作ったスライドショー

繰り返し
- 無限（停止するまで）
ページ送り
- ゆっくり：0.5秒
- 普通：0.3秒
- 速ーい：0.1秒

一般ウケを狙って「スライドショー」という表現を使いましたが、要はパラパラ漫画です。

単純にコマ送りするだけのアニメーションではありますが、ExcelとちがってWebサイトからページ送りの速度を変えたりできるのはJavaScriptならではじゃないでしょうか。

→Excel版はコチラ。

はてなブログへの埋め込み方

さて、お披露目したかったのは以上です。

ここから先は

Webでスライドショー（パラパラ漫画）ってどうやって作るの？
JavaScriptで画像切り替えられるの？
はてなブログでもできるの？

というモノ好きな方向けにやり方を共有させていただきます。

画像のアップロード

まず、スライドショーを作るためには画像のアップロードが欠かせません。

はてなブログユーザーなら「はてなフォトライフ」を使っちゃいましょう。

f:id:you_key69:20220208232842j:plain

ドラッグ＆ドロップで簡単にアップロードできます。

私の場合は、アニメーション用に12枚の画像をアップしました（Excelをjpg化する方法は後述）。

あとは、アップロードした画像を開き、右クリック→「画像URLをコピー」するだけ。

簡単でしょ？

下記JavaScriptの配列（ImgArray ）に格納するために画像URLを使います。

はてな記法でJavaScriptを書く

はてなブログ（はてな記法）で埋め込んだのは、下記のコードです。

<img id="SlideImg" src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/**********/20220208/20220208224628.jpg" width="540px" height="auto">
<form id="Form11" action="#">
速度　<label><input type="radio" name="tempo" value="0" checked>ゆっくり</label>　<label><input type="radio" name="tempo" value="1" >普通</label>　<label><input type="radio" name="tempo" value="2" >速ーい</label>
<br>
<input type="button" onclick="Play11()" value="START" id="btn_Play11">  <input type="button" onclick="Stop11()" value="STOP" id="btn_Stop11">
</form>

<script>
	// インターバル宣言
	var Interval;

	// 画像URL
	let path = "https://cdn-ak.f.st-hatena.com/images/fotolife/y/you_key69/";

	// 配列に追加
	const ImgArray = [
	 path + "20220208/20220208224639.jpg"
	,path + "20220208/20220208224653.jpg"
	,path + "20220208/20220208224813.jpg"
	,path + "20220208/20220208224824.jpg"
	,path + "20220208/20220208224848.jpg"
	,path + "20220208/20220208224857.jpg"
	,path + "20220208/20220208224915.jpg"
	,path + "20220208/20220208224949.jpg"
	,path + "20220208/20220208231425.jpg"
	,path + "20220208/20220208231416.jpg"
	,path + "20220208/20220208231410.jpg"
	,path + "20220208/20220208231359.jpg"
	];



function Play11(){

	// 再生ボタン無効化
	btn_Play11.disabled = true;
https://cdn-ak.f.st-hatena.com/images/fotolife/y/**********/20220208/20220208231425.jpg
	// ラジオボタンの値を取得
	var element = document.getElementById('Form11'); //form要素を取得
	var radioNodeList = element.tempo; // ラジオボタングループ(name="tempo")の値を取得
	var TempoType = radioNodeList.value; // 選択状態の値(value)を取得

	// ラジオボタンの選択結果によってテンポ(ミリ秒)を変更
	var MilSec = 0;
	if (TempoType == "0") {
		MilSec = 500;
	}
	else if (TempoType == "1") {
		MilSec = 300;
	}
	else {
		MilSec = 100;
	}

	// スライドショー開始	
	var j = 0;
	Interval = setInterval(function(){ // 指定テンポで繰り返す
		SlideImg.src = ImgArray[j];
		j = j + 1;
		if (j == 12){j = 0;} // 12枚目終了後に1枚目に戻る
	}, MilSec);
	//}, 60 / bpm * 1000);
}

function Stop11(){
	// インターバルを停止
	clearInterval(Interval);
	
	// 再生ボタン有効化
	btn_Play11.disabled = false;
	
	// 画像リセット
	SlideImg.src = "https://cdn-ak.f.st-hatena.com/images/fotolife/y/you_key69/20220208/20220208224628.jpg";
}
</script>

ポイントは下記。

画像コントロール.src = 画像URL で動的に画像セット
複数画像はURLを配列（Array）に格納して、ループ処理で切り替える
setIntervalでループ速度を設定し、ボタンで再生／停止ができるようにする

スライドショーについては「setTimeout」を使われているサイトが多かったけど、私はメトロノームの開発で習得した「setInterval」を応用しました。

今後、画像と音声と共演させる構想もあるので、テンポを変えたり、再生・停止するには「setInterval」のほうが都合がいいのです。

参考Web

JavaScriptを書くにあたって…というより本記事を書くにあたって参考にさせていただいたWebページ集です。

Excelのドット絵を画像化したり、動かしたスライドショーを動画化する方法など。

JavaScriptスライドショー

ほぼ骨子はこれでイケる。

配列についても学べる。

ただし、「setTimeout」は使いませんでした。

Excelの表を画像化

Excelのセルにドットを打っちゃったもんだから、画像化するのめんどくさいなーと思ってたら、ベンリな方法がありました。

形式を選択して貼り付け（emf→jpeg）
Excelファイルの拡張子をzipに変更
解凍 > xl > media配下のjpgを採取

もともとは表やグラフを画像化するオプションだと思いますが、転用することでドット絵の画像化もできます。

これは朗報。

PC画面を録画

Excel版の記事で使ったYouTube動画の撮影に使いました。

画面の録画をWindows標準機能「Win＋G」でできることに驚き。

これはきっとゲーム配信用の機能ですよね。

昔は専用アプリをわざわざ入れてたもんなァ。

便利になったもんです（しみじみ）。

まとめ

ちょっと難航するかなと思われたJavaScriptでの画像操作も、意外とちゃんとできました。

次はいよいよ画像と音声のコラボ実現をめざします。

今度こそガチで難しそうだけど、ワクワクすっぞ。

Fix the Bits | あっぷり工房

旅、ギア、サプリ、マインド、トレーニング ── “走る”は創れる