ブラウザで表示中のローカルHTMLをシームレスにテキストエディタで開く (カスタムURLスキーム + Tampermonkey)

Webサイト開発時など、ローカルHTMLをブラウザで表示中に「このページを編集したい」となったとき、ターミナルやテキストエディタやエクスプローラに移動してからそのページのパスを指定して開く必要があると思います。

移動が面倒なので、ページの右上にテキストエディタを開くボタンを設置しました。

私のケースでは具体的に、saku:C:/Users/Cookie/hoge.html というURLを開くとサクラエディタでそのファイルを開くカスタムURLスキーム saku: を登録し、TampermonkeyでURLを開くボタンをページ右上に設置するようにしました (下図)。

• この記事にはWindowsでの設置手順を示します。他OSでも原理上同様のことができるはずですが、設置手順がより煩雑かもしれません。
• カスタムURLスキーム登録のためにレジストリ操作が必要です。レジストリ操作の注意点を理解の上で実施ください。
• ローカルHTMLファイルに自動でボタンを設置するためにTampermonkeyが必要です。Tampermonkey導入の上での注意点を理解の上で導入ください。

設置手順

• 以下ではサクラエディタ C:\Program Files (x86)\sakura\sakura.exe を開く想定です。手元のお好きなエディタのパスに直してください。
• 以下ではカスタムURLスキーム名を saku: とします。手元の既存スキーム名と重複しないお好きな名前を決めてください。

手順1. スキーム名:ファイルパス を渡すとテキストエディタを開くスクリプトを用意する

カスタムURLスキームを登録すればURLから好きなアプリを起動できますが、基本的にはスキーム名を含むURL全体がアプリに渡され、そのままではファイルパスとして扱えないため、スキーム名を除去するラッパースクリプトを用意します (スクリプト名は好きにしてよい) (ここではpowershellで書いたが、同様に機能するならpowershellでなくてもよい)。

saku.ps1

$path = $args[0] -replace '^saku:', ''
Start-Process 'C:\Program Files (x86)\sakura\sakura.exe' -ArgumentList $path

コマンドプロンプトで以下のように実行し、手元のテキストファイルが開くか確認します。

powershell -ExecutionPolicy Bypass -File saku.ps1 saku:C:/Users/Cookie/hoge.txt

手順2. カスタムURLスキームをレジストリに登録する (手順1. のスクリプトを起動するように)

下記のようにスキーム名及び手順1. のスクリプトを起動するコマンドを記入した saku.reg を作成し (ファイル名は好きにしてよい)、ダブルクリックしてカスタムURLスキームをレジストリに登録します。

saku.reg

Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\saku]
"URL Protocol"=""

[HKEY_CLASSES_ROOT\saku\shell\open\command]
@="powershell.exe -ExecutionPolicy Bypass -File \"C:\\Users\\Cookie\\.local\\bin\\saku.ps1\" \"%1\""

以下をブラウザのURL入力欄に貼り付けてエンターキーを押下し、手元のテキストファイルが開くか確認します (ブラウザに「Windows PowerShell を開きますか?」と訊かれたら許可します)。

saku:C:/Users/Cookie/hoge.txt

手順3. ローカルHTMLならカスタムURLスキームでそのファイルを開くボタンを設置する Tampermonkey ユーザスクリプトを登録する

ここまで用意したら、後は「ローカルHTMLファイルならカスタムURLスキームでそのファイルを開くボタンを設置する」Tampermonkey ユーザスクリプトを登録します (以下)。スキーム名が saku: でない場合は location.href = 'saku:' + p; の箇所を変更ください。ボタンの位置やボタンに表示する文字も好きに変更ください (私は右上に表示しています)。

なお、もしカスタムURLスキーム名が私と同じ saku: なら、こちらの Gist にスクリプトをアップロードしてあるので、Gist raw URL からインストールできます。

open-with-saku-protocol.user.js

// NOTE:  Requires the saku: protocol to be registered.

// ==UserScript==
// @name         Open with saku: protocol
// @namespace    http://tampermonkey.net/
// @version      2026-04-03
// @description  Add a button to open this file with the saku: protocol.
// @match        file:///*.html
// @grant        none
// @noframes
// ==/UserScript==
(function () {
  'use strict';
  const btn = document.createElement('button');
  btn.textContent = 'sakura';
  Object.assign(btn.style, {
    position: 'fixed', top: '8px', right: '8px', zIndex: '999999',
  });
  btn.addEventListener('click', () => {
    const p = location.pathname.replace(/^\/([A-Za-z]:)/, '$1');
    location.href = 'saku:' + p;
  });
  document.body.appendChild(btn);
})();

上記のスクリプトを登録すると共に、TampermonkeyがローカルHTMLファイルにアクセスできる設定になっているかも確認ください (Chromeの場合、拡張機能の管理画面からTampermonkey詳細画面に入って「ファイルの URL へのアクセスを許可する」をオンにする必要があります)。

これでローカルHTMLファイルを開くと、右上にテキストエディタを開くボタンが出て、ブラウザからシームレスにテキストエディタを開けます。初回はブラウザに「Windows PowerShell を開きますか?」と訊かれますが、2 回目以降は訊かれなくなります。