【動画あり】子どもが描いた絵をスマホ上で動かして遊ぼうっ！

こんにちは、子育てプログラマからCTO秘書にジョブチェンしたちぃです。

この記事は、こんな方に見てもらいたくて書いています。

・子どもと手軽にプログラミングで遊びたい
・プログラミングやったことないけど興味ある
・子どもにプログラミングを教えてあげたい

# 自己紹介

すきま時間で子どもと楽しく学べるコンテンツ提供や情報発信をする"子どもとすきまなび"というサイトを運営しています。

子育てや家事、育児など忙しい日々の中ではまとまった時間は取れないですよね。そうなってくると大切なのは "すきま時間" をいかに有効活用するか。

"習慣を変えれば人生が変わる" と言いますが、忙しい日々を送るみなさんは "すきま時間の使い方が変われば人生が変わる" と思います。

そんな大切な "すきま時間" を使い、手軽に子どもと遊びながら勉強して、自己成長やキャリアアップにつなげてもらえたら嬉しいです ٩(ˊᗜˋ*)و

# PC不要。スマホやタブレットでOK。10分で子どもの書いたイラストを動かしてみよう

@childcare_programmer

子育てプログラマが教える3ステップで簡単！子どもの描いたイラストを動かしてみようっ#家庭学習 #育児 #子供のいる暮らし #楽しく勉強 #ゲーム #プログラミング的思考 #子育てプログラマ #プログラミング女子 #夏休みの宿題 #プログラミング的思考

♬ Gentle BGM that feels like MUJI(836813) - koty

ということで、本題。

今回はビジュアル言語のscratchというサービスを使って、プログラミングをしていきます。こちらは小学校でも使われているものです。詳しい説明は本記事では割愛します。

scratchにアクセスする。新規登録をしなくてもプログラミングはできるので、必要に応じて会員登録してください。

画面上部の"作る"をクリックするとプログラミングの画面に移動します。

事前準備として、子どもが描いたイラストをスマホでぱしゃっと写真を撮ってください。

その後、本ページの右下の猫ちゃんアイコンをクリックして、撮った写真をアップロードします。

もともとあったイラスト(scratch内では"スプラウト"と呼ぶ)は、ゴミ箱アイコンをクリックして削除します。

右下に表示されているアップロードしたイラストをクリックすると、左上にイラストが拡大表示されます。

この状態で、イラストに対してプログラミングをすることができます。

画面左に並んでいるのが、コンピューターへの命令(＝プログラミング)のパーツです。これを組み合わせ、画面中央の白いエリアに移動することで、プログラミングをしていきます。

プログラムの基本構造は"どんなときに" "なにをしたい"という、条件と行動をセットで命令します。

今回は、

イラストをクリックすると(どんなとき)、
イラストが動くようにしたい(なにをしたい)

ので、画面の左から

イベント＞このスプラウトが押された時　(どんなときに)
動き＞10歩動かす(なにをしたい)

を選択し、画面中央のスペースに持ってきてパーツ同士をくっつけます。

これでプログラムは完成です。

早速動かしてみましょう！

画面右上の全体表示ボタンをクリックし、子どもが描いたイラストを全画面表示します。

その後、子どもが描いたイラストをクリックすると、絵が動きます。

以上、お疲れ様でした！

次回は、指定した方向に動かしたり、家族や友人に共有する方法を紹介しようと思います。

サンプルコード