create-p5-project

CDNjs から p5js を取得する p5 project テンプレート生成コマンドである．

p5-manager を参考にした．

p5-manager は p5js のライブラリをローカルにダウンロードしているが， create-p5-project では p5js をCDN経由で取得している．

p5-manager ほどの機能はなく，p5を動かせる最低限のテンプレートを生成するもの．

追記

2021/2/3: 自作モジュールの追加や削除もできるようになった．

Setup

npmには公開してないので，create-p5-projectを使うためには このレポジトリをcloneして， npm linkでコマンドのパスを通す必要がある．

いらなくなったらnpm unlinkでコマンドのパスを外せる．

Commands

プロジェクトの生成

プロジェクト(フォルダ)を生成したい場所で使う

$ create-p5-project new myproject

• 生成されるフォルダとファイル

myproject
|-- index.html
`-- scketch.js

これで一応p5で遊べる準備はできた．

index.htmlとscketch.jsは，リポジトリのtemplates/の中に入っているので， 自由にカスタマイズしてつかいまわしてOK．

p5jsのversion確認

最新のp5jsのversionを確認する．

$ create-p5-project version

プロジェクトが使っているp5jsのversionを確認しているわけではない． 確認したい場合はindex.htmlにあるリンクから見れる．

http-serverの開始

プロジェクトの中で使う(index.htmlがある場所でしか使えない)

$ create-p5-project server

立ち上げ後，コマンドラインにあるリンクhttp://localhost:5555からサイトに跳べる．

option

• -p <port> : ポート指定ができる．デフォルトは5555.

モジュールの追加

プロジェクト内で作った自作のモジュールを自動でindex.htmlにリンク付けしてくれる．

$ create-p5-project add mod.js

<script src="mod.js"></script>がindex.htmlのheaderに追加される．

option

• -t <module> : 追加するモジュールをリポジトリ(create-p5-project)のtemplates/modules/内から検索する．

$ create-p5-project add -t Test.js

Test.jsがプロジェクト内で生成され，<script src="Test.js"></script>がindex.htmlのheaderに追加される．

Test.jsはデフォルトでtemplates/modules/内に入っている．

使いまわしたいライブラリなどがあれば，templates/modules/に入れておくと便利かも．

モジュールの削除

プロジェクトに追加されたモジュールを削除して，index.htmlからリンクを外してくれる．

$ create-p5-project remove Test.js

Test.jsがプロジェクト内で削除され，<script src="Test.js"></script>の行がindex.htmlから消される．

プロジェクト内のindex.htmlとscketch.jsは消せないようにしている．

TODO

• プロジェクトごとのREADEMEのテンプレート生成
  • project websit へのリンク(github pagesとか)
  • 説明，テーマ，コンセプト，工夫などのテンプレート
• gitは必要ない？