Scratch コードの画像をいい感じに作る

Scratch について資料を作成するとき、Scratch のブロックやコードの画像を挿入したいことがあります。エディタのコードを撮ったスクリーンショットを貼り付ける方法がすぐに思いつきますが、その場合以下のような問題があります。

- 画像を用意するためにコードを編集する必要がある
- 大きなスクリプトの場合、スクリプトエリアに全体が写らないため、縮小または何回かに分けて撮る必要がある

この記事では、これらの問題の解決策として、Scratch コードの画像を生成できるツール [scratchblocks](https://scratchblocks.github.io/) について述べます。

:::note
テキストベースのプログラミング言語でも、コードの画像を作成する際にスクリーンショットを用いると同様の問題があります。その場合は Web アプリの [Carbon](https://carbon.now.sh/) や VS Code 拡張機能の [CodeSnap](https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap) などが便利です。
:::

## scratchblocks とは

scratchblocks は Scratch Wiki で Scratch ブロックを表示する [Block Plugin](https://en.scratch-wiki.info/wiki/Block_Plugin) (Japanese Wiki: [ブロックプラグイン](https://ja.scratch-wiki.info/wiki/%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3_%283.0%29)) で使用されている JavaScript ライブラリです。自身の Web サイトで Scratch ブロックを表示することもできます (参考: [scratchblocksを使ってScratchのブロックをサイトに埋め込む - Qiita](https://qiita.com/Poteto143/items/62325794d5de80f54385)) 。

[scratchblocks homepage](https://scratchblocks.github.io/) では Scratch ブロックを表示し、SVG と PNG 形式の画像としてエクスポートできます。

## 使い方

まず [scratchblocks homepage](https://scratchblocks.github.io/) にアクセスします。

次に、ページ右上の「Select language...」から表示する言語を選択します。英語の場合はそのまま、日本語は「日本語」を、ひらがなの日本語は「にほんご」を選択します。

ページ右のテキスト入力欄に scratchblocks のテキストを入力します。構文は [Japanese Scratch-Wiki の項目「ブロックプラグイン (3.0)」](https://ja.scratch-wiki.info/wiki/%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3_%283.0%29) をご覧下さい。

:::note
scratchblocks のテキストは言語によって変わりますが、それぞれの言語間での翻訳が可能です。[scratchblocks translator](https://scratchblocks.github.io/translator/) に翻訳元のテキストを入力し、翻訳先の言語を選択すると、翻訳されたテキストが表示されます。
:::

:::note
Scatch プロジェクトが既に存在し、そのコードの画像を生成する際には、プロジェクトから scratchblocks のテキストを生成できる [parse-sb3-blocks ライブラリの demo ページ](https://apple502j.github.io/parse-sb3-blocks/demo.html) が便利です。
:::


目的のブロックが表示されたら、ボタン「Export SVG」または「Export PNG」を押すと、それぞれの形式の画像がダウンロードされます。

エクスポートした画像を Google Slide などに挿入します。

## 例

下記のようなブロックの画像を作成します。

![Scratch ブロックの画像。ひらがなで、「みどりのはたがおされたとき ずっと (10) ほうごかす もしはしについたら、はねかえる」と書かれている](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104663/84ff6346-01d4-5c94-7574-d8e42ed7d710.png)


今回はひらがなの画像を作成するので、「Select Language...」は「にほんご」を選択し、以下のようにコードを入力します。

```text:例
みどりのはたがおされたとき
ずっと
  (10) ほうごかす
  もしはしについたら、はねかえる
end
```

すると、先述した画像のブロックが下図のように表示されます。「Export PNG」ボタンを押すと、PNG 形式の画像がダウンロードされます。

![ブロックが表示されたスクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104663/3222f6cc-0296-dc6d-9e35-fb50ad2b1e1f.png)

:::note
scratchblocks のページでは、設定やコードを変更すると、ページの URL が変更され、その URL にアクセスすることで状態を復元できます。保存、共有する際に使えそうです。例えば、上記のブロックを入力した状態のページには[このリンク](https://scratchblocks.github.io/#?style=scratch3&lang=ja_Hira&script=%E3%81%BF%E3%81%A9%E3%82%8A%E3%81%AE%E3%81%AF%E3%81%9F%E3%81%8C%E3%81%8A%E3%81%95%E3%82%8C%E3%81%9F%E3%81%A8%E3%81%8D%0A%E3%81%9A%E3%81%A3%E3%81%A8%0A%20%20(10)%20%E3%81%BB%E3%81%86%E3%81%94%E3%81%8B%E3%81%99%0A%20%20%E3%82%82%E3%81%97%E3%81%AF%E3%81%97%E3%81%AB%E3%81%A4%E3%81%84%E3%81%9F%E3%82%89%E3%80%81%E3%81%AF%E3%81%AD%E3%81%8B%E3%81%88%E3%82%8B%0Aend)からアクセスできます。
:::


ブロックを資料に挿入します。必要に応じて、スクリプトのターゲットやヒントを記入しておくと良いでしょう。

![ブロックが挿入されたスライド](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104663/7d152b17-732e-38bb-c2c0-45f62b074221.png)