便利なJavaScriptライブラリが登場！ CSSのプロパティの値の変更を検出できる -CSSStyleObserver
DOMツリーに加えられた変更を検出する機能としてMutationObserverが便利ですが、CSSのプロパティの値は検出できません。 最近ではCSSアニメーションを使用したWebサイトやスマホアプリも増え、プロパティ値の変更に応じてコールバックを実行する必要があるかもしれません。CSSのプロパティの値の変更を検出するための新しいライブラリを紹介します。 Introducing @bramus/style-observer, a MutationObserver for CSS by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ライブラリのデモ ライブラリのインストール ライブラリの使い方 ライブラリの仕組み ライブラリのサポートブラウザ カスタムプロパティのトランジションに関する注意事項 はじめに
JavaScriptでCSSのカスタムプロパティを扱ってみる | TipLib（ティップリブ）
// ヘッダーの高さを取得する const headerElement = document.getElementById("header"); const headerHeight = headerElement?.offsetHeight ?? 0; // ヘッダーの高さをカスタムプロパティにセットする document.documentElement.style.setProperty("--headerHeight", `${headerHeight}px`); #headerが存在しない場合にoffsetHeightがエラーになるので、オプショナルチェーン（?.）で繋ぎます。 その時にheaderElementがundefinedになるので、Null合体演算子（??）で0を代入します。 特定の要素にカスタムプロパティを設定する
古くて余っているスマホを防犯カメラやペット監視カメラとして復活できる「Alfred Camera」レビュー
スマートフォンを新機種に買い替えていると、家に使っていないスマートフォンがどんどんたまってしまいます。無料アプリ「Alfred Camera」を使えば、余ったスマートフォンを防犯カメラやペット監視カメラとして活用できるとのこと。手軽に使えて便利そうだったので、実際にAlfred Cameraを使って監視システムを構築する手順を確認してみました。 Alfred Camera | Simple Security at Your Fingertips https://alfred.camera/ Alfred CameraにはiOS版とAndroid版が存在しますが、今回はiOS版を使ってみます。 また、Alfred Cameraを使うには「閲覧用のスマートフォン」と「撮影用のスマートフォン」が必要。今回はiPhone 12(左)を閲覧用、iPhone 5s(右)を撮影用に使います。 まずは、閲
【JS】IntersectionObserverで複数を監視 | JavaScriptに関するお知らせ
こんにちは！JavaScriptのnewの意味が4年経ってもあんま分からないMizutani(@sirycity)です。オブジェクト指向に触れ合う機会がなかったの… 今日はIntersectionObserverで複数を監視する方法についてです。あとついでに簡単な書き方も紹介する。 結論 短く書いたバージョン なるべく短く書くとこんな感じ。 window.addEventListener('DOMContentLoaded', () => ['foo', 'bar', 'baz'].map((id, i) => new IntersectionObserver(([e]) => e.isIntersecting ? console.info(`${i}番目のやつが画面に入りました`) : console.info(`${i}番目のやつが画面から出ました`), ).observe(docum
HTMLにちょい足しでできる！ Vue.jsでサクッと動きをつける方法 - ICS MEDIA
Vue.jsは昨今よく使われるモダンなJavaScriptフレームワークの1つです。Node.jsで環境構築し、サイト全体をVue.jsベースで開発することもあります。しかし、フロントエンド開発に慣れていない方やデザイナーにはNode.jsでの環境は少し参入障壁が高いです。 実は、Vue.jsは<script>タグから読み込こめばNode.jsを用いずとも使えます。この方法ならばLP（ランディング・ページ）やWordPressサイトといったHTMLベースのサイトでもVue.jsを活用できるでしょう。本記事ではそのようなちょい足しVue.jsの活用例を、最新のVue Composition APIとESモジュールを使って紹介します。 Vue.jsをちょい足す HTMLに下記のようなコードを足すことで、Vue.jsを<div id="app">の要素内に導入できます。 <div id="app
GitHubのサービスを駆使してウェブサイトの死活監視が無料で行える「Upptime」
ウェブサイトの死活監視サービスは数多く存在しますが、自分でサーバーを用意する必要があったり、監視対象が一定数を超えると有料になったりと、導入に障壁を感じる場合もあります。無料の死活監視ソフトウェア「Upptime」は、GitHub ActionsやGitHub PagesといったGitHubのサービスを使って、簡単にウェブサイトの死活監視を行うことができます。 Upptime https://upptime.js.org/ GitHub - upptime/upptime: ⬆️ Uptime monitor and status page powered by GitHub https://github.com/upptime/upptime UpptimeはGitHub Actionsで5分ごとにウェブサイトの死活監視を行い、ウェブサイトがダウンした場合はGitHubのIssuesに報
)
Stats - メニューバー常駐型のシステム情報表示アプリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ローカルコンピュータの状態を可視化したいと思ったことはないでしょうか。すでに暑い時期は去りましたが、CPUが熱暴走していないか確認したり、メモリの利用状況を確認したい時はあります。そうした負荷上昇は突然あるので、常に表示しておくと便利です。 今回紹介するStatsはメニューバーに常駐するシステムステータス表示アプリです。 Statsの使い方 デフォルトではこんな感じです。小さくて便利。 ネットワーク状況の可視化。 メモリの詳細。 設定画面です。一つ一つ設定するかどうかを指定できます。 StatsではCPU、GPU、RAM、ストレージ、センサー、ネットワークを可視化できます。基本的に立ち上げておくだけですが、気になったときに見てみれば変化が分かるでしょう。特にCPU負荷が上がって動作
無料でスマートフォンをウェブカメラとしてPCに接続可能な「Kinoni」を使ってみた
スマートフォンのカメラをPCに接続して、ウェブカメラ代わりにできる「Kinoni」は無料でダウンロードできるウェブアプリです。スマートフォンとPCをワイヤレスで接続して使用することができ、ZoomやSkypeなどのアプリでもカメラとしても利用できます。 ◆スマートフォン側の設定 KinoniはAndroidおよびiOS,iPadOSデバイスをカメラとして使用することができます。 EpocCam - Webcam for PC and Mac – Google Play ‑sovellukset https://play.google.com/store/apps/details?id=com.kinoni.webcam2 EpocCam Webcam for Mac and PC on the App Store https://apps.apple.com/us/app/epoccam-
ウィンドウサイズに合わせて表示される情報も変わるオープンソースのネットワーク監視ツール「bandwhich」を使ってみた
PCのネットワーク使用状況を確認するツールはWindowsのリソースモニターやLinuxのiftopコマンドなどが有名です。そんなネットワーク監視ツールの一つである「bandwhich」は、CLI上でプロセスごとにネットワークを監視できるコマンドで、ウィンドウサイズに合わせて表示される情報が変化していくツールです。GitHubにソースコードが公開されているので、実際に使ってみました。 GitHub - imsnif/bandwhich: Terminal bandwidth utilization tool (formerly known as "what") https://github.com/imsnif/bandwhich 今回はUbuntuにbandwhichをインストールしてみます。まずはパッケージマネージャーのCargoをインストールするため、下記コマンドを実行します。 cu
watchexec - ファイルが変更されたらコマンド実行
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ファイルを編集したら何かを実行したい、というのは良くあるニーズです。webpackやgulpなどを使えばできますが、JavaScriptが関係ないところでは用意が面倒だったり、大げさに感じてしまうでしょう。Shellスクリプトでもできますが、開発者でないと使いづらそうです。 そこで使ってみたいのがwatchexecです。拡張子を指定するだけで、手軽に利用できます。 watchexecの使い方 実行例です。拡張子を指定して、変更があったら実行したいコマンドを続けるだけです。 $ watchexec --exts md,png echo "Changed" Changed watchexecは拡張子を指定するだけでなく、ディレクトリやサブディレクトリを含めて全体を指定することもできます
マウスの動きやスクロールなど、閲覧ユーザーのブラウザのビューポート状態を監視するスクリプト・「Tornis」 - かちびと.net
Tornisはマウスの動きやスクロールなど、閲覧ユーザーのブラウザのビューポート状態を監視するスクリプトです。シンプルで軽量、依存関係もなく、使いやすい設計となっています。 パララックスの為のスクリプトというわけではなく、ユーザーがどこまでスクロールしたか、マウスの速度や位置、スクロール速度などを監視する事が目的となります。 パララックス効果は作れるけど、基本的にはビューポートの監視を目的としているそうです。 使い方 ソース最後にスクリプトを読み込みます <script src="tornis.js"></script> 監視内容を設定します const trackMouse = ({ mouse, size, scroll }) => { if (mouse.changed) {//マウスの動きを監視 //マウス位置を取得 document.querySelector('.js-curs
Googleがインターネット上で使用するパスワードがデータ侵害にあった危険なものでないかを逐一チェックしてくれる「Password Checkup」をリリース
Googleがインターネット上で使用されるアカウントの不正使用を防止するため、入力したパスワードが第三者によるデータ漏えいの影響を受けていないかを自動で調べる拡張機能「Password Checkup」をリリースしました。 Google Online Security Blog: Protect your accounts from data breaches with Password Checkup https://security.googleblog.com/2019/02/protect-your-accounts-from-data.html Googleでは第三者によるデータ漏えいの影響を受けたGoogleアカウントのパスワードを定期的にリセットしています。この戦略により、「過去2年間で約1億1000万人以上のGoogleユーザーをデータ侵害の魔の手から保護することに成功して
訪れたサイトからどんな第三者サイトに接続しているかが一目でわかるアドオン「Firefox Lightbeam」
我々がウェブサイトを訪問すると、そのウェブサイトに埋め込まれたコードが実行されて、訪問したわけではないサイトに接続しているケースがあります。時には行動監視(トラッキング)のためだったり、あるいはその他の目的だったりして、必ずしも悪意がある事例ばかりではありませんが、見えないところでどこへ接続されているのかは気になるもの。いったい、ブラウジングの中で、我々はどれぐらいの第三者サイトに接続してるものなのか、「Firefox Lightbeam」というアドオンを使って確認してみました。 Firefox Lightbeam https://addons.mozilla.org/en-GB/firefox/addon/lightbeam/ Remaking Lightbeam as a browser extension ★ Mozilla Hacks – the Web developer blo
Diffy.js - JavaScriptでモーション検知 MOONGIFT
例えば監視カメラなどで、定常的に流れている情報を常に記録し続けると容量がどんどん大きくなってしまいます。そこで使われるのがモーション検知です。動きがあった時だけ記録するようにすれば容量が削減されます。 Webカメラでモーション検知を可能にするのがDiffy.jsです。JavaScriptだけで実現できます。 Diffy.jsの使い方 デモです。左右反転させた動画を検証に使っています。 実際に動かすとこんな感じです。 Diffy.jsではどれくらいの割合で検出するかと言った指定ができ、激しく動いた時だけ反応させると言ったこともできます。Webカメラを使った防犯システムのような使い方やモーションキャプチャなども作れそうです。 Diffy.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 maniart/diffyjs: A dependency-fre
クリップボード監視先輩 - クリップボードへコピーすると自動的にストック MOONGIFT
インターネットをブラウジングしながらメモする際など、文字をコピーしてメモ帳に貼り付けという作業を繰り返すことがあります。非常に面倒です。 そこで使ってみたいのがクリップボード監視先輩です。クリップボードへのコピーを監視して、ストックしてくれるソフトウェアです。 クリップボード監視先輩の使い方 全体像です。コピーすると文字列がテキストエリアに入ります。 日付を追加したり、タイトルを自動入力してくれる機能もあります。 画像の場合はパスが入ります。 クリップボード監視先輩を使えば、どんどん文字をコピーしていくような作業が捗るはずです。そしてまとめてどこかに貼り付けたり、プログラムで処理したりするようなことができるでしょう。 クリップボード監視先輩はElectron/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 zaftzaft/cbsnpi: クリップボー
イベント監視中にできる事ふたつ。（DOMおれおれAdvent Calendar 2015 – 20日目） | Ginpen.com
DOMおれおれAdvent Calendar 2015 – 20日目 イベント監視のコールバックでもらえるeventオブジェクト、色々使えます。 UIのデフォルト動作を止める 何と言っても event.preventDefault() が一番良く使われるかと思います。リンクで実装されてるけど見た目も動作もボタンていうね。（できるなら <button> で書いてほしい……。） var elButton = document.querySelector('a#the-button'); elButton.addEventListener('click', function(event) { // リンクの画面遷移をキャンセル event.preventDefault(); // 何かボタンを押した際の処理…… }); ウェブページが持つUIは利用者の操作を受け付けて諸々の「デフォルト」動作を行
Space Radar Electron - Electron製のストレージ/メモリ可視化 MOONGIFT
コンピュータのリソースは使っている内に徐々になくなっていきます。その結果、動きが悪くなったり、最悪エラーを起こすことになります。そうならないためには定期的なチェックが欠かせないでしょう。 今回はリソースをビジュアル化するElectronアプリ、Space Radar Electronを紹介します。 Space Radar Electronの使い方 ドライブ、フォルダ、メモリの解析に対応しています。まず最初に選択します。 フォルダを選んだ場合の解析結果です。 ドリルダウンして詳細な解析ができます。 メモリの解析です。メモリを消費しているソフトウェアが分かります。 メモリもドリルダウンしてチェックできます。 表示方法としてツリーマップも選択できます。 ツリーマップ上から削除もできます。 Space Radar Electronを使えばストレージやメモリの状態が可視化できます。ファイルの整理やメ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【React hooks】要素の変化を検知して何かをするカスタムフックを作成する)
Copy Guard - 不正なクリップボード操作を監視するGoogle Chrome機能拡張 MOONGIFT
jQueryでテキストボックスの変更を監視/検知する - Qiita
