始める前に エディタの使い方
このページでは、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 実行して、止めて、もう一度実行する
三角形の印が付いた実行ボタンを押すと、コードが読み取られます。0.5.1 の標準設定では、新しいタブが開いて結果が表示されます。図 0-1 のように同じ画面でコードと結果を見たい場合は、ツールメニューの「実行画面」を有効にします。
コードを直したあと、画面が自動で変わらないときは、もう一度実行ボタンを押します。右側に実行結果がある場合は、もう一度三角形の実行ボタンを押すと、新しい結果へ入れ替わります。実行結果が別タブで開いた場合は、そのタブを閉じます。
最初は次の小さな往復を繰り返します。
- コードを 1 か所だけ変える
- 実行ボタンを押す
- 画面のどこが変わったか見る
- 気に入らなければ元へ戻す
一度に一つだけ変えると、コードと結果のつながりを見つけやすくなります。
0.3 新しく始める前に保存する
保存ボタンを押すと、作品が HTML ファイルとしてダウンロードされます。HTML はウェブページに使われるファイル形式です。ここでは、コードと実行に必要なものが入った作品ファイルとして扱います。
画像や音声を取り込んだ作品では、それらも一つの HTML ファイルに含めて保存されます。保存先はブラウザの設定で変わります。見つからないときは、まずブラウザの「ダウンロード」一覧を開いてください。
新規作成やブラウザの再読み込みをすると、保存していない変更は失われることがあります。新しく始める前に、動いている版を保存しておくと安心です。
今の絵を画像として残す
HTML の保存は、コードと取り込んだ素材を残す操作です。マウスで描いた軌跡や、実行時に乱数で決まった模様まで、そのまま残すものではありません。今見えている絵も残したい場合は、画面を画像にするスクリーンショットを使います。
- Windows では、Windows キーと Shift キーを押したまま S キーを押します。範囲を選ぶ画面で、キャンバスの左上から右下までドラッグします。切り取りツールで画像を開き（通知が出た場合はクリックします）、保存ボタンで保存先と名前を選びます。
- Mac では、Shift キーと Command キーを押したまま 4 キーを押します。キャンバスの左上から右下までドラッグして放すと、画像ファイルが保存されます。保存先を変更していなければ、デスクトップにあります。
保存した画像を開き、残したい絵が写っているか確認してから、スケッチを閉じます。範囲を選び直したいときは、ドラッグの途中で Esc キーを押して取り消し、同じ操作をやり直します。画像は見返すために使い、コードの編集を続けるときは HTML を使います。
0.4 保存した作品を開く
保存した HTML ファイルには、二つの開き方があります。
- ファイルをブラウザで開くと、作品を直接実行する
- ファイルを rbCanvas/p5 エディタへドラッグ＆ドロップすると、コードを再び編集する
ドラッグ＆ドロップは、ファイルをマウスやトラックパッドでつかみ、エディタの上まで運んで放す操作です。画像や音声を取り込むときにも同じ操作を使います。取り込んだ素材はエディタ下部に小さな画像や名前で表示されます。
0.5 エラーは「直す場所の手掛かり」
実行しても絵が出ず、文字のメッセージが表示されることがあります。これはエディタが壊れたのではなく、Ruby がコードを最後まで読めなかったか、実行中に困ったことを知らせています。
最初に見るのは、メッセージにある行番号です。ただし、本当の原因が一つ前の行にある場合もあります。次の順で確かめます。
- 直前に変えた 1 か所を見る
end、丸括弧、引用符の閉じ忘れを見る- メソッド名の大文字と小文字を見る
- 直前の変更を元へ戻して実行する
詳しい症状別の戻り方は、困ったときにあります。
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 0.5.1 API リファレンスで名前とサンプルを確認します。リファレンスの使い方は、第3章で実際に ellipse を探しながら説明します。
準備はこれで終わりです。第1章では、実際に一つの円を変えます。
参考資料
- Microsoft「Snipping Tool を使ったスクリーンショットの撮影」（英語） — Windows での範囲選択と画像保存
- Apple「Mac でスクリーンショットを撮る」 — Mac での範囲選択と保存先