iframeを使わずにPhaserゲームをWordPress記事に埋め込む方法

どうもです、タドスケです。

あわせて読みたい

【WordPress】記事内にJavaScriptのゲームを埋め込む方法 どうもです。タドスケです。 https://tadosuke.com/game/959/ Phaserチュートリアルの記事で、作成したゲームを記事内に埋め込んでいます。 この埋め込み方法について、...

以前に上げたこの記事について、進展がありましたので報告します。

これまでの課題

上記記事の内容は、
iframeを使ってPhaserのゲームを貼り付けた別のhtmlを記事内に埋め込む
というものでした。

これでも見た目上は十分に動作しますが、できれば記事内に直接貼り付けたいと思っていました。

WordPress用プラグイン『pg4wp』

情報を探していたところ、以下のWordPress用プラグインを見つけました。

GitHub

Build software better, together GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 420 million projects.

プラグインの説明によれば、
プラグインがインストールされた状態で記事内にショートコードを含めることで、ゲームを埋め込める
とのこと。

試してみた

先に結論から言いますと、確かに埋め込むことができました。

手順は以下です。

1. GitHubからプラグインをzipでDLする
2. WordPressのプラグイン設定ページからプラグイン（zipファイル）をインストールする
3. 記事内にショートコードを入れる

GitHubからプラグインをzipでDLする

GitHubページを開き、Code ボタンを押してDownload ZIP を選択します。

WordPressのプラグイン設定ページからプラグイン（zipファイル）をインストールする

WordPressのプラグイン設定ページから新規追加を選択し、

プラグインのアップロード→ファイルを選択し、ダウンロードしたzipファイルを選択するとインストールされます。

インストールが完了したら、プラグインを有効化します。

記事内にショートコードを入れる

あとは記事の編集画面から、ショートコードを選択して入力するだけです。

問題点

この方法の問題点は、埋め込むゲームを指定できないことです。

プラグインエディタでソースコード（phpファイル）を覗いてみると…

zip内にあるassetsフォルダ以下のjsファイルを指定しているようです。

指定しているjsファイルの中身を見てみると…

Phaserのゲームコードが書いてありました。

つまり、プラグインのassetsフォルダ以下のjsを差し替えれば、任意のゲームを貼り付けられると考えられます。

しかしこのやり方の場合、プラグイン一つにつき一つのゲームしか貼り付けることができません。

対策案

考えられる対策は以下です。

1. 貼り付けたいゲームごとに内部のショートコードタグを書き換え、別々にプラグインをリネームしてインストールする
2. プラグインを改造し、ショートコードにゲームIDを追加で指定できるようにする（[pg4wp:game1]とか）
3. プラグインの内部でやっていることをよく理解し、必要な処理だけを抜き出す

いずれにせよ、WordPressプラグイン、PHPに関する知識が必要になります。

まとめ

以上、iframeを使わずにPhaserゲームをWordPress記事内に貼り付ける方法についてまとめました。

プラグインを改造する知識は必要になりますが、「頑張ればできる」ことはわかりました。

PHPに詳しい人にとっては、この方法が有効な解決策になるのではないかと思います。