Webサイトを見ているときに右下のあたりに ポッ と四角いエリアが浮き上がってきてメッセージが表示されて、クリックしたり数秒経つと消えているようなものを時々みかけます。
この四角いエリアのことをトーストというようです。ちょっと面白そうだったので自分でこのトーストを作れるようにするにはどうすればいいのかな？と試してみました。
トーストってこんな感じのもの
トーストって(自分が思うに)、よくお買い物サイトとかに行くと「あと24時間以内に注文すると20%オフ」とかいう、とても気になる情報がポッと表示されて気づいたら消えている…ようなものだと思います。
例えば
こんな感じのもの、でしょうか？
ちゃんとIT用語で調べると、
トーストとは、主にデスクトップアプリケーションの機能で、情報通知用の小さなウィンドウをディスプレイの下方から一時的にポップアップ表示することである。
(中略)
トーストは画面の端に小さく現れ、一定時間が過ぎると自動的に引っ込むようになっている。
こんな感じに、まるでトースターで焼くトーストのような動きをするからトーストって言う、のかなと思います。
Webサイトだけで無く、phpstormなどのIDEでも更新情報などを右上に表示するのはトーストなのかなと思います。
toastr というJavaScriptライブラリーでトーストが表示できるようです
そんなトーストを自分が作るサイトでも表示させたら面白いのではないかな？と思いました。
検索すると toastr というJavaScriptライブラリーがあったので、これを使って簡単にトーストを表示してみました。
このサイトに使い方やサンプルページへのリンクなどがあります。
http://codeseven.github.io/toastr/demo.html
↑ここがサンプルページです。ここで、
こんな感じに入力して、
Show Toast をクリックします。すると、
ブラウザの右下に、このように トースト が表示されました(^^)/
下の方には、
このように、この表示をするためのオプションを指定するためのコードが表示されています。このコードを使ってHTMLでトーストを表示したいと思います。
HTMLでトーストを表示してみる
HTMLで表示するにはJQueryを読み込んだり、このtoastrのjsとcssを読みこみ、どのタイミングでどんなオプションのトーストを表示するかというコードを書きます。
http://stackoverflow.com/questions/16549885/how-do-i-implement-toastr-js
こちらのページに使いやすい例が載っていたのでコピーして、一部新しいURLや先ほどサンプルページで表示されたコードを入れてみました。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<a id='linkButton'>ClickMe</a>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
toastr.options.timeOut = 3000; // 3秒
toastr.options = {
"closeButton": true,
"debug": false,
"newestOnTop": false,
"progressBar": false,
"positionClass": "toast-bottom-right",
"preventDuplicates": false,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}
Command: toastr["info"]("そろそろ今年も押し詰まりました。今日もはりきっていきましょう！", "こんにちは！");
$('#linkButton').click(function() {
toastr.success('click');
});
});
</script>
</body>
</html>
- 2015/12/12追記:文字化けしてしまってたのでheadで文字コードを指定しましたm(_ _)m
このように全てCDNでリンクしてありますのでこのコードをコピーしてHTMLとして保存して、ブラウザで見ればすぐに動きを確認することができます。
また、先ほどサンプルページで表示されたコードを、順番を逆(toastr.optionsを先に、Command: toastrを後に)にして貼り付けました。
ブラウザで表示すると、
こんな感じに表示されました(^^)/
また、元々入っていたコードなのですが、ClickMe という文字をクリックすると、クリックするたびに
$('#linkButton').click(function() {
toastr.success('click');
});
このイベントに行くので
こんな風に押された分だけ click という文字が表示されます。
せっかくなので、トーストからリンクしてページを見せたいときは
Command: toastr["info"]("最近1ヶ月で一番人気の記事は<a href=\"https://usortblog.com//lg-34uc87m-b/\">こちら！</a>", "RYUS blog情報");
このように普通にHTMLでリンクを貼れば、ページにリンクすることもできます。
触ってみないと分からないと思いましたので こちら にサンプルを置いておきました(^^)/。トーストを実体験してみてください！
まとめ:オプションもいろいろあるようなのでもっと触ってみたいですね
toastrのサンプルページにはいろいろなチェックボックスがあったり、数字で指定できる部分がたくさんあったのでいろいろいじってみるともっと面白いことができそうです(^^)/
また、WordPressでもトーストを表示してみたいと思うのでそれについてはまた別途書きたいと思っています♪
[amazon_searchlink search=”javascript css”]
コメント