これはすごい！ HTMLの新機能、popover属性でポップオーバーがJavaScript無しで簡単に実装できるようになります
先日リリースされたChrome 114でPopover APIがサポートされ、HTMLのpopover属性が使用できるようになりました。 今まではポップオーバーを実装するのにはJavaScriptを使用し、ポップオーバーの開閉・フォーカス・アクセスフックなど面倒でしたが、popover属性で実装すると驚くほど簡単で、さまざまなUIコンポーネントに利用できます。 Introducing the popover API by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに HTMLのpopover属性とは ポップオーバーのデフォルト、オーバーライド 自動ポップオーバーと手動ポップオーバー popover属性とdialog要素の違い 近日公開予定の便利な2つの機
階層メニューやトーストUIが簡単に作れる新技術！ JavaScriptで利用するポップオーバーAPI - ICS MEDIA
階層メニューやトーストUIが簡単に作れる新技術！ JavaScriptで利用するポップオーバーAPI 2023年5月〜6月にリリースされたChrome 114とEdge 114には、「ポップオーバーAPI」というAPIが搭載されました。 ポップオーバーとはコンテンツの1番上に重ねて表示するUIで、ユーザーにアクションを促したり、補足の情報などを伝えるために画面に表示します。ポップオーバーAPIのMDNのドキュメントではオーバーレイ、ポップアップ、ポップオーバー、ダイアログなどを総称して「ポップオーバー」と呼んでいます。 ウェブサイトでよく見かけるポップオーバーですが、実装するには意外と調整や考慮の多いUIです。たとえば、画面の1番上に重ねるためにはz-indexで他の要素との重なり順を調整する必要があります。Escキーを押した時や要素外をクリックした時にポップオーバーを閉じるには、Java
便利なモーダルSweetAlert2 | バシャログ。
どうもfujiharaです。 恥ずかしながら最近まで知らなかった便利なモーダルSweetAlert2をご紹介させていただきます。 背景 フォーム実装していて通信中にモーダル出したいと思い、npmで探していたら 出会いました。Start数(12k超:2020/12/17時点)、Weekly Downloads数共に凄い数です。 使い方 いくつかご紹介します。詳しい使い方は公式サイト を参照下さい。 読み込み <script src="sweetalert2/dist/sweetalert2.all.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.js"></script> もしくは npm install して importします。 一番簡単な開くは以下で
怪しいサイトを即座に警告してくれる詐欺＆マルウェア防止のChrome拡張機能「Suspicious Site Reporter」が登場したので使ってみた
疑わしいサイトを開くとアイコンで通知され、何が疑わしいのかという理由も即座に確認＆Googleに通報できるGoogle Chromeの拡張機能「Suspicious Site Reporter」が登場したので、実際に使ってみました。 Google Online Security Blog: New Chrome Protections from Deception https://security.googleblog.com/2019/06/new-chrome-protections-from-deception.html Suspicious Site Reporterを使うにはまず以下のページにアクセスして「Chrome に追加」をクリック。 Suspicious Site Reporter - Chrome ウェブストア https://chrome.google.com/web
[JS]ツールチップの実装に迷った時に！依存なしで、さまざまなツールチップを実装できる軽量スクリプト -Tippy.js
シンプルなツールチップをはじめ、表示方向の変更、形状の変更、アニメーションの変更、ホバー・フォーカス・クリック・タッチ操作に対応したツールチップを簡単に実装できる軽量スクリプトを紹介します。 Tippy.js Tippy.js -GitHub Tippy.jsのデモ Tippy.jsの使い方 Tippy.jsのデモ Tippy.jsでは、さまざまなツールチップを簡単に実装できます。 デモにはそれらのツールチップが実際に試せるので、アニメーションで紹介します。 まずは、デフォルトと表示方向の制御。
![[JS]ツールチップの実装に迷った時に！依存なしで、さまざまなツールチップを実装できる軽量スクリプト -Tippy.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/3490c5832afd3ee0814fcc1a370df5e31fa876af/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201801%2F2018030101.png)
無料でGoogle AnalyticsのアラートをリアルタイムにGmailやTwitter・SMSなどで通知する「Metric.live」を使ってみた
自分で作ったウェブページを公開したとき、想定しているアクセスより異常なほど高くなっていたり、低くなっていたりすると、何か問題が発生している可能性があり、そうした状況はリアルタイムで知りたいものです。Google Analyticsを使う場合はリアルタイムでのアラートの通知ができないため、確認するには一定間隔で状況を目で追うか、別のソフトウェアなどで監視する必要があります。「Metric.live」ではリアルタイムでアラートを通知できるほか、GmailやSMS、Twitterなどに通知できるとのこと。実際に使って試してみました。 Metric.live: advanced periodic and real-time alerts for Google Analytics https://metric.live/ ◆登録 上記URLにアクセスして、中央の「GET STARTED FOR FR
Alerter - CLIで使えるmacOS用通知
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました システムで何かがあったときには通知してくれると便利です。macOSは標準でシステム通知を受け取る機能があるので、ここにデータが送れれば簡単にメッセージの送信ができます。それだけでなく、ユーザのリアクションを受け取ることもできます。 そんな通知機能をCLIから呼び出せるのがAlerterです。 Alerterの使い方 標準のメッセージです。 選択肢を追加することもできます。 YES/NOの選択肢を表示した場合。 返信付き。メッセージを受け取れます。 CLIでもAlerterを使うことでユーザからの反応を受け取れるようになります。エラーがあったら通知を出したり、ユーザのリアクションを求める場合にターミナルではなく、システム通知を経由して受け取ることも可能でしょう。 Alerterはma
IEで「前回のブラウズ セッションは予期せずに終了しました「セッションの復元」」が表示される場合の対処
IEで「前回のブラウズ セッションは予期せずに終了しました「セッションの復元」」が表示される場合の対処方法を紹介します。 １．問題点 IEを起動するたびに「前回のブラウズ セッションは予期せずに終了しました「セッションの復元」」が表示されます。 （クリックで拡大） が、「セッションの復元」をクリックしても前回のセッションが復元されません。 復元はされなくてもいいのですが、このメッセージが表示されないようにする方法が分かりません。 ということで、IEで「前回のブラウズ セッションは予期せずに終了しました「セッションの復元」」が表示される場合の対処方法を紹介します。 ２．メッセージが表示されないようにする メッセージが表示されないようにするには、「ツール」アイコン→「インターネットオプション」をクリック。 「詳細設定」タブをクリック。 「自動クラッシュ回復機能を有効にする」のチェックを外して「
Hyperform - Webフォームの入力チェックライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webフォームにおける入力検証の仕組みは大事です。一度サーバに送信してからエラーを返す方式はユーザのストレスも大きくお勧めしません。サーバ側での入力チェックは必要ですが、ユーザビリティのためにWebブラウザ側でも入力チェックをしましょう。 今回はそんな入力チェックを提供するJavaScriptライブラリ、Hyperformを紹介します。 Hyperformの使い方 利用例です。エラーメッセージをテキストボックスの下に表示します。 パスワードのように二つの入力欄に応じたケースもサポートしています。 チェックボックスが有効な場合だけ入力チェックが行われます。 URLやメールアドレス、時間などのフォーマットに合わせた入力チェックもできます。 エラーメッセージはフォームの上に出すこともでき
データの動きを見逃さない: おすすめしたいカスタム アラート 6 タイプ
A/Bテスト 5 Ads Data Hub 1 AdSense 5 AdWords 19 AdWords 連携 21 AMP 4 Analytics 基本 5 API 2 BigQuery 11 Cookie 1 CPA 1 DCM 1 DFP 3 DoubleClick 11 DoubleClick Campaign Manager 1 DoubleClick for Publishers 3 e コマース 2 Firebase 8 Firebase Analytics 4 Firebase 向け Google アナリティクス 2 ga.js 2 GA4 11 GACP 18 GCP 1 Google Cloud Platform 1 Google Consumer Surveys 2 Google Insights for Search 1 Google アド マネージャー 1 Goo
inputやtextareaで、指定した文字数を超えた際に警告文を出す
Result maxlength属性は何かとアレなので文字数自体は制限せずに、予め設定した文字数を超過した際に警告文を出すようにする jQuery/** * Characters limit exceeded warning with a simple jQuery plugin * @copyright Copyright 2013-2015 Joan claret * @license MIT * @author Joan Claret Teruel <dpam23 at gmail dot com> * Licensed under The MIT License (MIT). * Copyright (c) Joan Claret Teruel <dpam23 at gmail dot com> */ ;(function($, document, window, undefine
ExcelやWordで「このファイルは、インターネット上の場所から取得されており、安全でない可能性があります。」を表示させない方法
ExcelやWordで「このファイルは、インターネット上の場所から取得されており、安全でない可能性があります。」を表示させない方法を紹介します。 １．問題点 会社の共有サーバ上のExcelファイルやWordファイルを開くと、次の「このファイルは、インターネット上の場所から取得されており、安全でない可能性があります。 クリックすると詳細が表示されます。」というメッセージが表示されます。 赤枠で示した「編集を有効にする」をクリックすれば通常のExcelファイルとして編集できますが、毎回この操作を行うのは面倒です。 ということで、この警告を表示させないようにしたいのですが方法が分かりません。 ２．警告を表示させないようにする 警告を表示させないようにするには、「ファイル」タブの「オプション」をクリック。 「セキュリティセンター」をクリック。 「セキュリティセンターの設定」をクリック。 「保護され
Googleアナリティクスで効率的にデータ解析ができる「インテリジェンスイベント」の使い方 | 株式会社LIG
こんにちは！ メディア事業部のきょうへいです。 今回はGoogleアナリティクス（以下、アナリティクス）のインテリジェンスイベントについて書きたいと思います。 みなさん、アナリティクスでデータ解析をしている際に、インテリジェンスイベントを見ているでしょうか？ インテリジェンスイベントをうまく使うことで、時間のかかっていたデータ解析を効率化することができるかもしれません。 インテリジェンスイベントとは？ アナリティクスはウェブサイトのトラフィックを監視し、統計情報の大きな変化を検出すると、アラート（インテリジェンス イベント）を自動的に生成します。この機能を使用すると、特定の都市やサイトからトラフィックが急増した場合など、新たな傾向にもすぐに対応することができます。 「アナリティクスのアラート（インテリジェンス イベント）について」 https://support.google.com/
alert()のダイアログのスタイルを変更するスクリプト・SweetAlert
alert()で出せるダイアログのスタイルを変更する為のスクリプトのご紹介。シンプルな発想で素敵ですね。尚、本スクリプトはjQueryに依存しています。 alert()で出せるダイアログのスタイルを変更しよう、というスクリプトです。 確かに普通にアラート出すよりいいかもしれません。 <script src="jquery.js"></script> <script src="sweet-alert.min.js"></script>コアとSweetAlertを読み込みます。 $('.foo').click(function(){ swal({ title: "アラートです！", text: "メッセージがココに入ります", imageUrl: 'http://placehold.it/500x500', confirmButtonText: '了解！', confirmButtonColo
[JS]半透明やフラットのかっこいいパネルをさまざまなアニメーションで表示するスクリプト -Amaran JS
シンプルなテキストだけのものをはじめ、画像やアイコンを使った凝ったレイアウトの通知パネルをさまざまなアニメーションで表示できるjQueryのプラグインを紹介します。 表示位置やスライド・フェードなどのエフェクトも簡単に設定できる優れ物です。 Amaran JS Amaran JS -GitHub Amaran JSのデモ Amaran JSの使い方 Amaran JSのデモ デモではさまざまなデザインのパネルをさまざまなエフェクトで表示できます。 ↓は上：ユーザースタイル、下：半透明スタイル デモページ：オプション Amaran JSの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプト、jquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/jquery.amaran.min.css"> <
a要素にclassを加えるだけで別窓や印刷、ページ内アンカーへのスクロールなどの機能を加えるスクリプト -jQuery A+ | コリス
HTML5でもXHTMLのどちらでもvalidなHTMLで、a要素にclassを加えるだけでリンクを別窓で開いたり、モーダルウインドウを表示したり、通知パネルを表示したり、ページ内アンカーへアニメーションでスクロールさせたり、ページの印刷ボタンとして機能したりなど、a要素にさまざまな機能を加えるjQueryのプラグインを紹介します。 デモページ デモでは、a要素をトリガーとするさまざまな機能がclassで設定できます。対応している機能は以下のようにたくさんあります。 リンクを別窓（タブ）で開く リンクを開く前に確認ダイアログを表示 iframeを使ったダイアログを表示 Ajaxを使ったダイアログを表示 モーダルウインドウを表示 フレーム内にリンクを表示 通知パネルを表示 印刷を表示 ページ内アンカーへアニメーションでスクロール スクロールのスピード設定 スクロールの位置設定 ※それぞれ細か
通知メッセージを実装する為のシンプルなjQueryプラグイン・notifIt!
シンプルで使いやすそうだったので備忘録。アニメーションしながら表示される通知メッセージを実装するシンプルなスクリプト・notifIt!です。jQueryに依存します。 シンプルな通知メッセージ実装スクリプトです。 普通のメッセージ実装スクリプトです。軽量で設定も簡単なので導入しやすそうですね。 notif({ msg: "<b>送信成功:</b> あなたのメッセージは送信されました", type: "success" });メッセージ等のセッティングはオプションで設定します。HHTMLタグも利用可能なのでスタイリングも楽ですね。 軽量なのでスマフォサイトでも気軽に使えるかも。覚えておいて損は無さそうです。 notifIt!
Movable Typeのメッセージセンターの使い方
Movable Type 6で導入されたメッセージセンターの使い方を紹介します。 １．メッセージセンターとは メッセージセンターとは、MT管理画面の上部にアラートなどのメッセージを表示してくれる機能のことです。 すべての管理画面にメッセージを表示し、ユーザーダッシュボードにメッセージの詳細を表示してくれます。 管理画面の表示 ユーザーダッシュボードの表示 ２．プラグインの作り方 メッセージセンターを利用するプラグインの作り方を紹介します。 このエントリーで紹介するサンプルプラグインは以下のリンクからダウンロードできます。 AlertNotifier_0_01.zip ここでは「AlertNotifier」というプラグイン名にします。 AlertNotifierプラグインのファイル構成は次のようになります。 plugins └ AlertNotifier ├ config.yaml └ li
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.smashingapps.com/2015/02/11/8-jquery-notification-plugins-for-good-user-experience.html
45 Free Popup, Alert Window, Notification, Photoshop Designs | SmashingApps.com