以前、Processingに関するこの記事で作品を記事に載せることが出来ず、代わりにリンクを付けることで対応していましたが、やっと記事に載せることが出来ました。
WordPressの記事にp5.js作品を埋め込む方法について、いくつかの方法を試して解決した経験を今回の記事で共有します。
試してみたこと
- プラグインの使用
最初はプラグインを使用してp5.js作品を埋め込もうとしましたが、エラーが発生。 - カスタムHTMLブロックへのURL埋め込み
カスタムHTMLに<iframe>でURLを埋め込みましたが、p5.jsのヘッダー部分まで表示されてしまい、投稿ページに馴染みませんでした。 - jsファイル化
p5.js作品のコードをjsファイル化して読み込む方法を試しましたが、読み込みに失敗しました。 - カスタムHTMLへのコード直接記述
p5.jsのコードをカスタムHTMLに直接記述しましたが、意図した場所に表示されませんでした。（何故か「お勧め記事」の下に表示されてしまう）
上記のことを試してみても上手くいかなかったので、さらに調べてみました。
解決策として実行したこと
function.php修正
jsファイルは通常 get_template_directory_uri() で読み込みますが、ファイルが子テーマにある場合は、get_stylesheet_directory_uri() を使用しなければならないとのこと。
というわけで、functions.phpを修正しました。
<!-- PHP -->
<!-- jsファイルの読み込み -->
<!-- JavaScriptを出力するショートコードを定義 -->
function add_custom_script() {
$theme_url =get_stylesheet_directory_uri();
return '<script src="' . $theme_url . '/failname.js"></script>';
}
<!-- ショートコードを追加 -->
add_shortcode('shortcode_name', 'add_custom_script');
add_fractal_script関数
- 関数定義: add_custom_scriptという名前の関数を定義。
- テーマURLの取得: get_stylesheet_directory_uri()を使って、現在のテーマのディレクトリURLを取得し、$theme_urlという変数に格納。
例えば、テーマのURLが https://example.com/wp-content/themes/themename-child であれば、$theme_urlにはそのURLが入ります。 - スクリプトタグの生成: HTMLの<script>タグを生成し、そのsrc属性に$theme_urlと/fractal.jsを結合したものを指定。
- 返り値: 生成した<script>タグタグを関数の返り値として返す。
ショートコードを追加
- ショートコードの定義:
add_shortcode関数（後述）を使ってショートコードを定義。 - ショートコード名: ‘shortcode_name’というショートコード名を設定。
これを使って投稿やページ内にショートコードを挿入できます。 - コールバック関数: ‘add_fractal_script‘という関数をショートコードが呼び出されたときに実行するコールバック関数として指定。
ショートコードの使用
ショートコードを定義すると、WordPressの投稿やページ内に[shortcode_name]のように記述するだけで、ショートコードが実行され
<script src=”https://example.com/wp-content/themes/themename-child/failmname.js”></script>
というスクリプトタグが生成されて挿入されます。
このようにショートコードを使用すると、複雑なHTML構造やスクリプトなどを直接コンテンツに記述する必要がなくなります。便利ですね。そんなショートコードを定義するためにadd_shortcode関数を使います。
add_shortcode関数とは
add_shortcode関数は、WordPress でショートコードを定義するための関数です。
add_shortcode関数の基本構文
<!-- PHP --> <!-- ショートコード関数 --> add_shortcode( 'ショートコード名', 'コールバック関数名' );
- ショートコード名: ユーザーがコンテンツ内で使用する際に入力する短いコード名です。この名前は一意でなければなりません。
- コールバック関数名: このショートコードが呼び出されたときに実行される関数の名前です。この関数はショートコードを置き換えるためのコンテンツ（HTML, CSS, JavaScript 等）を返す必要があります。
ショートコードをカスタムHTMLに書きこむと、jsファイルは読み込まれたようで一応作品は表示されました。
しかし、ここでまた問題発生。p5.jsの作品はコードを直接書き込んだ時と同様にお勧め記事」の下に表示されてしまっていました。
さらにコードの追加
- ショートコードを記事の上に表示させるコードを追加
add_before_content関数を使用して記事の上の部分に表示させるように指定しましたが、上手くいきませんでした。
指定しても修正できないのはおかしいと思い、さらに調べてみるとやっと原因が判明しました。
原因はcanvas
調べたところ、p5.jsのコードにあるcanvasは</body>のすぐ上に配置されるようになっているということが判りました。
jsファイルを修正
// JavaScript
let canvas = createCanvas(300, 300);
canvas.parent('表示させたい要素に付けるID');
createCanvas関数
createCanvas(400, 400);はキャンバスを作成し、そのキャンバスのサイズを400×400ピクセルに設定します。このキャンバスはcanvas変数に割り当てられます。
このcanvasが</body>のすぐ上に来る仕様になっているため、意図しない場所に表示されるという現象が起こっていたのでした。
parent関数
parent関数は、指定されたIDを持つHTML要素内にキャンバスを挿入します。
任意の要素にIDを付ける（例えば<div id=”canvas”></div>など）ことで
作成されたキャンバスがそのHTML要素の子要素として配置されます。
簡単に言うと、parent関数はキャンバスを特定のHTML要素に「紐付ける」ために使用されます。これにより、ウェブページの特定の部分にキャンバスを配置することができます。
p5.jsの作品を載せることが出来ました。
という訳で紆余曲折ありましたが、なんとかp5.jsの作品を載せることが出来ました。
これはp5.jsで作った「フラクタルの木」です。
このコードでは、再帰を使ってフラクタルな枝分かれを実現しています。再帰的な関数呼び出しにより、各枝がさらに小さな枝に分かれていく構造を作ってみました。
コードについては、また改めて記事にするつもりです。
