すべてのページで標準のスクロールバーを表示する

はじめに 様々なウェブページがあります。この頃、モバイル対応やレスポンシブ対応の結果、デスクトップ環境のサイトでもスクロールバーを非表示にするサイトが出始めました。 モバイル環境であれば、スクロールバーを非表示にして表示領域を確保するのは良い方法です。ですが、デスクトップ環境では...

ユーザスクリプト作成時の覚書

目次 ユーザスクリプトとは 拡張機能の種類 ドキュメント インストール ユーザスクリプトの公開と検索 デバッグ 実行タイミング よくある失敗事例 簡単なバグフィックス・仕様の揺らぎ 後方互換性の問題 ブックマークレット 備考 ユーザスクリプトとは ユーザスクリプトとは、ブラウザの...

JavaScript疑似プロトコルとは：「javascript:」

JavaScriptプロトコル 「 javascript: 」で始まるプロトコルです。 プロトコルであるため、「 http: 」や「 file: 」と同じ位置づけの機能です。 ただし、デファクトスタンダード（事実上の標準）な機能であり、有効なURIスキームではありません。そのため...

analytics.jsのブロックを検出する

はじめに GoogleAnalyticsをブロックされている場合、問題が発生することがあります。ブロックされた場合、機能制限をかけるためにブロックを検出する処理について考えます。 ブロックパターン analytics.js/tags.js の読み込みブロック Measuremen...

JavaScriptのグローバル変数未定義エラーの回避方法

はじめに JavaScriptでは、未定義のグローバル変数へのアクセスでエラーを出力します。ここでは、エラーを回避して、未定義を判定する方法を考えます。 失敗例 下記のコード例では、グローバル変数の未定義エラーで失敗します。 if (a) { console.log('...

First Paint (FP) をJavaScriptで検出する

目次 はじめに FirstPaintの時間を取得する タイミングを取得する：requestAnimationFrame() タイミングを取得する：PerformanceObserver タイミングを取得する：performance.getEntriesByType('pa...

Cumulative Layout Shift (CLS) をJavaScriptで検出する

はじめに これまで、DevToolsのPerformanceタブからレイアウトシフトを確認していました。ですが、これだと目視する必要がある上に自動化できません。調べてみると、Layout Instability APIが見つかったのでそれの覚書です。 ※PageSpeed Ins...

JavaScriptでマウスの位置にある要素を取得する

面白そうな関数なので覚書 φ(..)メモメモ... document.elementFromPoint() var x = 100; var y = 100; var element = document.elementFromPoint(x, y); document.addE...

ZIPでファイルをまとめてダウンロード.user.js

目次 はじめに 本ユーザスクリプトの利点 動作概要 使い方 コード 既知の問題 参考 はじめに ウェブページ内にあるファイル（主に画像）をまとめてダウンロードしたいと思ったことはないでしょうか？世の中には、たくさんのダウンロード方法があります。ですが、それは、大抵すべてをダウンロ...

JavaScriptで右クリックを禁止・禁止解除する

JavaScriptで右クリックを禁止する ページ全体で右クリックを禁止する window.addEventListener('contextmenu', function(e) { e.preventDefault(); }); //window.onconte...

タッチスクリーンであるかをJavaScriptで判定する

タッチスクリーン有無判定 // タッチスクリーン有無判定 var isTouchDevice = function() { return 'ontouchstart' in window; }; 理屈 タッチスクリーンがある場合、 window.ontouch...

ゼロパディング・スペース埋め【JavaScript】

簡易な3桁のゼロパディング処理 function zeroPadding(number) { return ('000'+number).slice(-3); } console.log(zeroPadding(1)); // 001 console....

二次元配列の初期化【JavaScript】

目次 二次元配列の配列リテラルによる初期化 二次元配列の初期化 二次元配列の文字列からの初期化 二次元配列の配列リテラルによる初期化 const array = [ [1, 2, 0, 0, 0, 0, 0, 0, 0, 0], [3, 0, 0, 0, 0, 0, 0,...

JavaScriptでn秒間待機する方法（sleep処理）

目次 n秒待機する（ES2017対応async/await） n秒待機する（ES2015対応Generator） n秒待機する（ES2015対応Promise） n秒待機する（setTimeout） n秒待機する（XMLHttpRequest） n秒待機する（ループ） 補足 参考...

文字列を1文字ずつ配列に入れる【JavaScript】

目次 String.prototype.split() Array.from() スプレッド構文 補足（２バイトを超える文字） 参考 String.prototype.split() var str = '分割する文字列'; var ret = str.split...

【JavaScript】英数字の全角半角変換

!"#$%&'()*+,-./ 0123456789:;<=>? @ABCDEFGHIJKLMNO PQRSTUVWXYZ[\]^_ `abcdefghijklmno pqrstuvwxyz{|}~ ！＂＃＄％＆＇（）＊＋，－．／ ０１２３４...

ServiceWorkerを無効化する

はじめに ServiceWorkerと言うこの頃話題の機能がブラウザに追加されました。既存のウェブページではできなかった。スマホのアプリのような機能をブラウザで実現できる素晴らしい機能です。ただし、ユーザの事前承認なしに登録できます。 ServiceWorkerは、スマホアプリの...

アプリのピュニコード対応（日本語ドメイン対応）した

はじめに CopyTabTitleUrl をピュニコード対応しました。ピュニコード対応が予想外に簡単だったので記事にしておきます。 ピュニコード（Punycode）とは 日本語ドメインなどの国際化ドメイン名で使われている文字符号化方式です。詳しくは、次のサイトなどを参照して下さい...

URLの書式（username, password, etc...）

URLのユーザ名とパスワードの書き方 http://username:password@example.com/ http://username@example.com/ http://password@example.com/ ※ユーザー名は、ログインサイトでユーザー名入力をス...

GoogleAnalyticsを遅延読み込みする

はじめに GoogleAnalyticsの遅延読込みです。 analytics.js と ga() の設置処理を遅延処理します。遅延処理であるため、最後まで遅延した処理が呼び出されないことがあります。 onLazy.js は、最悪でも unload イベントで通知されます。ただし...