HTMLパーツのダウンロード後の確認方法について

作成日: 2022年10月7日 最終更新日: 2023年9月29日

uWebeeでは、作成したホームページのファイル一式をダウンロードしてご利用いただくことができます。 ここでは、ダウンロードしたファイルをWebブラウザで確認する方法についてご説明します。
ホームページとして公開する前に確認や編集を行う場合、以下にご説明する 1 または 2 の方法でご確認ください。

このページはChromeブラウザの拡張機能「Web Server for Chrome」を利用する方法を記載していますが、「Web Server for Chrome」は最新のChromeで利用できなくなったため、代替手段の説明を追記しました。

1. HTMLファイルを直接開く方法
uWebeeでダウンロードしたファイルを確認する一番シンプルな方法は、ダウンロードしたzipファイルを解凍し、フォルダ内のindex.htmlファイルをWebブラウザで直接開く方法です。

多くのHTMLパーツがこの方法で確認できますが、一部のHTMLパーツは、この方法では正しく表示できません。
PC内に置かれたHTMLファイルをWebサーバーを使わずに直接開く場合、一部のHTMLパーツで使用しているJavaScriptがWebブラウザのセキュリティ上の仕様によりエラーとなってしまいます。 エラーの詳細は、このページの下部でご説明します。

このケースに該当するHTMLパーツをご購入いただいた場合は、次に示す2、3の方法でご確認ください。
2. PC内でWebサーバーを起動する方法
PC内に簡易的なWebサーバーを立ち上げて、Webブラウザからアクセスして確認する方法が利用できます。
ここでは、Chromeブラウザの拡張機能「Web Server for Chrome」を利用する方法をご紹介します。

「Web Server for Chrome」は最新のChromeで利用できなくなっています。 代替手段として、「Web Server for Chrome」の後継アプリ「Simple Web Server」を利用する方法をこちらでご説明します。

Web Server for Chromeの利用方法 (※古い情報です)


Chromeブラウザで「Web Server for Chrome」の拡張機能のページを開き、「Chromeに追加」を行ってください。
Web Server for Chromeの追加
次に、ChromeブラウザのURL入力欄にchrome://apps/と入力して、開いてください。
開いたページにある「Web Server」のアイコンをクリックすると「Web Server for Chrome」が起動します。
Web Server for Chromeの起動
Web Server for Chromeの「CHOOSE FOLDER」ボタンを押して、uWebeeでダウンロード後にzipファイルを解凍した先の index.html ファイルが入っているフォルダを指定してください。
フォルダ選択後、「Web Server: STARTED」と表示されていれば、Webサーバーが起動しています。
Web Server for Chrome起動済み
Webサーバーが起動したら、Webブラウザで http://127.0.0.1:8887 を開いてください。uWebeeで作成したホームページが正しく表示されることを確認できます。

「Web Server for Chrome」については、下記のサイトなどでご確認の上、ご利用ください。
https://github.com/kzahel/web-server-chrome#readme

Simple Web Serverの利用方法


「Simple Web Server」はWindowsやmacOS等で動作するアプリケーションで、シンプルな操作で簡単にPC内でWebサーバーを立ち上げることができます。 上述の「Web Server for Chrome」が最新のChromeブラウザでは利用できなくなったため、その後継として開発されているアプリケーションです。

uWebeeでホームページを作成してダウンロードしたファイルの動作確認方法として、この「Simple Web Server」を利用する方法をご紹介します。

Simple Web Serverのサイトを開くと、ページ中央に「Download」のボタンがあります。クリックしてダウンロードページを開きましょう。

Simple Web Server
https://simplewebserver.org/ja/
Simple Web Serverサイト
Simple Web Server のダウンロードページには、 Windows や macOS 等の各OS用のダウンロードリンクがありますので、ご使用のOS、バージョンにあったインストーラ―をダウンロードしてください。

Windows をご利用の方で 64bit と 32bit のどちらを利用すればよいかわからない方は、以下の Microsoft のサイトが参考になるかもしれません。
 →32 ビットと 64 ビットの Windows: よく寄せられる質問 - Microsoft サポート

また、Windowsにインストールする際、Simple Web Server は署名のないアプリであるため、インストーラ―の起動時に Microsoft Defender により警告画面が表示されるかもしれません。
この画面が表示された場合、「詳細情報」をクリックし「実行」すると先に進むことができます。

Simple Web Serverインストール時の警告画面1
Simple Web Serverインストール時の警告画面2

なお、本記事は Simple Web Server の安全性等を保証するものではありません。また、Simple Web Server に関する質問等のご回答は出来かねますので、ご了承ください。

インストールが完了したら Simple Web Server を起動し、「新規サーバー」ボタンをクリックしてください。サーバー追加の画面が開きます。

Simple Web Serverのサーバー追加画面
「フォルダ選択」をクリックして、uWebee でダウンロードしたzipファイルを解凍後の index.html ファイルが入っているフォルダを選択してください。
ポートはここでは 8080 のままとしておきますが、変更が必要な場合はこちらで変更してください。
フォルダ選択後「サーバー作成」をクリックし、「稼働中」と表示されていれば、Webサーバーが起動しています。

Webサーバーが起動したら、Webブラウザで http://127.0.0.1:8080 を開いてください。 作成したホームページが表示されます。
作成したホームページをブラウザで表示

3. Webサーバーにアップロードして確認する方法
すでにレンタルサーバー等をご利用されている場合など、利用できるWebサーバーをお持ちの場合は、稼働しているWebサーバーにアップロードすれば、ご確認いただくことができます。

Webサーバーにアップロードする例は、こちらのページでもご説明しています。

PC内のHTMLファイルを開くと発生するセキュリティ上のエラーについて

前述の1の方法でPC内に置かれたHTMLファイルを直接開く場合、一部のHTMLパーツでセキュリティ上のエラーが発生します。

Chromeブラウザでのエラー例:

Access to image at 'file:///xxxxx' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

例えば、HTMLパーツ「コズミック・パネル」では、JavaScriptの処理中に画像ファイルを読み込んで使用しています。 このように、HTMLパーツのJavaScriptの中で他のファイルにアクセスするような処理がある場合、PC内にあるHTMLファイルを直接Webブラウザで開くと、JavaScriptからの他のファイルへのアクセスがWebブラウザの仕様によりブロックされます。

これは、WebブラウザでPC内のファイルを直接開いた場合に、同じフォルダやそのサブフォルダにあるファイルであっても「同一オリジン」と見なされず、異なるオリジンのリソースと判定されるためです。
一般的にWebブラウザでは、セキュリティのために異なるオリジンのリソースが読み込まれないように制限されています。 異なるオリジンのリソースへアクセスするための仕組み(CORS)はありますが、ファイルを直接開いた場合にはCORSが適用されず、上記のChromeブラウザの例のようにエラーが発生します。

以上の理由から、HTMLパーツ「コズミック・パネル」は、PC内のHTMLファイルを直接開いた場合、画像ファイルの読み込みがエラーとなり画像が表示されません。 このようなケースでは、前述の2の方法などでWebサーバーを通して確認を行ってください。

「同一オリジン」についての詳細は、下記のサイトなどでご確認ください。
https://developer.mozilla.org/ja/docs/Web/Security/Same-origin_policy