Bookmarklet を改めて学ぶ
業務でもプライベートでも、Bookmarklet 無しには生きていけない私です。
ちなみに最近私が書いて楽だなって思ってるコードはコレです。
javascript:(async () =>{
if (window.self !== window.top) return;
const a = document.createElement("a");
a.href = location.href;
a.innerText = document.title;
const text = `${document.title} ${location.href}`;
const blob_html = new Blob([a.outerHTML], { type: "text/html" });
const blob_text = new Blob([text], { type: "text/plain" });
const data = [new ClipboardItem({
"text/html": blob_html,
"text/plain": blob_text,
})];
await navigator.clipboard.write(data);
alert("コピーした");
})()
今いるウェブページのタイトルと URL をコピーして、リンク付きテキストとタイトル・URL が並んだプレインなテキストの両方をクリップボードに保存する Bookmarklet です。
こうすると、リッチなテキストエディタ（Confluence や Slack など）に貼り付ければリンク付きテキストを貼り付けられ、Vim や Zoom のコメント欄などに貼り付ければプレインなテキストが貼り付けられます。
ちなみにリッチなテキストエディタでも ctrl + shift + v で貼り付ければ、プレインなテキストの方を貼り付けられます。
他の人にリンクを共有する時に便利かと思うので、是非使ってみてください。
ところで Bookmarklet ってなんなんでしょう...？思えば Bookmarklet の公式リファレンスみたいなものを見たことがありませんでした。起源は？どうやって実行できている？調べてみました。
間違ってたらコメント欄でこっそり教えてください。
起源
下記サイトが参考になりそうです。このサイトが Bookmarklet を命名したのかな？
Bookmarklet のアイデアは Netscape JavaScript Guide から来ている、とあります。
http://developer.netscape.com/docs/manuals/communicator/jsguide/misc.htm （developer.netscape.com 自体がもう生きていないようです。ちなみに netscape.com は www.aol.com にリダイレクトしますね。）
Internet Archive にページが保管されていました。2002年頃まで配信されていたようです。
Netscape Navigator 4.0 にツールバーが導入され、ここで Bookmark に JavaScript が書けるようになったとあります。
4.0 は1997年6月リリースのようで[1]、そこから後身の Firefox に引き継がれ、Internet Exploler や後の Google Chrome にも導入され、という流れのようです。
あくまで Bookmark の中で JavaScript を動作させるというもので、特に標準化されているものでも無さそうです。
UserScript や Browser Extension より手軽に書いて実行できるので、第三の選択肢として今後も無くならないでほしいですね...
どうやって実行できている？
Bookmarklet は必ず javascript: から始まります。
先程の Netscape のページでもしれっと javascript: から始まる旨が書かれていましたが、そもそもこれはなんなのでしょう？
ググると次の記事がヒットしました。
Internet Exploler などでは HTML の attribute で JS を書く際にこのプレフィクスが必要だったようです。今は無くても書けますね。
ただ Bookmarklet では他の URL と区別するために、このプレフィクスは必須のようです。
トランスパイル
Bookmark に登録するという性質上、Bookmarklet は1行で書かなければなりません。
今の Firefox と Google Chrome では複数行の JavaScript をブックマークとして登録しようとすると、自動的に改行コードが空白に置換されていそうですが、Internet Exploler などは自動的に置換されず予め1行にしておかなければならないようでした[2]。また意図的に改行を使いたい場合は工夫が必要です。
そのためのツールなどがネット上にいくつかあります。パッと調べたところ使っている人が多そうなのはコチラでしょうか。
この辺はもう少し調べて、後日加筆します。
Discussion