Go to Qiita Advent Calendar 2024 Top
LoginSignup
noriiiii8
@noriiiii8 (Nori Yamada)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

【Google VR View】ローカル環境実行のエラーについて

Q&A

Closed

HTMLCSSJavaScript

初めまして。
エンジニアではないのですが、独学でHTML,CSS,javascriptの知識はほんの少しだけあります。

現在、360度画像をページに挿入したいと思いローカル環境で作成している途中なのですがエラーが出てしまい悩んでいます。

【作業状況】

・マシン：MacBook Air(10.15.5 ,メモリ８G ,)
・ブラウザ：Google Chrome(83.0.4103.116)
・テキストエディタ：atom(1.48.0)
・Google VR viewのスクリプトをHTML内で読み込み
・＜div id="vrview"＞＜/div＞を配置済み
・jsは別ファイルを作成してHTMLから読み込み

【フォルダの階層関係】

∟HTMLファイル
∟CSSファイル
∟JavaScriptファイル
∟images（画像ファイル）
　∟sample.jpg

他の方々のQiita記事や他サイトも調べて、ローカル環境で自分でコードを書いてみたのですが、用意した360度画像(4096×2048 , jpg形式)を読み込めず、エラーになってしまいます。
スクリーンショット 2020-07-12 19.35.08.png

原因を突き止めるべく以下の手順を行ってみたのですが、解決には至りませんでした。

①他の方の360度画像に関するQiita記事内に記載のあるURL（https://〜 で始まるもの）を試しにjsの「image:'',」の中に入れてみる
→二つとも表示された
　→サーバーにアップロードした画像は読み込める

②自分で用意したサンプル画像をWordPressなどにアップロードしてそのURL (https://noriharu.files.wordpress.com/2020/07/sample.jpg) を「image:'',」の中に入れてみる
→エラー
　→URLが正しくない?
　→WordPressっていうのが原因？
スクリーンショット 2020-07-12 23.48.54.png

③＜img＞タグを記述してサンプル画像を読み込んでみる
→画像は表示された
　→パスは間違っていない
　　→Google VR viewはローカルファイルは読み込まない？

①〜③の工程を経て以下の疑問に辿り着いたのですが、これは正しいのでしょうか。
・Google VR viewはローカルファイルの画像は読み込めない？
・新しくサーバーを契約して画像をアップロードする必要がある？

ローカルのフォルダから360度画像をGoogle VR viewで読み込む方法が何かあれば知りたいと思うのですが、そもそもそれは可能なのでしょうか。

2020年7月19日追記

自己解決しました！
結論から言うと、原因はやはり「CORS」の問題でした。

Xserverが10日間無料キャンペーンを実施していたので、試しにサーバーを契約して、ローカル環境ではなく自分のサーバー上にファイルをアップロードして試してみたところ、エラーが起きました。（ここまでは本当に「はあ？」でした）

そこでChromeのデベロッパーツールのコンソールを確認してみたところ、以下のようなエラー文を確認しました。

Access to XMLHttpRequest at 'https://xs624955.xsrv.jp/sample.jpg' from origin 'https://storage.googleapis.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

調べまくっていると、どうやらサーバー側の設定の問題であることが分かりまして、Xserverの「.htaccsess」を直接編集してサーバーの挙動を制御しないといけないことが判明しました。
ネットに転がっていたソースコード？みたいなものに少し手を加えて実行してみると、見事GoogleVRviewで用意した画像が表示されるようになりました。

CDNを用いてVRviewを使用しようとしても、結局のところ自動的に＜iframe＞が用いられており、その際にGoogleapiのところでCORSポリシーに反するということでエラーになってしまっていました。（説明が下手ですみません…）

※実際に「.htaccess」に記述したものです↓

<IfModule mod_headers.c>
<FilesMatch "\.(jpg|mp4)$">
Header append Access-Control-Allow-Origin: "https://storage.googleapis.com"
</FilesMatch>
</IfModule>

もしかするとGoogleVRviewに関する記事を公開されていた方々は、自身でこのサーバー設定を終えられているか、すでにデフォルト設定でこの問題はクリアしていたのかもしれません。（躓くことすらなかったみたいな。）

なんにせよ問題が解決してハッピーです。今回はかなり勉強になりました。
コメントを寄せてくれた方々には感謝しておりますし、同じような悩みで躓いてしまっている方には少しでもこの記事が参考になればと思っております。

0

2Answer

kazatsuyu
@kazatsuyu

見た所 同一オリジンポリシー の問題ではないかと思います。試しに今この場で Chrome ブラウザのdevtoolを開いて

fetch('https://noriharu.files.wordpress.com/2020/07/sample.jpg')

を実行してみたところ、同一オリジンポリシーに引っかかって以下のようなエラーが発生しました。

Access to fetch at 'https://noriharu.files.wordpress.com/2020/07/sample.jpg' from origin 'https://qiita.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

devtoolのコンソールに同じようなメッセージは出力されていませんか？

また、file: URLは、ブラウザごとに挙動が違うことがあるものの、基本的にはブラウザがローカルのファイルを無制限に読み込めないように制約がかかっています（何でもかんでも読み込めてしまったら、「流出したらまずいファイルを読み込んでどこかに送信するHTMLファイル」のようなマルウェアを作成できてしまうからです）HTMLファイルと画像ファイルのパスの関係はどうだったかが分からないと正確なことは言えませんが、同一オリジンと見なされることがない相対パスだった可能性が高いと見ています。

回避策としては、本番で画像ファイルのオリジンとHTMLのオリジンが異なる場合は オリジン間リソース共有 (CORS) の仕組みを使う必要があります。本番は同一オリジンにファイルを置くが、ローカルで相対パスが同一オリジンポリシーに引っかかるだけなら、ローカルにHTTPサーバーを立ててやった方が良いでしょう。

0Like

Comments

  1. @noriiiii8

    Questioner

    ありがとうございます。
    初めての質問投稿だったので、返信があるか不安でしたが、
    こんなにしっかりした内容のコメントをいただけて嬉しく思います。


    たしかに、Chromeのデベロッパーツールで『fetch('htpps://~.jpg')』を実行したところ、同じ文章が赤文字で表示されていました！
    また、白山様にいただいた内容を元に、『ローカルにHTTPサーバーを立てる』ということを実践してみました。

    ①「Web Server for Chrome」というGoogle拡張機能のローカルサーバー立ち上げ機能を使用
    ②対象のフォルダを選択(HTMLファイルやCSS、jsファイル、画像ファイル格納場所)
    ③発行されたURLをChromeで開いてみる


    結果は、エラーでした。


    試しに質問本文①の手順で使用した他の方の画像URLを、こちらの拡張機能で使用したところ正常に表示できました。

    やはりパスが間違っているのでしょうか…？


    【ファイルの階層関係】
    ∟CSSファイル
    ∟JavaScriptファイル
    ∟HTMLファイル
    ∟images（画像ファイル）
    　　　　∟sample.jpg


    諦めたくないのですが、そもそも私の足掻き方に問題があるのでしょうか…？
    いつでも大丈夫なので、どうかまたコメントをいただけると幸いでございます。
KEINOS
@KEINOS

タイトルを「質問です」から、わかりやすいものにすると、より意見がもらえると思います。

一見して「あ、これなら俺答えられるかも」と思えるような、タイトルから概要がわかる感じの。

記事を開かないと内容がわからないタイトルの質問は、開封しないとわからない DM くらい嫌われる傾向があります。

この記事を覗きにきて自分には答えられない内容でしたが「あぁ、もったいないなぁ」と思った次第です。

0Like

Comments

  1. @noriiiii8

    Questioner

    ありがとうございます。
    確かにそうですね、とても参考になりました！
    早速タイトル変えたいと思います。

Your answer might help someone💌

LoginSign Up