始める前に エディタの使い方
このページでは、rbCanvas/p5 のエディタを開いてから、作品を保存するまでを一度だけ通します。ボタンを全部覚える必要はありません。最初は「書く」「実行する」「保存する」の 3 つができれば十分です。
まず、rbCanvas/p5 0.5.1エディタを開きます。できれば、この本は今のタブへ残し、エディタを別のタブで開いてください。本とエディタを行き来しやすくなります。図0-1と同じように、上部へHelp、歯車、下向き矢印、三角形のボタンが並んでいれば、基準にしている版の画面です。
本書の基本章はキーボードを使えるパソコンで進めやすく、実機確認にはChromeを使っています。タブレットなど、ファイルのドラッグ＆ドロップが難しい端末では、第11章の画像と第16章の音を読むだけにして先へ進んでもかまいません。図形、動き、入力、Rubyの章は素材を取り込まずに試せます。
コード欄には「全体」と「変更部分」がある
def setup から始まり、必要な draw なども入っている長いコード欄は、原則としてエディタのコード全体を置き換えて実行できます。一方、数行だけの短いコード欄は、直前のコードへ足したり、一部分と置き換えたりする変更部分です。短い変更部分だけを新しいエディタへ貼ると、そこで使う変数やキャンバスがまだ用意されておらず、エラーになることがあります。
変更部分の前には、「drawの中へ足す」「直前のifと置き換える」のように場所を書きます。迷ったときは、その節の最初にある長いコードへ戻り、保存してから一か所ずつ変更してください。
この本のコードは、rbCanvas/p5 0.5.1 のOpal版を基準にします。公式の使い方ページも同じ版に対応しています。ブラウザや画面幅によって、実行結果の表示場所が変わることはあります。
0.1 画面の左右を見る
エディタを開くと、コードを書く場所と、実行結果を見る場所があります。
左側に最初からコードが入っていても、消して書き直してかまいません。本書のコードは、コードブロック右上のコピーボタンでコピーし、エディタへ貼り付けられます。
0.2 実行して、止めて、もう一度実行する
三角形の印が付いた実行ボタンを押すと、コードが読み取られ、結果が表示されます。古い版では新しいタブが開く設定もあり、ツールメニューの「実行画面」で、エディタ右側へ表示するか新しいタブへ表示するかを選べます。
コードを直したあと、画面が自動で変わらないときは、もう一度実行ボタンを押します。右側に実行結果がある場合は、もう一度三角形の実行ボタンを押すと、新しい結果へ入れ替わります。実行結果が別タブで開いた場合は、そのタブを閉じます。
最初は次の小さな往復を繰り返します。
- コードを 1 か所だけ変える
- 実行ボタンを押す
- 画面のどこが変わったか見る
- 気に入らなければ元へ戻す
一度に一つだけ変えると、コードと結果のつながりを見つけやすくなります。
0.3 新しく始める前に保存する
保存ボタンを押すと、作品が HTML ファイルとしてダウンロードされます。HTML はウェブページに使われるファイル形式ですが、ここでは「コードと実行に必要なものを入れた作品ファイル」と考えれば十分です。
画像や音声を取り込んだ作品では、それらも一つの HTML ファイルに含めて保存されます。保存先はブラウザの設定で変わります。見つからないときは、まずブラウザの「ダウンロード」一覧を開いてください。
新規作成やブラウザの再読み込みをすると、保存していない変更は失われることがあります。新しく始める前に、動いている版を保存しておくと安心です。
0.4 保存した作品を開く
保存した HTML ファイルには、二つの開き方があります。
- ファイルをブラウザで開くと、作品を直接実行する
- ファイルを rbCanvas/p5 エディタへドラッグ＆ドロップすると、コードを再び編集する
ドラッグ＆ドロップは、ファイルをマウスやトラックパッドでつかみ、エディタの上まで運んで放す操作です。画像や音声を取り込むときにも同じ操作を使います。取り込んだ素材はエディタ下部に小さな画像や名前で表示されます。
0.5 エラーは「直す場所の手掛かり」
実行しても絵が出ず、文字のメッセージが表示されることがあります。これはエディタが壊れたのではなく、Ruby がコードを最後まで読めなかったか、実行中に困ったことを知らせています。
最初に見るのは、メッセージにある行番号です。ただし、本当の原因が一つ前の行にある場合もあります。次の順で確かめます。
- 直前に変えた 1 か所を見る
end、丸括弧、引用符の閉じ忘れを見る- メソッド名の大文字と小文字を見る
- 直前の変更を元へ戻して実行する
詳しい症状別の戻り方は、付録Aのエディタで困ったときにあります。
0.6 機能の名前から説明を探す
エディタのヘルプボタンは、rbCanvas/p5 の API リファレンスを開きます。API リファレンスは「使える命令の説明を集めた辞典」であると同時に、まだ知らない表現を見つける図鑑でもあります。本書では必要な説明を本文に入れるので、最初から順番に読む必要はありません。「円以外も描きたい」「音に反応させられるかな」と思ったとき、気になる名前を一つ探してみます。
p5.js の公式リファレンスにも、図形、色、文字、画像、入力、動き、3D などの機能が分類されています。たとえば circle() は円、rect() は四角形、background() は背景色の説明です。説明中のコードは JavaScript ですが、機能名や引数の順番は rbCanvas/p5 で使うときの手掛かりになります。
// p5.js の例
circle(200, 150, 100);
rbCanvas/p5 では Ruby として、行末のセミコロンを付けずに書きます。
# rbCanvas/p5 での書き方
circle(200, 150, 100)
ただし、p5.js のすべての機能が、使っている rbCanvas/p5 の版で同じように動くとは限りません。本書では rbCanvas/p5 で確認した書き方を先に示します。自分で新しい機能を探すときは、次の順に確認すると迷いにくくなります。
- rbCanvas/p5 のヘルプで機能名を探す
- 短いサンプルをそのまま実行する
- 引数を一つだけ変える
- 必要なら p5.js 公式リファレンスで図や説明を補う
意味が分からない名前を見つけても、それは失敗ではありません。今は使わず、名前だけ覚えて先へ進んでもかまいません。
15分のリファレンス宝探し
リファレンスを調べる練習は、大切な作品とは別の新しいエディタで行います。
- rbCanvas/p5 0.5.1 APIリファレンスを開き、名前や見出しを眺める
- 気になったものを一つ選び、「何が起こる命令だろう」と予想する
- 短いサンプルがあれば、まず変えずに実行する
- 数字や色などを一つだけ変え、もう一度実行する
- 予想と実際に起きたことを比べる
図形や色のほかにも、文字、画像、マウスやキーボード、音、3Dなどの入口があります。端末やブラウザによって動かない機能もあります。動かなかったときは自分の間違いと決めつけず、「0.5.1にもある機能かな」「この端末で使えるかな」と確かめます。
見つけた名前：
起こりそうだと思ったこと：
一つ変えたところ：
実際に起きたこと：
この4行を制作ノートへ残せば、すぐ作品に使わなくても発見は消えません。本編でも、章で覚えたことの近くにある機能を探す小さな課題が登場します。
準備はこれで終わりです。第1章では、実際に一つの円を変えます。