付録A エディタで困ったとき

動かない時間もプログラミングの一部ですが、長く立ち止まる必要はありません。原因を一度に全部考えず、画面に見えている症状から順番に切り分けます。

エディタの基本操作そのものを確認したいときは、先に始める前に エディタの使い方へ戻れます。

A.1 何も表示されない

最初に、次の最小コードへ戻します。

def setup
  createCanvas(400, 300)
  background(245)
  ellipse(200, 150, 100, 100)
end

これが動けば、エディタと基本描画は使えています。元のコードへ戻すときは、最初から半分ずつ消そうとせず、次の易しい順で試します。

1. 直前に変えた1か所だけ元へ戻す
2. 動いていたHTMLファイルを保存していれば、その版をエディタへ戻す
3. 元のコードを別の場所へ残し、上の最小コードへ1節ずつ足す
4. 慣れてきたら、処理のまとまりごとに先頭へ#を付け、どのまとまりを外すと動くか調べる

#は、その行を一時的に実行しないコメントにします。元の行を消さずに試せるので、戻すときは#だけを外します。

確認する場所は次の順です。

1. def setup または def draw に対応する end があるか
2. メソッド名の大文字と小文字が合っているか
3. 丸括弧、角括弧、ダブルクォートが閉じているか
4. background が図形のあとに描かれていないか
5. 図形の座標がキャンバス外ではないか
6. 色と背景が同じではないか

A.2 エラーの行と本当の原因がずれる

Ruby が示す行は、「ここで解釈を続けられなくなった場所」です。原因がその行にあるとは限りません。閉じ忘れた括弧や end は、数行後で発見されることがあります。

エラー行だけでなく、その少し前を確認します。直前に追加した変更を一度戻し、動く状態から 1 行ずつ足し直す方法が確実です。

endが足りない例

def setup
  createCanvas(400, 300)
  ellipse(200, 150, 100, 100)

最後のendがないため、Rubyはメソッドの終わりを見つけられません。エラーがコードの末尾を示していても、その直前で閉じ忘れた可能性があります。最後へendを1行戻します。

名前が一致しない例

def setup
  createCanvas(400, 300)
  elipse(200, 150, 100, 100)
end

正しい名前はellipseですが、lが一つ足りません。NoMethodErrorと表示されたときは、メッセージに出た名前と、本文のコードを一文字ずつ比べます。

素材が見つからない例

def preload
  @photo = loadImage("sample.svg")
end

コードが正しくても、エディタへsample.svgを取り込んでいなければLoadErrorになります。ファイル名だけでなく、エディタ下部の素材一覧に同じ名前があるか確認します。

A.3 動くが速すぎる、重い

draw は短い間隔で繰り返されます。1 回の処理が軽くても、要素が増えると負荷が上がります。

• キャンバスを小さくする
• 描く要素数を半分にする
• 画像や 3D モデルの数を減らす
• 配列へ要素を増やし続けていないか確認する
• 画面外の要素を select や reject で取り除く

速さを意図的に落とす場合は frameRate を試せます。ただし処理自体が重い場合、設定した値まで出ないことがあります。

A.4 画像や音が読み込めない

• ファイル名の大文字と小文字を確認する
• 拡張子を含む名前が一致しているか確認する
• エディタへ素材を取り込んだか確認する
• 素材の読み込みを preload に置いたか確認する
• 音は画面をクリックしてから再生する
• 別形式の素材で試す

素材を使わない図形だけの最小コードが動けば、問題は Ruby 全体ではなく素材読み込み周辺に絞れます。

A.5 元へ戻るための保存

大きな変更の前に、動く版を別名で保存します。

waves-01.html
waves-02-color.html
waves-03-mouse.html

番号だけでなく、何を変えたか短く入れると戻りやすくなります。失敗版も、画面が面白ければ別名で残せます。

A.6 一人で質問を作る

資料を検索するとき、「動きません」だけでは候補が広すぎます。次の 4 点を自分用のメモへ書きます。

1. 何を作ろうとしたか
2. 何が起きると予想したか
3. 実際に何が起きたか
4. どこまで小さくすると動くか

質問を公開しなくても、ここまで整理すると原因が見つかることがあります。

A.7 保存したファイルが見つからない

保存ボタンを押しても、保存場所を選ぶ画面が出ないブラウザがあります。その場合は、ブラウザのメニューから「ダウンロード」を開きます。ファイル名の横にあるフォルダの印から、保存された場所を表示できることがあります。

同じ名前で何度も保存すると、ファイル名の末尾に番号が付く場合があります。更新日時を見て、最後に保存したものを確かめます。

A.8 リファレンスの例をそのまま貼っても動かない

p5.js 公式リファレンスの例は JavaScript で書かれています。rbCanvas/p5 では Ruby を書くため、波括弧 { }、行末のセミコロン ;、let や function などはそのまま使えません。

まず同じ機能名を rbCanvas/p5 のヘルプで探します。見つからなければ、その機能が現在の rbCanvas/p5 では使えない可能性もあります。本書の動く最小コードへ戻し、試したいメソッドを一つだけ足して確認します。

参考資料

• rbCanvas/p5
• rbCanvas/p5 エディタの使い方
• p5.js Reference
• Ruby 公式サイト: ドキュメント
• p5.js Tutorials: Debugging