RPGツクールMV製ゲームをブログや自サイトに埋め込む方法

　RPGツクールMV製のゲームはインターネット上に一般公開できるのが特長で作成したゲームを自分のサイトやGithub等で自由に公開できます。あとはそのURLを広く周知すればいいだけですが、ブログやWebサイト上にゲーム画面を直接埋め込むことも可能です。そこで本稿ではそのやり方を簡単に説明します。なお、導入には基本的なHTMLタグに関する知識が必要です。

「iframe」タグを利用する

　iframeタグを利用すると、異なるサイトのドキュメントをインラインフレーム内に表示できるようになります。以下はその一例です。

<iframe id="gameFrame" allowfullscreen width="816" height="624" src="https://triacontane.github.io/PluginDevelopment/" sandbox="allow-same-origin allow-scripts"></iframe>

　各属性について説明します。

• src:ゲームのURLを設定します。
• width:ゲームの解像度(横幅)を設定します。
• height:ゲームの解像度(高さ)を設定します。
• sandbox:コンテンツにセキュリティの観点から制限を掛けることができます。指定する場合、最低限「allow-same-origin」と「allow-scripts」がないと起動しません。
• allowfullscreen:設定しておくとゲームをフルスクリーンで表示できるようになります。

iframeタグの仕様詳細はこちらをご覧ください。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/iframe

ゲームの開始と終了が可能なボタンを用意する。

　このとおりiframeタグを定義すれば、自作のツクールMV製のゲームを埋め込むことができますが、src属性に最初からURLを設定しておくとブログを開いた時点でゲームが開始されてしまいます。昨今、スマートフォンから開かれることも多いので、音量や通信量の面で問題がありますね。そこで専用のボタンを用意してボタンが押されてからゲームが開始されるようにしてみましょう。加えて、ゲーム開始後すぐに操作できるようにフォーカスをゲーム画面に移動しています。

<input type="button" value="ゲームを始める" onclick="gameFrame.src='https://triacontane.github.io/PluginDevelopment/'; gameFrame.focus();"/> <input type="button" value="ゲームを止める" onclick="gameFrame.src='';"/>

　onclickイベントでiframeのidに指定したsrc属性にゲームのURLを動的に設定しているだけです。スクリプト言語はMVユーザにはおなじみのJavaScriptですね。ついでに終了ボタンも用意してみました。

実際に埋め込んでみる

　実際に私がGithubにあげたゲームを埋め込んでみました。「ゲームを始める」ボタンで開始します。なお、プラグインのデモ用プロジェクトなので、まともなゲームとしては動作しません。ご了承ください。通常ではMV製ゲームでのリロードはF5(ページリロード)ですが、この場合はWebサイトそのものをリロードしてしまうのでゲームだけをリロードしたい場合、再度「ゲームを始める」ボタンを押下すればOKです。

---

(C)2015 KADOKAWA CORPORATION./YOJI OJIMA

---

操作方法

• Z, Enter:決定
• X, Esc:キャンセル・メニュー
• Shift:ダッシュ
• F3:画面にフィット
• F4:フルスクリーン

まとめ

　ゲームをサイトに埋め込むことで操作方法や権利表記、使用素材明細をゲーム画面外に記述することもできますし、場合によってはアフィリエイト収入も期待できますね。今回はお試しということで最低限の機能のみ解説しましたが、外観にもこだわることでよりゲームの雰囲気を醸し出すこともできるかもしれません。以上、ツクールMVならこんなこともできますよー、という紹介でした。