今回はアドベンチャーゲームやノベルゲームを制作できるソフト、ラノゲツクールMV で作成したゲームを WordPress に埋め込んでフルスクリーン表示することができたので紹介したいと思います。
前回の記事では、ラノゲツクールMV で制作したプロジェクトをブラウザゲーム用にビルドして出力されたファイル一式をそのままサーバーにアップロード。WordPress の記事に iframe 要素を使って 埋め込んでいるのですが、そのままではどうも画面が小さく、文字を読むゲームをプレイするにはちょっとしんどい感じです。
これを YouTube の動画のように、フルスクリーンボタンで画面を切り替えたい！ということで手順を見ていきましょう。
ラノゲツクールMV でビルドしたゲームファイルの構造
まずはラノゲツクールMV でブラウザゲーム用にビルドしたゲームファイル構造はこのようになっています。
index.html ファイルをそのままエディターで開くとこのようにhead要素に外部スクリプト読み込みがたくさん書かれていて body要素には空っぽですが…
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="user-scalable=0, initial-scale=1.0">
<meta charset="utf-8">
<!--{PLATFORM_LIBS}-->
<script type="text/javascript" src="data/lib/glMatrix.js"></script>
<script type="text/javascript" src="data/lib/pathfinding-browser.min.js"></script>
<script type="text/javascript" src="data/lib/hammer.min.js"></script>
<script type="text/javascript" src="data/lib/linq.min.js"></script>
<script type="text/javascript" src="data/lib/jszip.min.js"></script>
<script type="text/javascript" src="data/lib/live2d.min.js"></script>
<script type="text/javascript" src="data/lib/Live2DFramework.js"></script>
<script type="text/javascript" src="data/lib/sprintf.js"></script>
<script type="text/javascript" src="data/lib/jQuery.js"></script>
<script type="text/javascript" src="data/lib/jQuery.mousewheel.min.js"></script>
<script type="text/javascript" src="data/lib/webfont.js"></script>
<script type="text/javascript" src="data/ENGINE.js"></script>
<script type="text/javascript" src="data/lib/boot.js"></script>
<script type="text/javascript" src="data/SCRIPTS.js"></script>
</head>
<body style="background-color: black;">
</body>
</html>
実際にブラウザで表示した際のソースコードを確認すると、body 要素内に canvas 要素が追加され、ゲームが描画される形になっています。
<body style="background-color: black; cursor: default;"> <canvas style="background-color: rgb(0, 0, 0); position: absolute; left: 0px; top: 0px; transform: scale(1);" width="1280" height="720"></canvas> </body>
そこで Web ページ内の任意の要素をフルスクリーン表示可能にする Fullscreen API を利用して、この canvas 要素をフルスクリーン表示すればOKということになります。
フルスクリーンモードを使用する – ウェブデベロッパーガイド _ MDN
canvas タグに ID を設定する処理
Fullscreen API を使ってフルスクリーン化したい要素は ID で指定するようなのですが、ラノゲツクールMV でビルドしたindex.htmlのソースを見ると JavaScript から生成される canvas 要素には ID が付いていません。この canvas要素にIDを指定する方法を色々調べたところ、新しくJavascript を使って次のような処理を行うことにしました。
処理の流れ
- HTML の読み込みが完了
- 変数 element に canvas 要素を格納
- 変数 element に格納された canvas 要素から最初の canvas要素に ID “content”を設定
getElementsByTagName は配列で返ってくるんよ！
ここでつまづいたのが getElementsByTagName で取得するのは配列ということ。変数に格納された要素を呼び出すには変数名にインデックス番号を付けないといけないのですが、これに気付くまで大分時間が掛かりました。
作成した JavaScript コード
そして、完成した JavaScript のコードがこちら。index.html の head 要素にこのように書きました。
<script>
// HTMLの読み込みが完了してから実行
window.onload = function() {
// 変数 element に canvas 要素を格納
var element = document.getElementsByTagName("canvas");
// 変数 element の最初の格納値"[0]"にID"content"を設定
// （ getElementsByTagName で取得した要素は配列なのでインデックスを指定）
element[0].setAttribute("id", "gamecontent");
}
</script>
ちなみに、getElementsByTagName で要素を取得する際に、そのままインデックス番号を指定して、このように書いても大丈夫でした。
var element = document.getElementsByTagName("canvas")[0];
element.setAttribute("id", "gamecontent");
動作確認
index.html を Webブラウザで開いてソースコードを確認すると、ちゃんと canvas 要素に ID “gamecontent”が設定されています。
<body style="background-color: black; cursor: default;"> <canvas style="background-color: rgb(0, 0, 0); position: absolute; left: 0px; top: 0px; transform: scale(1);" width="1280" height="720" id="gamecontent"></canvas> </body>
フルスクリーン表示を行う JavaScript の作成
canvas要素に ID の設定ができたので、次は Fullscreen API を使ってゲーム画面をフルスクリーン表示する処理を行います。
参考 Web サイト
フルスクリーン表示を実行するための JavaScriptのコードについては今回はこちらのWebサイトを参考にさせていただきました。
特定の要素を全画面(フルスクリーン)にするFullscreen API
埋め込み元もしくは埋め込み先のどちらでフルスクリーン処理を行うか？
という問題があるのですが、今回はとりあえず、処理を行う JavaScript は埋め込み元の index.html に書いて、フルスクリーンを行うボタンは埋め込み先のWordPress記事に設置することにしました。
作成した JavaScript コード
Webサイトで紹介されているコードを参考にこのようなコードを index.html に追加しました。コード内に書かれている gamecontent が先の手順で canvas 要素に設定した ID になります。
<script>
function fullscreen() {
//Chrome15 以上, Safari5.1 以上、Opera15 以上の場合
if (gamecontent.webkitRequestFullscreen) {
gamecontent.webkitRequestFullscreen();
//Firefox10 以上の場合
} else if (gamecontent.mozRequestFullScreen) {
gamecontent.mozRequestFullScreen();
//Internet Explorer11 以上の場合
} else if (gamecontent.msRequestFullscreen) {
gamecontent.msRequestFullscreen();
// HTML5 Fullscreen API 仕様の場合
} else if (gamecontent.requestFullscreen) {
gamecontent.requestFullscreen();
} else {
// 上記以外の場合
alert("ご利用のブラウザはフルスクリーン操作に対応していません");
return;
}
}
</script>
WordPressにiframe 要素で埋め込んだゲームのレイアウト
ひとまず埋め込み元のファイルの設定はできたので、次は埋め込み先の WordPress の設定になります。
表示するゲームの要素のレイアウトとID名を設定
WordPressの記事に埋め込んで表示する HTML の要素についてレイアウトと ID 名を決めておきます。今回はゲーム画面の下にラノゲツクールMV のロゴ、ゲームタイトル、フルスクリーン表示をボタンを配置することにしました。
実際に使用する要素の ID 名は次の通りです。
- #lng-container：ゲーム画面
- #lng-iframe：埋め込み元のiframe 要素
- #lng-footer：ゲーム画面下のフッター部分
- #lng-footer-logo：ラノゲツクールMV のロゴ
- #lng-footer-title：ゲームタイトル
- #lng-fullscreen-btn：フルスクリーン切替え表示ボタン
WordPressのテーマカスタマイズでCSSの設定
/*ゲーム画面 */
#lng-container{
margin: 0 auto;
width: 600px;
height: 338px;
}
/* ゲーム画面：iframe要素 */
#lng-iframe{
width: 100%;
height: 100%;
}
/* ゲーム画面のフッター */
#lng-footer {
padding: 2px;
margin: 0 auto;
width: 596px;
height: 36px;
background-color: whitesmoke;
}
/* フッター：ラノゲツクールMVロゴ */
#lng-footer-logo {
position: relative;
width: 80px;
height: 36px;
float: left;
background-image: url(wp-content/uploads/visual-novel/TemplateData/lng-logo.png);
background-repeat: no-repeat;
}
/* フッター：ラノゲツクールMV ロゴのリンク */
/* （背景画像をURLリンクとして使用）*/
#lng-footer-logo a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* フッター：ゲームタイトル */
#lng-footer-title {
padding-left: 10px;
font-size: 18px;
font-weight: bold;
line-height: 2.3em;
float: left;
}
/* フッター：フルスクリーン切替え表示ボタン */
#lng-fullscreen-btn {
width: 36px;
height: 36px;
float: right;
background-image: url(wp-content/uploads/visual-novel/TemplateData/lng-fullscreen-btn.png);
background-repeat: no-repeat;
}
/* フッター：フルスクリーン切替え表示ボタン*/
/*（マウスオーバー時）*/
#lng-fullscreen-btn:hover{
cursor : pointer;
background-image: url(wp-content/uploads/visual-novel/TemplateData/lng-fullscreen-btn-hover.png);
background-repeat: no-repeat;
}
フルスクリーン表示を実行する JavaScript の作成
埋め込み先の WordPress 記事にフルスクリーン表示を実行する JavaScript を用意するのですが、記事の中に直接コードを書くとスッキリしないので JavaScript を外部ファイルとして読み込む形式にしました。
コードの内容
外部読み込みの JavaScript ファイルのコードはこのようになりました。
// ID "lng-fullscreen-btn"の要素をクリックしたときの処理
document.getElementById("lng-fullscreen-btn").onclick = function () {
// ID "lng-iframe"の要素（iframe）内の関数 fullscreen() を実行
document.getElementById("lng-iframe").contentWindow.fullscreen();
}
コードが完成したら編集用のファイルとは別にして、改行とコメントと改行をすべて削除してからファイル名”lng-fullscreen.js”で保存。実際使用しているコードはこのように1行になっています。
document.getElementById("lng-fullscreen-btn").onclick = function () {document.getElementById("lng-iframe").contentWindow.fullscreen();}
WordPress の記事内に書く内容
いよいよ仕上げです。WordPress の記事内に書く内容は次の通り。iframe 要素の属性にはフルスクリーン表示を許可する allowfullscreen を書いておく必要があります。フルスクリーン表示を解除するとゲーム画面サイズがおかしくなるのを防ぐために scrolling=”no” の属性も追加しています。