記事の詳細

Scratchはオフラインでも使えます。

オンラインの場合

https://scratch.mit.edu/
上記を押してサイトに行き「作る」を押すと始まる

オフラインの場合

「Scratch2.0」というエディタをパソコンにダウンロードし、インストールすることで動作します。無料です。
https://scratch.mit.edu/scratch2download/

手順としては

  1. Adobe Airをインストールする(http://www.adobe.com/jp/products/air.html
  2. スクラッチオフラインエディタをインストールする(https://scratch.mit.edu/scratch2download/

これだけ。簡単!
「子どもにネットはちょっと早いんじゃ……」という親御さんも、オフラインで稼働するなら安心して使ってもらえますね!

サポートも充実しているのでとりあえず使ってみよう! というのができるのはとてもありがたいですね。

Scratchで自分の名前を動かそう!

第二回目初心者が子ども向けプログラミングScratch(スクラッチ)をやってみましたシリーズその2は「自分の名前を動かそう!」です。

第一回目はこちら

なーんだかうちの社員みんなプログラミングだのITだの難しいこと言ってますけども、やってくれている人おらんでないですか。初心者はですねぇ、本を紹介されたって日本...

もう片っ端からStep-by-Stepにあるチュートリアルをやっていきますよぉ。
チュートリアルは右側の「?」を使ったらダイアログがずるりと出てきてくれます。

子ども向けプログラミングScratchをやってみよう!【自分の名前を動かす】

あなたの名前が生き生きとしてください!

Make your name come to life! Animate the letters by coding in Scratch. Add sound and music too.
(君の名前をイキイキとさせよう! Scratchでコーディングして文字をアニメにします。音と音楽を追加するよ!)

たまにGoogle翻訳さんの翻訳が楽しくて、春。

さて、BEGINを押すと始まっていきます。やっていきましょう。

Choose the First Letter | 最初の文字を選んでね!

何回「日本語」を選んでも翻訳が中途半端なのはアレですかね、私のPC環境がよろしくないんですかね?

To start, choose the first letter of your username, initials, or favorite word.
Click this icon to choose a new sprite:
(まず、君のユーザー名やイニシャル、好きな言葉の最初の文字を選択してね。新しいスプライトはこのアイコンをクリックするよ)

Then select one of the letters in the Sprite library:
(次に、スプライトライブラリから文字を一つ選んでね!)

子ども向けプログラミングScratchをやってみよう!【自分の名前を動かす】子ども向けプログラミングScratchをやってみよう!【自分の名前を動かす】

Why are characters in Scratch called ‘sprites’? We borrowed the word from the first video games.
「Scratchの文字が「スプライト」って呼ばれるのはなんで?」「最初のビデオゲームからこの言葉を借りたのさ」

スプライトはファミコンなどでよく利用されていた、重ね合わせることのできる図形のことを差すIT用語で、昔はよく使われていたようです。最近のゲームではあんまり利用されていないようですね。

Tip: If you don’t want the cat in your project, you can delete it using the scissors tool.
(ねこがいらない場合ははさみでねこを消すことができるよ)
Click on the scissors, then click on the cat.
(はさみをクリックしてねこを消してね)

子ども向けプログラミングScratchをやってみよう!【自分の名前を動かす】

さらばじゃ、ねこ。

Add Color Effects | 色の効果を追加しよう!

Make the letter change color whenever it’s clicked.
(クリックするたび文字の色を変更するよ)
Now you can click your letter on the Stage to see its color change:
(ステージ上の文字をクリックすることで色の変化が確認できるよ)

子ども向けプログラミングScratchをやってみよう!【自分の名前を動かす】子ども向けプログラミングScratchをやってみよう!【自分の名前を動かす】

前のチュートリアルのおさらいのような感じですね。

音を追加しよう!

Click the Sounds tab, then click :
(サウンドタブをクリックし、次にスピーカーをクリックするよ)
Select ‘zoop’ or another sound.
(ズープ音か、別の好きな音を選んでね)
Then, click the Scripts tab. Build a script like this:
(そうしたら、スクリプトタブをクリックしよう。次のようなスクリプトを作るよ)

子ども向けプログラミングScratchをやってみよう!【自分の名前を動かす】 子ども向けプログラミングScratchをやってみよう!【自分の名前を動かす】 子ども向けプログラミングScratchをやってみよう!【自分の名前を動かす】

以上の作業をすると、スペースキーを押したときに色が変わって音が鳴る、という状態になります。
……連打がたのしい。

Add a Backdrop | 背景を追加しよう!

Click the icon to open the Backdrop library:
(アイコンをクリックして背景ライブラリを開きます)
Choose the backdrop you want (such as “boardwalk” or “circles”).
(「ボードウォーク」や「サークル」などの必要な背景を選択してね)

子ども向けプログラミングScratchをやってみよう!【自分の名前を動かす】子ども向けプログラミングScratchをやってみよう!【自分の名前を動かす】

背景を消したいときは自動的に開いた「背景タブ」の使用背景を選択すると、バツ印が出てきます。

子ども向けプログラミングScratchをやってみよう!【自分の名前を動かす】

Add Your Next Letter | 次の文字を追加しよう!

To add the second letter of your name, make a new sprite.
(名前の2番目の文字を追加するには、新しいスプライトを作成するよ)
You can draw the letter by clicking the icon:
(このアイコンをクリックすると文字を書くことができるよ)
You can draw using the paint tools:
(ペイントツールを利用して描画可能です)
Or, type the letter using the text tool:
(それか、テキストツールを使うと文字を打つこともできるね!)
Want to choose the letter instead? Click the icon to choose from the Sprite library.
(文字を選択したい? スプライトライブラリから選ぶこともできるよ!)

せっかくだから書きましょうか。

子ども向けプログラミングScratchをやってみよう!【自分の名前を動かす】

わかる範囲でナビを追加しましたが、すごいですねより直感的に作りこむことができる描画ダイアログになっています。
タブペンあれば結構書き込める……?

いろいろ利用してわかりましたが、以下のキーボードショートカットは使用可能のようです。

  • Ctrl+Z(一つ戻る)
  • Ctrl+C(コピーする)
  • Ctrl+V(ペーストする)
  • delete or backspace(消す)

また、それぞれのシェイプツールでは塗りと線を着色することができます。

子ども向けプログラミングScratchをやってみよう!【自分の名前を動かす】

バケツツールではグラデーションを作成することもできるようです。

子ども向けプログラミングScratchをやってみよう!【自分の名前を動かす】

処理がスムーズではないようで、結構ラグが生じます。コピーペーストにバグが残ったり、動作が遅くなって動きづらかったりします。無料のフリー描画ソフトで描いたものを、別途読み込む、というほうがスムーズかもしれませんね。

子ども向けプログラミングScratchをやってみよう!【自分の名前を動かす】子ども向けプログラミングScratchをやってみよう!【自分の名前を動かす】子ども向けプログラミングScratchをやってみよう!【自分の名前を動かす】

確定ボタンがないのでちょっとわかりにくいのですが、ツールを切り替えると自動的に反映されます。

Make It Spin | 回転だイェーイ!

Animate the second letter of your name.
(2番目の文字にアニメーションをつけよう!)
Build a script to make it spin:
(こんな感じでスクリプトを組んでみてね)
You can add a play sound block:
(音を鳴らすこともできるよ!)
Try different numbers to adjust the spin.
(回転を調整するために数字を打ち替えてみてね!)
Tip: To reset the sprite’s angle, click this block in the Motion category:
(スプライトの角度をリセットするには、モーションカテゴリで「90度に向ける」をクリックしてね)

だんだんスクリプトの説明が簡単になってきました。慣れてこいってことかな!

子ども向けプログラミングScratchをやってみよう!【自分の名前を動かす】

日本語版だとこんな感じ。そうするとクリックしたときに該当するスプライトが15度ずつ1秒ごとにくるくるします。

子ども向けプログラミングScratchをやってみよう!【自分の名前を動かす】

音を入れるとこんな感じ。

子ども向けプログラミングScratchをやってみよう!【自分の名前を動かす】

角度の変更はこちらで。

Finish Your Name | 最後の名前をいれよう!

Add and animate the other letters in your name.
(君の名前の他の文字を追加してアニメーションを追加しよう!)
CHANGE SIZE
Make your letter grow and shrink when you click it:
(クリックするとサイズが変わるアニメーション)
GLIDE
Make your letter glide when you click it:
(クリックすると文字が滑るアニメーション)
Tip: When you drag a sprite to the position you want on the Stage, the glide blocks in the palette will update with its current x and y position.
(スプライトをステージ上の好きな位置にドラッグすると、パレットのグライドブロックが現在のxおよびyの位置で更新されるよ)
You can try adding other blocks to see what they do.
(ほかのブロックを追加してそれらがどんなふうに動くのか挑戦してみてね!)

難しくなってきましたね!(冷や汗でてきた)

ここからは割と自由にちょっといじってごらん、ということのようです。
んじゃちょっとやってみましょう。

とりあえずスプライトを配置してみたら文字が大きいので文字を小さくします。先ほど「スプライトの角度をリセットするには、モーションカテゴリで「90度に向ける」をクリックしてね」からの発想で、大きさを80%にしていきます。
これ……一括指定ができないものですかね……?

子ども向けプログラミングScratchをやってみよう!【自分の名前を動かす】

配置を整えたら今度はすべてのオブジェクト「y座標」を「0」にしていきます。一括指定……。ほしいな……。

子ども向けプログラミングScratchをやってみよう!【自分の名前を動かす】

スクリプトは以下のように組んでいきます。

子ども向けプログラミングScratchをやってみよう!【自分の名前を動かす】 子ども向けプログラミングScratchをやってみよう!【自分の名前を動かす】 子ども向けプログラミングScratchをやってみよう!【自分の名前を動かす】 子ども向けプログラミングScratchをやってみよう!【自分の名前を動かす】 子ども向けプログラミングScratchをやってみよう!【自分の名前を動かす】 子ども向けプログラミングScratchをやってみよう!【自分の名前を動かす】 子ども向けプログラミングScratchをやってみよう!【自分の名前を動かす】 子ども向けプログラミングScratchをやってみよう!【自分の名前を動かす】

で、できたのがこちら。

最後のところまでで完成までにおおよそ2時間ほどです。キャプチャ取ったり文章打ったりしていたので、一時間くらいでできるのではないでしょうか。

共有の仕方はこちらをどうぞ!

なーんだかうちの社員みんなプログラミングだのITだの難しいこと言ってますけども、やってくれている人おらんでないですか。初心者はですねぇ、本を紹介されたって日本...

うーん。

たのしい。

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

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


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

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

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

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

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

飲食店

ページ上部へ戻る