ブラウザにお知らせを表示して自動的に消えるトーストを作る HTML編

Webサイトを見ているときに右下のあたりに ポッ と四角いエリアが浮き上がってきてメッセージが表示されて、クリックしたり数秒経つと消えているようなものを時々みかけます。
この四角いエリアのことをトーストというようです。ちょっと面白そうだったので自分でこのトーストを作れるようにするにはどうすればいいのかな?と試してみました。

トーストってこんな感じのもの

トーストって(自分が思うに)、よくお買い物サイトとかに行くと「あと24時間以内に注文すると20%オフ」とかいう、とても気になる情報がポッと表示されて気づいたら消えている…ようなものだと思います。

例えば

こんな感じのもの、でしょうか?

ちゃんとIT用語で調べると、

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や先ほどサンプルページで表示されたコードを入れてみました。

  • 2015/12/12追記:文字化けしてしまってたのでheadで文字コードを指定しましたm(_ _)m

このように全てCDNでリンクしてありますのでこのコードをコピーしてHTMLとして保存して、ブラウザで見ればすぐに動きを確認することができます。

また、先ほどサンプルページで表示されたコードを、順番を逆(toastr.optionsを先に、Command: toastrを後に)にして貼り付けました。

ブラウザで表示すると、

こんな感じに表示されました(^^)/

また、元々入っていたコードなのですが、ClickMe という文字をクリックすると、クリックするたびに

このイベントに行くので

こんな風に押された分だけ click という文字が表示されます。

せっかくなので、トーストからリンクしてページを見せたいときは

このように普通にHTMLでリンクを貼れば、ページにリンクすることもできます。

触ってみないと分からないと思いましたので こちら にサンプルを置いておきました(^^)/。トーストを実体験してみてください!

まとめ:オプションもいろいろあるようなのでもっと触ってみたいですね

toastrのサンプルページにはいろいろなチェックボックスがあったり、数字で指定できる部分がたくさんあったのでいろいろいじってみるともっと面白いことができそうです(^^)/

また、WordPressでもトーストを表示してみたいと思うのでそれについてはまた別途書きたいと思っています♪

[Amazon sponsored link] javascript css 関連本
兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

261人の購読者に加わりましょう

トップへ戻る