Menu

WebGL版のビルド内容をローカル環境で確認する方法

さて前回の記事でWebGL版のビルドを成功させたのもつかの間、

勢いから唐突なエラーに衝突してしまう😫

問題を解決するために提示された方法は・・・😰

 

といった感じの状態だったかと思う。

 

おそらくメインでFirefoxを使用している人の場合はかからない罠かと思う。

今回はGoogle Chromeでの問題点だったので解決方法を提供しよう😉☝

 

Google Chromeセキュリティの解決

エラーの原因は、Chromeではローカル環境からWebGLが利用する

Html5やJavascriptのプログラム的コンテンツを開く際に

セキュリティ上の観点からChromeが勝手にブロックしてしまうことにある😖🙌

 

ローカルかどうかを判断する基準は、htmlを当然Explorer上から開いたときだが、

アドレスバーに「file:///」から始まるアドレスが記載されているときだ。

回避方法は「ローカルでなければよい」のでFtpでサーバーにアップロードすることで動作は可能だ。

 

ただ、いちいちトライアンドエラーする際にFtp経由でhtmlを上げるのも面倒だよね😉✋

そこで、簡易Webサーバーを立ててそこで確認しようという話🤔

とはいえApacheを自分でセットアップできるなら何も悩むことはないのだが、

誰でも簡単にWebサーバーをお手軽に立てられる方法を見つけてきた。

 

スポンサーリンク[pc-mieru][/pc-mieru][sp-mieru][/sp-mieru]

Web Server for Chromeアプリを使う

Web Server for ChromeというChromeインストール用のアプリケーションがある。

これを使うことで手軽に誰でも簡易サーバーを立てられるぞ💪😤

 

上記のリンク先からアプリのインストールを行ったら、新規タブを開き

左上にあると思うコレを選択してアプリランチャーを起動し

これを選択して起動するよ👇

 

こんな感じの画面が出てくると思う。

まずは「CHOOSE FOLDER」を選択して、Webサーバーのルートフォルダとなるべきフォルダを指定しよう。

開発中のWebGLのビルド結果を出力するフォルダ郡の一つ上の階層などを指定しておき、

その下の階層でROM番号をフォルダ管理しておけば、ROM番号を書き換えるだけで

ROMの切り替えが出来るのでおススメだ😉👌

 

さて、指定したらその下のスイッチをクリックすると、

ステータスが「Web Server: STARTED」に変わり、Web Server URLが表示されるようになる。

ここで表示されるURLが、先ほど指定したフォルダと対になっている

わかりやすく例としてTriRingのROM出力フォルダを持ってきた。

この場合WebGLのフォルダをルートフォルダとして指定しているため、

「170518」のROMを開きたい場合は、

http://127.0.0.1:8887/170518/index.html

とChromeのアドレスバーに入力してエンターを押すことでROMが起動できるようになる。

 

ここからROMを「170519a」に切り替える場合は

http://127.0.0.1:8887/170519a/index.html

と対応するフォルダ名の部分を書き換えてあげれば、簡単に切り替えられるぞ☺🙌

 

これならば出力してそのままブラウザを更新すれば確認できるのでとてもお手軽だ。

この方法でWebGL版を簡単に実行デバッグしてみよう。

 

ではまた👋😇💨

 

スポンサーリンク

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です