Skip to content

Latest commit

 

History

History
 
 

screenshot

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 

README.md

スクリーンショット

🆕 Smalruby 独自 — upstream に存在しない、Smalruby のために新規追加された機能

概要

ブロックスクリプトや Ruby コードを 画像 (PNG) として保存する機能。upstream の Scratch にはコードを画像として保存する機能はない。Smalruby は学習・共有・発表会の場で「自分が書いたプログラムを見せる」用途のために独自実装した。

ユーザーストーリー

  • 作品を発表する小学生として、自分のプログラムをスクリーンショットして印刷物や Web に貼りたい
  • 教師として、生徒のプログラムを画像として記録・共有したい
  • 保護者として、子どもが書いたプログラムを家族や友達に見せたい
  • Ruby を書いている子として、ブロックではなく Ruby コードのスクリーンショットも撮りたい

UI / 操作フロー

ブロックスクリプトのスクリーンショット

  1. ブロックを右クリック → 「スクリプトの画像を保存」
  2. 選択したスクリプト全体が PNG としてダウンロードされる

Ruby コードのスクリーンショット

  1. Ruby タブの ruby-toolbar メニューから「Ruby スクリプトの画像を保存」
  2. 現在の Ruby コードが PNG としてダウンロードされる

主要ファイル

scratch-gui

ファイル 役割
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 に描画する。

scratch-vm

なし。

infra

なし。

関連ブロック

なし。

設定・データ永続化

なし(生成された画像はファイルとしてダウンロードされる)。

出力形式

  • 形式: 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

関連ドキュメント

関連 Issue / PR

主要 PR は履歴を参照(feat:.*screenshot で grep)。