rbCanvas

rbCanvasエディタの使い方

(1)各ボタンの説明

[1]	新規作成	プログラムを初期状態にします (ブラウザのリロードボタン) ※ブラウザの種類や設定によって異なります
[2]	ヘルプ	ヘルプ(API リファレンス)の画面を開きます
[3]	編集	文字列の検索および置換、文字サイズの調整、テンプレートの読込みをおこないます
[4]	保存	プログラムを HTMLファイルとして保存します
[5]	実行	プログラムを実行します
[6]	分割管理	プログラムを分割して管理する場合に使用します

(2)新規プログラム作成

新規に rbCanvasエディタの画面を開くか、ブラウザのリロードボタンを押してください。

(3)プログラムの編集と実行

rbCanvasエディタは、雛形となるプログラムが最初に記述されています。
これをもとにプログラムを書いていっても構いませんし、すべて削除して新たに書き直しても構いません。
プログラムができあがったら、実行ボタン()をおしてプログラムを実行してください。

(4)画像ファイルや音声ファイルの取込み

画像ファイルは、エディタ内にドラッグアンドドロップすることによって
プログラム上で扱うことができるようになります。
エディタ内に取り込まれたファイルは、エディタの下部にサムネイル表示されます。

(5)プログラムの保存(ダウンロード)

エディタ上の[保存(ダウンロード)]ボタン()を押すと、取り込んだ画像や音声のデータも含めた
プログラムのすべての内容がが１つの HTMLファイルとして保存されます。
ただし、ブラウザの種類や設定によって保存場所やファイル名の指定などの挙動が変わるのでご留意ください。

(6)プログラムの読込み

保存した HTMLファイルをエディタ内にドラッグアンドドロップすると
プログラムがエディタに読み込まれ、画像や音声のデータも復元されます。

(7)保存したHTMLファイルからの直接実行

保存した HTMLファイルをダブルクリックすると、そのままブラウザ上でプログラムが実行されます。

(8)プログラムの分割管理

エディタ上の[main]と初期表示されている分割管理用のボタン()を押すと、
プログラムを複数の単位(ここでは「ページ」と呼びます)に分割して作成することができるようになります。

下図の[追加]のメニュー項目を選ぶと、
任意の名前を付けて新しいページを作成することができます。

既存のページの名前を変更したり削除したりする際は、
下図の[名前変更]または[削除]のメニュー項目を選んでください。
(ただし、デフォルトの「main」については名前の変更や削除はできません)

つぎのアニメーションは、「my_method」という名前のページを追加し、そこに記述したメソッドを
利用する操作例です。
ページの名前を「greetings」に変更しても動作に変わりはありませんが、
削除するとメソッド「def hello(s) ～ end」がなくなってしまうために実行時エラーが発生しています。

(9)編集メニュー

エディタ上の[編集]ボタン()を押すと、テキストの検索・置換、
フォントサイズの変更、テンプレートの読込みをおこなうことができます。

サブメニューから「検索」を選ぶと検索用ダイアログが表示され、「置換」を選ぶと置換用ダイアログが表示されます。
フォントサイズは「大・中・小」の３種類から選ぶことができます。
(エディタ起動時の初期設定は「中」)
テンプレートは「標準テンプレート」「micro:bit用テンプレート」の２種類から選ぶことができます。
(エディタ起動時の初期設定は「標準テンプレート」)

(10)ヘルプ

エディタの左上にある[ヘルプ]ボタン()を押すと、ヘルプとして APIリファレンスが表示されます。
各メソッドの詳細情報に加え、短いサンプルプログラムが掲載されていますので参考にしてください。