ワードプレスで任意の要素ににp5.jsを実装する

皆さまごきげんよう。
現在、地球規模でコロナウイルスが猛威をふるっており大変心配ですね(´ω`。)。
こんな緊急事態にもかかわらず、朝晩満員電車に乗って通勤しなければならないなんて絶対どうかしてると思います!
これを機に、一刻も早くテレワークが世の中に普及することを切実に願う今日この頃です。

さて、本日は前回の”ウェブサイトの任意の要素ににp5.jsを出力する”の実践編として、ワードプレスで任意の要素にp5.jsを表示させてみようと思います!(最初から読んでみたい方はこちら↓も合わせてご覧くださいませ)

目次

  1. p5のsketch.jsファイルを用意する
  2. sketch.jsファイルをphpファイルに読み込ませる
  3. ワードプレスに外部ファイルを読み込ませる
  4. まとめ
“ワードプレスで任意の要素ににp5.jsを実装する” の続きを読む

ウェブサイトの任意の要素ににp5.jsを出力する

皆さまごきげんよう!

未だ正月病が抜けきらずボーッと生きてますが、そんな時こそ
”やる気が出るまで待っていないで、とりあえず始めてみる”
ことを今から実践していきたいと思います!
不思議なことに、気づけば夢中になってやっていますからお試しください(笑)


さて本日は前回の続きになりますが、p5で作ったスケッチを今度は任意の要素に出力してみようと思います。

前回の記事はこちら→ウェブサイトの背景画像にp5.jsを使う方法

目次

  1. p5でsketch.jsファイルを作る
  2. htmlファイルを作る
  3. 任意の要素ににp5.jsを出力する
“ウェブサイトの任意の要素ににp5.jsを出力する” の続きを読む

ウェブサイトの背景画像にp5.jsを使う方法

皆さま、明けましておめでとうございます。

今年は兎にも角にもアウトプットの年にしていこうと思っております!
(毎年同じことを言っている様な気もしますが気のせいでしょう😅)
どうぞ宜しくお願いしますm(_ _)m

さて、本日はp5.jsで作った作品をウェブサイトの背景画像にするにはどうするか?の備忘録です。動画を使わなくても、画面に動きが出て目を引くこと間違いなしですよ!
意外と簡単に出来ますのでサクッとやってみましょう。

“ウェブサイトの背景画像にp5.jsを使う方法” の続きを読む

webGLに便利なdat.GUIを導入する方法

皆さまごきげんよう。

気づけば年の瀬、すっかり寒くなりましたね。このサイトでも冬恒例の雪を降らせ始めました♪ jsファイルを読み込ませるだけで簡単に実装出来るんですよ。jQueryで雪を降らせてみよう

さて本日は、webGLで何か作ってみようと思った時に、実験をもっと簡単にするためのパラメーター調整GUI、『dat.GUI』を使ってみて、とても便利だったのでその導入方法の備忘録です。

“webGLに便利なdat.GUIを導入する方法” の続きを読む

wordpressのサイトをPWA化させてみよう

皆さまごきげんよう。
秋の日は釣瓶落とし。気がつけば日が落ちるのも随分早くなってきましたね〜
( ==)旦シミジミ。

さてそんな秋の夜長に、最近話題のwebサイトのpwa化にチャレンジしてみましたので、本日はその備忘録でございます。

目次
1.アイコン画像を作りwordpressに設置する
2.manifest.jsonファイルを設置する
3.serviceWorker.jsを設置する
4.header.phpにファイルを読み込む記述をする
5.ホーム画面に追加してみる
6.追記

“wordpressのサイトをPWA化させてみよう” の続きを読む

jQueryで背景画像を時間で切り替える

皆さまごきげんよう。
本日は前回の続きになります。jQueryでワードプレスの背景画像を時間で切り替えを実装してみますよ〜。
今回は当サイトで使用中のワードプレス公式テーマ、twenty seventeenをベースにやってみますが、調べ方や導入の仕方は大体同じなのでぜひ参考にしてみて下さい。

メディアに切り替え用の画像を数枚いれておく

メディアに新規追加で、切り替えたい画像を必要な枚数入れておきましょう。

“jQueryで背景画像を時間で切り替える” の続きを読む

ワードプレスでシンタックスハイライトをJavaScriptで実装する方法

皆さまごきげんよう。
こちらはもう一ヶ月以上雨も降らず、正に「東京砂漠」と化しております。
肌も目も喉もカラカラで、乾燥ってこんなに辛いんだ、と初めて思いました。あの夏のジメジメ湿度が恋しい今日この頃です(´ω`。)

さて、うちのワードプレスは無駄にマルチサイトになっております。
そのせいなのか分かりませんが、ワードプレスのバージョンが上がるタイミングなどで、時々今まで問題なく使えていたプラグインがエラーになってしまうことがあります。

以前、コードをハイライトさせるプラグイン wp-code-highlight-js を入れて大変重宝していたのですが、久しぶりにマルチサイトの一つをメンテナンスに訪れてみると、なんとプラグインのエラー表示がヘッダーやフッターに何行も出現しているではありませんか⁂ヽ●┻┓〃ズコッ
“ワードプレスでシンタックスハイライトをJavaScriptで実装する方法” の続きを読む

javascriptで作ったカウントダウンタイマーをワードプレスに実装する

Photo on Foter.com

皆さまごきげんよう。
本日は前回作ったjavascriptのカウントダウンタイマーをワードプレスに実装してみます。
前回の記事はこちら javascriptでカウントダウンタイマーを作る

ワードプレスに実装してみる

前回作ったscriptの部分を、新たにjsファイル(○◯.js)にしてFTPサーバの任意の場所に保存します。
“javascriptで作ったカウントダウンタイマーをワードプレスに実装する” の続きを読む

jQueryで座標を取得してみる

どうも!前回からちょっと間が空いてしまいましたが、すっかり花粉の季節ですね(><); 皆さまいかがお過ごしでしょうか?私はマスクとメガネの日々を過ごしております。マスクとメガネ、二つも耳に掛かっていると本当にストレスなんですよね(´・ω・`)…
さて、今回はjQueryで座標を取得してみようの巻です。
マウスカーソル(タッチデバイスでは指)を画面上で滑らせると、その軌跡に沿って★が描かれるというものです。
このような物を作ってみます。↓

zahyo-wp01

目次
1.座標を取得するには〜offsetとclientX、clientY
2.変数を定義する
3.clone関数で要素にappendToする
4.setTimeout関数とは
5.タッチイベントとマウスイベント
6.まとめ
7.ソース
“jQueryで座標を取得してみる” の続きを読む

Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その弐〜

皆さまこんにちは!厳しい残暑の候、いかがお過ごしですか?
本日は前回の続き、Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その弐〜をお送りします。

〜その壱〜を読んでからでないと何のこっちゃ?だと思いますので、ぜひ目を通してみてくださいませ(^^)ゞ
前回の記事はこちらです。

さて、前回の設定だけでうまくいった方もいらっしゃるかも知れません。しかし私はこの後、投稿した画像が重なって表示されてしまうという現象に悩まされました(笑)
そこで今回は、画像をきちんと読み込んでから表示させるような設定を追加します。
“Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その弐〜” の続きを読む