UnityWebGLをwordpressに埋め込みたい話(1)

NO IMAGE

Unityで作ったサンプルのクソゲーをwordpressに埋め込めないものか、と思い立ってから何時間か奮闘しました。ちょっと今日の作業はここまでにしようと思うので、初心者ながら調べてここまでわかったことを記して備忘録にします。

 

まず、WebGL形式でビルドすることに関してはnaichi’s lab様のHPがわかりやすかったので参考にさせて頂きました。

ビルド対象シーンを追加することをしていなくて、うちの可愛いMacbook proが悲鳴をあげていたのはいい思い出です。ごめんな、Mac。

 

Unity 2018.03で気をつけるのはシーンを追加してビルドするぐらいですかね。

とりあえずは。

 

wordpressでの埋め込みに関してはCOREVALE様の以下のサイトを参考にさせて頂きました。

 

<iframe src=”http://〜〜/index.html” width=”560″ height=”390″ scrolling=”no” frameborder=”0″></iframe>

というコードを打ち込み、サーバーにファイルをおけばいいのだとは理解できました。

 

以下のサイトでiframeとはなんぞや、とざっくりと知り、

https://developer.mozilla.org/ja/docs/Web/HTML/Element/iframe#attr-sandbox

あとはサーバーにファイルを置くだけだ。

 

しかし……。

初心者あるある。

どこにファイルを置いたらwordpressから利用出来るかわからない。

 

まあ調べたらわかったのでオールオッケーなんですけどね。一応忘れないよう&同じ初心者に向けて書いておきます。以下、僕が利用しているXSERVERの場合の話になります。XSERVERのWebFTPサーバーのpublic_htmlディレクトリ以下におけばいいみたい。

 

当サービスのサーバーでは、ホームページのデータを「../ドメイン名/public_html/」以下へアップロードしていただく必要があります。
初期FTPアカウントで接続をすると、「ドメイン名」フォルダが表示されますので、 その中の「public_html」フォルダへアップロードを行ってください。
ご参考:アップロードしたファイルをブラウザで確認する際のURL
アップロードしたファイルの位置
URL
/example.com/public_html/index.html
http://example.com/ でもOK
/example.com/public_html/test.html
http://example.com/test.html でもOK

XSERVER HP

メインディレクトリの下層にあるpublic_htmlというディレクトリのさらに下層がホームページ等々から利用できる場所らしいです。

 

そして、利用するときは、public_htmlのディレクトリの記述は飛ばして、/example.com/public_html/index.htmlなら/example.com/index.htmlと書くことで利用できます。

 

そもそもこのホームページ作ったことも記事にしたい。借りたドメインでやるかとか無料の所を借りてやるかとかいろいろ考えた結果、サーバーレンタルして、wordpressで作ってみた話したい。初心者でも頑張りゃ作れたんだという証を残しておきたいです。まあそれは追い追い書くとして。

 

 

ただサンプルちょっと作ってみたよーって話と、同じ本やっている人が奇跡的にいれば動くようになったUnity 2018.03版のコードも公開しようかなと思っていただけなのに。

 

結果的にゲームをこのブログ上で公開できるようにしようという試みがスタートしてしまいました。最後にはやらないといけないことなので、嫌なことを先にやるんだと考えることにしました。結果オーライ!

 

オーライじゃねーよ。まだ解決してねーよ。

 

というわけで途中ではありますが、

今回のまとめ

  • ビルドするときはセッティングのところでシーンを追加すべし。
  • htmlのiframeを用いると埋め込みでWebGLが出来る(っぽい)
  • XSERVERの場合、public_htmlディレクトリ以下にファイルをおけば、iframeから利用することが出来る

 

忘れんなよ!(自戒)

 

また進んだら続き書きます。