ブックマークレットでトーストを表示する

ブックマークレットでクリップボードへコピーするスクリプトをいくつか使ってるけど、 コピー後に何も表示されないかたちだったんでコピーされたか分からないし alertでメッセージを表示するのも野暮ったいんでトーストを表示することにした。

function generateToastHTML(message) {
    return `
        <div class="_toast">
            <style scoped>
                ._toast
                {
                    position: fixed;
                    right: 2rem;
                    bottom: 0;
                    padding: 1rem;
                    width: 350px;
                    max-width: 100%;
                    opacity: 0;
                    color: #000;
                    background-color: rgba(255,255,255,.85);
                    border: 1px solid rgba(0,0,0,.1);
                    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
                    border-radius: .25rem;
                    transition: opacity .3s, bottom .3s;
                }
            </style>

            ${message}
        </div>
    `;
}

function showToast(message) {
    const html = generateToastHTML(message);
    document.body.insertAdjacentHTML('beforeend', html);
    const toast = document.body.lastElementChild;
    setTimeout(() => {
        toast.style.bottom = '2rem';
        toast.style.opacity = 1;

        setTimeout(() => {
            toast.style.bottom = '0';
            toast.style.opacity = 0;
            setTimeout(() => toast.remove(), 1000);
        }, 3000);
    }, 1);
}

showToast('トーストのメッセージ');

ブックマークレットなので ライブラリ等なしの素のJavaScript (いわゆるVanilla JS) で書いたけど 意外とシンプルに実装できた。