Scratch について資料を作成するとき、Scratch のブロックやコードの画像を挿入したいことがあります。エディタのコードを撮ったスクリーンショットを貼り付ける方法がすぐに思いつきますが、その場合以下のような問題があります。
- 画像を用意するためにコードを編集する必要がある
- 大きなスクリプトの場合、スクリプトエリアに全体が写らないため、縮小または何回かに分けて撮る必要がある
この記事では、これらの問題の解決策として、Scratch コードの画像を生成できるツール scratchblocks について述べます。
scratchblocks とは
scratchblocks は Scratch Wiki で Scratch ブロックを表示する Block Plugin (Japanese Wiki: ブロックプラグイン) で使用されている JavaScript ライブラリです。自身の Web サイトで Scratch ブロックを表示することもできます (参考: scratchblocksを使ってScratchのブロックをサイトに埋め込む - Qiita) 。
scratchblocks homepage では Scratch ブロックを表示し、SVG と PNG 形式の画像としてエクスポートできます。
使い方
まず scratchblocks homepage にアクセスします。
次に、ページ右上の「Select language...」から表示する言語を選択します。英語の場合はそのまま、日本語は「日本語」を、ひらがなの日本語は「にほんご」を選択します。
ページ右のテキスト入力欄に scratchblocks のテキストを入力します。構文は Japanese Scratch-Wiki の項目「ブロックプラグイン (3.0)」 をご覧下さい。
scratchblocks のテキストは言語によって変わりますが、それぞれの言語間での翻訳が可能です。scratchblocks translator に翻訳元のテキストを入力し、翻訳先の言語を選択すると、翻訳されたテキストが表示されます。
Scatch プロジェクトが既に存在し、そのコードの画像を生成する際には、プロジェクトから scratchblocks のテキストを生成できる parse-sb3-blocks ライブラリの demo ページ が便利です。
目的のブロックが表示されたら、ボタン「Export SVG」または「Export PNG」を押すと、それぞれの形式の画像がダウンロードされます。
エクスポートした画像を Google Slide などに挿入します。
例
下記のようなブロックの画像を作成します。
今回はひらがなの画像を作成するので、「Select Language...」は「にほんご」を選択し、以下のようにコードを入力します。
みどりのはたがおされたとき
ずっと
(10) ほうごかす
もしはしについたら、はねかえる
end
すると、先述した画像のブロックが下図のように表示されます。「Export PNG」ボタンを押すと、PNG 形式の画像がダウンロードされます。
scratchblocks のページでは、設定やコードを変更すると、ページの URL が変更され、その URL にアクセスすることで状態を復元できます。保存、共有する際に使えそうです。例えば、上記のブロックを入力した状態のページにはこのリンクからアクセスできます。
ブロックを資料に挿入します。必要に応じて、スクリプトのターゲットやヒントを記入しておくと良いでしょう。
