カテゴリー
未分類

WebGLをWordPressに埋め込む

WordPressウルトラスーパーガチ初心者用です。

unityroom様でもともとWebGL用ゲームを公開していましたが、身内用のゲームや開発中のゲームは自分のサーバーで動かしたいと思い、チャレンジしてみました。

①自作のUnity開発ゲームをWebGL形式でビルド。

今回はビルドできる前提ですのでビルドの詳細は割愛させていただきます。

nachi’s lab様のサイトで詳しく説明されています。

②サーバーにWebGLファイルをアップロードする。

環咲いであ様のサイトを参考にさせていただきました。

私はXserverを利用しているので、XserverのWordPress用ディレクトリの下層にある「public_html」フォルダ下に①で出力したWebGL形式ファイルをアップロードするということでした。

ファイルのアップロードは初めてだったので、Xserverのファイルエディターでアップロードできると思ってたのですが、何度やってもアップロードできない…

調べてみると、FTPソフトなるものが必要ということが判明!!

「あー、FTPね。聞いたことあるわー。常識なんやろな。」と思いつつ、今回は無料FTPソフト「FileZila」を使用させていただきました。

インストール・初期設定についてはProEngineer様のサイトを参考にさせていただきました。

③WordPressにHTMLを埋め込む

さて、無事アップロードができたら、HTMLの埋め込み最終工程です。

とはいっても、大学でも個人でも、HTMLをほとんど触ってこなかったので、簡単な方法ないかなーと探していたところ、WordPressのエディタにあるじゃないですか!「カスタムHTML」なるものが!!

そしてここに何も考えずに打ち込むのは、

<iframe src="//~~/index.html" width="ゲームの縦幅" height="ゲームの横幅" scrolling="no" frameborder="0"></iframe>

です!!!

“//~~/index.html”

の「~~」のところは、「public_html」記述を抜いた、サーバー内のindex.htmlまでのパスを記述します。

私の場合は、

「//nianagoblog.com/WebGL/Make7/index.html」

といった感じです。

ここで躓いたことは、

私はまず最初に「”http://~~/index.html”」と記述していましたが、ゲーム画面が出てきませんでした。

右クリ→検証で確認してみたところ、

こういうエラーが出ており、調べたところ、「http:」記述を省略することで解決するらしい!

早速省略すると、

動いた~~~~~~!!!!

これで万事解決。unityroom様の力を借りずとも、自力でWebGLが動きました!めでたしめでたし。

ゲームの縦幅、横幅はエディタで確認しながら設定するといいと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です