[JavaScript] WEBブラウザでスプラッシュメッセージを表示する

どんな感じ？

こんな感じで、処理が完了した後に「完了したかどうか」を知らせる感じです。「alertメッセージだと味気ない」「とりあえず知らせたいだけ。OKボタンを押させる面倒もかけたくない」といった方におすすめです。

Live Demo
https://rawseq.github.io/grepreptips/
画像の様に「一括処理・コピー」ボタンを押してみてください。

使い方

JavaScript関数（後述）をコピペした後に以下の通りで実行。最小構成はコピペのみで動きます。

JavaScript呼び出し方(簡易)

splash("メッセージ");

いろいろ設定したい場合は以下の通り。

JavaScript呼び出し方(詳細)

splash("メッセージ",{
	message_class: 'splashmsg default', //メッセージエリアに設定するクラス
	fadein_sec: 0.1, //コマンド実行からメッセージがフェードインする時間（秒）
	wait_sec: 0.5, //コマンド実行からメッセージのフェードアウトを開始する時間（秒）
	fadeout_sec: 1.5, //フェードアウトする時間（秒）
	opacity: 0.9, //メッセージの透過率
	trans_in: 'ease-in', //フェードインの加速度設定（CSSのtransition参照）
	trans_out: 'ease-out', //フェードアウトの加速度設定（CSSのtransition参照）
	outer_style: 'top: 0px;left: 0px;position: fixed;z-index: 1000;width: 100%;height: 100%;', //外側のスタイル
	message_style: 'padding:0.5em;font-size:4em;color:white;background-color:gray; position: absolute;top: 50%; left: 50%;transform: translateY(-50%) translateX(-50%);-webkit-transform: translateY(-50%) translateX(-50%);', //メッセージエリアのスタイル
	style_id: 'append_splash_msg_style', //追加する制御用スタイルタグのID
	outer_id: 'append_splash_msg', //追加するスタイルタグのID
	message_id: 'append_splash_msg_inner',
	on_splash_vanished: null //コールバック関数（ function() ）
});

関数

モダンブラウザ向けですが、フレームワークに依存しないようになっています。（多分）

[Javascript]splash関数

function splash(msg, custom_set){
	
	//Default
	var set = {
		message_class: 'splashmsg default',
		fadein_sec: 0.1,
		wait_sec: 0.5,
		fadeout_sec: 1.5,
		opacity: 0.9,
		trans_in: 'ease-in',
		trans_out: 'ease-out',
		outer_style: 'top: 0px;left: 0px;position: fixed;z-index: 1000;width: 100%;height: 100%;',
		message_style: 'padding:0.5em;font-size:4em;color:white;background-color:gray; position: absolute;top: 50%; left: 50%;transform: translateY(-50%) translateX(-50%);-webkit-transform: translateY(-50%) translateX(-50%);',
		style_id: 'append_splash_msg_style',
		outer_id: 'append_splash_msg',
		message_id: 'append_splash_msg_inner',
		on_splash_vanished: null //callback function
	};
	
	//Override custom_set
	for (var key in custom_set) {
		if (custom_set.hasOwnProperty(key)) {
			set[key] = custom_set[key];
		}
	}
	
	//Style
	if(!document.getElementById(set.style_id)){
		var style = document.createElement('style');
		style.id = set.style_id;
		style.innerHTML = 
			"#"+set.outer_id+" { "+set.outer_style+" } " +
			"#"+set.outer_id+" > #"+set.message_id+" {opacity: 0;transition: opacity "+set.fadeout_sec+"s "+set.trans_out+";-webkit-transition: opacity "+set.fadeout_sec+"s "+set.trans_out+";} " +
			"#"+set.outer_id+".show > #"+set.message_id+" {opacity: "+set.opacity+";transition: opacity "+set.fadein_sec+"s "+set.trans_in+";-webkit-transition: opacity "+set.fadein_sec+"s "+set.trans_in+";}" +
			"#"+set.message_id+" { "+set.message_style+" } ";
		document.body.appendChild(style);
	}
	
	//Element (Outer, Inner)
	if((e = document.getElementById(set.outer_id))) {e.parentNode.removeChild(e);if(set.on_splash_vanished) set.on_splash_vanished();}
	var splash = document.createElement('div');
	splash.id = set.outer_id;
	splash.onclick = function(){
		if((e = document.getElementById(set.outer_id))) e.parentNode.removeChild(e);
		if(set.on_splash_vanished) set.on_splash_vanished();
	};
	splash.innerHTML = '<div id="'+set.message_id+'" class="'+set.message_class+'">'+msg+'</div>';
	document.body.appendChild(splash);
	
	//Timer
	setTimeout(function(){if(splash) splash.classList.add('show');},0);
	setTimeout(function(){if(splash) splash.classList.remove('show');},set.wait_sec*1000);
	setTimeout(function(){if(splash && splash.parentNode) splash.parentNode.removeChild(splash);if(set.on_splash_vanished) set.on_splash_vanished();},(set.fadeout_sec+set.wait_sec)*1000);

}

「ただメッセージを出したい。」「CSSも構成するの面倒だよ」といった方は、コピペで利用できます。
影響面を考慮して変数に突っ込む形に書き換えてもらってもOK。

色やスタイルを変えたい場合は、以下の様に上書きでCSS構成を制御してみてください。
もちろんデフォルト設定を書き換えてもらってもOKです。

css

#append_splash_msg_inner.default {
	/* 通常CSS */
}

#append_splash_msg_inner.alert {
	/* アラートCSS */
}

js

//通常は default クラスが指さります。
splash("通常メッセージ");

//アラート等は、クラス名を一致させて指します。
splash("アラートメッセージ", {message_class: 'splashmsg alert'});