ーー
UnityのWebGLでビルドしたアプリをwordpressで初めて公開してみたのですがやはり色々行き詰ることも多かったです。その解決法を伝授しましょう。
流れとしては
①UnityのWebGLでビルド
↓
②FTPでwordpressにアップロード
↓
③記事に埋め込む
これだけなのですがその際の注意点を書いていきます。
まず①のビルドですが
ProjectSettings->Player の項目で
Compression Format を Gzip にする。
Decompression FallBack にチェックを入れる。
これをしないと正常に表示されませんでした。
②FTPでwordpressにアップロード
ビルドしたフォルダをFTPでアップロードします。
/wp/wp-content/uploads/webgl/loto/
ここにビルドしたindex.html と Build フォルダを置きます。
③記事に埋め込む
<iframe src="ここにindex.htmlのアドレスを書きます" width="960" height="600" frameborder="0" allowfullscreen="allowfullscreen"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></span></iframe>
ワシのロト６ランダム抽選アプリのアドレスなら
https://bouoexpress.xyz/wp-content/uploads/webgl/loto/index.html
<iframe src="https://bouoexpress.xyz/wp-content/uploads/webgl/loto/index.html"
これでOK。なんですがこのアドレスが曲者でしてね。
：問題その１：
Not Found
「申し訳ありません。お探しのページはありませんでした。」
はい、これでしばらく行き詰ってイライラしました。
ここにおいでの方も同じ症状でイライラされているかもしれませんね。
でもここに来たからにはもう大丈夫。結論としては
「アドレスを間違えている」
これなんです。
↑ こういう構成になっていて ↑
↑ こうなっているとですよ、↑
<iframe src="https://bouoexpress.xyz/wp/wp-content/uploads/webgl/loto/index.html"
こうなると思うじゃないですか！？
ところがそうではなく正解のアドレスはこれなんです。
<iframe src="https://bouoexpress.xyz/wp-content/uploads/webgl/loto/index.html"
つまり /wp/ がいらない。
自分のサイトのフォルダ構成がどうなっているか知るには
何でもいいので自分のサイトにある画像を右クリック
↓
新しいタブで画像を開く でそのアドレスを見てください。
これを見てuploads/ 以下
uploads/webgl/loto/index.html"
とすればOK。
：問題その２：
ボタンが真っ白
はい、これの原因は単純でテキストを日本語で書くとこうなるようです。
英数字は大丈夫です。
：問題その３：
思ったようなレイアウトにならない
このようにですね、下にスクロールバーが出て全体が表示されませんでした。全体を表示させたいんですよ。
index.html を修正します。
<canvas id="unity-canvas" width=960 height=600 tabindex="-1"
style="width: 960px; height: 600px; background: #231F20"></canvas>
今こうなってるところを
<canvas id="unity-canvas" tabindex="-1"></canvas>
このように変更します。
さらに <head> ～ </head> の間に
<style>
html, body {
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
}
#unity-canvas {
width: 100%;
height: 100%;
display: block;
background: #231F20;
}
</style>
これを追加。さらに
<body style="text-align: center; padding: 0; border: 0; margin: 0;">
こうなってるのを
<body>
にすると
はい、この通り。思い通りになりました！
今回作ったロト６・ロト７・ミニロト ランダム抽選機はこちら
