00:06
神経質やせ男です。
今日は、ブラウザ拡張機能で、javascriptを使ったポップアップ表示についてお話します。
前回までは、CSSを使って、拡張機能のボタンの近くにポップアップを表示していました。
今回は一歩進めて、画面中央に表示されるモーダルウィンドウを作ってみました。
まず、マニフェストJSONでは、コンテントスクリプトという設定を使います。
これは、特定のウェブページを開いたときに、自動でjavascriptを実行する仕組みです。
今回は、https://としているので、すべてのhttpsサイトで動作します。
そして最初の処理は、content.jsに変えていきます。
最初に作るのは、背景を暗くするオーバーレイです。
画面全体を半透明の黒で覆うことで、ユーザーの視線をポップアップへ集中させます。
ポジションをfixedにしているので、スクロールしても背景は固定されます。
次に、ポップアップ本体を作ります。
ここでポイントになるのが、中央配置です。
トップを50%、リフトを50%に設定した上で、トランスレートマイナス50%を指定します。
これによって、ポップアップの中心が画面の中心にぴったり重なります。
初心者の方が最初につまずきやすい部分ですが、仕組みを理解すると意外とシンプルです。
そしてhtmlをJavaScriptで組み立てて、見出しやメッセージ、閉じるボタンを表示します。
最後にイベント処理です。
閉じるボタンを押したとき、あるいは背景をクリックしたときに、ポップアップと背景を削除します。
これで一般的なモーダルウィンドウの完成です。
JavaScriptのコード量は少し増えますが、やっていることは要素を作る、表示する、消すの3ステップです。
ブラウザー拡張機能の学習では、この考え方を理解するだけでも大きな前進になります。
ぜひ背景色や透明度、サイズなどを変更しながら、自分好みのポップアップを作ってみてください。
それではまた次回お会いしましょう。
本日の内容は以上となります。
最後までお聞きいただきありがとうございました。
最後にAmazon Kindleで発売中の電子書籍のお知らせです。
きれいごとゼロの別居介護をリアルに環状ではなく、システムとExcelで立ち向かった瞬間、
手取り23万円のエンジニアがExcel1枚で実家の破綻を防いだ話、
そして実家の保守運用を行なすための時間を圧倒的にひねり出す技術を書いた会社公認爆速仕事術PC魔改造、
この2冊が現在Amazon Kindleにて絶賛発売中です。
どちらもKindle Unlimited読み放題の対象となっていますので、
03:00
会員の方は追加料金なしですぐにお読みいただけます。
音声を聞いた後にスマホの画面の下にある概要欄のリンクから是非チェックしてみてください。
それではまた次回の配信でお会いしましょう。
