turtleSpaces webIDE は、turtleSpaces の Logo 環境をまるごとブラウザで動かせるものです。ブロックでもテキストでもコードを書け、すぐに実行して、タートルが 3D で描くようすを隣で見られます。インストールは不要で、始めるのにアカウントも要りません。
画面構成
画面は左右に分かれています。
- 左側 にはプロジェクトのヘッダーと、パネルのタブ Blocks（ブロック）、Text（テキスト）、Help（ヘルプ）、History（履歴）、Printer（プリンター）、Debug（デバッグ）が並びます。サインインすると 7 つ目のタブ Claude が現れ、AI アシスタントを使えます。
- 右側 はタートルが描く 3D ビューで、その下にコンソール、いちばん下に実行コントロールがあります。
画面の上端にはメニューバーがあります。
パネル
Blocks（ブロック）
左のパレットからブロックをドラッグしてプログラムを組み立てます。ブロックはカテゴリー別（移動と姿勢、ペンと色、条件と制御、プロシージャ、トリガーなど）に分かれていて、パレットは検索もできます。キャンバス上のドロップダウンで編集するタートルとプロシージャを選び、▶ ボタンで実行します。ブロックでの変更はすぐに反映されます。
ブロックとテキストは同じプログラムの 2 つの見え方です。ブロックで作ったものはテキストで開けますし、その逆もできます。
Text（テキスト）
構文ハイライト、自動インデント、コード補完を備えたコードエディタです。タブの横のドロップダウンで編集対象を選びます。Full Workspace ではすべてのタートルとプロシージャを表示し、ひとつのプロシージャだけを選ぶこともできます。
テキストエディタでの編集は Update を押したときに反映されます。Revert を押すと、最後の Update 以降の編集を取り消します。毎回 Update を押したくない場合は Settings › Auto Update をオンにすると、エディタからフォーカスが外れたときに変更が反映されます。
エディタの下には Save、Open、Publish、Fork、Share のボタンがあります（保存と共有 を参照）。
Help（ヘルプ）
内蔵のコマンドリファレンスです。プリミティブを検索したり、カテゴリーから探してコードに挿入したりできます。ほかにも色、カメラ、インターフェイス、Logo の構文、エラーメッセージについてのタブがあります。同じ内容はこのサイトの リファレンス にもあります。
History（履歴）
コンソールに入力したコマンドの一覧です。行をクリックするとプロンプトに戻され、編集や再実行ができます。
Printer（プリンター）
turtleSpaces には仮想プリンターがあります。プログラムがプリンターに出力した内容はここに表示され、保存、印刷、消去ができます。プリンターは Settings › Printer でオン・オフします。
Debug（デバッグ）
実行中のプログラムのようすを表示します。Errors（エラー）、Containers（変数）、States（各タートルの位置やペンなど）、Loops（実行中のループ）のタブがあります。
コンソール
3D ビューの下のコンソールは、昔ながらの Logo のプロンプトと同じように使えます。コマンドを入力して Enter を押せば、すぐに実行されます。プロンプトには今話しかけているタートルの名前が表示され、プログラムが出力した文字もここに表示されます。
実行コントロール
画面下のバーでプログラムを操作します。
- Backtrack はタートルの直前の一歩を取り消します。
- プロシージャのドロップダウンと Run でプロシージャを実行します（入力が必要なプロシージャなら Run が尋ねます）。隣の Inline ドロップダウンで実行方法を選びます。
- Pause で一時停止し、Continue で再開します。
- 目 のボタンを使うと、実行中のコードの行がハイライトされ、動きを追えます。
- Stop でプログラムを止めます。
- Reset でタートルを最初の位置に戻します。続けて 2 回押すとすべてをリセットします。
右上の旗ボタンは、Scratch の緑の旗のように、プロジェクトの旗のプロシージャを実行します。
サインイン中にプログラムでエラーが起きると、タートルの Shelly が現れて、何が起きたのかを Claude に説明させることを提案します。エラーの一般的な説明か、あなたのコードを踏まえた説明を選べ、答えは Claude パネルに表示されます。
メニュー
- File：テンプレートから新しいプロジェクトを作る、保存したプロジェクトを開く、公開プロジェクトや 3D モデルを探す、保存する。Upload と Download のサブメニューでは、プロジェクト、画像、サウンド、モデル、データを読み込めます。作品を PNG 画像、3D プリント用の STL モデル、MP4 動画やアニメーション GIF、再生できる WebGL 記録として書き出すこともできます。Share As ではプロジェクトを閲覧用モデルや遊べるページにできます。
- Editor：検索、文字サイズ、インデント、ワークスペースの整理、エディタとコンソールの間でのコードのやりとり。
- Turtle：ホーム、画面の消去、一歩戻る、リセット、タートルのモデルと大きさの変更。
- Settings：ライト／ダークのテーマ、言語、コンソールのフォント、サウンド、プリンター、Auto Update、コード補完、Live Coding。
- View：カメラの移動、自動オービット、アスペクト比、軸の表示、フルスクリーン。
- Examples：サンプルのブラウザを開きます。
- Help：Shelly のウェルカムツアーを再生し、このサイトのツアー、リファレンス、書籍、チュートリアル、コミュニティへのリンクがあります。
- Feedback：アプリの中から私たちにメッセージを送れます。
webIDE は English、日本語、Français、Español、Polski で利用できます。言語は Settings で切り替えます。
メニューバーの右端にはユーザーメニューがあります。アカウントの作成やサインイン、サインイン後はプロフィールやグループの表示、サインアウトができます。その隣の ◥ ボタンでフルスクリーンになります。
プロジェクトのヘッダー
パネルの上ではプロジェクトの タイトル を入力できます。その隣の by には作成者が表示されます（自動で入ります）。3D ビューの上には、編集できる 1 行の 説明 があります。
保存と共有
- Save はプロジェクトを turtleSpaces のアカウントに保存します（サインインが必要です）。Open は保存したプロジェクトを読み込みます。
- Fork は今のプロジェクトのコピーを、あなたの新しいプロジェクトとして保存します。
- Publish は保存したプロジェクトを公開し、ほかの人が公開ギャラリーで見つけられるようにします。種類、難易度、カテゴリーのタグを付けられ、あとから更新や公開停止もできます。
- Share は閲覧用 3D モデルや、遊べるバージョンのプロジェクトへのリンクを作ります。
ギャラリー
2 つのギャラリーが webIDE の中で全画面表示されます。
- 公開プロジェクト：コミュニティが共有したプロジェクトです。Play で実行し、Remix で自分用のコピーを IDE に開いて改造できます。
- サンプル：種類、難易度、カテゴリーで絞り込めるサンプルプログラムです。
カメラの操作
3D ビューでは次のように操作します。
- 左ドラッグ でシーンのまわりをカメラが回ります。
- 右ドラッグ の上下でカメラが近づいたり離れたりし、左右で回転します。
- マウスホイール でズームします。
- 中ボタンのドラッグ、または両ボタンでのドラッグで視点を平行移動します。
1 ボタンのマウスやトラックパッドでは、Ctrl+クリック が右クリックの代わりになります。View › Camera Controls に操作の早見表があります。
しくみ
webIDE は、デスクトップ版 turtleSpaces と同じ Logo エンジン（Go で書かれ、WebAssembly にコンパイルされたもの）で動いています。インターフェイスは React、Radix UI、CodeMirror 6 で作られています。描画はバックグラウンドの worker 上の WebGL で行うので、タートルが働いている間もページは軽快に動きます。
エンジンの最初のダウンロードは大きめです。その後はブラウザがコピーを保存するため、次からはずっと速く起動します。ダウンロードが途中で切れても、続きから再開されます。