（日記のまとめページはこちら：https://wakky.tech/unity-baseball-game/）
前回はunityroomにWebGLでビルドしたゲームをアップロードして、他の人がゲームを遊べるようにした。ただ、自分でサーバーを契約してwebサイトを運用している人は、自分のページでもゲームを遊んでもらいたい! と思うこともあると思う。そこで今回は、WebGLでビルドしたゲームを、私が契約しているさくらのVPSにアップロードして、Wordpressで作っているブログの中に埋め込んでみたいと思う。
WebGLでビルドしたゲームをサーバーにアップロードする
まず、前回WebGLでビルドしたゲームを、FTPソフト（私はFileZillaを使っている）などでサーバーにアップロードする。どこにアップロードするのが最適なのかイマイチわかっていないが、私はvar/www/html/wp-content/uploads/の以下にwebglというディレクトリをつくり、そこにゲームをアップロードするようにしている。ここに、WebGLで出力してローカルに保存したファイル一式を「Yakyuban」というフォルダに入れて、フォルダごとサーバーのwebglディレクトリにアップロードする。
これで準備は完了。
WordPressの記事内からWebGLのindex.htmlにリンクを張る
タイトルのまんまだが、ゲームを張り付けたいWordpressの記事の中に、以下のようにiframeを使ってゲームを張り付ける。リンク先は、先ほどアップロードしたWebGLのYakyubanフォルダの中に入っているindex.htmlファイルを指定する。
<iframe src=”https://wakky.tech/wp-content/uploads/webgl/Yakyuban/index.html” width=”960″ height=”600″ frameborder=”0″ scrolling=”no”></iframe>
しかし、これで埋め込んでみたところ、微妙に下の画面が見切れている。そもそもUnity WebGLの表示はいらないので、UnityのWebGLのSettingで消しても良いけどビルドし直すのが面倒。今回は力技でheightを縮めて、下を完璧に見切らせるようにする。
<iframe src=”https://wakky.tech/wp-content/uploads/webgl/Yakyuban/index.html” align=”top” width=”960″ height=”570″ frameborder=”0″ scrolling=”no”></iframe>
これで試したみたところ何となくうまくいっているように見えるが、実は横が少し見切れている。このあたりの画枠の最適化については、また調べて方法を書きたいと思う。ちなみに埋め込んだゲームは以下から遊べます。
https://wakky.tech/nostalgic-baseball-game
また、スマートフォン(Android)への移植についても同時に検討していきたいと思う。
