はじまり
![135ml](https://www.endorphinbath.com/wp-content/uploads/2021/10/01_kinkinbeer135ml_001-2.jpg)
今回は、WebページにProcessingの表現ができちゃうよ的なツールの「P5.js」をCocoonテーマのブログ上で使用する手順をまとめたよ。
![リサちゃん](https://www.endorphinbath.com/wp-content/uploads/2021/10/02_nayutarisa_001-1.png)
あいよ!
![135ml](https://www.endorphinbath.com/wp-content/uploads/2021/10/01_kinkinbeer135ml_001-2.jpg)
以下が手順になります。どうぞ~。
![リサちゃん](https://www.endorphinbath.com/wp-content/uploads/2021/10/02_nayutarisa_001-1.png)
あいよ!
今回の手順
今回、P5.jsをCocoon上で使用するための設定手順は以下になります。僕は固定ページ上のみに設定しました。
※SiteGuardが入っている前提での設定手順になります。
- まず、「Cocoon設定」の「アクセス解析・認証」では設定できないことを知る。
- なので、固定ページ内のHTMLの中にscriptタグを入れる。
- P5.jsの描画したものを表示する場所の指定をする。
1. 「Cocoon設定」の「アクセス解析・認証」では設定できないことを知る。
まず、僕はheadタグの中にmetaタグを入れたときと同様に、scriptタグを入れました。
画像では入っていませんが、「Cocoon設定」の「アクセス解析・認証」の「ヘッド用コード」の中に、以下のコードを入れました。
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.min.js"></script>
![](https://www.endorphinbath.com/wp-content/uploads/2021/11/20211223_01-1024x571.jpg)
しかし、入れた後に「変更をまとめて保存」をクリックすると、こんな風にSiteGuardのチェックに引っ掛かってしまうのです。なんてことだ!
![](https://www.endorphinbath.com/wp-content/uploads/2021/11/20211223_02-1024x227.jpg)
試しに自分のブログのDBに潜って、直接、p5.min.jsのファイルを置いてそこを読み取るようにソースを書き直してみたのですが、無情にも同じ画面が出てきました。Oh, my god.
![](https://www.endorphinbath.com/wp-content/uploads/2021/11/20211223_02-1024x227.jpg)
なので、headの中に置くという選択肢は諦めました。色々WAFをいじるのもあれなので。
2. 固定ページ内のHTMLの中にscriptタグを入れる。
次に、試した固定ページの中に入れてしまうという方法です。つまり、bodyタグの中に入れるということですね。これは上手くいきました。
「カスタムJavaScript」の中に書いたP5.jsのコードはこちらになります。白い丸が表示されます。
let d = 100;
function setup() {
canvas = createCanvas(windowWidth, windowHeight);
}
function draw() {
clear();
// 直径をマウスのx座標にする
circle(mouseX, mouseY, d);
}
function mouseClicked() {
if (d == 100) {
d = 300;
}else if (d == 300) {
d = 100;
}
}
それで、固定ページに書いたHTMLはここに配置しました。
![](https://www.endorphinbath.com/wp-content/uploads/2021/11/20211223_03-1024x452.jpg)
そして、表示はされました。
しかし、これだと記事の下に表示されてしまって、なんか違うんですよね・・・(「あ」と「い」の間に表示したい・・・)
![](https://www.endorphinbath.com/wp-content/uploads/2021/11/20211223_04-1-1024x496.jpg)
3. P5.jsの描画したものを表示する場所の指定をする。
描画する場所を指定するためには、HTML上で描画するタグを指定するのと、Javascriptを修正する必要があります。まず、描画する場所はここに指定しました。(「あ」と「い」の間ですね。)
![](https://www.endorphinbath.com/wp-content/uploads/2021/11/20211223_06-1-1024x358.jpg)
そういえば、先程記載し忘れていたのですが、このHTML文を書いた後にこのブロックからフォーカスアウトすると、そのブロックが以下の状態になります。この状態だとちゃんとページに保存されないので、「・・・」(三点リーダー)をクリックして、「HTMLに変換」をクリックします。
そうすると、更新したさいにちゃんとこのHTML文が反映されます。
![](https://www.endorphinbath.com/wp-content/uploads/2021/11/20211223_05-1024x213.jpg)
そして、「カスタムJavaScript」の中に書いたP5.jsのコードはこちらに修正しました。
result
のIDに描画されるようにします。
let result = document.getElementById('result');
let d = 100;
function setup() {
let canvas = createCanvas(windowWidth, windowHeight);
canvas.parent(result); //canvasを指定した要素の子要素にする
}
function draw() {
clear();
circle(mouseX, mouseY, d);
}
function mouseClicked() {
if (d == 100) {
d = 300;
}else if (d == 300) {
d = 100;
}
}
すると、このように表示され、目当ての場所にP5.jsが描画されました。
![](https://www.endorphinbath.com/wp-content/uploads/2021/11/20211223_07-1024x514.jpg)
![](https://www.endorphinbath.com/wp-content/uploads/2021/11/20211223_08-1024x294.jpg)
おしまい
![135ml](https://www.endorphinbath.com/wp-content/uploads/2021/10/01_kinkinbeer135ml_001-2.jpg)
なんとか描画が出来て一安心です・・・。今回はこんなもんになります。
![リサちゃん](https://www.endorphinbath.com/wp-content/uploads/2021/10/02_nayutarisa_001-1.png)
これでこのページでもProcessing的なことを書けるわけだね。
![135ml](https://www.endorphinbath.com/wp-content/uploads/2021/10/01_kinkinbeer135ml_001-2.jpg)
うん、Processingは大学の頃にやっただけなので、これからボチボチいじっていきますかあ・・・。
![リサちゃん](https://www.endorphinbath.com/wp-content/uploads/2021/10/02_nayutarisa_001-1.png)
Creating Codingの始まりじゃあ~~
以上になります!
コメント