【Unity】WebGLビルドをWordPressで公開する

UnityWordPress関連WebGL

2022-04-13

マイケル

みなさんこんにちは！
マイケルです！

エレキベア

クマ〜〜〜〜

マイケル

今日はUnityのWebGLビルドをWordPressで公開する方法
について紹介するよ！

エレキベア

WebGLって何クマ？

マイケル

WebGLはブラウザ上でグラフィック描画するためのJavaScriptAPIで、
例えばunityroomのようにブラウザ上で動作させることができるんだ！

フリーゲーム投稿サイト unityroom

エレキベア

unityroomもWebGLのビルドを使用していたクマね
ということはこのブログでも公開することができるというクマか

マイケル

iOSやAndroidのビルドと同じ要領でビルドして
簡単に公開することができるからやってみよう！

エレキベア

やったるクマ〜〜〜〜

WebGLのビルド
WordPressへのアップロード
おわりに

WebGLのビルド

マイケル

まずWebGLのビルド設定ですが、デフォルトだとビルドエラーが発生するようなので
Decompression Fallbackにチェックを入れておきましょう！

マイケル

そしてこの状態でも自分の環境だとブラウザ実行時にエラーが発生してしまいました。
Compression Format(圧縮設定)をDisabledに設定することで解決しましたが、
こちらを変更すると容量が膨れ上がるため注意が必要です。

マイケル

あとはResolution and Presentationから画面サイズを指定しておきましょう！

マイケル

ビルド設定は以上です！
あとはBuildSettingからビルドを実行しましょう！

エレキベア

簡単クマ〜〜〜〜

WordPressへのアップロード

マイケル

ビルドが実行したらまずはindex.htmlを開いてローカルで確認・・・・
しようとしてもUnityのWebGLビルドは「file://」でのアクセスを許可していないため、直接開くことはできません。
そのため確認するにはローカルサーバを立ち上げるorサーバにアップロードする必要があります。

マイケル

ここではこのブログでも使用しているWordPress環境にアップロードしてみます。
場所はどこでもいいですが、アクセスしやすい
public_html/wp-content/uploads 配下にフォルダを作成し、ビルドをアップロードしました。

エレキベア

画像等が格納されるフォルダクマね

マイケル

完了したら、あとはiframeタグで指定するのみ！
下記のようにアップロードしたパスのindex.htmlを設定するとブラウザで起動することができます！

<iframe id="test" width="800" height="524" src="https://XXX.com/wp-content/uploads/【フォルダ名】/index.html" frameborder="0" scrolling="no"></iframe>

エレキベア

簡単クマ〜〜〜〜

マイケル

まだ整備中ですが、アップロードした例としては下記のようになります！

【ゲームセンター】エレキシューティング3D

カニをひたすら倒す3Dシューティング！◆操作方法Aキー：左回転移動Dキー：右回転移動Kキー：エレキショット（上下スライドで方向転換可能）Lキー：エレキビーム◆ゲームモード・ノーマルモード決められた...

エレキベア

綺麗に開けてるクマね

注意点１：iframeのサイズにはUnityのフレームも含まれる

マイケル

注意点としては、iframeのサイズにはUnityのフレームも含まれることです！
例えば下記は800×480で出力したビルドですが、

マイケル

実際に必要なサイズはUnityフレームの高さ44pxを含めた800×524になります！
サイズ調整がうまくいかない方はこちらを確認してみてください！

エレキベア

これはじゃm・・・いや何でもないクマ

注意点２：iframeのキャッシュがしぶとい

マイケル

そしてアップロードしたビルドを変更したり、サイズを変更しても適用されない！
そんな時はiframeのキャッシュの影響かもしれません・・・。
iframeのキャッシュはかなりしぶといようなので、下記のようにスクリプトで強制的にリロードさせてあげると解決するかもしれません。

<script>
$('iframe').contentWindow.location.reload();
</script>

↑iframeを強制リロード

エレキベア

これは中々な罠クマね

おわりに

マイケル

というわけで今回はWebGLビルドの公開手順についてでした！
どうだったかな？？

エレキベア

思っていたよりも簡単だったから
クマもサイトを作って公開するクマ〜〜〜

マイケル

気が早いな・・・
だけどモバイルのように審査がなくて手軽なのもいいよね！

マイケル

というわけで、今後はブログにも小さなゲームを
ちまちま出していく予定なのでお楽しみに！！
アデュー！！

エレキベア

クマ〜〜〜〜

【Unity】WebGLビルドをWordPressで公開する〜完〜

初めてのWebGL 2 第2版 ―JavaScriptで開発するリアルタイム3D...

￥4,400

Webgl: Up and Running: Building 3D Graph...

￥4,810

Unityの教科書 Unity 2021完全対応版 2D&3Dスマートフォンゲー...

￥2,970

UnityWordPress関連WebGL

2022-04-13

【Unity】Timeline × Excelでスライドショーを効率よく制作する

2024-10-31

【Unity】Boidsアルゴリズムを用いて魚の群集シミュレーションを実装する

2024-05-28

【Unity】GoでのランキングAPI実装とVPSへのデプロイ方法についてまとめる【Go言語】

2024-04-14

【Unity】第二回 Wwiseを使用したサウンド制御〜インタラクティブミュージック編〜

2024-03-30

【Unity】第一回 Wwiseを使用したサウンド制御〜基本動作編〜

2024-03-30

【Unity】第二回 CRI ADXを使用したサウンド制御〜インタラクティブミュージック編〜

2024-03-28

【Unity】第一回 CRI ADXを使用したサウンド制御〜基本動作、周波数解析編〜

2024-03-28

【Unity】サウンドミドルウェアに依存しない設計を考える【CRI ADX・Wwise】

2024-03-27