【コードあり】通知がやってくる仕組みは？ウェブサイトにモーダルウィンドウでポップアップする機能を実装する

ウェブサイトやアプリは通知が飛んでくる

昔はウェブサイトは人間が見に行くものでしたが、いつからか向こうから通知してくるようになりました。
通知とは？という人のために身近な例を説明しましょう。

一番身近な例はLINEのメッセージ通知でしょう。
スマホのトップ画面に「TEST」というメッセージのアウトラインが出ていると言います。
利用者的にはメッセージが出ることはいいことじゃないか！と思いますが、
スマホの最前面にメッセージを出すにはどうすればいいのか？について解説します。

メッセージの表示順位はライブの座席と一緒

もしもあなたが憧れのアーティストのライブに行くなら、最後尾より最前列で見たいと思いますよね？

Ｃ席より、Ｂ席…
Ｂ席より、Ａ席…
Ａ席より、Ｓ席…

のように前に行けば行くほど、チケット代は上がっていくはずです。

この原理はウェブサイトでも存在

ウェブサイトの「トップページのアイコン」などの表現に代表されるように
サイト上の左上部分はウェブサイトの一等地に相当します。
テレビで言えば、19時代のゴールデンタイムの広告枠が単価が高いようなものです。

今回はウェブサイトの左下に動的にメッセージを出す方法について解説します

専門用語で通知を出す種類には何種類か方法があります。

アラート（Alert）
モーダルウィンドウ（Modal Window）
トースト通知（Toast Notification）
ダイアログボックス（Dialog Box）
バナー通知（Banner Notification）
インフォメーションポップアップ（Information Popup）
フローティングメッセージ（Floating Message）
スナックバー（Snackbar）
プッシュ通知（Push Notification）
オーバーレイ（Overlay）

なんて言い方をします。
実は身近に使っていた言葉ではないでしょうか？

ウェブサイトにGoogleタグマネージャーを使ってトースト機能を実装する

「今回はブログを購読しませんか？」を出してみます

モーダル
応答しない限り元の画面の操作に戻れないという「制御」にフォーカスした単語

ポップアップ
突然現れるという「表示の仕方」にフォーカスした単語

ダイアログ
ユーザーに情報を伝えて、それに対して応答を得るという「やりとり」にフォーカスした単語

で厳密には言い方が異なります。

言葉の意味はわかったが、実装方法は？

ウェブサイトの表示などをつかさどることを「フロントエンド」
ウェブサイトのデータベースなどをつかさどることを「バックエンド」と言います。

フロントオフィス・バックオフィス
フロントヤード・バックヤード
と言った言葉のようにプログラムの外面を扱うか？内面を扱うか？によって言葉が違います。

ウェブサイトにモーダルなポップアップを設定する

ポップアップというのは、先ほど説明した通りですが…

「モーダル」

という言葉があります。

モーダルウィンドウは、コンピュータアプリケーションソフトウェアのユーザインタフェース設計において、何らかのウィンドウの子ウィンドウとして生成されるサブ要素のうち、ユーザーがそれに対して適切に応答しない限り、制御を親ウィンドウに戻さないもの。

モーダルウィンドウには戻るという選択肢がない

規約に「同意するか？」「同意しないか？」
画像を「見るか」「見ないか？」
といった２択の選択を迫るときは、モーダルウィンドウが有効になります。

モーダルウィンドウを設定するjavascript

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/push.js/1.0.7/push.min.js"></script>
<script type="text/javascript">
Push.create("", {
body: "最新記事を逃さずチェック！今すぐ購読を！",
icon: 'https://cdn.profile-image.st-hatena.com/users/kazukichi_0914/profile.png', // 右側に表示される画像のパス
timeout: 4000,
onClick: function () {
location.href = 'https://blog.hatena.ne.jp/kazukichi0914/kazukichi0914.hatenablog.com/subscribe?from_url=https%3A%2F%2Fkazukichi0914.hatenablog.com%2Fsubscribe&utm_source=hatena-follow-button-box&utm_medium=button&utm_campaign=subscribe_blog';
this.close();
}
});
</script>