1. 作品制作の流れ
アプリをひらくと、画面の左側に、ソースを実行するプレーヤー部分（図の青色部分）があります。
また画面の右側に、ソースを編集するエディタ（図の黄色部分）があります。
作品制作の流れとしては、画面上に用意された文例（下図の緑色部分）を取得しながら、それを組み合わせて、自分のソースを作ってゆきます。
ソースを編集したあとはプレーヤーに自動的に反映されます。
もしプレーヤーの実行中に、プレーヤーの最初の状態にもどしたい場合は、この「リロード」ボタンを押してください。
プレーヤーが動き始める最初の状態（ソースの読み込み直後）に戻ります
2. スプライトの作成
「スプライト」とは「プログラムで動かす絵」のことです。
画面の初期状態では、スプライトがひとつだけ表示されています。
これからスプライトを自由に作って動かしましょう。
画面の左下の「つくる」ボタンを押してください。
スプライトにするための画像ファイルを選択するファイルチューザが現れます。
スプライトに使用する画像ファイルは、あらかじめ、このファイルチューザ内に画像を登録しておく必要があります。
(これは本アプリがWebアプリであるための事情で、このアプリの使い方として割り切ってください）
登録するための画像ファイル（上図の黄色部分）は、お手元のPC内の、任意の画像ファイル（PNG, JPG, SVG)を選んでください。
登録されたファイル（上図の青色部分）は、 ブラウザの内部キャッシュに置かれており、PC外部には出て行きません。
登録された画像リソースのなかから、どれかを選んで（上図の緑色部分）ダブルクリックします。
ダブルクリックされた画像が、プレーヤー画面上に一時的に置かれます。
また同時に、そのスプライトのソースコードが画面上に出現しています。
（注）画面上で画像を動かすと、ソース表現でも位置情報が変わるので、ためしてください。
示されたソースコードを、ドラッグしてエディタ上にドロップします。
いま、あなたは、「１行の新しいソースコード」を書きました！
3. ソースコードとスプライトの関係を理解する
ソースコードとスプライトの関係は、次のようになっています。
ソースコードに書かれているのは「画像ファイルからスプライトを作りなさい」というプレーヤーへの命令文です。
このソースコードがあるから、スプライトが表示されているのです。
ためしに、ソースコードをゴミ箱にいれて消してください。
するとスプライトも消えます。
4. スプライト名ってなに？
プログラムでは、たくさんのスプライトをあつかいます。それらのスプライトを区別するために、各々のスプライトには名前が必要です。
このスプライト名は、元のファイル名から自動的についていますが、あなたが自由につけかえることもできます。
スプライト名の部分をダブルクリックすると、ファイル名をつけかえるためのキーボードが表示されます。
キーボードは打ちやすい位置に動かしてください。
もし元のファイル名が長いと、スプライト名も長くなって、とてもみずらいソースコードになるので、
そういう場合は短い名前に変えたほうがいいでしょう。
もし同じ画像ファイルから２つ目のスプライトをつくろうとする場合も、名前を変える必要があります。
(練習) 同じ画像から２つ目のスプライトを作ってみましょう。そのとき名前を変えてください。
新しい名前をつけるには、いままでの名前の最後に「2」をつければよいでしょう。
２つ目のスプライトができたら、その２つ目はコードを捨てて消してください。
5. スプライトを動かす
では、スプライトに動きをつけてみましょう。
「緑の三角ボタンがクリックされたら、飛行機が右にすこし進む」
という動きをつけてみます。
「緑の三角ボタンがクリックされたとき」の文例は「イベント」にあります。
このボタンを押すと「イベントづけるスプライトをタップしてください」と聞かれます。
飛行機のスプライトをタップしましょう。（あなたの好きなスプライトでも結構です）
すると、動きのきっかけとなる「イベント」の候補リストが出てきます。
この最初の「三角ボタンが押されたら」をタップして選びましょう。
すると、そのメニューだけを抜き出すことができます。
そして抜き出したメニューを、エディタのうえでドロップしてください。
これで「緑の三角ボタンがクリックされたとき」のソースコードができました！
では次に「飛行機が右にすこし進む」というソースコードをいれてみましょう。
スプライトを進ませる文例は「うごき」にあります。
このボタンを押すと、いろいろな動かし方のためのソースコードの一覧が出てきます。
黄色いならびにある
「move (歩 動かす）」
をタップして選びましょう。
さきほどと同じように、抜き出したメニューをドロップすれば、ソースコードができます！
これが「飛行機が右にすこし進む」（10歩すすむ）というソースになります。
では最後に、「緑の三角ボタンがクリックされたら、飛行機が右にすこし進む」ように
イベントと動きを関連付けましょう。
イベントのソースコードは、うごきのソースコードが中に入るようになっています。
ここに入れることで、「そのイベントをきっかけとした動き」になります。
以上でソースコードが書けたので、動作確認してみましょう。
画面左側の「ソースをリロード」ボタンを押して、いまあなたが書いたソースをプレーヤーに反映します。
（Basicモードの場合は、自動的にリロードしているので、実は特に押さなくても自動的に反映されています）
プレーヤーの緑の三角ボタンをクリックすると、右に少し（10歩）進むでしょうか？
ボタンをクリックするたびに、あなたが書いた「ボタンをクリックした場合のソース」が実行されて、そのたびに右に進んでいるのです。
いま、あなたは「ボタンを押せばスプライトが動く」というプログラムを書きました！
6. ソースコードをテキストで確認する
本アプリでは、キーボードに慣れていない年齢の児童でも、キーボードを打たないでテキストプログラミングできるようになっています。
しかし、まるでブロックのようにソースコードを動かしていると、プログラミングしている実感が少ないかもしれません。
そのときは、ソースコードのテキストを、直接みてみましょう。
テキストエディタの下に「色をけす」ボタンがあります。
これを押してみてください。ソースコードから色がなくなって、テキストだけが残ります。
これがいま、あなたが書いているテキストです。
このテキストどおりに、プログラムが動いているのです！
慣れてきたら、色を消したままプログラムを作ることにも、挑戦してみましょう。
そうすることで将来にむけて、テキストプログラミングが、どんどん出来るようになっていくでしょう。
7. より面白い動きをつけてゆく
では、あなたのプログラムを改良して、もうちょっと複雑な動きをつけてみましょう。
まず最初に、１回ボタンを押したときに進む「距離」を、少しのばしてみましょう。
最初の状態では「10」という数字が書いてあるので、その数字を「20」に変えてみましょう。
すると１回に進む距離が２倍になります。ためしてみてください。
次に、進んだときに、それにあわせて「回転」するようにしてみましょう。
上にむかって飛行機が回転するようにしてみます。
うごきの文例から 「turnLeft (左へ 度回す）」 というソースコードを抜き出して、
いまの「move(20)」というコードの次につなげてください。
これで、三角ボタンが押されたときに実行されるソースコードが２つになりました。
実際に三角ボタンを押してみてください。
進むと同時に、少し回転するようになりましたか？
これは次のように、２つのコードが順番に実行されているためです。
なぜ「左に回転」なのに「上に回転」しているか？というと、
左と右という意味は、スプライトの進行方向に対して左か右か、という意味です。
いまは絵柄のせいで、左に回転させると、上に回転するように見えます。
次に、ボタンを何度か押してみてください。
すると、ボタンを押すたびに、回転しながら進んでいきます。
これは次の図のような理由です。
さて、何度もボタンを押さずに、自動的にこれを繰り返せないでしょうか？
そういったことも、もちろんブログラムできます。
うごきの文例から 「forever」 というソースコードを抜き出してください。
このような水色のソースは、ブロックの中のソースをまとめて実行したり、ある条件によって実行したり、
いろいろな変化をプログラムにつけることができます。
いまえらんだ「forever」というソースコードは「中のソースを永遠に繰り返す」という役割をします。
このブロックで、さきほどの２つのソースを囲むようにして、見本のようにソースコードを組み合わせてみてください。
これで、三角ボタンを押すと、どういう動きがはじまるでしょうか？
おもしろいですね！
これは、次のようにソースコードが動いているのです。
たったのこれだけのコードでも、とても楽しい動きをすることがわかります。
プログラミングって、とても面白いとおもいませんか？
これからいろいろためしてみましょう！
このアプリに用意された文例を組み合わせるだけでも、とてもいろいろなことができますよ。
ここで、あなたがいま書いたソースコードを、テキストでみてみましょう。
これが、今日あなたが書いたプログラムです!
8. 他のスプライトを指定して動かす
最後に、これからあなたが自由にプログラムを書くために、とても役にたつことを覚えましょう。
まず、下の見本と同じようにコードを書いてください。
ネコをクリックしたとき、追加したネコが右に動くでしょうか？
ではここで「ネコをクリックしたとき、ネコでなく飛行機が動く」ようにプログラムを変えてみます。
「move」コマンドをダブルクリックしてください。
数字の部分をダブルクリックすると、数字を変えるキーボードが出てしまうので、数字以外の場所をダブルクリックしてください。
メッセージが出るので、ここで飛行機をタップしてください。
タップしたスプライト名が、コマンドの上に入ります。
これでどのように動くようになったでしょうか？
ネコのイベントなのに、ネコをタップしたときに、飛行機が動くようになりました。
この仕組みは、どのようになっているのでしょうか？
すべてのコマンドは、スプライト名を指定することで、そのスプライトの動きになります。
もしスプライト名を省略した場合は、外で指定したスプライト名をひきつぎます。
つまり実はいままで、この省略した場合を、先に使っていたんですね！
もし、この２つを同時に使うとどうなるでしょうか？
次の見本どおりにコードを書いて、実験してみましょう。
１つ目の「move」は、スプライト名を省略しているので、外の「cat」という指定をひきついでいます。
このコマンドが実行されるとネコが動きます。
２つ目の「move」は、スプライト名を「plane」とはっきり指定しています。
このコマンドが実行されると飛行機が動きます。
この理屈は、もうわかりますね？
でも、なんでわざわざ、こういうことをするのでしょう？
たとえば、ゲームをつくりはじめると、ひとつのイベントで複数のスプライトを同時にあつかう場合が増えてきます。
たとえば、ゲームオーバーという文字を出すときも、こういう考え方で、スプライトを表示します。
だから、プログラムを作ってゆくうえで、スプライト名が指定できることは、とても便利で重要なのです。
最後に、注意点をひとつだけ。
スプライト名は、最初のコードのなかで指定していたことを思い出しましょう。
もし最初のコードでスプライト名を変えたら、下のほうのコードでも、スプライト名をつけなおす必要があります。
9. コードのテキストを読んでみよう
もしあなたが10歳以上なら、いま作ったコードのテキストを読んでみることにも、ぜひ挑戦してみましょう。
ためしに、ひとつ上の図で書いたコードの、色を消してみましょう。
まるで呪文ですね！
わけわからなくて頭が痛くなりそうです！
いままでなら全然読めなかったでしょう。
でも大丈夫。いまあなたには、部分的でも、これを読むちからがあります。
わかる部分を探してみましょう。
さがしてみると、次に色をつけた部分の意味は、わかるのではないでしょうか？
きみどりのところ => スプライトに使ったファイル名
緑のところ => スプライト名を指定している
青いところ => 「クリックされたら」の意味
黄色のところ => 「10うごけ」の意味
つまり、これをつなげて読めば
なにかのスプライトをつくって、それを名前で指定しながら「クリックされたら動く」と書かれたプログラムだ！」
ということがわかります。
それがわかれば、もう十分です！
それ以外の細かいところは、まだわからなくても大丈夫。
将来わかればいいのです。
大人だって細かいところまで全部おぼえていません。ここに色をつけたような部分だけ気をつけながら、
あとは大人も見本をみながらプログラムを書いてゆくのです。
もうあなたは、大人が書いたJavaScriptをみても、なんとなく雰囲気がわかるかもしれません。
これからは、テキストプログラムを読んだり書いたりすることが、だんだん出来るようになりますよ！
10. 作品を保管する
つくった作品を保管するためには、
- スマートな方法（アプリのメニューから保管する）
- より単純な方法（テキストを外部保存するだけ）
の２通りがあります。
10.1 スマートな方法
アプリの上部メニューバーに「ファイル」というメニューがあります。
ここから「直ちに保存」を選ぶと、アプリ内部にソースコードを保存します。
保存されるファイル名は、上部の入力欄の名前になります。
（注）保存されたソースコードは、 ブラウザの内部キャッシュに置かれており、PC外部には出て行きません。
保存したソースコードをふたたびアプリに読み込むためには、
同じ「ファイル」メニューの「私の作品へ行く」から選んでください。
（注）「私の作品」のソースコードは、ブラウザの内部ストレージに保管されています。
そのため、あなたがもし、ブラウザの設定からキャッシュやヒストリーを消したりした場合には、
同時にストレージもクリアされて、「私の作品」のすべてのソースコードも消えてしまいます。
そういう危険性がある場合は、「10.2 より単純な方法」のほうがでよいでしょう。
10.2 より単純な方法
本アプリでは、エディタ上に書いたソースコードがすべてです。ですから、外部のテキストエディタに本ソースコードをそのままコピペして、外部のテキストファイルとして保存してもOKです。
外部のテキストファイルとして保存したソースを、次回にふたたび本アプリに読み込むためには、
- その外部ファイルを開いて、本アプリにコピペする
- ファイルメニューから「手元のコンピュータからアップロード」をえらんで、ファイルを選択する
のどちらでもかまいません。結果は同じです。
