１．コスチュームとは

子ども向けプログラミング言語 Scratchでは、絵を動かしたり音を出したりするプログラムを簡単に作ることができます。

Scratchの絵のデータは、大きく分けて2種類あります。
Scratchの用語で、１つは背景、もう１つはコスチュームと呼ばれます。
コスチュームは、ステージの中で動かしたり、変化させたりするスプライトと呼ばれるものの絵のデータです。

スプライトは、コスチュームと、音と、スクリプト（スプライトを制御するために順序立てて並べた命令の集合）とで構成されます。
コスチュームは、１つのスプライトに1つ以上必要です。
１つのスプライトについて、音もスクリプトも、それぞれ0個以上複数持つことが可能です。
ちなみに、スプライトは、1つのプログラムに 0個以上複数作ることが可能です。

Scratch 3.0が2019年1月3日（日本時間）にリリースされましたが、2019年1月現在、Scratch 2.0もオフラインエディターは提供中ですし、もちろん、多くの皆様はScratch 2.0をまだまだ活用中だと思います。
そこで、Scratch 3.0とScratch 2.0のそれぞれでコスチュームをファイルに保存する方法を、今回は説明することにします。

２．Scratch 2.0でコスチュームをファイルに保存する方法

Scratchの最新バージョンの1つ前のバージョンであるScratch 2.0のオフラインエディターには、スプライトのコスチュームペインから、コスチュームの絵のデータだけを画像ファイルとして保存する機能があります。

具体的には Scratch 2.0でコスチュームをファイルに保存するには、
A) あるコスチュームを保存したい、あるスプライトについて、まず、 Scratch 2.0のオフラインエディター画面左下のスプライトリストの、そのスプライトのサムネイルをクリックして対象にします。
B) 対象のスプライトのコスチュームペインを表示するため、エディター画面中央上部のコスチュームタブをクリックします。
C) コスチュームペインで対象にしたいコスチュームのサムネイルをクリックします。
D) そのサムネイルの上で右クリックし、表示された［ローカルファイルに保存］をクリックします。
E) 保存先を選択する画面が出てくるので、保存先のフォルダを選択しファイル名を決め、必要なら入力し直してファイル名を変更してから、［保存］ボタンをクリックします。

例えば、新規作成のとき、デフォルトで用意されている、ねこのスプライトのはじめのコスチュームをファイルに保存してみます。
A) スプライトリストのねこのスプライトのサムネイルをクリックします。

B) ねこのスプライトのコスチュームペインを表示するために、［コスチューム］タブをクリックします。

C) コスチュームペインではじめのコスチュームのサムネイルをクリックします。

D) そのサムネイルの上で右クリックし、表示された［ローカルファイルに保存］をクリックします。

E) 保存先を選択する画面が出てくるので、保存先のフォルダを選択しファイル名を決め、必要なら入力し直してファイル名を変更してから、［保存］ボタンをクリックします。

Scratchのペイントエディターで、そのとき対象となっているコスチュームがベクターモードの画像ならば、ペイントエディター下部に［ビットマップに変換］ボタンが表示されています。
コスチュームがベクターモードで作成されたものであれば、保存されるファイルの拡張子は svgになります。

Scratchのペイントエディターで、そのとき対象となっているコスチュームがビットマップモードの画像ならば、ペイントエディター下部に［ベクターに変換］ボタンが表示されています。
コスチュームがビットマップモードで作成されたものであれば、保存されるファイルの拡張子はpngになります。

ベクターモードは、絵をどうやって描いたかの情報を文字で管理するモードです。
例えば、内側が青く塗りつぶされた四角形の図は、ベクターモードでは、四角形であるという情報、四角形を描くための情報（例えば、四角形の対角の2点の座標と四角形の外枠の線の太さとその色の情報）、四角形を塗りつぶすための情報（塗りつぶすか否かの情報とその色の情報）が文字で管理されます。
絵はビットマップモードよりベクターモードで作った方が滑らかな線になり、特にベクターモードは拡大縮小後も図の美しさをキープできます。
ビットマップモードは、点々の集合で絵や写真のデータを扱うモードです。

自分でコスチュームを作成する場合は、ペイントエディターで、どちらのモードで作成するかを選べます。
ペイントエディター下部にあるボタンが［ビットマップに変換］ボタンになっている場合はベクターモード、［ベクターに変換］ボタンになっている場合は、ビットマップモードのときです。
必要ならモードをこのボタンで切り替えることで、モードを選びます。
モードは、絵の作成途中でも、いつでも、切り替えられます。
なお、私は、絵を作るなら、画像がきれいな、ベクターモードの方をお勧めします。

また、カメラで作ったコスチュームは自動的にビットマップモードになります（後でベクターモードに変えることもできますが、変える利点はないと思います。）。

svgファイルは、ベクターモードの内容を保存するのに適した、文字で画像を作る情報を持つファイルです。

pngファイルは、ビットマップモードの内容を保存するのに適した、点々で画像を作る情報を持つファイルです。
点々で画像を作る情報を持つファイル形式は他にもいくつかありますが、他の多くのファイル形式がその絵の情報を長方形の土台となる領域に乗せて持つのに対し、pngファイルは、その絵の情報だけ（土台は透明）を持ちます。
要は、そのファイルの図を何かの図の上に貼ったとき、pngファイルの場合は、中の図の形だけが貼り込まれるのに対して、他の多くの形式のファイルの場合はその絵を含む長方形の土台ごと貼り込まれます。

３．Scratch 3.0でコスチュームをファイルに保存する方法

先にご紹介したとおり、Scratch 2.0は、１つのコスチュームを１つのファイルに保存する単独の機能を持っています。
一方、Scratch 3.0は、その機能を持っていません。
Scratch 3.0は、保存機能として、プログラムを保存する機能と、スプライトを保存する機能のみを持ちます。
そこで、これらを利用して、コスチュームの保存も行います。

その手順の概要は、プログラムか（コスチュームを含む）スプライトをファイルに保存した後、その中から目的のコスチューム単独の情報を探し出して、わかりやすい名前を付けて、扱いやすい場所に保存し直す、という流れになります。

例えば、ご自身のお子様がScratch 3.0で作ったコスチュームがとても芸術的だったとき、これから説明する手順でそのコスチュームの絵を保存すれば、他のソフトでも利用できるようになります。

３．１．そのコスチュームを含むスプライトを保存

コスチュームはスプライトの一部であり、スプライトはプログラムの一部です。
Scratch 3.0で保存できるものはスプライトとプログラムです。
スプライトのファイルからでも、プログラムのファイルからでも、同様の方法でコスチュームのファイルを切り分けられます。
ただ、プログラムのファイルには他のスプライトも含めた全部の情報が含まれます。
プログラムのファイルにある情報の集合はとても大きいのに対して、そのコスチュームの情報が入った１つのスプライトのファイルにある集合は小さく扱いやすいので、スプライトのファイルから操作する方をお勧めします。

そのため、説明も、ファイルにしたいコスチュームが入っているスプライトのファイルを保存するところから行います。

＜スプライトをファイルに保存する方法＞
A) あるコスチュームを含む、あるスプライトをファイルとして保存するために、 Scratch 3.0のエディター画面右下のスプライトリストの、そのスプライトのサムネイルの上で右クリックします。
B) 表示された［書き出し］をクリックします。

Scratch 3.0のScratch Desktop（＝オフラインエディター）を使用しているとき、［書き出し］をクリックすると、［名前を付けて保存］ウィンドウが表示されるので、そこで、適当なフォルダに適当な名前を付けて保存します。
Scratch 3.0のオンラインエディターを使用しているとき、［書き出し］をクリックすると、そのファイルの保存先は、使用中のブラウザのダウンロードファイルの保存先の設定に従います。
そのブラウザがダウンロード時に保存先のフォルダを選択できる設定になっていれば、［名前を付けて保存］ウィンドウが表示されるので、そこで、適当なフォルダに適当な名前を付けて保存します。
そのブラウザがダウンロード時に保存先のフォルダを選択できる設定になっていなければ、そのブラウザのダウンロード時のデフォルトの保存先に設定されているフォルダに、自動で保存されます。
自動で書き込まれたスプライトのファイルの名は、［スプライト名］に拡張子［sprite3］が付いたものです。
例えば、スプライトリストのサムネイルで確認できるスプライト名が「スプライト1」のとき、書き出しによってスプライトの内容が保存されたファイルのファイル名は、「スプライト1.sprite3」です。
使用しているブラウザによりますが、Scratch 3.0のオンラインエディターでファイルの操作を行うと、そのブラウザのダウンロードのときと同じふるまいになるので、例えば、Google Chromeを使っている場合は、下図のように、書き出し直後、ブラウザ下方にファイル名「スプライト1.sprite3」が表示されることがあります。

３．２．Scratch 3.0から保存するファイルは圧縮ファイル

Scratch 3.0で保存すると、スプライトのファイル(拡張子sprite3)も、プログラムのファイル(拡張子sb3)も、実は、複数のファイルを集めて1つのファイルにした圧縮ファイルです。

圧縮ファイルなので、スプライトのファイルの、ファイル名の拡張子の部分を「sprite3」から「zip」に変え、そのファイルをzipファイルとしてダブルクリックして解凍すれば、スプライトを構成するすべてのコスチュームの画像ファイル、音のファイル、そしてスクリプトのファイルが得られます。

同様に、プログラムのファイルのファイル名の拡張子の部分を「sb3」から「zip」に変え、そのファイルをzipファイルとしてダブルクリックして解凍すれば、プログラムを構成するすべてのステージとスプライトそれぞれについて、構成するすべての画像ファイル、音のファイル、そして、スクリプトのファイルが得られます。

３．３．圧縮ファイルの中の個々のファイルについて

スプライトファイルや、プログラムファイルを解凍して得られる個々のファイルの名称は、拡張子以外は人間が理解できない記号の羅列です。

拡張子から判断できることは、画像ファイルであれば拡張子 svg かpng、音のファイルであれば拡張子 wav、スクリプトのファイルであれば拡張子 json です

また拡張子 png の画像ファイルはビットマップモードのデータを保存したもので、拡張子 svg の画像ファイルはベクターモードのデータを保存したものです

自分が保存したいコスチュームの画像ファイルを、この圧縮ファイルを解凍した中から見分ける方法は、以下のとおりです。

解凍して得られたファイルに画像ファイルが１つしかなかったら、
- その1つが、保存したいコスチュームの画像ファイルです。
解凍して得られたファイルに画像ファイルが複数あるとき、
- 自分がファイルとして保存したいコスチュームをペイントエディターで確認し、ビットマップモードのコスチュームならpngファイルを、ベクターモードのコスチュームならsvgファイルを、解凍したファイルの中から分類してコピーするか切り出しを行い、別の適当なフォルダに保存します。
- 分類したファイルの中身を、１つ１つソフトを使って表示して、保存したいコスチュームと同じ図かどうか目で見て確認します。svgファイルなら、Microsoft Wordや無料で配布されている図を扱うソフトのInkskapeなど、pngファイルならWindowsにもともと入っているフォトなどのソフトで表示して確認できます。

最後に、保存したかったコスチュームのファイルを見つけたら、拡張子はそのままにして、他の部分をわかりやすいファイル名に変え、必要なら、保存先のフォルダも移動します。

４．おまけ１：svgファイルをMicrosoft Wordで表示する方法

svgファイルは、Microsoft Wordでは、文書に追加する画像ファイルとして扱うことができます。
もし、svgファイルがzipファイルの中にあるものなら、コピーするか切り取って、別の場所に保存してから、Wordの文書に追加します。
ちなみに、svgファイルがzipファイルの中にあるままWordの文書に追加しようとすると、うまくいきません。
svgファイルをWordの文書に追加してその図が表示されると、目で見てどんな図なのかを確認することができます。

Word 2016で、文書の中にsvgファイルの図を挿入する方法は、以下の手順です。

A) Wordの文書の中の、図を挿入したい位置にカーソルを合わせます。
B) ［挿入］メニューをクリックし、［画像］をクリックします。
C) ［図の挿入］が開くので、挿入したいsvgファイルのあるフォルダを選択し、そのsvgファイルをクリックしてから、［挿入］ボタンをクリックします。

５．おまけ２： Scratch 3.0 でコスチュームをファイルに保存する例

例えば、Scratch 3.0で新規作成した直後のプログラムの、ねこのスプライトをファイルに保存すると、その圧縮ファイルの中に、図のファイルは、２つのコスチュームのファイルがそれぞれ１つずつあるはずです。
ねこのスプライトをファイルに保存し、解凍して、ねこのスプライトのはじめのコスチュームのファイルを見つけ、そのファイルの名前をそれなり（「ねこ１」に拡張子が付いたファイル名にします）に変えて保存してみたいと思います。

Windows10のPCで、ブラウザはGoogle Chrome、ファイル操作はエクスプローラを使って、上記の操作をしてみます。

まず、次の手順で、ねこのスプライトのコスチュームの図のファイルのモードを確認します。
⓵Scratch 3.0で新規作成した直後のプログラムで