インストール不要！Rubyでゲーム、ビジュアルアート開発ができる新環境「rbCanvas/p5」の紹介

rbCanvas/p5
[https://rbcanvas.net/p5/](https://rbcanvas.net/p5/)

<img alt="rbCanvas_p5_公式HP.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/2dbac48d-4323-0ad7-7071-c0fcb57e5a63.gif" width="50%">

（[rbCanvas/p5公式ページ](https://rbcanvas.net/p5/) より）



# 1. はじめに

[Ruby](https://www.ruby-lang.org/ja/)でゲームプログラミングというと、[DXRuby](https://dxruby.osdn.jp)ライブラリが多く使われてきました。また、DXRubyと互換性のある統合開発環境として、[rbCanvas](https://rbcanvas.net/index.html)や [DXOpal](https://yhara.github.io/dxopal/doc/ja/index.html)などもあります。

今回紹介する「[rbCanvas/p5](https://rbcanvas.net/p5/)」は、上記の[rbCanvas](https://rbcanvas.net/index.html)と姉妹関係にありますが、グラフィックの表現力がより強力で多彩になり、3D表現もできるようになりました。

これは、ビジュアルアートの分野で使われている[Processing](https://processing.org)や [p5.js](https://p5js.org) の力をRubyから使うことにより実現しています。そのため、これまで以上に素晴らしいグラフィック表現が可能となりました。

rbCanvas/p5は、ゲーム制作、クリエイティブコーディング、デジタルアートの分野で大変役立つツールとなるでしょう。
<br>

[rbCanvas](https://rbcanvas.net/index.html)については、以下の記事を参照ください。
→・[インストール不要！ブラウザだけではじめるRubyゲームプログラミング環境「rbCanvas」の紹介（DXRubyスタイル）- Qiita](https://qiita.com/noanoa07/items/bfbf3b45989c8889a868)



# 2. rbCanvas/p5とは

ブラウザ上で動くRubyエディタ・実行環境一体型の統合開発環境です。これは、最近では[p5.js](https://p5js.org)、[Scratch](https://scratch.mit.edu)などさまざまなプログラミング言語での開発にも採用されている方式です。

その一番の利点は、ブラウザとインターネット環境があれば、簡単にRubyのプログラミングを始められることにあります。



# 3. 主な特徴

- Rubyのインストール不要
- エディタ、ターミナルソフト（「コマンドプロンプト」、「PowerShell」、「ターミナル」など）不要
- さまざまなOSで動作可能（Windowsや macOS、Linux、Android、iPadOS、iOSなど）
- タブレット端末、スマートフォンでも動作可能
- プログラムはOSに依存せず動作
- 保存操作なしで、直ちに実行可能
- 画像データも一体で管理
- Processingや p5.jsに近い書式で記述可能


以上に加え、rbCanvas/p5は、p5.jsの持つ多彩なグラフィック表現が可能なのも魅力です。また、“MacでRubyのゲーム開発をしたい” という要望にも応えてくれます。



# 4. 動作環境

- ブラウザ（Chrome推奨）
- インターネット接続
- ブラウザの動くOS（Windows、macOS、Linux、Android、iPadOS、iOSなど）
- パソコン、または（外付けキーボードを接続した）タブレット、スマートフォン （※ タッチパネル操作にも一部対応）



# 5. 技術要素

HTML5 Canvas API、Ruby→Javascriptパーサ Opal、Javascriptエディタ Ace.js、p5.js などを採用しています。



# 6. 参考サイト

- rbCanvas/p5公式ページ
[https://rbcanvas.net/p5/](https://rbcanvas.net/p5/) 



# 7. rbCanvas/p5を使ってみる

## A) サンプルプログラムの実行

### A-1) rbCanvas/p5の [サンプルプログラムのページ](https://rbcanvas.net/p5/0.3.0/site/sample.html)を開きます

<img alt="rbCanvas_p5_サンプル.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/35389c4a-641b-b308-a44e-75fe918d4047.png" width="50%">

（以下、画像は [rbCanvas/p5公式ページ](https://rbcanvas.net/p5/) より）


### A-2) 実行させたいサンプルのサムネイル（画像）かタイトルをクリックします


### A-3) プログラムが実行されます

<img alt="rbCanvas_p5_サンプル実行2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/1ea2e3fa-9b20-bc9c-f780-7bfa9f5b9d3a.gif" width="30%">

（サンプルプログラム ウェーブ）

## B) エディタを使ったプログラムの作成と実行

### B-1) [rbCanvas/p5](https://rbcanvas.net/p5/) のページの「rbCanvas/p5 editor」をクリックします
<img alt="rbCanvas_p5_公式HP2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/83e3af71-4cbf-b89c-05c8-345118e6836d.png" width="50%">

※エディタの詳しい使い方は；
公式ページ＞マニュアル＞[rbCanvas/p5エディタの使い方](https://rbcanvas.net/p5/0.3.0/site/about_editor.html) を参照

### B-2) rbCanvas/p5 editor のウィンドウが開きます
<img alt="rbCanvas_p5_エディタ.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/629938ee-a66e-df1e-f745-79867aabb242.png" width="60%">


### B-3) rbCanvas/p5の基本

- 簡単な例

```ruby
def setup
  createCanvas(400, 400)
  background('blue')
end

def draw
  circle(150, 250, 200)
end
```

`def setup 〜 end`
の中身は、起動時に1回だけ実行されます。

`def draw 〜 end`
の中身は、繰り返し実行されます。


### B-4) 実行は、エディタ上部の「▶︎ ボタン」を押します
- 実行結果
<img alt="実行結果.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26536/9333f275-7dc3-511c-132c-9fda5651c974.png" width="30%">


※ 文法、プログラム例は；
公式ページ＞マニュアル＞[APIリファレンス](https://rbcanvas.net/p5/0.3.0/site/manual/index.html) を参照


## C) プログラムの保存

エディタ上部のダウンロードボタンを押します。
<img src="https://camo.qiitausercontent.com/d9fbc3e876f07ee557e8e926f12649e9ce84409a/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f32363533362f38356432353236322d616661662d386130652d663662632d3334323562613461333938342e706e67" width="5%">



# 8. 困ったときは

公式ページ＞マニュアル＞[よくある質問](https://rbcanvas.net/p5/0.3.0/site/faq.html)
が用意されています。



# 9. さいごに

学生向けのプログラミング入門として、ゲーム作りが題材にされることが多いのですが、rbCanvas/p5 はグラフィック機能が充実しているので、たいへん見栄えのする作品が作れるようになりました。

実際、中高校生向けのプログラミング教室や、公立中学校のプログラミングクラブなどでも採用され始め、徐々に利用者が増えつつあります。
（「[るびつくコーディングコース](https://www.mitaka.ne.jp/rubytsuku/)」（東京・三鷹）ほか）

今後は、Rubyのプログラミング入門として、あるいは「[中高生国際Rubyプログラミングコンテスト](https://www.ruby-procon.net)」などプログラミングコンテストの応募にも使われることが期待されます。