コードタブの命令ブロックを画像として保存できるようになりました 📸

[takaokouji]

作ったプログラムを先生や友達に見せたり、宿題として提出したりするのに便利な新機能が追加されました！コードタブに表示されている命令ブロックを、ボタン1つでPNG画像としてダウンロードできます。

📸 命令ブロックを画像として保存

コードタブの右下、ズームボタンの上にカメラアイコンの新しいボタンが追加されました。

このボタンをクリックすると、現在のスプライト（またはステージ）の命令ブロックをすべてまとめて撮影し、PNG画像としてダウンロードします。

ここがポイント！

• 画面外のブロックも丸ごと含む: スクロールしないと見えないブロックも、すべて1枚の画像に収まります。
• きれいな白い背景: ダウンロードした画像の背景は真っ白（#ffffff）なので、資料への貼り付けや印刷にも使いやすい仕上がりです。
• ファイル名は自動生成: プロジェクト名_スプライト名.png という形式で自動的に名前が付きます（例: スモウルビーのプロジェクト_スプライト1.png）。
• コードタブのみ対象: Rubyタブには表示されません。コードタブでお使いください。

---

💡 技術的な仕組み（興味がある人向け）

Scratchの命令ブロックは、内部的にSVG（スケーラブルベクターグラフィックス）として描画されています。今回の機能はそのSVGを利用してPNGに変換しています。

1. バウンディングボックス取得: Blocklyのワークスペースから、すべてのブロックを包む矩形（左上座標・幅・高さ）をワークスペース座標で取得します。
2. SVG構築: 白背景の矩形を敷き、ブロックのSVGキャンバスをバウンディングボックスに合わせて配置した新しいSVGを作成します。このとき、Scratch Blocksがドキュメントに注入するCSSスタイル（ブロックの文字色など）もコピーし、画面と同じ見た目になるようにしています。
3. PNG変換: SVGをBlobに変換し、<img>タグを通じてCanvasに描画。最後に canvas.toBlob() でPNGとして書き出し、ダウンロードします。

---

📚 詳細情報

実装の詳細や技術的な議論については、以下のIssueをご覧ください：

• feat: 命令ブロックをPNG画像としてダウンロードする機能 #206

ぜひ使ってみてください！

---

💬 ご意見・ご質問をお待ちしています

もしスモウルビーを使っていて、これまでと動きが違う、この動きは期待したものと違う、などなど、気になる点があれば 気軽に contact @ smalruby.jp までご連絡ください。

一年に数件しか問い合わせがないので、さみしいくらいの状況ですので、本当に、遠慮なく、ご連絡ください。

⭐ GitHub Starで応援してください

スモウルビーの開発を応援してくださる方は、ぜひGitHubリポジトリにStarをつけてください！

👉 smalruby/smalruby3-editor にアクセスして、右上の「Star」ボタンをクリックするだけです。

皆さまの応援が、開発の大きな励みになります！