フロントエンド入門：Google ChromeでローカルのHTMLファイルが開けないときの対処法（未実施）

はじめに

・補足：
この記事で紹介している手順は、私自身はまだすべて実施していません。状況に応じて適切な方法を選んで試してみてください。

Google ChromeでローカルのHTMLファイルを開こうとした際に「サイトが安全に接続できません」というエラーが表示されることがあります。

この問題は、Chromeのセキュリティ設定や拡張機能の影響によるものです。本記事では、その解決策を詳しく解説します。

書こうと思ったきっかけ

筆者自身がVS CodeのエクスプローラーからGoogle ChromeにHTMLファイルをドラッグ＆ドロップした際にこの問題に直面しました。

個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。

同じように困っている方がいるのではと思い、対処方法をまとめました。

ローカルファイルのアクセスを許可する

Chromeはセキュリティ上の理由で、ローカルファイル (file://) のスクリプトやリソースの読み込みをブロックすることがあります。

その場合、Chromeの起動オプションを変更することで解決できるかもしれません...（未実施）。

解決策

Chromeを特別なフラグ付きで起動する

1. Chromeを完全に閉じる。

2. ターミナルまたはコマンドプロンプトを開く。

3. 以下のコマンドを実行してChromeを起動する。

   Windows の場合

   chrome.exe --allow-file-access-from-files
   

   Mac の場合

   open -a "Google Chrome" --args --allow-file-access-from-files
   

   Linux の場合

   google-chrome --allow-file-access-from-files
   

4. この状態でHTMLファイルを再度Chromeにドラッグ＆ドロップし、動作を確認。

Chrome の拡張機能が影響している場合

セキュリティ系の拡張機能（例: Adblock, Privacy Badger など）がローカルファイルの読み込みをブロックしている可能性があります。

解決策

1. Chromeのアドレスバーに chrome://extensions/ を入力。
2. すべての拡張機能を一時的に無効にして、再度試す。

セキュリティ設定を一時的に無効化する

ローカルのHTMLファイルが https:// で開こうとして失敗している場合、以下の手順で試してください。

解決策

1. chrome://flags/ にアクセス。
2. Insecure origins treated as secure の設定を検索。
3. file://* を追加して適用。
4. Chromeを再起動。

ローカルサーバーを利用する（推奨）

Chromeのセキュリティ制限を回避するために、ローカルサーバーを立てて http://localhost から開くのが最も確実な方法です。

簡単な方法

VS Code の Live Server 拡張機能を使う

1. VS Code の拡張機能 で Live Server をインストール。
2. HTMLファイルを開き、右クリック → "Open with Live Server" を選択。

または、手動でPythonの簡易サーバーを起動することもできます。

Python 3 の場合

python -m http.server 8000

その後、ブラウザで http://localhost:8000/ にアクセス。

まとめ

• まずは Chromeを --allow-file-access-from-files オプション付きで起動 してみる。
• それでもダメなら、 Live Server や Pythonのローカルサーバーを使うのが確実 です。

以上の方法を試してみて、うまくいかなかったらエラーメッセージなど詳しく調査してみてください！