Webページをブックマークする代わりに、開くとそのページへアクセスできる小さなHTMLファイルをローカルに保存する方法を紹介します。
ブラウザのブックマークとは別に、
- フォルダで整理できる
- USBやクラウドストレージに保存できる
- 通常のファイルとしてバックアップできる
といった使い方ができます。
単一HTMLは、個人用の便利サイトならばAIを使って簡単に作成できますが、便利なサイト作成が可能であるこの手法と相性抜群です。
サンプル
実際に動作するサンプルはこちらです。
ページ内の
「開くとこのサイトにアクセスできるファイルをダウンロード」
を押すと、そのページ自身のURLへ移動するHTMLファイルをダウンロードできます。
保存されるHTML
基本的には、次のような非常に短いHTMLです。
<!doctype html><meta charset="utf-8"><script>location.replace("https://example.com/")</script>
保存したHTMLファイルを開くと、指定したWebページへ移動します。
実装例
現在開いているページ自身のURLを取得し、HTMLファイルとしてダウンロードします。
<button id="downloadShortcut">
開くとこのサイトにアクセスできるファイルをダウンロード
</button>
<script>
document.getElementById("downloadShortcut").addEventListener("click", () => {
const url = new URL(location.href);
url.search = "";
url.hash = "";
const targetBaseUrl = url.href;
const shortcutHtml = '<!doctype html><meta charset="utf-8"><script>location.replace(' + JSON.stringify(targetBaseUrl + "?") + '+Date.now())<\/script>';
const blob = new Blob([shortcutHtml], { type: "text/html;charset=utf-8" });
const objectUrl = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = objectUrl;
a.download = "site-link.html";
document.body.appendChild(a);
a.click();
a.remove();
setTimeout(() => URL.revokeObjectURL(objectUrl), 0);
});
</script>
location.href を使っているため、コード側にURLを固定する必要はありません。
例えばこのHTMLを
https://example.com/tool.html
に置いた場合、そのページ上で生成したHTMLファイルを開くと tool.html にアクセスできます。
ローカルファイル版のブックマークとして使う
一般的なブラウザのブックマークはブラウザ内部に保存されます。
一方、この方法ではリンクそのものを小さなHTMLファイルとして保存します。
そのため、
Webページへのリンクを「ファイル」として持っておく
という使い方ができます。
頻繁に使うWebツールをフォルダへまとめたり、他の資料ファイルと一緒に保管したりする用途では、通常のブックマークとは少し違った便利さがあります。
なお、保存されるのはWebページ本体ではありません。
開いたときに現在の公開ページへアクセスするためのショートカットHTMLです。
単一HTMLを販売する場合は、このHTMLを含めておきたい
単一HTMLを販売する場合は
- 単一HTMLファイル本体
- Web公開版URLが記載されたtxtファイル
- 説明資料
等に「最新版をいつでも使えるHTMLファイル」として、今回紹介したHTMLファイルを入れておきたい所です。
<!doctype html><meta charset="utf-8"><script>location.replace("動作するURL?"+Date.now())</script>
が中身の、拡張子が.htmlのファイルです。
「Web公開版にアクセス.html」的な名称が良いと思います。
下記のサイトで作成すると楽です。