トースト

2024年2月25日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は「トースト」を実装してみたいと思います。

トーストとは

トーストとは、情報通知用の小さなウィンドウがディスプレイの隅っこから一時的にポップアップ表示するアレです。

焼けた食パンがトースターから飛び出すのに似ているのでその名前がついたようです。

では早速実装してみましょう。

jquery-toast-pluginというプラグインを使ってみます。

jquery-toast-plugin

参考：コードライク｜[jquery]jquery toast pluginの使い方

参考：kamranahmed.info｜Jquery Toast Plugin

参考：GitHub｜Jquery Toast Plugin

参考：cdnjs｜jquery-toast-plugin

CSSとJSを上記GitHubからダウンロードするか、またはCDNで読み込みます。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-toast-plugin/1.3.2/jquery.toast.min.css" integrity="sha512-wJgJNTBBkLit7ymC6vvzM1EcSWeM9mmOu+1USHaRBbHkm6W9EgM0HY27+UtUaprntaYQJF75rc8gjxllKs5OIQ==" crossorigin="anonymous" />
                        
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-toast-plugin/1.3.2/jquery.toast.min.js" integrity="sha512-zlWWyZq71UMApAjih4WkaRpikgY9Bz1oXIW5G0fED4vk14JjGlQ1UmkGM392jEULP8jbNMiwLWdM8Z87Hu88Fw==" crossorigin="anonymous"></script>

発動するためのボタンを設置します。btn-toastというクラス名をつけておきます。

<button class="btn-toast">トースト</button>

スクリプトを記述します。

$(function(){
  $(".btn-toast").on("click", function(){
    $.toast("トーストです");
  });
});

これだけでOKなんですが、オプションがいろいろあるみたいなのでちょっといじってみましょう。

$(function(){
  $(".btn-toast").on("click", function(){
    $.toast({
      text: "トーストです",
      heading: 'トースト',
      showHideTransition: 'slide',
      allowToastClose: true,
      hideAfter: 3000,
      stack: 10,
      position: 'bottom-right',
      loader: true,
      loaderBg: "#14f7c1"    
    });
  });
});

text：本文
heading：タイトル
showHideTransition：トーストの表示アニメーション（fade、slide、plain）
allowToastClose：閉じるボタン
hideAfter：自動的に閉じるまでの時間（ミリ秒）
stack：表示する数
position：表示する位置（bottom-left、bottom-right、bottom-center、top-left、top-right、top-center、mid-center）
loader：プログレスバーを表示する
loaderBg：プログレスバーの色

表示位置はデフォルトだと左下のようです。

今回は右下にしてみました。

さらに、オプションでアイコンを表示させることもできるようです。

iconにはinfo、warning、success、errorが指定できるようです。

$(function(){
  $(".btn-toast").on("click", function(){
    $.toast({
      text: "上手に焼けましたー！",
      heading: 'トースト',
      icon: 'info',
      showHideTransition: 'slide',
      allowToastClose: true,
      hideAfter: 3000,
      stack: 10,
      position: 'bottom-right',
      loader: true,
      loaderBg: "#14f7c1"    
    });
  });
});

Bootstrapでは

参考：Bootstrap4.2日本語リファレンス｜Toasts

Bootstrapにもトーストの機能はあるのですが、様々なバージョンを試してみてもうまくいきませんでした。なんでだろう。今後の課題とします。

まとめ

大事なお知らせは、自動的に消えないようにしておいた方がよさそうです。

自動的に消えないようにする場合は、閉じるボタンは必須のようです。

ページ読み込み時に表示させるようにして、ちょっとしたお知らせとかに使ってみたいと思います。