概要
前から、p5.jsのスケッチを溜めておくための、 HTML & JS テンプレートが欲しいと思っていたので作った。
OpenProcessingを使えばいいとも思うけど、 OpenProcessingだとiframeを使っているからなのか、 うまく動かない場合があるし、セルフホスティングした方が使い勝手がいいことも多い。
使い方
https://github.com/enkatsu/p5js-garally-template
上記のテンプレートリポジトリを使って、自分のリポジトリを作成する。 作ったリポジトリを、ローカルにクローンしてきたら、 下記のコマンドで依存パッケージをインストールする。
npm i
スケッチを追加する
下記のコマンドで、新規のスケッチを追加できる。
${SKETCH_TITLE} にはスケッチのタイトルを入力する。
node commands.mjs sketch:add -t ${SKETCH_TITLE}
開発用サーバを起動
下記のコマンドで開発用サーバを起動できる。
npm start
を開くとスケッチの一覧を表示できる。
ビルド
下記のコマンドでビルド結果が ./docs に出力される。
gulpfile.mjs の distDirectory を変更すれば、出力先を変更できる。
npm run build
まとめ
下記のURLが、実際にこのテンプレートを使ったリポジトリとWebページ。
https://github.com/enkatsu/p5js-sketches
https://enkatsu.github.io/p5js-sketches/
今回はHTMLテンプレートエンジンにEJSを使った。 今の主流のテンプレートエンジンが何なのかわからないので、そのうち差し替えるかも。
あとは，テーマを設定できるようにしたいなーとも思ってる。
追記
スケッチのサムネイルを設定できるようにした。
スケッチのディレクトリに thumbnail.png が存在していたら、
スケッチ一覧画面に表示されるようにした。
存在していない場合は、No Image用の画像が表示される。
テンプレートの更新を取り込む方法
以下の手順でテンプレートの変更を取り込める。
git remote add template git@github.enkatsu:enkatsu/p5js-garally-template.git
git fetch --all
git merge template/main --allow-unrelated-histories