js ブックマークレットのメモ書き
はじめに
この投稿は自分用のメモ書きなので、参考を利用することで説明をできるだけ省き、保存しておきたいコードなどをメモ書きすることに徹する。
ブックマークレットとは
ブックマークレット (Bookmarklet) とは、ユーザーがウェブブラウザのブックマークなどから起動し、なんらかの処理を行う簡易的なプログラムのことである。携帯電話のウェブブラウザで足りない機能を補ったり、ウェブアプリケーションの処理を起動するために使われることが多い。
Wikipedia『ブックマークレット』より
作成方法
作り方を忘れたときは大体 Bookmarkletを作ろう(準備編) - Qiita を見ている。(魚拓)
本題:普段使っているもの
markdown 用のリンクを取得
ブログを書くときにいつも使う。
// copy text to clipboard: e.g. [Google](https://www.google.com/)
javascript: 'use strict'; ( function () { const a = `[${document.title.trim()}](${location.href})`; navigator.clipboard.writeText(a) .then( () => { alert(`Successfully copied ${a}`) }, () => { alert("Unfortunately failed to copy..") } ) })();
javascript: 'use strict'; (function(){const a=`[${document.title.trim()}](${location.href})`;navigator.clipboard.writeText(a).then(()=>{alert(`Successfully copied ${a}`)},()=>{alert("Unfortunately failed to copy..")})})();
はみ出した Element を見つけるやつ
- TAK on Twitter: "予期せぬ余白や横スクロールが生じた際に全称セレクタ+outline指定で確認している人が多いけど、デベロッパーツールのConsoleに以下のスクリプトをコピペしたほうが速いと思ってます 枠線の表示だけでなく、実際に横スクロールを起こしている要素も出力可能です サンプル: https://t.co/gkFmFg6ZCk https://t.co/tsRwkQqZ7h" / Twitter
- CODEPEN | tack-dcxi 横スクロールの原因を調べる
こちらのコードをそのまま利用するとUncaught ReferenceError: $$ is not defined
となるので、一部弄って
javascript: ( function () { const a = document.documentElement.clientWidth; Array.from(document.getElementsByTagName("*")).forEach(function (b) { b.style.outline = "1px solid tomato"; a < b.clientWidth && console.log(b) }) })();
javascript:'use strict';(function(){const b=document.documentElement.clientWidth;Array.from(document.getElementsByTagName("*")).forEach(function(a){a.style.outline="1px solid tomato";b<a.clientWidth&&console.log(a)})})();
こうなる。
