見出し画像
Photo by hyoryusaibo

クリエイティブコーディングのスケッチ置き場を自作してみた

chobishiba

気軽な作品置き場

趣味でp5.rbを使ってRubyでクリエイティブコーディングをやっていて、そのスケッチ置き場を持ってます。

p5.jsだったらOpen processingやp5.js Web Editor、NEORTなども使えますがp5.rbだと保存して公開できるサービスは特にないんですよね。公開のためだけにp5.rb→p5.jsに変換するのもなんか違うし、不特定多数の人に見てもらいたいよりも、誰かに見せたくなった時に見せやすいからWebに置いておきたいくらいの欲求なので個人サイトに置いてます。

あとはコードで作品作るのでそのコードをGitで管理してたい欲求があります。ちょっと試して戻りたい時やどの辺更新したか差分をみたい時、マシン変更したい時、普段の仕事でGit使っているからこそ使わずに書くのは書きづらい。
そしてGit使うならGitHubにおいてきたい。GitHubにコードがあるなら別途どこかでホスティングするよりも、GitHub Pagesでページ作れば楽かなとそんな安直な理由で作り始めました。

最初は出力結果のjpgファイルを並べて、画像をクリックしたら各コードのページに飛べるようにしてたのですが、私のクリエイティブコーディングの好きなところの一つにこんなコードがこんなふうな図柄になるんだ！なところがあるのでコード込みで鑑賞できるようにしたい、コードと作品同時に並べたくなってきました。
でも作品作るたびにhtml組んでページ作っては面倒で、ついでのような気持ちで作品作ったあと公開できるといいな、そうだ静的サイトジェネレーター作ろうと思いました。

技術選定は「使ってみたい」

静的サイトジェネレーターは昔ほんの少し触ったJekyllくらいしか知らなかったので他にどんなものがあるかをみてまわりました。11tyやほかのクリエイティブコーダーさんだとHugo使ってる方も見かける。
色々みて回った結果、Next.jsの静的サイト生成を使ってみることにしました。ハッカソンでReactを触ってみた直後だったのでもう少しやってみたく丁度いいなと。

こういう使ってみたいが試せるのが個人開発のいいところですね。

サンプルコード見ながら

一覧があって、/yyyymmdd で詳細に遷移するページにしたい。やりたいことはとても単純なので

$npx create-next-app [アプリの名前] --example with-typescript

で作成されたサンプル元にNext.jsを見ながら作ってみました。
以下の記事にも大変お世話になりました。

サイトの見た目の方が難しかった

なんとかできたものの「画像とコード並べたい！」くらいしか考えてなかったのでサイトデザインがノープラン。背景は何色がいいか、画像とコードの割合はどんなものか、ナビゲーターはどこに置くのが最適か、再実行はどのようなマークで表すのがいいか考えること無限にある…そして「こうしよう！」と思ってもCSSが思い通りにかけない!!

いつも素敵デザイン出してくださるデザイナーさんほんとすごい。
一旦今はこんな感じに着地しました。

一覧
詳細

GitHub Actions

とにかく手数を減らしたいのでGitHub Actionsを使って、mainにマージしたらビルドしてGitHub Pagesにデプロイしてくれるように設定。

どうなったか

今では1作品作るためにブランチ切って→コード書いて実行と修正を繰り返して→完成したら画像書き出して→mainにマージしたらあとはGitHub Actionsがやってくれる。楽。
画像の書き出しを自動でやってないのはクリエイティブコーディングの作品は大抵実行するたびに変わるようなものにしてるので、どの出力結果を一覧に使うかはいくつか実行してみて選びたいからです。
以下の4画像も同じコードから出力されてます。

時々思い経ったようにリファクタするようなこともあります。
数ヶ月経ってから見るとなんでこんなに面倒な書き方したんだろうもっとシンプルに書けるじゃないかみたいな気持ちになることがよくあります。そんな時にも今の仕組みは便利だなと思ってます。

初めてのバージョンアップ

このサイトを作ったのは6月だったのにどうして今こんな記事を書いてみようと思ったのか、それは初めてバージョンアップしたからです(npm上げてNext.jsを13.4.6→14.0.1など)。

何か技術を学ぶ時に手元で動くものを作りながらの方が理解しやすいのでちょっとしたアプリは散々作ってきたものの、目的が「学ぶ」なので作り捨てばかりだったんですよね。それが今回アップデート。初めて「使う」ものを作ったんだなとなんだか嬉しくなってしまったのでした。

※ 小さなアプリなんでエイヤーで上げてみたら静的エクスポートのところが変わってて修正が必要でした（作ったNext.js 13.4の段階で変わってたけど気づかず古い書き方で作ってしまってた様子🙈）

今後どうするか

今のところこのまま使うつもりですが、他に気になるものが出てきたらごっそり別の技術に変えることもあるかもしれません。
でも見た目をもうちょっと整えたい。それからまたそもそもの目的であるクリエイティブコーディング作品をどんどん作っていきたいです。

この他にも自分が使ってみたいもの作ってみたいなと思ってます。


いいなと思ったら応援しよう！