スクラッチ(Scratch 2.0)で始める簡単プログラミング入門 | サービス | プロエンジニア

    スクラッチ(Scratch 2.0)で始める簡単プログラミング入門

    • このページをはてなブックマークに追加

    公開日:2016年12月15日 最終更新日:2019年09月27日

    2020年から小学校でプログラミング教育が必修化するニュースを受けて、興味がある・これから始めたい子どもの習い事として、プログラミング教室の人気が急上昇しています。そのプログラミング教室の多くで教材として使用されているScratchは、子どもだけでなく、大人にとってもとても楽しいプログラミング学習ツールとなっています。

    今回はそんなScratchの基本の使い方について、ご紹介していきたいと思います。

    目次

    1.Scratch(スクラッチ)とは?

    1.1 MITが開発した教育用プログラミング環境

    Scratchとは、2006年に米マサチューセッツ工科大学のMITメディアラボにて開発された、教育用のプログラミング環境です。マウスを使って直感的に操作可能で、日本語にも対応しています。きちんと構文を覚えなくてもプログラミングの基本的な考え方を学ぶことができることから、プログラミング教育が注目を集めている今、日本中から関心が高まっています。

    ▲目次へ戻る

    1.2 Scratchには2つのバージョンがある

    Scratchには2つのバージョン「Scratch1.4」と「Scratch2.0」があります。1.4と2.0の大きな違いは、次の通りです。

    ・Scratch1.4・・・スタンドアロン環境で動作する(ネット接続不要)
    ・Scratch2.0・・・ネット接続環境で動作する(ダウンロード不要)

    今回は、最新のScratch2.0を例にとってご紹介していきたいと思います。

    ▲目次へ戻る

    1.3 Scratchの動作環境

    Scratch2.0の動作環境は、次のようになっています。

    <ブラウザ>
    ・Internet Explorer 7以降
    ・Google Chrome 7以降
    ・Firefox 4以降

    <必要なプラグイン>
    ・Adobe Flash Player 10.2以降

    ▲目次へ戻る

    1.4 スマホやタブレットでも楽しめるアプリ「Scratch Jr」

    スマートフォンやタブレットでScratchを楽しめる、「Scratch Jr」というアプリも公開されています。Scratchは小学生からを対象年齢としていますが、「Scratch Jr」は特に小学校低学年から親しめる内容になっています。

    ▲目次へ戻る

    2.Scratch2.0を使う準備

    Scratch2.0はブラウザ上で動くアプリケーションであり、インストール不要です。
    対応するブラウザを開いて、以下のURLにアクセスします。

    ■Scratch2.0公式サイト
    https://scratch.mit.edu/

    column_image6161_01

    2.1 言語の選択

    まず言語を選択します。日本語ブラウザを使用していればほぼデフォルトで日本語になっていますが、異なる場合は画面最下部のプルダウンメニューから、「日本語」を選択します。なお「にほんご」を選択すると、サイトのほとんどの項目が「ひらがな表記」になります。

    column_image6161_02

    ▲目次へ戻る

    2.2 ユーザー登録

    次にユーザー登録を行います。Scratchは登録せずに始めることもできますが、セーブができません。作業中に中断することになったり、せっかく作った作品を保存したりするためにも、初めにユーザー登録を行っておくことがおすすめです。

    画面右上にある「Scratchに参加しよう」をクリックすると、新規登録画面になります。

    column_image6161_03

    希望するユーザ名とパスワード、生まれた年月、性別、国、メールアドレスを登録します。

    登録完了するとすぐにログインした状態でスタートしますが、登録したメールアドレス宛てに認証メールが届いているので、忘れないように認証しておきましょう。

    column_image6161_04

    ▲目次へ戻る

    2.3 サインインとサインアウト

    サインイン(ログイン)とサインアウト(ログアウト)は、画面右上のメニューから行います。

    column_image6161_05

    ▲目次へ戻る

    2.4 プロジェクト名をつける

    サインインできたら、いよいよプロジェクトの作成に入ります。

    (1)まず画面左上の「作る」をクリックします。]

    column_image6161_06

    (2)次に、プロジェクトに名前を付けます。

    左上にあるフォームがプロジェクト名です。ここは直接入力可能なので、好みの名前に修正します。

    column_image6161_07

    ▲目次へ戻る

    2.5 プロジェクトの保存

    上部メニューバーの左端にある「ファイル」をクリックすると、プルダウンメニューが表示されます。

    column_image6161_08

    保存に関するメニューは、次の2つです。

    ・直ちに保存
    ・コピーを保存

    「直ちに保存」を選択すると、今指定している名前で上書き保存が行われます。保存先はクラウドとなっており、ローカル環境(使っているPC)にファイルが保存されることはありません。

    「コピーを保存」ときくと「名前を付けて保存」のことかと思いそうですが、ここでは「プロジェクト名+ copy」という名前で自動的に保存されます。任意の別名を付けて保存したい場合は、プロジェクト名を書き換えた上で「直ちに保存」を選択することで可能です。

    ▲目次へ戻る

    2.6 プロジェクトの読込

    過去に保存したプロジェクトを呼び出したい場合、まず先ほどのメニューの中から「私の作品へ行く」を選択します。すると、「私の作品」という一覧画面が表示されます。

    column_image6161_09

    目的のプロジェクトに対応する「中を見る」ボタンをクリックすると、保存したプロジェクトを開くことができます。

    ▲目次へ戻る

    3.Scratchの操作方法

    column_image6161_10

    開発画面には、大きく分けて上のような3つのエリアがあります。

    (1)ステージエリア

    ゲームのステージにあたり、スクリプトの動作をプレビューする画面です。

    (2)スプライトリスト

    このプロジェクト内に登場する「スプライト」のリストです。またリスト左の「背景」エリアで、ステージの背景を設定することができます。

    (3)スクリプトエリア

    スクリプトエリア左半分に表示されている「ブロック」をマウスでつかんで、右のスペースにつなげた状態で並べていきます。スクリプトエリアはそれぞれのスプライト単位で別れており、スプライトリストで選択中のスプライトを切り替えると、スクリプトエリアも対応するものに切り替わります。

    ▲目次へ戻る

    3.2 スプライトとは

    「スプライト」とは、ゲームに登場するキャラクターのことです。なお背景も、スプライトの一種になります。

    ▲目次へ戻る

    3.3 ブロックとは

    「ブロック」とは、「命令」や「条件」のかたまりです。ブロックをつないで組み立てていくことで、「スクリプト」になります。

    ▲目次へ戻る

    3.4 スクリプトとは

    「スクリプト」とは、一連の動作を制御するプログラムのことです。各スプライト単位で、それぞれの動きを個別に記述していきます。(スプライトが2つある場合は、2つそれぞれの動作を別々に設定する必要があるということです)なお背景もスプライトの一種なので、個別にスクリプトを設定することが可能です。

    またスクリプトは1つのスプライトに対して1つなぎだけでなくてもOKで、イベントの開始条件が異なる複数のスクリプトを1つのスプライトに対して設定することができます。

    ▲目次へ戻る

    4.Scratchで猫を動かしてみる

    4.1 ブロックの種類を確認する

    スクリプトに使えるブロックには、「動き」「見た目」「音」「ペン」「データ」「イベント」「制御」「調べる」「演算」「その他」の計10種類のカテゴリがあります。

    column_image6161_11

    それぞれのブロックは、上図のメニューにある名前をクリックすると、メニューの下に表示されます。各カテゴリにどんなブロックがあるかは、次の通りです。

    ■動き

    「10歩動かす」「15度回す」など、スプライトを動かす命令が用意されています。

    ■見た目

    「表示する」「隠す」「次のコスチュームにする」など、スプライトの見た目を変更する命令が用意されています。

    ■音

    「meow(ニャーン)の音を鳴らす」「音量を-10ずつ変える」など、音に関する命令が用意されています。

    ■ペン

    「ペンを下ろす」「ペンの色を青にする」「ペンの太さを変える」「ペンを上げる」など、描画に関する命令が用意されています。

    ■データ

    変数やリストを作成し、「○○(変数名)を0にする」「○○(変数名)を表示する」など、変数やリストを制御する命令が用意されています。

    ■イベント

    「フラグがクリックされたとき」「スペースキーがクリックされたとき」など、イベントの開始条件を指定する命令が用意されています。

    ■制御

    「10回繰り返す」や「もし○○ならA、でなければB」など、ifやfor、loop、waitなどの制御を行う命令が用意されています。

    ■調べる

    ここはこれまでの命令タイプのブロックとは少し違い、制御文の「○○」に当てはまるような、「条件」にあたるブロックが用意されています。

    ■演算

    ここも「調べる」と同様に、「条件」に使用されるブロックが用意されています。「A+B」「A-B」などの算術演算だけでなく、「AかつB」や「AまたはB」などの論理演算もこちらです。

    ■その他

    新しくオリジナルのブロックを作成したり、拡張機能を追加したりすることができます。

    ▲目次へ戻る

    4.2 ブロックを配置する

    それでは実際にブロックを配置して、ネコを動かしてみましょう。

    (1)対象のスプライトを選択する

    スプライトリストを確認し、動きを設定したいスプライトが選択中であることを確認します。

    column_image6161_12

    (2)イベントの開始条件をセットする

    開始条件がなければ、どれだけ長いスクリプトを組んでも動かすことができません。そのため、まず「イベント」カテゴリをクリックし、開始条件を設定します。

    column_image6161_13

    今回は、「緑のフラグをクリックしたら」を設定します。この緑のフラグとは、画面中央上部にあるアイコンのことです。

    (3)ネコを動かす命令をセットする

    「動き」カテゴリの中から「10歩動かす」をつかんで、スクリプトエリアにドロップします。このとき、(2)で設定したイベントの開始条件ブロックと、つながるように配置します。なお「10歩動かす」のうち、背景が白くなっている数字の部分は任意の値に変更することが可能ですので、今回は「100」に変更しました。

    column_image6161_14

    とても単純ですが、たったこれだけで一番簡単なスクリプトの完成です。

    ▲目次へ戻る

    4.3 実行(テスト)してみる

    前項の(2)で設定したイベント開始条件を満たすことで、いつでもスクリプトが実行されます。今回は緑のフラグをクリックすると、ネコが進行方向に向かって100歩ぶん進みます。

    column_image6161_15

    ネコの大きさからこれで100歩!?と思われるかもしれませんが、1歩は座標の1メモリにあたるため、かなり小さめの1歩となっています。

    ▲目次へ戻る

    5.Scratchプロジェクトの公開(共有)方法

    5.1 自分のプロジェクトを公開(共有)する

    完成したプロジェクトを共有することで、他のユーザーにも自分のプロジェクトを見てもらうことができます。

    (1)共有ボタンを押す

    プロジェクトの右上に「共有」というボタンがあるので、クリックします。

    column_image6161_16

    クリックすると、それだけで共有完了になります。なおメールアドレスの認証が完了していないと共有することができずエラーになります。その場合は認証作業を行って下さい。

    column_image6161_17

    共有が成功すると、公開画面になります。使い方やメモが記入できるスペースがあるので、プレイしてくれる方に分かりやすいように編集して完成です。

    column_image6161_18

    ▲目次へ戻る

    5.2 他ユーザーのプロジェクトを閲覧する

    画面左上の「見る」をクリックすると、他のユーザーが共有したプロジェクトを閲覧することができます。とてもクオリティの高い作品が多数アップされていますので、ぜひ一度覗いてみて下さい。

    column_image6161_19

    ▲目次へ戻る

    6.Scratchでプログラムの基本を学ぼう

    Scratchは子供向けの教育用プログラミング言語だと思われがちですが、子供だけでなくこれからプログラミングを始めたいと考えている大人にとっても、とても優秀なプログラミングの学習ツールになります。共有されているプロジェクトには、まさかこんなものまで!?と驚くような、高度な作品がたくさんあります。興味のある方は、これを機会にぜひ公開されているプロジェクト一覧などご覧になってみて下さいね。

    ■Scratch2.0プロジェクト一覧ページ
    https://scratch.mit.edu/explore/projects/all

    月額単価60万円〜70万円
    勤務地 東京都 港区
    月額単価80万円〜100万円
    勤務地 東京都 港区
    月額単価60万円〜70万円
    勤務地 東京都 千代田区
    月額単価60万円〜90万円
    勤務地 東京都 港区
    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    フリーランス

    【GCP/PHP】APIManagerのDevelopperPortal刷新のためのシステム構築 NEW

    月額単価 :60万円〜70万円

    APIManagerのDevelopperPortalの刷新のため、新規システム構築業務を担当して頂きます。 【具体的業...

    フリーランス

    【AWS】インフラエンジニア★生活空間IoTネイティブアプリのSRE

    月額単価 :80万円〜100万円

    自社サービスとして展開している家庭内の生活空間向けIoTプラットフォームサービスのSREポジションを担...

    フリーランス

    【VB6.0/VB.net】システムエンジニア★販売管理システムのマイグレーション

    月額単価 :60万円〜70万円

    販売管理システムのマイグレーション(VB6.0⇒VB.net)を担当して頂きます。 【具体的業務】 ・工程...

    フリーランス

    【Java】システムエンジニア★キャリア向けiOS技術調査及び改修

    月額単価 :60万円〜90万円

    キャリア向けiOSの技術調査及び改修を担当して頂きます。 【具体的業務】 ・キャリア向けのサーバ、...