Posted at

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

More than 1 year has passed since last update.


どんな感じ?

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

splash.gif

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'});