記事の詳細

なーんだかうちの社員みんなプログラミングだのITだの難しいこと言ってますけども、

やってくれている人おらんでないですか。

初心者はですねぇ、本を紹介されたって日本のITがどーのって言われたってわからんもんはわからんのですよっ! スクラッチってなんだよ宝くじか? 子ども向けプログラミングっても私にとってはオリンピックの高跳び並みのハードルですよ!

そんなわけで頑張って連載してみましょう、ど素人もいいところ、子どもよりも初心者、頭の固くなりつつあるデザイナーの、子ども向けプログラミングScratch、演習スタートです。

Scratchって何?

子ども向けプログラミング、とうたわれているブラウザ上のプログラミングシステムです。8歳から16歳対象ということですが、年齢問わず、いろんなところで使われているようです。グローバルシステム!
なんで子どもの頃からプログラミングなんて? と思う方は当社のT氏がとっても面白い記事があるのでこちらどうぞ。

火曜日ブログ担当の田中です。すでにご存じの方もいらっしゃるかもしれませんが、2017年の4月から各種助成金の助成額や条件などが変わっています。メジャーな助成金でも...

プログラミングを学ぶということは、問題解決プロジェクト設計アイディア交換のための重要な手段を学ぶということです。という言葉通り、ロジカルシンキングができるということはこの先の未来に非常に役に立つということですね。

言っていることが難しい? ゲーム作れたら楽しい。そういうことです。頑張っていきましょう。

とりあえずScratchをやってみよう

Scratchのサイトはこちら
https://scratch.mit.edu/

海外のゆるキャラはスマートな子たちがいるもんですね! このひょうきんな顔をしているにゃんこ(たぶんにゃんこ)がいろいろ動いてくれるようです。名前なんなの?

子ども向けプログラミングScratchをやってみよう!

Cat……そのまんまやないかい!

子ども向けプログラミングScratchをやってみよう!

飛ぶんかい!

子ども向けプログラミングScratchをやってみよう!

トップページにいるこのかわいい子は「Tera」というようです。地球の妖精かな? グローバルフェアリーですかな?

子ども向けプログラミングScratchをやってみよう!

Gobo……ゴボウ……?

とにもかくにも「作る」の猫をクリックすると、こんな画面になります。クリックすると拡大します。(Adobe Flashが使えないようになっている方は、右クリックかインストールして使えるようにしちゃいましょう。こちら>https://get.adobe.com/jp/flashplayer/?no_redirect

子ども向けプログラミングScratchをやってみよう!

右側のほうに「Scratchをはじめよう~Want to get started with Scratch? Try this!(意訳:Scratch始めたい?やろうぜ!)」てなことが書いてあるので、右上の「BEGIN」をクリックします。英語の勉強もできるわけですか。
左上の丸いアイコンをクリックすると、「日本語」「にほんご」があるのですが、地味にあちこちに英語が出てきます。だいたい言っていることは上下一緒のようですが若干違うようなので、少しずつ意訳を入れてやってみますね。

いざ、実践。

1.動かし始める

Drag a move block into the Scripts area.
(意訳:「動すブロック」をスクリプトエリアにドラッグしてね!)

ブロックをクリックしたら猫動くの?

子ども向けプログラミングScratchをやってみよう!

子ども向けプログラミングScratchをやってみよう!

あ。なんかぴくぴくしてる
でも10歩は歩かないのね……?

そしたら次は「Now, add a sound(意訳:そしたら音いれてみようか)」をクリックします。右上の「次へ」でもいいです。

2.音を追加する

Drag out a play drum block (from Sound) and snap it onto the move block.
(意訳:「音」から「ドラムを鳴らす」ってブロックを引きずり出して動くブロックをスナップしてね!)

ブロックをクリックすると音が鳴ります。

子ども向けプログラミングScratchをやってみよう!

鳴ったわ……(地味にびっくり)

次は「Next, start a dance(意訳:次はダンスしてみよう!)」をクリック。これもまた右上の「次へ」でもOK。

3.Start a Dance

Add another move block. Click inside the block and type in a minus sign.
(意訳:ほかのブロックを加えるよ! ブロックの内側をクリックしてマイナス数値を記入してね!)

このとき「スクリプト」から「動き」を選ばないといくら待ってもブロックが出てきてくれませんのでね。ご注意ですね。

Add another play drum block, then choose a drum from the pull-down menu.
(意訳:ほかのドラムを鳴らすというブロックを加えるよ! そうしたらプルダウンメニューからドラムを選んでね!)

英語意訳してたら「何を言っているんだドラムを鳴らすというブロックを選んでいるのだからドラムは選ばれているはずだろう」と思ったんですけれども。

ドラムありすぎ。

子ども向けプログラミングScratchをやってみよう!

どうやら「ドラム」というのは日本でいうところのバンドとかで使われているドラムのみならず、「打ち鳴らす楽器全般」を言っているようですね。翻訳の難しいところです。おすすめはオープンクイーカです。
この翻訳の違いは各所で現れており、例えば「10歩動かす」というのも決して10歩動くわけではありません。おそらくこの「歩」はピクセル数か何かではないかなぁという感じです。英語としては「Step」です。「10という値のぶん、動かす」というイメージでいたほうがよさそうですね。

動かすと猫が前にでて後ろに下がる、と動きます。いい感じです。

Next, add a repeat.
(意訳:じゃあ繰り返しを入れてみようか!)(だんだんアニメの次回予告の気分に)

4.何度も繰り返す

Drag out a repeat block and drop it on top of the stack. (You want the “mouth” of the repeat to wrap around the other blocks.)
(意訳:繰り返しのブロックをドラッグして、組み立てたブロック=スタックの一番上に置いてみよう!(ブロックがパックマンみたいに口を開くからそれでほかのブロックを囲ってね!))

……パックマンわかりますかね……今の子たちはカービィと言った方がわかりやすいのだろうか……。

子ども向けプログラミングScratchをやってみよう!

そのままこの組み立てたブロック=スタックをクリックしてみると、いやぁ、動きますね……。(地味にびっくり)

Next, say something.
(意訳:何か言わせてみよう!)

5.何か言わせる

Click looks and drag out a say block.
(意訳:「見た目」をクリックして「言う」をドラッグしてね!)
Type in the block to change the words:
(意訳:ブロックに書かれた言葉を書き換えてね!)

さすがに日本語の発音はできないでしょう……と思ったら、吹き出しが出る仕様のようです。

子ども向けプログラミングScratchをやってみよう!

Then snap it on top of the stack. Click on the stack to run.
(意訳:セリフブロックをスタックの一番上に持っていこう! そのままスタックをクリックしてスタートだ!)

プログラムをスタートして動作を終了までを実行することを「Run」といいます。プログラムを「走らせる」という意味ですね。
たまに「Runしてみて」とか言語として崩壊している使い方をします。「Runしたらどうなる?」「Runしないんですよー……」これは界隈では正しい使い方なのだろうか。いや伝わればいいですね。

※M氏に確認してみたところ「言う言う~界隈では正しいよ~」とのことでした。「Go」も使うらしいです。ちょっとカッコイイですね。小学生の息子とかに「お母さんそれRunしといて~」とか言われたらどうしましょうか。

ちなみにWatch me dance! は「僕のダンス見てて!」なのでそのまま日本語に訳して突っ込んでいます。

子ども向けプログラミングScratchをやってみよう!

動きました。ようやっと動くことになれてきました。

Now,add a way to start.
(意訳:それじゃ始める方法を追加しよう)

6.Gleen Flag

Drag out a when Gleen flag clicked block and snap it on top.
(意訳:「グリーンフラッグがクリックされたとき」というブロックをドラッグして、一番上に置こう!)

これを一番上に置くと、左のコンテナの右上にあるグリーンフラッグをクリックしたとき、スタック全てがRunします。

Your script will start whenever you click the green flag:
(意訳:君がグリーンフラッグをクリックしたとき、君のスクリプトはスタートするだろう!)

To stop, click the stop button
(意訳:止めるときはストップボタンを押してね)

止めるボタンはフラッグの右横の赤いボタンのようです。

子ども向けプログラミングScratchをやってみよう!

Next you can change colors.
(次は色を変えられるよ!)

7.色を変える

Now to try something different… Drag out a change effect block.
(意訳:ちょっと違うことに挑戦しよう。……「効果を変える」のブロックをドラッグしてね)

効果を変える、とは言っていますが、日本語表記だと最初に「色」があり、その他、魚眼レンズや渦巻、などといったエフェクトが存在します。使ってみればわかるのでしょうが、とりあえずテキストを守りましょう。

Click to see what it does.
(意訳:スタックをクリックしてどうなるか見てみてね)

クリックすると猫の色が超爽やかなミントグリーンになります。クリックをし続けると次々に色が変化していきます。

Now, make it interactive.
(意訳:じゃ、こいつを相互的にしよう)

8.キーを押す

Interactiveという言語の意味は「相互的に作用する」とか「対話式の」といいます。よくえらいひとが「インタラクティブなうんたらかんたら」って言っているのを聞きますが、インタラクティブって「僕も君も参加してより楽しく有意義にしようよ!」みたいな感じだと思ってもらえればいいかなと個人的には思います。一方的じゃない、というのがポイント。

Snap on a when key pressed
(意訳:「キーがおされたとき」というブロックをスナップしよう)

イベントから「キーがおされたとき」というブロックをドラッグする作業になるのですが、スタックをクリックするのではなく、キーボードを使って指示を出す、という点で「相互的」と言っているのかなぁとあいまいに理解。

Now press the space bar on your keyboard and watch what happens.
(意訳:君のキーボードのスペースキーを押すと、何が起きるか見れるよ!)

つまりいついかなる時もスペースキー一つで猫が色変わりをするという事実。

子ども向けプログラミングScratchをやってみよう!

You can choose a different key from the menu:
(メニューから別のキーを選んでもいいんじゃない?)

ブロックの中の「スペース」キーの部分を変えると、押したときにアクションするキーを変えることができます。

子ども向けプログラミングScratchをやってみよう!

Now, choose a backdrop.
(さあ、背景を選ぼう!)

9.背景を追加

You can add new backdrops on the Stage.
(意訳:新しい背景をステージに追加できるよ!)

子ども向けプログラミングScratchをやってみよう!子ども向けプログラミングScratchをやってみよう!

わーお。いっぱいある。

Click image to choose a New backdrop from the Library (such as “Spotlight-Stage”):
(意訳:ライブラリから新しい背景を選んでね!(こんな「スポットライトステージ」みたいなやつね))

画像を選んでOKを押すと、自動的に背景が追加されます。

子ども向けプログラミングScratchをやってみよう!

Next, add a new sprite.
(意訳:次は新しい図形を入れてみよう!)

10.Add a sprite.

Spriteは直訳すると「妖精」なのですが、コンピュータ言語的には「背景とは独立に動く図形」のことを言います。

Each object in Scratch is called a sprite. To add a new sprite, click one of these buttons:
(意訳:Scratchにあるそれぞれのオブジェクトは、スプライトと呼ばれます。新しいスプライトを追加するには、次のいずれかのボタンをクリックします)

子ども向けプログラミングScratchをやってみよう!

  • Choose sprite from the library:ライブラリからスプライトを選ぶよ!
  • Paint your own sprite:自分でスプライト描いちゃうよ!
  • Upload your own image or sprite:君の画像やスプライトをアップロードしちゃうよ!
  • Take a picture (from a webcam):ウェブカメラで写真撮って使うよ!

To add this sprite, click “choose sprite” then select “Cassy Dance”:
(意訳:このスプライトを追加しよう! クリックするのは「ライブラリからスプライトを選ぶ」で選ぶのは「ダンスするキャシー」だよ!)
Drag the characters to where you want them on the Stage.
(意訳:ステージ上で君が乗せたいところにキャラクターをドラッグしよう!)

もう至れり尽くせりな説明ですな。

子ども向けプログラミングScratchをやってみよう!子ども向けプログラミングScratchをやってみよう!

 

Now, explore sound or animation.
(意訳:では、音とアニメーションを考えてみよう!)

11.Explore!

You can add sound and animation to your new sprite.
(意訳:新しいスプライトにサウンドとアニメーションを追加することができるよ!)

音を追加する場合

音を追加するには「スクリプト」の隣の隣の「音」タブをクリックしてサウンドのコンテナを展開します。

子ども向けプログラミングScratchをやってみよう!子ども向けプログラミングScratchをやってみよう!

子ども向けプログラミングScratchをやってみよう!

  • Choose a Sound:Scratchから音を選ぶよ!
  • Record Your Own:自分で録音するよ!
  • Import a Sound File:音のファイルをインポートするよ!

Then, click Scripts, and drag in a play sound block. Choose the sound you want from the menu and click to play.
(意訳:そうしたら「スクリプトタブ」をクリックして、「~の音を鳴らす」のブロックをドラッグしよう。君が鳴らしたいと思った音がメニューにあるので、それを選んでからクリックすると音が鳴るよ)

アニメーション

Click the Costumes tab to see a sprite’s costumes. You can animate by switching between costumes.
(意訳:コスチュームタブをクリックすると、スプライトの衣装を見ることができるよ。衣装を切り替えることでアニメーション化することができるよ!)

Click Scripts and make a script that switches between costumes:
(意訳:スクリプトをクリックし、衣装を切り替えるスクリプトを作っちゃおう!)

子ども向けプログラミングScratchをやってみよう!

日本語だとこんな感じですね。

子ども向けプログラミングScratchをやってみよう!

Share your project.
(君のプロジェクトを公開しよう!)

12.Share!

タイトルを付けて、See Project Pageをクリックすると、ScratchのHPに作ったプログラムが公開されます。

Type in notes to explain how to use your project. Give credit to anyone who helped.
When you’re ready for others to see your project, click the Share button.
(意訳:君のプロジェクトの使い方を説明しよう! プロジェクトを他の人が見る準備ができたら、「共有」ボタンを押してね!)

あれ……Shareボタンなんぞないぞ……?
というところで気が付きました。アカウント作ってないや!

アカウントの作り方

子ども向けプログラミングScratchをやってみよう!

右上のところから簡単にアカウントを作成することができます。
本名は使わないでね! あと半角英数字でアンダーバー以外の記号は使用不可。

子ども向けプログラミングScratchをやってみよう!

そのあと生まれ年と生まれ月、性別や国などを聞かれます。しっかり情報が必要な理由も明記されていて安心ですね。
国は「Japan」表記です。

子ども向けプログラミングScratchをやってみよう!

メールアドレスを入力します。親御さんも安心な指示。

子ども向けプログラミングScratchをやってみよう!

するとようこそ。

子ども向けプログラミングScratchをやってみよう!

スクリーンショット取りながらやっても5分。簡単です。

子ども向けプログラミングScratchをやってみよう!

シェアボタンがでてきました!日本語だと「プロジェクトページ参照」らしいですね。

再び戻ってシェアの続きから!

12.Share! 続

子ども向けプログラミングScratchをやってみよう!

プロジェクトページを参照すると、使い方の説明などを書くコンテンツの他、プロジェクトを作成した際に手伝ってもらった人へお礼を言うコンテンツもあります。子ども向け、というだけあって、情操教育部分もしっかり考えてくれているんですね。
このプロジェクトの「中を見る」ボタンで再びプロジェクトを編集することができます。

アカウントを作ったらできること

まず、作成したプロジェクトを保存することができます。トップページに戻ると、少し変わっていました。メールボックスにはScratchからのお知らせが来るようです。

子ども向けプログラミングScratchをやってみよう!

フォルダを押すと、こんな感じで作品の閲覧ができます。

子ども向けプログラミングScratchをやってみよう!

 

「スタジオ」というのは、どうやらプロジェクトを多人数で共有し合えるツールのようで、カテゴリ分けが可能のようです。個人で作ったプロジェクトをグループ分けすることもできそうですね。

結論

めっちゃ面白いです。可能性は無限大じゃないですかこれ。
New ScratcherからScratcherになると、またいろいろと機能が使えるようになるらしいですが、それにはいろいろ必要なようで、精力的なScratchへの参加や役立つアイデアの提供などが必須のようです。

また、Scratchを運営するMITメディアラボ ライフロングキンダーガーテングループのScratchコミュニティーのガイドラインが素晴らしいのです。

https://scratch.mit.edu/community_guidelines

子ども向けプログラミングScratchをやってみよう!

子ども向け、とうたうのもよくわかるガイドラインです。けれど大人でも忘れがちな部分をしっかりとおさえています。
これから頑張ってひとまずStep by Stepを全部クリアしていく連載をしたいと思います!

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。


ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

相模原のお店やサービスをどんどん紹介!

行ってみよう相模原 相模原市のお店限定

飲食店

ページ上部へ戻る