🆕 Smalruby 独自 — upstream に存在しない、Smalruby のために新規追加された機能
ブロックスクリプトや Ruby コードを 画像 (PNG) として保存する機能。upstream の Scratch にはコードを画像として保存する機能はない。Smalruby は学習・共有・発表会の場で「自分が書いたプログラムを見せる」用途のために独自実装した。
- 作品を発表する小学生として、自分のプログラムをスクリーンショットして印刷物や Web に貼りたい
- 教師として、生徒のプログラムを画像として記録・共有したい
- 保護者として、子どもが書いたプログラムを家族や友達に見せたい
- Ruby を書いている子として、ブロックではなく Ruby コードのスクリーンショットも撮りたい
- ブロックを右クリック → 「スクリプトの画像を保存」
- 選択したスクリプト全体が PNG としてダウンロードされる
- Ruby タブの ruby-toolbar メニューから「Ruby スクリプトの画像を保存」
- 現在の Ruby コードが PNG としてダウンロードされる
| ファイル | 役割 |
|---|---|
packages/scratch-gui/src/lib/blocks-screenshot.js |
ブロックスクリーンショット生成 |
packages/scratch-gui/src/components/blocks-screenshot-button/ |
スクリーンショットボタン UI |
packages/scratch-gui/src/lib/ruby-screenshot.js |
Ruby コードスクリーンショット生成 |
packages/scratch-gui/src/lib/backpack/block-to-image.js |
バックパック用のブロック画像化(共通ロジック) |
ブロック画像生成は SVG → PNG 変換で行い、Ruby コードは Monaco の表示状態を canvas に描画する。
なし。
なし。
なし。
なし(生成された画像はファイルとしてダウンロードされる)。
- 形式: PNG
- 解像度: 書き出し倍率で高解像度化(ブロックは SVG なので、倍率を上げるとベクタとして 再描画されぼやけない)
レイアウトはブロックの自然サイズ(LOGICAL_SCALE = 1)で固定し、ピクセル密度だけを
倍率で上げる。workspace.scale(ユーザーの現在ズーム。既定 0.675)には依存しないので、
同じプログラムなら誰が撮っても同じサイズの画像になる。
| 経路 | 倍率 | 理由 |
|---|---|---|
コードタブのカメラボタン(downloadBlocksAsImage) |
DOWNLOAD_EXPORT_SCALE = 4 |
教材・ワークシート・印刷での判読性 |
クラス機能の提出 / 不具合報告(renderBlocksToCanvas 既定) |
DEFAULT_EXPORT_SCALE = 2 |
アップロード / S3 保存サイズを抑える。Ruby タブの PIXEL_RATIO = 2 と同等 |
倍率は呼び出し側が {exportScale} で上書きできる。巨大なプログラムでは
clampExportScale() がブラウザのキャンバス上限(MAX_EXPORT_DIMENSION /
MAX_EXPORT_PIXELS)に収まるよう倍率を自動的に下げる(下限は等倍)。
上限はもっとも厳しい iOS / iPadOS Safari のキャンバス面積上限 16,777,216 px に
合わせてある(授業では iPad を使うため、デスクトップ基準で緩めるとその環境だけ
書き出しが失敗する)。クランプはスプライトヘッダーを含めた合成後のサイズに対して
行う。それでもエンコードに失敗して toBlob() が null を返した場合は、
ダウンロードを行わず警告を出すだけにしてエディタを壊さない。
- 単体テスト:
packages/scratch-gui/test/unit/lib/blocks-screenshot.test.js,ruby-screenshot.test.js
docs/block-editor/— ブロックエディタ全般docs/ruby-editor/— Ruby エディタ全般
主要 PR は履歴を参照(feat:.*screenshot で grep)。