UnityWebGLをWordPressに埋め込みたかった話

こんにちは。

今回はWordPressに関する覚書きをnoteに残すというよく分からない行為をします。興味のある方はお付き合いください。

先に結論を言っておくと、UnityWebGLは結局WordPressに埋め込めていません。解決策を探してこの記事に行き当たった人は申し訳ありませんが、これをやってもダメだということで参考になれば幸いです。

　

1.UnityWebGLをWordPressに埋め込みたいと思った経緯

「Unityで作ったゲームサンプル（クソゲー）をwordpressに埋め込んで色んな人に見てもらえないものか」と思い立ったからです。

色々やりたいことが多く色んなことに挑戦してみたんですが、ゲームに関しては色々あって興味を無くしたので制作することはなさそうです。プログラミング自体に興味を失ったわけではないので、そちらの勉強は続けていきます。興味が再燃したらまた作るかもしれませんがとりあえずは。

　

2.UnityWebGL形式でビルドするんじゃあ

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

　

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

（なお現在は色々あってWindows使用です）

　

Unity2018.03で気をつけるべき事柄といえば、シーンを追加してビルドするぐらいですかね。とりあえずは。（Unity2018.03執筆当時の最新バージョンでした）

　

3.WordPressに埋め込むんじゃあ

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

　

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

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

はい。iframeという謎の言葉が登場しました。理解が及んでいなかった私は、こちらでiframeとはなんぞやとざっくりと知り、あとはサーバーにファイルを置くだけだ。

しかし……。

初心者あるある。

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

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

当サービスのサーバーでは、ホームページのデータを「../ドメイン名/public_html/」以下へアップロードしていただく必要があります。<br>初期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

　

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

　

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

 

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

　

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

　

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

　

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

　

というわけで途中ではありますが締めます。

　

4.まとめ

☆ビルドするときはセッティングのところでシーンを追加すべし。

☆htmlのiframeを用いると埋め込みでWebGLが出来る（っぽい）

☆XSERVERの場合、public_htmlディレクトリ以下にファイルをおけば、iframeから利用することが出来る

 

ちなみに今回の記事で動き出したとしている埋め込み大作戦ですが、noteに移行していることからもわかる通り頓挫しています。というか、ゲームを作ること自体に興味を失ったみたいな所があるので、このお話は詰めません。ご容赦ください！

　

それでは今回はこのへんで。

ここまで読んでくださりありがとうございました！