マイケル
みなさんこんにちは！
マイケルです！
マイケルです！
エレキベア
クマ〜〜〜〜
マイケル
今日はUnityのWebGLビルドをWordPressで公開する方法
について紹介するよ！
について紹介するよ！
エレキベア
WebGLって何クマ？
マイケル
WebGLはブラウザ上でグラフィック描画するためのJavaScriptAPIで、
例えばunityroomのようにブラウザ上で動作させることができるんだ！
例えばunityroomのようにブラウザ上で動作させることができるんだ！
エレキベア
unityroomもWebGLのビルドを使用していたクマね
ということはこのブログでも公開することができるというクマか
ということはこのブログでも公開することができるというクマか
マイケル
iOSやAndroidのビルドと同じ要領でビルドして
簡単に公開することができるからやってみよう！
簡単に公開することができるからやってみよう！
エレキベア
やったるクマ〜〜〜〜
WebGLのビルド
マイケル
まずWebGLのビルド設定ですが、デフォルトだとビルドエラーが発生するようなので
Decompression Fallbackにチェックを入れておきましょう！
Decompression Fallbackにチェックを入れておきましょう！
マイケル
そしてこの状態でも自分の環境だとブラウザ実行時にエラーが発生してしまいました。
Compression Format(圧縮設定)をDisabledに設定することで解決しましたが、
こちらを変更すると容量が膨れ上がるため注意が必要です。
Compression Format(圧縮設定)をDisabledに設定することで解決しましたが、
こちらを変更すると容量が膨れ上がるため注意が必要です。
↑Compression Format、Decompression Fallbackを変更マイケル
あとはResolution and Presentationから画面サイズを指定しておきましょう！
↑画面サイズの指定マイケル
ビルド設定は以上です！
あとはBuildSettingからビルドを実行しましょう！
あとはBuildSettingからビルドを実行しましょう！
エレキベア
簡単クマ〜〜〜〜
WordPressへのアップロード
マイケル
ビルドが実行したらまずはindex.htmlを開いてローカルで確認・・・・
しようとしてもUnityのWebGLビルドは「file://」でのアクセスを許可していないため、直接開くことはできません。
そのため確認するにはローカルサーバを立ち上げるorサーバにアップロードする必要があります。
しようとしてもUnityのWebGLビルドは「file://」でのアクセスを許可していないため、直接開くことはできません。
そのため確認するにはローカルサーバを立ち上げるorサーバにアップロードする必要があります。
マイケル
ここではこのブログでも使用しているWordPress環境にアップロードしてみます。
場所はどこでもいいですが、アクセスしやすい
public_html/wp-content/uploads 配下にフォルダを作成し、ビルドをアップロードしました。
場所はどこでもいいですが、アクセスしやすい
public_html/wp-content/uploads 配下にフォルダを作成し、ビルドをアップロードしました。
↑WordPress環境にアップロードエレキベア
画像等が格納されるフォルダクマね
マイケル
完了したら、あとはiframeタグで指定するのみ！
下記のようにアップロードしたパスのindex.htmlを設定するとブラウザで起動することができます！
下記のようにアップロードしたパスのindex.htmlを設定するとブラウザで起動することができます！
<iframe id="test" width="800" height="524" src="https://XXX.com/wp-content/uploads/【フォルダ名】/index.html" frameborder="0" scrolling="no"></iframe>
エレキベア
簡単クマ〜〜〜〜
マイケル
まだ整備中ですが、アップロードした例としては下記のようになります！
エレキベア
綺麗に開けてるクマね
注意点１：iframeのサイズにはUnityのフレームも含まれる
マイケル
注意点としては、iframeのサイズにはUnityのフレームも含まれることです！
例えば下記は800×480で出力したビルドですが、
例えば下記は800×480で出力したビルドですが、
マイケル
実際に必要なサイズはUnityフレームの高さ44pxを含めた800×524になります！
サイズ調整がうまくいかない方はこちらを確認してみてください！
サイズ調整がうまくいかない方はこちらを確認してみてください！
エレキベア
これはじゃm・・・いや何でもないクマ
注意点２：iframeのキャッシュがしぶとい
マイケル
そしてアップロードしたビルドを変更したり、サイズを変更しても適用されない！
そんな時はiframeのキャッシュの影響かもしれません・・・。
iframeのキャッシュはかなりしぶといようなので、下記のようにスクリプトで強制的にリロードさせてあげると解決するかもしれません。
そんな時はiframeのキャッシュの影響かもしれません・・・。
iframeのキャッシュはかなりしぶといようなので、下記のようにスクリプトで強制的にリロードさせてあげると解決するかもしれません。
<script>
$('iframe').contentWindow.location.reload();
</script>エレキベア
これは中々な罠クマね
おわりに
マイケル
というわけで今回はWebGLビルドの公開手順についてでした！
どうだったかな？？
どうだったかな？？
エレキベア
思っていたよりも簡単だったから
クマもサイトを作って公開するクマ〜〜〜
クマもサイトを作って公開するクマ〜〜〜
マイケル
気が早いな・・・
だけどモバイルのように審査がなくて手軽なのもいいよね！
だけどモバイルのように審査がなくて手軽なのもいいよね！
マイケル
というわけで、今後はブログにも小さなゲームを
ちまちま出していく予定なのでお楽しみに！！
アデュー！！
ちまちま出していく予定なのでお楽しみに！！
アデュー！！
エレキベア
クマ〜〜〜〜
【Unity】WebGLビルドをWordPressで公開する 〜完〜
コメント