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

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

あわせて読みたい

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

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

これまでの課題

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

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

WordPress用プラグイン『pg4wp』

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

GitHub

GitHub - sdardour/pg4wp: A WordPress Plugin inserting a phaser.io-based game into individual posts a... A WordPress Plugin inserting a phaser.io-based game into individual posts and pages using a simple shortcode. - GitHub - sdardour/pg4wp: A WordPress Plugin inse...

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

試してみた

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

手順は以下です。

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に詳しい人にとっては、この方法が有効な解決策になるのではないかと思います。