![](https://technical-creator.com/wp-content/uploads/2017/11/0c055741cb220e89ff81923249a6e18f.png)
Sketch上でProcessing風にビジュアルプログラミングできるSketchプラグインが出ていたので紹介します。
P5.sketchplugin
p5.jsをSketch上で再現
こちらのプラグイン、p5.jsというProcessingをJavaScriptで書けるようにしたライブラリをSketch上で再現したというものです。
p5.jsについてはこちら。
Sketch上ではアニメーションを再生することはできないので、あくまでp5.jsの一部を再現したというものになります。止まっている図形の描画(グラフとか、幾何学模様とか)にちょうど良さそうです。
使い方
まずはP5.sketchpluginをインストール。
メニュー>プラグイン>p5>Edit and runを選択します。
![](https://technical-creator.com/wp-content/uploads/2017/11/573b23fc7140a9a4b2ffd044928c68b2.png)
こんな感じでエディターが表示されます
試しに「Play」ボタンを押してみると
![](https://technical-creator.com/wp-content/uploads/2017/11/776f1a9e6dc21feaf8ac3766480ae12d.png)
表示されました
Presetsの中にいくつか見本が入っていたのでPie chartを選択してみました。
他にもBar chartとか
Generative Grid
おもしろい…!管理画面みたいなグラフなどを表示する画面のデザインが作れそう。ただし、一度このプラグインで作成した画面をSketch側の機能で編集してもコードの内容は変わらないので注意です。
ビジュアル・プログラミングの勉強方法
先日、深津さんのnoteでこんな記事があがっていたので合わせて紹介。
い…1万円か…!すごい…。欲しい…。
![]() |
書き手:小島 芳樹 Webやスマートフォンアプリによるサービスを開発・提供する会社で働いています。 Twitter: @yoshikikoji |
この記事が気に入ったらいいね・フォローお願いします!
次の記事
![](https://technical-creator.com/wp-content/uploads/2017/11/c8f1fd0c9f2aa272feb7eb406a27315d-120x120.png)