ime.nu もどきを作ってリンク先のファイル保存を効率化する
2ちゃんねる (現5ちゃんねる) のレスに貼られた URL をクリックすると、ime.nu というドメインのページが間に挟まる。リファラを隠す効果だったり、掲示板の運営費を賄ったりする目的があるという。
ime.nu の仕組みは簡単で、
https://ime.nu/https://example.com/
のように、遷移したい URL の手前に https://ime.nu/ を付ければ良いだけだ。そして自分は、この ime.nu のページで表示される「対象 URL へのリンク」を右クリックして、「リンク先のファイルを保存」するのによく使っていたりする。対象の URL に直接遷移するとブラウザ内でファイルが開いてしまい、動画ファイルなんかだと上手く保存ができなかったりすることがあるので、「リンク先のファイルを保存」を確実にやりたい時に、コレを利用している。
ブックマークレットで ime.nu もどき
毎度 ime.nu を手入力するのは面倒なので、次のようなブックマークレットを作ってみた。
data:text/html,<script>u=prompt('URL?');document.documentElement.innerHTML=`<a href="${u}" target="_blank">${u}</a>`;</script>
通常のブックマーク URL の代わりに Data URI を使って、真っ白なページを用意して、そこで JS を実行している。window.prompt() で URL の入力を求め、その内容をアンカー (a) 要素で表示するだけ。
保存したいファイルの URL 文字列をコピーしたら、このブックマークレットを開いて、プロンプトにペーストしたら、表示されるリンクを右クリックして保存、という流れになる。
Async Clipboard API を使ってみる
Async Clipboard API という、クリップボードを参照してみたり、コピーを実現してみたりする機能があるらしい。今までクリップボード関連でよく使っていた document.execCommand('copy') や document.execCommand('paste') とはまた違う API だ。初回のみ、ブラウザにクリップボードの操作を許可してやる必要があるものの、コレなら開発者ツールを開いたりせずとも「貼り付け」が出来るっぽいので、試してみた。
↑ このページを開くと、開いた時点でクリップボードにコピーしていた文字列を利用してリンクを生成する。後で再入力できるようにテキストボックスも用意しておいた。
コードは以下で確認できる。
JS の本質部分のみを抽出したコードを以下に掲載する。
document.addEventListener('DOMContentLoaded', () => {
// 「Paste」ボタンをクリックした際に Async Clipboard API を利用する
// (デモでは「Paste」ボタンは opacity: 0 で非表示にしてある)
document.getElementById('paste').addEventListener('click', () => {
navigator.clipboard.readText()
.then((text) => {
console.log('クリップボードから取得した文字列 : ', text);
// 取得した文字列を使ってリンクを作りページに挿入する
document.getElementById('output').innerHTML = `<a href="${text}" target="_blank">${text}</a>`;
})
.catch((error) => {
console.warn('失敗', error);
});
});
// テキストボックスの入力に合わせてリンク文字列を更新していくところ
document.getElementById('input').addEventListener('input', (event) => {
const text = event.target.value;
document.getElementById('output').innerHTML = `<a href="${text}" target="_blank">${text}</a>`;
});
});
// ページ初期表示時に「貼り付け」ボタンをクリックする操作を再現し、自動貼り付けを実現する
window.addEventListener('load', () => {
const paste = document.getElementById('paste');
paste.focus();
paste.click();
});
navigator.clipboard.readText() という API で、クリップボードの文字列を参照できる。ページ初期表示時はこの処理を行うボタンを click() してやることで、ページを開いた時に自動的にリンクが表示されている、というような動きを実現した。
このページをブックマークしておけば、保存したい URL 文字列をコピーする → ブックマークを開く → 表示されているリンクを右クリックして保存する、ということで、手動での貼り付けが必要となるブックマークレットと比べて一つ手順を省略できる。
些細なことだけど、よくやる作業は、ちょっとでも楽できるようにする。その中で、ついでに新しいお勉強も、ちょっとだけしてみると、自分のためになる。
