`file://`リンクはなぜ自分だけ開ける？HTML共有が失敗する本当の理由
file URLとlocalhostが他の人には開けない理由を説明し、ローカルHTMLを外部から開ける一時HTTPSリンクへ変える方法を案内します。
file:///Users/name/Desktop/report.html や http://localhost:3000 は
相手のコンピューターでは開きません。どちらもインターネット上のサーバー
ではなく、URLを開いた人自身のコンピューターを指すからです。他の人が
開くには、外部からアクセス可能なサーバーが応答する https:// URLが
必要です。
三つのURLを住所にたとえる
file:// は「自宅の三段目の引き出し」
自分のコンピューターでは正確な場所です。しかし同じ文字列を相手が開くと、 相手のディスク内で同じ場所を探します。そこにファイルがないため開けません。
MDNのURIスキーム文書
は file をホスト依存のファイル名を表すスキームとして説明しています。
メッセージで届くのはファイルではなく file://... という文字列だけです。
localhost は「この建物にある自分のオフィス」
localhost はURLを開いたコンピューター自身を意味します。開発者の
ブラウザーでは localhost:3000 が開発サーバーにつながりますが、相手が
開くと相手のコンピューターの3000番ポートを探します。
ポートを5173や8080へ変えても同じです。ホストが localhost のまま
だからです。
https:// はインターネット上で探せる住所
MDNのURL解説 のとおり、スキームはブラウザーがリソースを取得するプロトコルを決め、 ドメインはリクエスト先のWebサーバーを示します。公開HTTPS URLはどこで 開いても同じサーバーへリクエストします。
| URL | 実際の場所 | そのまま他人に共有 |
|---|---|---|
file:///.../report.html |
現在のコンピューターのディスク | 不可 |
http://localhost:3000 |
URLを開いた端末のローカルサーバー | 不可 |
https://example.com/report |
インターネットからアクセスできるサーバー | 可能 |
相手側のエラーから原因を特定する
| 表示またはエラー | 考えられる原因 |
|---|---|
| リンクとして押せない | アプリが file:// をリンクとして許可していない |
ERR_FILE_NOT_FOUND |
相手のディスクにそのファイルがない |
ERR_CONNECTION_REFUSED |
相手の端末の該当ポートにサーバーがない |
| 接続タイムアウト | プライベートIP、ファイアウォール、ネットワーク分離 |
| 本文は見えるが画像・フォントが壊れる | HTMLにローカル素材のパスが残っている |
最後のケースはHTMLファイルだけが届き、周辺ファイルが付いてこなかった ときに起きます。
画像とCSSだけ壊れる理由
<link rel="stylesheet" href="./styles.css">
<img src="./images/chart.png" alt="四半期ごとの変化を示すグラフ">二つのパスは現在のHTMLファイル周辺のフォルダーを基準に解釈されます。
自分の端末にはあっても、HTML一つだけを公開すると styles.css と
chart.png は存在しません。
file:// では fetch()、Webフォント、モジュールスクリプトが失敗する
場合もあります。MDNのCORS解説
は、多くのブラウザーがローカルファイルを別々の不透明なオリジンとして
扱い、ローカルリソースの要求を遮断する可能性を説明しています。
最初の確認版は次のように作ります。
- CSSを
<style>内に含める - 小さなJavaScriptを
<script>内に含める - 単純な図はインラインSVGを使う
- 外部画像は公開HTTPS URLを使う
C:\、/Users/、./assetsなどローカルパスを削除する
AIツールには次の条件をそのまま渡せます。
共有できる完全な単一HTML文書を作ってください。
- <!doctype html>から</html>までを含める。
- CSSとJavaScriptは文書内へインライン化する。
- 別ファイル、外部CDN、Webフォントに依存しない。
- C:\、/Users/、./assetsなどローカルパスを使わない。
- 360pxのモバイル幅でも読めるようにする。
- APIキー、個人情報、顧客データを含めない。ローカルHTMLをHTTPSリンクにする3ステップ
1. 単一ファイルを準備する
.html、.htm、.md、.markdown のいずれかを用意し、ローカル素材
のパスと秘密情報を探します。
grep -nE '(src|href)="(file:|\./|/Users/|[A-Za-z]:\\)' report.html
grep -nEi 'api[_-]?key|secret|token|password|bearer' report.html正規表現で見つからない個人情報と顧客データは目視でも確認します。
2. HTML2WEBで公開する
HTML-to-URLツールへファイルをアップロードするか、 コードを貼り付けます。ログイン不要の無料経路は1MBまで対応し、有効期限 は30分・1時間・24時間から選択できます。標準は1時間です。
3. シークレットウィンドウで確認して送る
生成されたHTTPS URLをシークレットウィンドウとモバイル幅で開きます。 リンクと画像を確認し、有効期限と一緒に相手へ送ります。
noindex とパスワードが保護する範囲
共有結果の標準 noindex は、検索エンジンへインデックスしないよう伝える
指示です。リンクを知っている人のアクセスを止めるものではありません。
パスワードはアクセスを一段制限しますが、受信者が画面を保存したり内容を 転送したりすることまでは防げません。APIキー、トークン、個人情報、顧客 データは公開前に削除します。
同じWi-Fiでローカルサーバーを開けばよいか
python3 -m http.server とプライベートIPを使えば、限定された環境で
共有できます。ただし、ファイアウォール、端末間通信の遮断、IP変更、
暗号化されないHTTP、実行フォルダーの公開範囲を自分で管理する必要が
あります。
隣の席で短時間の開発テストをする用途には使えますが、顧客や外部の同僚へ
送る標準方法には向きません。サーバーを起動したら作業後に Ctrl+C で
終了します。
一時リンクと本番デプロイの境界
デザイン案、不具合再現、会議の草案、1ページのレポートには一時リンクで 十分です。2か月後も同じURLを開く必要がある、検索表示、利用者入力、 独自ドメイン、監視が必要なら本番デプロイを選びます。
よくある質問
相手が file:// リンクを開く方法は本当にないのか
相手のディスクにも同じファイルがあり、パスまで一致する必要があります。 一般的なWeb共有の方法としては使えません。
ファイル自体を添付してもよいか
可能ですが、モバイルではダウンロードが必要で、別画像とCSSがあれば再び 壊れる可能性があります。レビューだけならリンクの方が簡単です。
Markdownも同じ方法で共有できるか
はい。HTML2WEBはMarkdownファイルのアップロードと貼り付けにも対応します。
失効したリンクを復元できるか
元ファイルから新しいリンクを作れます。同じURLを維持する必要があるなら、 一時共有ではなく本番ホスティングへ移します。