Help us understand the problem. What is going on with this article?

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

More than 3 years have 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'});
RAWSEQ
NE(のびのびエンジニア)です。よろしくお願いいたします。 50サイト超のECサイトの受託構築に関わっていたら、技術研鑽が疎かになり、浦島太郎状態で焦っているところ。 フロントエンド・デザイナーに敬意と憧れを持つバックエンドWEBエンジニアで、 インフラ回り(今はAWS等のクラウド)からミドルウェア(LINUX系が主)、サービス側アプリ開発、ビヘイビア程度のフロントエンド実装が守備範囲です。
http://ltside.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away