🔧 upstream 改良 — upstream にあるが Smalruby で機能を改良・拡張している 改良点: ① URL ローダーで外部 URL からプロジェクトを直接読み込み可能。② Google Drive との連携(保存・読込時に Drive state クリア)。③ URL パラメータでの初期タブ・Playwright 制御。④ プロジェクトタイトル変更時の挙動微調整。
Scratch プロジェクト(.sb3 ファイル)の 新規作成・読み込み・保存・URL からのロード・タイトル編集 を扱う機能群。Smalruby は upstream の Project Saver/Fetcher HOC を継承しつつ、Smalruby 固有の保存先(ローカルファイル、Google Drive、Smalruby Classroom)に対応する。
- 小学生として、自分のプロジェクトを
.sb3でダウンロードして保存したい - 教師として、配布する作例の URL を子供たちに開かせて、すぐに編集を始められるようにしたい
- 複数デバイスを使う子として、Google Drive 経由で作品を行き来させたい
- 作品を発表する子として、プロジェクトのタイトルをわかりやすい名前に変更したい
メニューバーの「ファイル」メニュー:
- 新しく作る
- ファイルから読み込む(
.sb3) - ファイルとして保存する(
.sb3ダウンロード) - Google Drive から読み込み / Drive に保存(
docs/google-drive/参照)
URL パラメータ ?project_url=https://... または、URL ローダーモーダル (url-loader-modal) から URL を入力してロード。
メニューバー上部の「プロジェクトタイトル入力欄」をクリックして変更。
| ファイル | 役割 / Smalruby 改良 |
|---|---|
packages/scratch-gui/src/lib/project-fetcher-hoc.jsx |
プロジェクト取得 HOC。URL パラメータ (Playwright)、初期タブパラメータの追加 |
packages/scratch-gui/src/lib/project-saver-hoc.jsx |
プロジェクト保存 HOC。URL パラメータ・no_beforeunload の追加 |
packages/scratch-gui/src/lib/sb-file-uploader-hoc.jsx |
.sb3 アップロード HOC。Google Drive state のクリア |
packages/scratch-gui/src/containers/sb3-downloader.jsx |
.sb3 ダウンロード |
| ファイル | 役割 |
|---|---|
packages/scratch-gui/src/components/url-loader-modal/ |
URL 入力モーダル UI |
packages/scratch-gui/src/lib/url-loader.js |
URL からのプロジェクト取得ロジック |
packages/scratch-gui/src/lib/url-loader-hoc.jsx |
HOC ラッパー |
packages/scratch-gui/src/lib/url-parser.js |
URL パース |
packages/scratch-gui/src/lib/url-params.js—tab,rubyMode,ruby_version,no_beforeunload,project_url,classcode,force_polling,mesh_debugなどの統一パーサ
packages/scratch-gui/src/lib/project-loader-utils.js— プロジェクトロード共通処理packages/scratch-gui/src/lib/sb-file-uploader-utils.js—.sb3アップロード共通処理
packages/scratch-gui/src/reducers/project-state.js— プロジェクトのライフサイクル state(loading, ready, saving, ...)packages/scratch-gui/src/reducers/project-changed.js— 未保存変更の検出packages/scratch-gui/src/reducers/project-title.js— タイトルpackages/scratch-gui/src/reducers/google-drive-file.js— Google Drive ファイル state(docs/google-drive/参照)
docs/project-management/project_state_diagram.svg (SVG 図) — プロジェクトのライフサイクル状態遷移
docs/project-management/project_state_example.png — 状態遷移の具体例
VM 側の loadProject, saveProjectSb3 を呼ぶ。Smalruby 独自の Marker は serialization/smalruby-migration.js(Mesh v1 → v2 ブロックマイグレーション)。
- Google Drive 経由は
infra/smalruby-classroom/の課題提出機能と連動
なし(プロジェクト管理は UI 機能でブロックを持たない)。
ただし、新規プロジェクトには デフォルトプロジェクト (packages/scratch-gui/src/lib/default-project/) のブロック構成が組み込まれる。
| パラメータ | 用途 |
|---|---|
project_url |
指定 URL からプロジェクトを取得 |
tab |
初期表示タブ |
ruby_version |
Ruby バージョン |
no_beforeunload |
beforeunload 無効化(Playwright 用) |
legacy-storage.ts— 旧バージョンとの互換性データ管理
主な Smalruby マーカーは .claude/rules/scratch-gui/smalruby-markers.md を参照:
src/lib/project-fetcher-hoc.jsx— URL params, initial tabsrc/lib/project-saver-hoc.jsx— URL params, no_beforeunloadsrc/lib/sb-file-uploader-hoc.jsx— Google Drive state クリア
docs/google-drive/— Google Drive 保存・読込docs/classroom/— Smalruby Classroom 提出機能docs/backpack/— バックパック (mesh v1 マイグレーション含む)
project_state_diagram.svg — Project State Machine の状態遷移図
project_state_example.png — 具体的なフロー例
主要 PR は履歴を参照(feat:.*url_loader|feat:.*project_url で grep)。