Toastのライブラリが大げさすぎるので超シンプルな関数として実装。外部資源に一切依存しない。
サンプルソース
sample.html
<!DOCTYPE html>
<html>
<head>
<title>Toastサンプル</title>
</head>
<body>
<button onclick="showToast('Toastを表示')">Toastを表示</button>
<script>
function showToast(message) {
let toast = document.createElement("div");
toast.textContent = message;
toast.style.backgroundColor = "#333";
toast.style.color = "#fff";
toast.style.borderRadius = "4px";
toast.style.padding = "16px";
toast.style.position = "fixed";
toast.style.bottom = "16px";
toast.style.right = "16px";
toast.style.opacity = "0";
toast.style.transition = "opacity 0.3s ease-in-out";
toast.style.zIndex = "9999";
document.body.appendChild(toast);
setTimeout(function() {
toast.style.opacity = "1";
setTimeout(function() {
toast.style.opacity = "0";
setTimeout(function() {
document.body.removeChild(toast);
}, 300);
}, 2000);
}, 0);
}
</script>
</body>
</html>
実行結果
なぜ作ったか
ブックマークレットのようなUIを持たないロジックでもデバッグ用途で画面表示はしたい。
window.status が今どきは使えなくなってきたので、現在のステータスを表示するのに使っている。単にクリップボードにコピーするだけの機能でもユーザには何かしらのフィードバックがあった方がいいでしょう。
このてのサンプルの大半は、cssとhiddenなdivをHTMLに用意しているけど、それさえも依存する部品として外部リソースを汚しちゃうので、JSのfunctionだけコピーしても動くようにした。