情報処理技術者試験ドットコムの紹介
はじめまして、5月に還暦を迎え、定年退職したプログラマ 泓原敏夫@toshio_fukeharaと申します。
転職後の九州国際情報ビジネス専門学校での講師業務のために「情報処理技術者試験ドットコム」というサービスを個人開発して立ち上げました。
通知機能の実装
増えてきた機能を紹介したい…そういや通知がなかったなと。仕様としては Qiita などと同様にベルのアイコンを出して、未読の数を表示する。アイコンをクリックしたらポップオーバーで一覧表示して、全件表示は別画面へのリンクにする。
ということで、とっととコーディング開始
- ベルのアイコンを表示する
- Bootstrap5 のクラスだけではうまく位置調整できず
- 専用のクラス(wx-notice-read)でstyleを定義
- 未読の数は非同期でバッジに表示する
- 未読の通知を取得するAPIをサーバー側にささっと書く
- どこまで表示したかは cookie に持たせる
- Laravel のおかげで、まあ楽勝
- ポップオーバーの中身をリスト表示にする
- むむっ…Popover のコンテンツは data-bs-content に文字列指定となっている
- ベルのアイコンをクリックすると、ポップオーバーを表示させる
- むむっ…Popover は外側クリックでは閉じない。いちいちベルのボタンを押さないと消せない
ということで、実現するのに少しだけ大変だったので、記事として起こしました。
ポップオーバーのコンテンツを HTML にする
ベルアイコンの表示部分
show-notice.html
<style>
.wx-notice-read {
position: relative;
top: 7px;
left: -3px;
padding: 2px 5px 3px 5px;
opacity: 0.75;
}
</style>
<a href="#" class="show-notice text-decoration-none me-1" title="お知らせ" data-bs-toggle="popover">
<i class="bi bi-bell-fill text-secondary opacity-75"></i>
<span class="wx-notice-read badge rounded-pill bg-danger"></span>
</a>
結論から言うと、popover メソッドの option の html を true にして、content に HTML を入れればOKです。非同期で表示するので、いったん中身をスピナーにしています。
popover-option.js
$('.show-notice').popover({
html: true,
content: `<div class="list-notice d-flex justify-content-center"><div class="spinner-border"></div></div>`,
placement: 'left',
trigger: 'manual',
});
非同期でデータ取得後に list-notice クラスの中身を入れ替えてます。
外側クリックで閉じる
option の trigger を 'manual' にして制御できるようにしておきます。
popover-click.js
$('.show-notice').on('click', function(e) {
e.stopPropagation();
const isShow = document.querySelector('.popover.show');
if (isShow) {
$(this).popover('hide');
} else {
$(this).popover('show');
}
});
$('.popover').on('click', function(e) {
e.stopPropagation();
});
$('html').on('click', function(e) {
$('.show-notice').popover('hide');
});
- ポップオーバーを表示しているかどうかは、'.popover.show'のクラスを持つ要素があるかで判断しています
- 外側で閉じることは、'html'のclickで行なっています
- そのままではポップオーバーのウィンドウをクリックしても閉じてしまうので、'.popover'クラスのクリックでは、e.stopPropagation(); で現在のイベントのさらなる伝播を阻止しています
実装の結果
モバイル表示
デスクトップ表示
終わりに
最後まで読んで頂いてありがとうございます！
無料でも結構使えます。情報処理技術者試験にトライされる際はぜひ使ってみてください。
副業で開発を請け負ってますので、ご依頼などありましたらご連絡ください。
情報処理技術者試験ドットコム お問い合わせ