プラグインを使用してWordPressの投稿画面にp5.jsの実行画面を表示する方法の覚え書きです。
プラグイン「Gutenberg」をインストール
まず、ブログ管理画面の左側メニューの「プラグイン」→「新規追加」ページでプラグイン「Gutenberg」を検索し、インストール後有効化する。
プラグイン「p5.js Block」をインストール
次に、プラグイン「p5.js Block」をインストールし、有効化する。
ブロックエディターを用いる設定に変更
ブロックエディターを使用する必要があるので、旧エディターを使用している場合は「設定」→「投稿設定」より、ブロックエディターを用いる設定に変更しておく。
投稿作成画面に移動
「投稿」→「新規追加」より、投稿作成画面に移動し、＋ボタンをクリックすると、追加するブロックの内容を選択することができる。「フォーマット」内に「p5.js」ブロックがあるので、それを選択する。
「sketch.js」内のコードを入力
「Write p5.js」と書かれている部分に、p5.jsで作成した「sketch.js」内のコードを貼り付ける。「プレビュー」をクリックすると、p5.jsの実行画面を下書き内で確認することができる。
記事全体のプレビューも確認し、問題なく作動しているか確認する。
注意点
プラグイン「p5.js Block」の注意書きより
- Currently, this plugin does not work with
createCanvas(windowWidth, windowHeight). You’ll need to use actual integer values like,createCanvas(700, 400). - Currently, this plugin does not include the
p5.dom.jsor thep5.sound.jslibraries.
2020年4月29日時点では、createCanvas(windowWidth, windowHeight)というコードは使用できない（誤作動すると思われる）ので、使用している場合は代わりにcreateCanvas(700, 400)など、直接数値を指定するコードに置き換える必要がある。さらに、p5.dom.jsとp5.sound.jsというライブラリはこのプラグインに含まれていないので、これらを必要としている部分がコード内にあると誤作動の原因になる。
今後の課題
p5.jsの実行画面の大きさをWordPressの投稿画面内で変更する方法が分からず、画面全体が表示されない状態になっています。方法が分かり次第追記しようと思います。
追記
別の方法で実行画面の大きさを指定することができました。
WordPressの投稿画面にp5.jsの実行画面を表示する方法（ファイルマネージャー使用）
上記のファイルマネージャーを使用する場合、inflameで実行画面の大きさを指定することができます。ただし、途中でp5.jsのフォルダの内容を変更したくなった場合、ファイルマネージャーから削除して変更後のものをアップロードし直すことになります。
プラグイン「p5.js Block」を使用すると、WordPressの投稿編集画面内でsketch.js内のコードを編集できるので、実行画面の大きさを指定する方法が分かればこちらの方法も便利なのではないかと思います。
