中学校技術・家庭科［技術分野］ 教授用資料

技 術分

新学習指導要領への第一歩

野

やってみようプログラミング
PROGRAMMING

目

次

プログラミング教育における技術分野の役割 …… ①

Scratch 編
Scratch とは ……………………………………
Scratch の基本を知ろう ………………………
Scratch のいろいろな操作方法 ………………
Scratch でメッセージを送ろう（制作例）……
Scratch で機器を動かそう（制作例）…………

p.2
p.4
p.6
p.8
p.14

ドリトル編
ドリトルとは ………………………………………
ドリトルの基本操作 ………………………………
ドリトルで通信しよう（制作例） ………………
ドリトルで機器を動かそう（制作例） …………

p.18
p.20
p.24
p.28

JavaScript 編
JavaScript とは ………………………………… p.32
本書で掲載された Scratch およびドリトルのプログラムのコード，および「Challenge」コーナーのプログラム例や実習の手立てなどを，開隆堂出版 Web サイトで公開しています。
（http://www.kairyudo.co.jp/cgh33i より「やってみよう プログラ
ミング」を選択してください）プログラミング教育における技術分野の役割
1 はじめに今回改訂された学習指導要領総則では，情報活用能力
が，言語能力及び問題発見・解決能力と並んで，学習の基盤となる資質・能力として例示され，各教科等の特質を生かした教科等横断的な視点から教育課程を編成し，その育成を図っていくことが求められている。そして，
特に小学校では，この資質・能力を育成する具体的な方策として，情報手段を適切に活用した学習活動の充実を図ることとともに，「プログラミングを体験しながら，
コンピュータに意図した処理を行わせるために必要な論
理的思考力を身に付けるための学習活動」の計画的な実施が求められている。
一方，中学校の総則には，プログラミングに関する記述はない。これは技術・家庭科技術分野というプログラ
ミングを学習内容とする教科があるためである。もちろん，中学校の他教科等でプログラミング教育を実施することも可能であるが，今回の改訂で重視されているプロ
グラミング教育について，技術分野は専門に行う教科として位置づけられ，大きな責任を担っていることを認識することが大切である。

2 プログラミング教育の目標

いいのか，記号の組合せをどのように改善していけば，より意図した活動に近づくのか，といったことを論理的に考えていく力）を育成すること。
【Ｂ】＜学びに向かう力・人間性等＞
・発達の段階に即して，コンピュータの働きを，よりよい人生や社会づくりに生かそうとする態度を涵養すること。【Ｃ】
なお，小学校理科の学習指導要領では，以下のようなプログラミングの活動が例示されているが，このように各教科等でプログラミング教育を行うのは，各教科の目
標の実現のためにこの活動が必要だからである。言い換
えれば，教科等でプログラミング教育を行う際には，教科等の目標とプログラミング教育の目標の両方の達成を目指すということである。
小学校学習指導要領
第３理科

指導計画の作成と内容の取扱い

２ 第２の内容の取扱い⑵ ＜略＞掲げるプログラミングを体験しながら論理的思考力を身に付けるための学習活動を行う場合に「小学校段階におけるプログラミング教育の在り方には，児童の負担に配慮しつつ，例えば第２の各学年

ついて（議論の取りまとめ）」では，各学校段階におけの内容の〔第６学年〕の「Ａ物質・エネルギー」のるプログラミング教育の目標を以下のように想定してい⑷における電気の性質や働きを利用した道具があるる。

ことを捉える学習など，与えた条件に応じて動作し＜知識及び技能＞
・小学校：身近な生活でコンピュータが活用されていることや，問題の解決には必要な手順があることに気付くこと。
中学校：社会におけるコンピュータの役割や影響を理解するとともに，簡単なプログラムを作成できるようにすること。
【Ａ】①

きに対応した記号を，どのように組み合わせたらていることを考察し，更に条件を変えることにより，動作が変化することについて考える場面で取り扱うものとする。

3 技術分野におけるプログラミング教育⑴ 基本的な考え方
先に示した考え方によれば，技術分野におけるプログ

高等学校：コンピュータの働きを科学的に理解す

ラミング教育は，技術分野の目標とともにプログラミン

るとともに，実際の問題解決にコンピュータを活グ教育の目標の達成も目指すことが大切ということにな

用できるようにすること。

る。しかし，技術分野の内容Ｄの目標を確認すると，(4)＜思考力・判断力・表現力等＞

まで含めれば，中学校におけるプログラミング教育の目

・発達の段階に即して，「プログラミング的思考」（自標は技術分野の中に全て含まれることがわかる。参考に，分が意図する一連の活動を実現するために，どの内容Ｄの各項目で目指す資質・能力一覧と，プログラミ

ような動きの組合せが必要であり，一つ一つの動

ング教育の目標の関係を表に示す。
【】で示された部

■内容Ｄ

情報の技術

資質・能力一覧とプログラミング教育の関係

知識及び技能思考力，判断力，表現力等

学びに向かう力，人間性等

・ 情報の表現，記録，計算，通信などにつ ・ 情報の技術に込められた工夫を読み取 ・ 進んで情報の技術と関わり，主体的いての科学的な原理・法則の理解る力に理解し，技能を身に付けようとする態度⑴ ・ 情報のデジタル化や処理の自動化，シス ・ 情報の技術の見方や考え方の気付き
テム化，情報セキュリティなどに関わる
基礎的な技術の仕組みの理解・ 情報通信ネットワークの構成と，情報を ・ 情報の技術の見方・考え方を働かせて，・ 自分なりの新しい考え方や捉え方に利用するための基本的な仕組みの理解問題を見いだして課題を設定し解決でよって，解決策を構想しようとする
・ 安全・適切なプログラムの制作，動作のきる力【Ｂ】
態度⑵
確認及びデバッグ等ができる技能 【Ａ】
・ 自らの問題解決とその過程を振り返り，よりよいものとなるよう改善・修正しようとする態度
・ 計測・制御システムの仕組みの理解
・ 情報の技術の見方・考え方を働かせて，・ 自分なりの新しい考え方や捉え方に・ 安全・適切なプログラムの制作，動作の問題を見いだして課題を設定し解決でよって，解決策を構想しようとする
確認及びデバッグ等ができる技能 【Ａ】 きる力【Ｂ】
態度⑶
・ 自らの問題解決とその過程を振り返り，よりよいものとなるよう改善・修正しようとする態度
・ 生活や社会に果たす役割や影響に基づい ・ よりよい生活や持続可能な社会の構築 ・ よりよい生活や持続可能な社会の構た情報の技術の概念の理解 【Ａ】に向けて，情報の技術を評価し，適切築に向けて，情報の技術を工夫し創⑷に選択，管理・運用したり，新たな発造していこうとする態度 【Ｃ】
想に基づいて改良，応用したりする力分が，プログラミング教育の目標と関係する部分である。

よって異なる応答（出力）を返す仕組みをもち，さら

ただし，先に示した理科におけるプログラミング教育に，コンピュータ間の情報通信を処理の一部に含むプはあくまでも例示であることや，他教科等でもこの教育が行われる可能性があることから，小学校で使用したプ

ログラミングを扱う。
○

計測・制御に関しては，小学校では，既存の計測・

ログラミング言語の種類や，他教科におけるプログラミ

制御のシステムを動作させる場合が多いと考えられる

ングの経験等も含めた生徒の実態を踏まえて技術分野にが，技術分野では，問題を解決するために，どのようおけるプログラミング教育を計画することが大切であなセンサーやアクチュエータが必要か，それをどのよる。

うに組み合わせるかといった計測・制御システムの構⑵ 今回の学習指導要領における変更点
今回の学習指導要領では，従前の「プログラムによる計測・制御」が「計測・制御のプログラムによる問題の解決」と変更されている。これは，技術によって問題を解決することを強調しているためである。

想も学ぶこととする。

4 おわりに現行学習指導要領では，課題の解決策を構想する際に「フローチャート」を例示していた。今回はこの部分を「アまた，これ以外にも，小学校における学習を想定し， クティビティ図のような統一モデリング言語」に変更し技術の専門性を明確に示すために，以下のような変更をている。これは，解決すべき問題によっては「並列処理」

していることを確認しておくことが大切である。

や「割り込み」といったフローチャートでは表現しにく○

従来から指導している機器等に組み込まれている

い処理が必要となる可能性があること。加えて，このよ「計測・制御」に関するプログラミングに加えて，コ

うなことを容易に実現できるプログラミング言語も普及

ンピュータやスマホ等の画面等で利用されている「コしてきているためである。

ンテンツ」を新たに取り上げる。具体的には，従前のこのようなことも含めて，技術分野だからこそできる「ディジタル作品の設計・制作」ではソフトウェアを専門性のあるプログラミング教育を行うためには，教師用いる例が多かったが，これをプログラミングによりが新たな内容について指導するために必要な知識等を身学ぶことに改める。

に付けることが必要であり，最近のさまざまなプログラ○

小学校の学習を発展させる内容とする。具体的には， ミング言語がどのような機能をもち，操作性がどのようコンテンツに関しては，小学校では音，画像など１種にかわっているのかを知ることがその第一歩である。本

類の入力情報に対し，片方向の定められた動きをくり冊子が，皆様のこれからのプログラミング教育実践に少かえす場合が多いと考えられるが，技術分野においてしでも役立つことを期待している。

は，複数の情報を扱い，使用者の働きかけ（入力）に（上野 耕史文部科学省初等中等教育局教育課程課教科調査官）

1

Scratch 編

基1 Scratchとは本

１ Scratch について
Scratch は，MIT（マサチューセッツ工科大学）が開発したビジュアル型のプログラミング言語です。ブ
ロックを用いたビジュアル型のプログラミング言語が，文字入力を中心とした言語よりも優れている点として，主に以下の 2 点が挙げられます。
●プログラムで使用できる命令がブロックとして画面の中に全て表示されているので，何ができるのか画面を見るだけで把握できる。
●ブロック同士はマウス操作でつなぎ，文法的に間違っている場合はブロックをつなげることができない
ので，プログラミング言語の文法が分からなくてもその形状で何がつながるのか把握できる。
そのため生徒たちは，自分がプログラムで表現したい・実現したいことを考えることに専念できます。
Scratch は子ども向け言語というわけではなく，複雑で高度なプログラムも作ることができます。2018
年 1 月現在，全世界で 2357 万人がコミュニティサイトにユーザ登録している人気の言語です。また
Scratch には，プログラムを作るときに必要となるサンプル画像や効果音などが最初から豊富に用意されている上に，自分で画像を描く，編集する，カメラで撮影する，音を録音する機能があるので，メディアを統合的に扱いやすくなっています。

２ Scratch 1.4 を準備しよう
Scratch には，いくつかのバージョンがあります。バージョンによって得意なことが違い（表 1），
バージョンが新しい方が優れているということではありません。ネットワークを利用した双方向性のあるコンテンツを作成するには Scratch 1.4 というバージョンを使います。Scratch 1.4 はhttps://scratch.mit.edu/scratch̲1.4/にアクセスし，Windows であれば図 1 のリンクからダウンロードします。解凍すればコンピュー
タにインストールしなくても使えます。
こちらを使います
Scratch の Web ページが日本語でない場合は，ページ下部にあるドロップダウンリストから「日本語」を選択します。
図1
表１

機

Scratch のバージョンの主な違い

能Scratch 1.4

Scratch 2.0

作成したプログラム同士でネットワーク通信する機能（Mesh と言います）〇

×

ダウンロードせず Web だけでプログラムを作成すること×〇※

音の録音や編集〇〇

画像作成や編集〇〇※ 2018 年 1 月現在は Flash が必要ですが，Flash 無しでも動く Scratch 3.0 が公開される予定です。

2

Scratch1.4 のダウンロード

３ Scratch 1.4 の画面構成と主な機能
Scratch でプログラムをするキャラクター等はスプライトと呼ばれます。起動直後はサンプルとしてネコのスプライトが表示されます。Scratch では，必要なスプライトを用意し，各スプライトをどのように動作させるか，ブロックを組み合わせて指示することでプログラミングを行います。図２では，「④スプライト
リスト」からネコが選択されています。ここで選択されたスプライトに対して，「カテゴリー」で選ばれた「①ブロックパレット」から「②スクリプトエリア」にブロックをドラッグ＆ドロップしてスクリプトを作成している様子です。プログラムの実行結果は，「③ステージ」で見ることができます。
「メニューバー」では，ファイルの保存，読み込み，スプライトの拡大縮小，全画面表示などをすることができます。

メニューバー

③ステージ
カテゴリー

②スクリプトエリア

①ブロック
パレット
スプライト

④スプライトリスト

図2

Scratch 1.4 の画面構成

Scratch 1.4 の画面構成③ステージ①ブロックパレット
やな ど，Scratch に 用 意 さプログラムの動作を確認する領 （-240,180）

れている命令をブロックと呼びます。ブロックはさまざ域です。ステージの広さは 480 ピ

まなカテゴリーに分類されています。

クセル× 360 ピクセル，で，右図のような座標です。

（0, 0）（240,-180）②スクリプトエリア
プログラムを編集する領域です。上部には「スクリプト」「コスチューム」「音」の３つのタブがあります。

④スプライトリスト
使用するスプライトの追加や削除ができます。

3

Scratch 編

基2 Scratchの基本を知ろう

本

１ スプライトを動かしてみよう
Scratch でプログラミングを行うための基本的な操作や用語について学んでいきましょう。
１. １

Scratch の基本操作①①スクリプトScratch ではプログラムのことを「スクリプト（英語で「脚本」という意味）」と呼びます。脚本の通りに「ステージ（舞台）」上で「スプライト（演者）」が動きます。
また，スプライトの見た目は「コスチューム（衣装）」で指定するといったように，Scratch は演劇にたとえられます。スクリプトは，ブロックを積み重ねて作ります。

「スクリプト」と呼ぶ②ブロックのつなげ方②ブロックのつなげ方
元々あるブロックの下に，つなげたいブロックを白く光るところまでドラッグ & ドロップします。
③ブロックのはずし方③ブロックのはずし方

１段目のブロックから２段目のブロックをはずした
いときは，２段目のブロックをドラッグします。そのとき，２段目から下のブロックも一緒にはずれます。
④ブロックの消し方
消したいブロックをブロックパレットにドラッグ& ドロップします。また，消したいブロックの上で右④ブロックの消し方

クリックをすることで表示されるメニューの中にある「削除」を選択して消すこともできます。
⑤スクリプトの開始の合図
をクリックすることで，「がクリックされたとき」のブロックがついたスクリプトが動き出します。
⑥スクリプトを止める合図

ブロックパレットへドラッグ＆ドロップするをクリックすることで，実行中のすべてのスク
リプトが止まります。

⑦⑦「ずっと」のブロック「ずっと」のブロックは，ブロックの間に挟まれたスクリプトを永久に繰り返し行うためのものです。
Scratch には，回数を設定できるものなど，いくつかのブロックが用意されています。

4

この間が繰り返される１. ２

Scratch でプログラミングしてみよう（スプライトをダンスさせる）①，②① 「動き」のブロックパレットにある「10歩動かす」のブロックをスクリプトエリアに移動させます。
①②①の手順と同様に「音」「見た目」のブロッ
クパレットから，ブロックを移動させつな②

げます。
※ブロックパレットとブロックの色を参照すると見つけやすくなります。

③③

同様の操作でスクリプトの続きを作ります。「10 歩動かす」のブロックの数字をクリックし，半角で「− 10」と入力します。

④ 「制御」のブロックパレットから，「ずっと」のブロックを移動し，③で作成したスクリ「-10」に書き換える

プトの全体を挟むように追加します。
⑤ 「見た目」のブロックパレットにある「こ一番上のブロックに合わせると全体が挟まれる

んにちは！と 2 秒言う」のブロックを，ス④

クリプトエリアに置いた「ずっと」の上につなげます。

⑥ 「制御」の中の「 がクリックされたとき」のブロックをつなげます。
◇

をクリックしてプログラムが動作する
か確認します。このプログラムはずっと動き続けます。止めたいときは，

をクリッ

クします。
⑤，⑥

⑥

⑤

C hallenge
新しい音を読み込んだり，録音したり，新しいコスチュームにカメラを使ってコマ撮りしたりすることで，マルチメディアの学習を考えてみましょう。

5

Scratch 編

１

3 Scratchのいろいろな操作方法

基

本

変数と条件分岐を使う
ネコをクリックすると，クリックされた総回数をネコがセリフとして言い，スペースキーを押すと回数がリセットされて 0 に戻るプログラムを作りましょう。
ここでは，クリックされた回数を表示する簡単なプログラムをつくります。クリックされると回数が 1 つずつ増える単純なものですが，コンピュータは前の数字を記憶させないと，１を足した次の数字を求めることができません。こうした一時的に情報を記憶させておくもののことを「変数」と言います。
①

最初に，スプライトリストにあるネコをクリックして選択します。

①

変数を作るには，オレンジの「変数」カテゴ
リから「新しい変数を作る」を押します。変数は，いくつでも作ることができますが，名前をつけて識別できるようにします。今回は「kaisu」にしましょう。
通常は「すべてのスプライト用」として作成します。
②

次に，目的の動きができるようにスクリプトを作っていきましょう。

変数は，プログラムを作る上ですぐに必要となる概念です。

紫 の「〜 と 言 う 」 と い う ブ ロ ッ ク の 中 に

Scratch では，変数に日本語で名前をつけることもできます「kaisu」と名づけられた丸いオレンジの変数ブが，後で説明する Mesh でネットワークを利用する場合に，ロックを入れることで，変数の値を言わせるこ

日本語が正しく表示されませんので，半角の英数字で名前をとができます。

つけるようにしましょう。

C hallenge②

偶数の時にネコが鳴くようにしましょう。下図のように，「〜もし〜なら」ブロックの中に
3 つのブロックを入れて条件を指定します。
もしこのプログラムが正しく動作しない場合
は，Scratch 1.4 のダウンロード方法を再度確認してみましょう。

「〜を〜ずつ変える」というブロックは，もともと「1」と書かれています。Scratch では，白い窓の部分は，自分で書き換えや，変数や計算するブロックを入れることができます。

6

Mesh でネットワークを利用した通信をしよう

２

Scratch 1.4 には， さ まざ ま な 拡 張 機 能 が あります。新学習指導要領に対応した授業をする た め に，Scratch の Mesh という機能を使えるようにしましょう。これは最初に一度設定するだけでよく，以下の手順で一度作成した「Scratch.image」のファイルを，他の PC のものに上書きするだけで，Mesh が使えるよ
うになります。Mesh を使うと，文字を送信したり，他のコンピュータのスプライトを動かしたり，対戦したりするような，ネットワークを利用した双方向性のあるプログラムを簡単に作ることができます。

Mesh を使えるようにすると，コンピュータ室などのネットワークに接続①

Scratch の 左 上 に あ る，Scratch

されている複数のコンピュータ同士で，変数の共有や，「〜を送る」ブロッのロゴの R の文字をシフトキーを押クを使用して，離れているコンピュータへの指示などができます。

しながらクリックします。

④② 「turn ﬁll screen oﬀ」を選びます。
③

Scratch ウィンドウの下部と右側に表れた灰色の部分をクリックしてメ ニ ュ ー を 表 示 さ せ，
「open...」 →「browser」を選び左図のシステムブ
ラウザを表示させます。

この部分を書き換える。設定によってはカーソルが見えにくいので注意する④

システムブラウザの左側から順に「Scratch-UI-Panes」→「ScratchFrameMorph」 →「menu/
button actions」→「addServer

CommandsTo:」 と 順 に ク リ ッ ク
し，「t2 ← true.」の箇所を「t2 ←※ Mesh を使ってプログラムを作るときは，設定を終えた Scratch で，

false.」に変更します。「.（ピリオド）」

Mesh ネットワークに参加させます。情報をやりとりしたい生徒たち（クは消さないようにしましょう。

ラス全員でも構いませんし，班ごとでも構いません）でグループを作ったら，その中の 1 名は Scratch で，シフトキーを押しながら，メニューバー⑤

システムブラウザ上で右クリッの「共有」をクリックします。すると下図のメニューが出るので，「Host

ク →「accept」 を 選 び， 開 い た

Mesh」を選びます。

ウィンドウにイニシャルを入れて，「accept」を押します（イニシャルは，
編集の識別として入れるだけです）。
⑥

左上の×を押し，システムブラウ
ザを閉じて，再度 Scratch のロゴのすると画面に IP アドレスが表示されるのでメモしておきます。

R の文字を，シフトキーを押しなが次に，他の Scratch を使っているグループメンバーは，自分の PC のらクリックし，メニューから「saveScratch で同様にシフトキーを押しなら「共有」
をクリックし，
今度は「Join

image for end-user」→「Yes」を選

Mesh」を選び，先ほどメモした IP アドレスを入力します。

ぶと，Mesh が使える設定になった

そうすると，それらの Scratch 同士でネットワークを利用して情報交換「Scratch.image」が作成されます。

できるようになります。

7

Scratch 編

１

4 Scratchでメッセージを送ろう

制作例

Scratch の Mesh 機能を活用して，メッセージを送ってみよう！

Scratch の Mesh 機能を活用すると，同じネットワークに接続された PC で実行されている Scratch 同士で通信を行うことができます。ここでは，A さんと B さんで変数を共有し，A さんが作ったスクリプトから B さんが作ったスクリプトに対してメッセージを送る作品を作ってみましょう。
＜作品のイメージ＞

message「Hello」
と送って
みよう！

変数

〜セ

ンサ

Hello

ーの

値

「Hello」
ね！

message A〜を送る〜を受け取ったとき

Mesh ネットワーク
Aさん

Bさん

※ p.7 のように，Mesh が使えるようにした Scratch 1.4 を使用します。

P oint①

送信者はスプライト１（今回はネ①コ）のキャラクターをクリックする○ 現 状，Mesh で 送 ることで，任意の文字列を入力できことができる文字列はます。入力された文字列は，「答え」

半角英数字のみです。

という変数に入れられます。「答え」○ A から送信されたことという変数は，Mesh で内容を共有を把握するために，「送することのできない特別なものなのる」と「受け取る」をで，別の変数（今回は A からのメッ使用します。共有されセージという意味で，messageA とた変数と違って，こちつけました）を作成します。

Aさん側

Mesh を 通 じ て， 変 数
message が共有される。

らは自分で入力しなけ
ればなりません。打ち間違えないように注意しましょう。

②

共有された変数の値を取得するには，「〜センサーの値」を使います。
〜の部分には，Mesh 上で共有されている変数名が表示されます。

C hallenge
・ 送信側と受信側が交代をして，どちらのスクリプトも作成し，より理解を深めてみましょう。
・ 現在の作品では送信側から受信側への一方的な通信となっています。
「双方向」にメッセージをやり取りにするにはどうした
らよいかな？（p.9 から解説しています）

8

②

Bさん側

「〜を送る」は，スプラ
イト同士でタイミングを取るための合図のようなものです。今回は，messageA という合図の名前をつけました。

２

Scratch の Mesh 機能を活用して，クイズを作ってみよう！

p.8 の作品をさらに発展させて，英単語クイズを作ってみましょう。ペアで問題を出題し，解答者と，解答に正解・不正解のフィードバックを返す人の作品を作ってみましょう。
＜作品のイメージ＞①

B さんが口頭で問題を出します。

② A さんが解答をコンピュータに入力します。

「Apple」
かな？

「りんご」
を英語で
いうと？
Bさん

Aさん

Aさん

Bさん

答え送信

③ B さんは送られてきたデータを確認し，正解・不正解の結果を返します。

④

A さんのコンピュータに結果が表示されます。

よし，正解
しているよ

やったー!!

Aさん

Bさん

Aさん

Bさん

結果を送信

①
①

スプライト１では，スクリプトの実行者が任意の文字列を入力し，変A さんの画面イメージとプログラム

数（ここでは「answer1」）に格納し，
answer1 の内容が変更されたというメッセージを B さんの Scratch へ送ります。

スプライト 2

スプライト 3②

スプライト２と３は＜作品のイメージ＞の④で A さんのコンピュー
タの画面に正解か不正解かを表示するためのものです。スクリプトを実行し，①〜③までは表示せず，④でスプライト 1「〇」か「×」のどちらかを表示します。

P oint○ 変数については p.6 を参照しましょう。
○ 正解・不正解の表示はデジタル画像の編集として生徒に工夫させることが考えられます。また，画像で表示するだけでなく，音も鳴らす等の工夫も考えられます。

9

③

A さんが入力した文字列を 2 秒間表③

B さんの画面イメージとスクリプト

示し，その後に正解であれば「y」，不正解であれば「n」の入力を促すスクリプトです（ここでは仮に「y」，「n」
としていますが，別の英数字を使うことも可能です）。
④

条件分岐である「もし〜なら」を使って，正解・不正解によって A さんに返す結果を変えています。

P oint2 秒後○「answer1 センサーの値」というブロッ
クは，最初「スライダーの値」と表示されています。
「▼」をクリックして，自分で変更しましょう。
○条件分岐については p.6 を参照しましょ
う。

④

⑤

B さんの入力結果によって，A さんの画面表示が変わります。
⑤

A さんの画面イメージ

正解の場合は「correct」
不正解の場合は「incorrect」という文字列でスプライト 2，スプラ
イト 3 のどちらを表示するかを決めています。
（p.9 のスプライト２と３のプ
ログラムを参照。
）
正解時

C hallenge
・繰り返しスクリプトを実行することを前提に，正解した数をカウントして表示する等の工夫をしてみよう。
・現在は B さんが口頭で問題を出していますが，B さんの問題もコンピュータで入力する作品にするにはどうしたらよいかな？（p.11 から解説しています）

10

不正解時

３

双方向性のチャットを作ってみよう！（発展）p.9 〜 10 の作品をさらに発展させてみましょう。前回はＢさんが口頭で問題を出していましたが，ここではＢさんからのメッセージとし，口頭ではなくコンピュータで通信をして，ＡさんとＢさんで何度もメッセー
ジのやり取りができるような作品を作ってみましょう。

＜プログラムのイメージ＞「How are you?」と送ってみよう！

変数→「messageA」→〜センサーの値〜を送る⇒「messageA」⇒〜を受け取ったとき「I m fine, and you?」と返してみようかしら？

〜センサーの値←「messageB」←変数〜を受け取ったとき⇐「messageB」⇐〜を送る

Mesh ネットワーク
Aさん

①

Bさん

①

A さんの画面イメージとプログラム

A さんの画面では，ネコのスプライトをクリックすると，メッセー
ジを入力することができます。

P oint○ 変数については p.6 を参照しましょう。また，現在はをクリックすることでスクリプトが始まりますが，をクリックの代わりにキーボードのキーを割り当てるなど，使いやすさを考えて工夫させてみましょう。
②

B さんの画面イメージとプログラム②

B さんの画面では，A さんから送られてきたメッセージが表示され，チョウのスプライトをクリッ
クすることで，返事を入力することができます。

※スプライトは，新たに作成するたびに「スプライト●」の●の部分の数字が増えた名前が自動的につけられます。スプライトが増えてくると識別しにくくなるので，分かりやすい名前をつけるとよいで

P oint○ メッセージは A さんと B さんのどしょう。今回は，「butterﬂy」と「cat」という名前をつけています。

ちらからでも送ることができます。

11

P oint○ 作品が完成して，お互いに会話が可能となったら，送信するメッセー
ジが相手にとって適切なメッセー
ジかどうか，情報モラルでの指導③

A さ ん の 画 面 に，B さ ん③

A さんの画面イメージから送られてきた文字が表示されます。その後，会話を続ける場合はネコのスプライトをクリックします。

事項と組み合わせて考えさせてみましょう。

C hallenge
・会話の履歴が残るにはどうしたらよいかな？
・メッセージが送られてきたことを相手に確実に通知するにはど
うしたらよいかな？
・p9 〜 10 のクイズの作品と組み合わせて，お互いに問題を出し合い，結果を返す作品を作ってみよう！

４

双方向性のチャットのまとめ
今までの作品をまとめて，各画面のスプライトのスクリプトが，他のスクリプトとどう関係しているのかを図示しながら授業を行うことでより理解が深まることが考えられます。しかし，この作品では，最低限の機能だけなので不自由なことがたくさんあります。メッセージが届いたことをより確実に知らせる方法や，チャットをやり過ぎないように使用時間の制限をかける機能や，安全性を高めるため使用時にパスワードを入れるようにするなど，メディアを複合させるようにしてさらに工夫を加えてみましょう。

Aさん

12

Bさん

５

その他の活用例

5.1 Pyonkee（ピョンキー）これまで説明した作品は，iPad 向けに開発されている「PYONKEE」というアプリでも実行できます。名前や登場するスプライトは多少異なりますが，スクリプトの作り方やブロックの種類など，Scratch 1.4との共通点も多く，同じように操作できます。また，設定を変更することなく「Mesh」を用いた通信も可能です。
Pyonkee を使えば，iPad に搭載されているさまざまなセンサー（照度センサーや，加速度センサーなど）の値を取得（計測）して利用す

ipad に搭 載されているセンサーの一覧

ることができます。これらのセンサーの値を「Mesh」の機能を用いて通信することで，PCだけではできなかったさまざまな計測を用いた
双方向性のコンテンツを簡単に制作することができます。

5.2 Scratch でドローンの制御
Scratch は直感的に扱いやすく，操作性が優れています。そのような特長を活かして，Scratch でさまざまな連携ができるようになってきました。右図は拡張した
Scratch でドローンを飛ばすスクリプトの一部です。
出典：「スクラッチ言語拡張によるミニドローン・プログラミング飛行」 車輪の再発見
http://www.rediscovery.co.jp/?p=1125

5.3 Scratch でのプログラミング経験を他の言語に活かす
Scratch のようなビジュアル型のプログラミング言語は，他にもさまざまな種類があります。例えば，
MOONBlock（ムーンブロック）（図 1），やプログラミン（図 2），ビスケットなどが挙げられます。また
App Inventor を使えば，ブロックをつなげることで動く Android アプリの制作も可能です。

図1

MOONBlock の例

出典：「MOONBlock とは」 秋葉原リサーチセンター

図2

プログラミンの例

http://www.moonblock.jp/docs/「子供向けウェブサイト『プログラミン』について」 文部科学省

http://www.mext.go.jp/b̲menu/houdou/25/10/

attach/1340677.htm

13

5 Scratchで機器を動かそう

Scratch 編

１

制作例

システムを構想しよう
新学習指導要領の計測・制御では，「システムを構想」するという点が大きく変わりました。IT 用語辞典

バイナリでは，システムとは「複数の要素が体系的に構成され，相互に影響しながら，全体として一定の機能を果たす何物かのこと」と書かれています。つまり，要素が複数あること，それらが相互に・有機的に影響しながら，目的とする機能を実現して問題を解決することが求められていると言えます。従来の計測と制御では，単一のセンサーと単一のアクチュエータでよかったですが，システムを構想するためには，複数のセンサーや複数のアクチュエータなどを扱って問題を解決する必要があります。
これまでのイメージ（自動走行ロボを例に）これからのイメージ（自動走行ロボを例に）目的地まで自動走行する

目的地まで安心・安全に自動走行する

前方左右の超音波センサー
で，左右の壁衝突検知

ボディ前方下部の光センサーで，落下空隙検知前方左右の超音波センサー
で，左右の壁衝突検知

マイクで，一定音量を超えた場合に，緊急停止

2つのモーターの制御など

2つのモーターの制御など

センサーの状況を示すLEDの制御

Scratch は汎用的なプログラミング言語なので，多くの計測・制御できるハードウェアが対応しています。
Scratch を拡張して独自のブロックが用意されているものもありますが，Scratch には，予め図 1 〜 4 のような命令が使えるようになっています。Mesh ネットワークを使わないのであれば，Scratch 2.0 でも使用できます。また，Scratch と同じ操作感でプログラミングができる Studuino を使用してもよいでしょう。
例えば，「〜センサーの値」ブロック（図 1）では，図 2 や図３のようなセンシングが可能です。またモータの制御であれば図４のようなブロックを使うことができます。

図1

図2

図3

Scratch とすぐに接続して計測・制御が可能なハードウェア例（詳細な使い方も載っています）
・「nekoboard2」 https://www.switch-science.com/catalog/2700/
・「なのぼ〜ど AG」 http://tiisai.dip.jp/?page̲id=935

14

図4

２

計測・制御の準備をしよう＜計測・制御システムへの第一歩＞

センサーで周囲の状況を取り込むには，
どうすればよいかな？
音と明るさにしてみよう

ここでは Scratch と「nekoboard2」（スイッチサイエンス社）を使用してセンサーを活用する方法を紹介します。Scratch で動作させられるものは，「Studuino」（アーテック社），「なのぼ〜ど AG」（ちっちゃいものくらぶ），「Scratch for Arduino」などがありますが，基本的には同様なスクリプトで動作します。
初めは手順を理解することが大変に思うかも知れませんが，それぞれの手順には情報の技術としての原理的な意味や，技術の基本的な仕組みと関係があります。実習を体験だけで終わらせないためにも，手順と作業の必要性にも触れるとよいでしょう。
③ -1）① USB ケーブルで，nekoboard2 をパソコンと接続する② Scratch を起動する③ ScratchBoard 監視板を表示させる③ -2）

ScratchBoard 監視板の表示させるためには，以下の手順が必要です。
1）ブロックパネル「調べる」をクリックする。
2）ブロックパレット下部「○○センサーの値」
を，
右クリッ
クし，「ScratchBoard 監視板を表示」をクリックする。

③ -3）3）ステージに表示された監視板を右クリックし，「シリアルか USB のポートを選択」をクリックする。
4）Windows なら COM １から順にクリックする。

④,⑤④ nekoboard2 の値を Scratch に表示する⑤センサーの値をスプライトに表示させる
スプライトにセンサーの値を表示させるためには，「見た目」の「○○を言う」の○○に「調べる」の「○○センサーの値」を入れます。

P oint○ ボードの裏面に金属が当たらないように注意しましょう。
○ Windows の COM ポートはデバイスマネージャーで調べることが出来ます。
○ 監視板起動中は nekoboard2 等を取り外さないで下さい。終了時は，ステージ上に表示されている監視板を右クリックし，「ポートを閉じる」をクリックして下さい。
○ ポートを閉じた後に，Scratch を終了させて下さい。
○ スマホなどの充電専用ケーブルでは動作しません。

15

３ 計測・制御の構想・制作をしよう＜計測・制御するイメージ＞センサーの値によって結果がかわる作品を作ろう

Scratch とセンサーの接続が出来たら，センサーの値を利用していきましょう。明るさによってスプライトの動き方を変化させるために，具体的な課題を設定して，情報の処理の手順とスクリプトを考えていきます。
＜情報の処理の手順のイメージ：フローチャートでの設計例＞
周囲の明るさに応じて表現を変えるどれくらいの明るさで表現を変えるか
・暗いときと明るいときの閾 となる
値を調べよう。
暗い ‒（）‒ 明るいこのような手順で，計測した値を利用すればいいかな。でも，これだとどんな時に表現が変わるか分からないなぁ…。

①センサーの値がどのようなときに，どのような動きを①させるか，手順を考える
スプライトでセンサーの値によって表現が変わるよ
うにします（目的によって最適な閾値を設定します）。
②手順に従ってスクリプトを制作する
明るさセンサーの値を常に確認させるため，「ずっと」動くようにブロックを追加します。
③考えた手順通りにスプライトが動いているか確認する（デバッグ）

C hallenge
・微妙な明るさのときでも表現が安定するようにしてみよう！
・Mesh を利用して，センサーの値を違うコンピュータに送れるようにしてみよう。
16②

これならうまくいきそうだぞ。
でもなんだか，微妙な明るさだと，交互に表示が切り替わるなぁ…。

４

計測・制御システムを構想・制作しよう＜計測・制御システムのイメージ＞

生活を便利にする計測・制御システムを作ろう！
複数のセンサーやアクチュエータをどのように連携させられるかな？

いよいよ計測・制御システムを構想していきます。ここでは，「雨が降ってきたら洗濯物を自動的に取り込むシステムを例に構想・設計していきましょう。
＜情報の処理の手順のイメージ：アクティビティ図での設計例＞
雨で洗濯物を濡らしたくない

雨が降ることを予知したい
・雨が降ってくるときの条件はなんだろう→湿度が上がる，気圧が下がる？
→雨の匂い？
→風が変化する？
→気温が変化する？

洗濯物があまり濡れなくなった
け ど， 雨 が 降 ってくる前に取り込めないかな。

理科で習ったことを活かしてみよう！
たくさんのセンサー情報を総合的に使わなきゃ。

複数のセンサーを同時に利用する例（並列処理）

センサーを使って数値を取り込むことはできそうだな。毎日，テレビや新聞で扱っている天気予報が利用できないかな？

①システムの目的を考え，センサーやアクチュエータを選ぶ
目的に従って，スプライトごとにセンサーの値によってアクチュエータが動くようにします。センサーとアクチュ
エータを別々に作っておくと，デバッグしやすくなります。
②設計をもとにスクリプトを制作する③設計通りにスプライトが動いているか確認する（デバッグ）

C hallenge
・複数のセンサーを使って目的の動作をさせてみよう。
同じスクリプトエリアに必要なだけ
スクリプトを書く【更なる発展例】
・Raspberry Pi に Python をインターフェースとして，
Scratch を使うことでインターネット上の天気予報を取得することが出来ます。
17

ドリトル編

1 ドリトルとは基本

１ ドリトルについて
ドリトルは，初心者でもプログラミングが学びやすいように設計された教育用プログラミング言語で，大阪電気通信大学の兼宗進教授により開発されました。教育用ですが，オブジェクト指向という考え方が取り入れられています。
ドリトルのプログラムは，テキストを入力しながら作成していきます。ブロック型のプログラミングとは異なり，キーボードから命令を直接打ち込む必要がありますが，以下のような特長があります。
●命令が日本語を中心に構成されているため，初心者でもわかりやすい。
●オブジェクト指向を取り入れているため，社会におけるプログラミングの主流である，オブジェクト指向によるプログラミングを学ぶことができる。

２ オブジェクトとドリトルについて「かめた＝タートル！
作る。
」という命令オブジェクト指向は，現在のプログラミングの主流になっています。オブジェクトを作り，それに命令を与えて実行する方法です。プログラミングを習った経験がある人でもイメージしにくいかもしれません。そこで，オブジェクトを作るということを，ドリトルではどのようにプログラムで実現しているのか説明します。ドリトルには，あらかじめ何種類かのオブジェクトが用意されています。その代表的なものが，タートルオブジェクトです。例えばドリト
ルのプログラムでタートルオブジェクトの「かめた」が作成された「かめた＝タートル！作る。」という命令があります。この命令は，タートルと

図1

ドリトルのプログラムのイメージ

いう名前のオブジェクトを作り，それに「かめた」という名前をつけるという意味です。ドリトルではこの「かめた」に命令を与えてさまざまな図形やアニメーションのプログラムを作成します。
このように，オブジェクトを作るということは，ドリトルで用意されているオブジェクトを複製して命名するという手順をとります。本文では，オブジェクトのことをよりわかりやすくするために「部品」と表現しています。部品を作り，構成していくという考え方は，ものづくりの作業とどこか似ていないでしょうか。
ドリトルでは，タートルオブジェクト以外にも，タイマーオブジェクトやボタンオブジェクト，制御命令用のオブジェクト等が用意されています。それらを部品と考え，自分で使えるようにカスタマイズしながらプログラムを構成していくことは，技術・家庭 技術分野における設計の学習にもつながる考え方です。さらには，自分が作ったプログラムをオブジェクト（部品）として考えると，他者と部品を共有しながらプログ
ラムを作っていくことも可能になります。

18

３ ドリトルを準備しよう
ドリトルは，オンラインで使う方法と，ダウンロードしてこちらを使います

使う方法があります。本書では，ダウンロードして使う方法を解説します。
http://dolittle.eplang.jp/downloadにアクセスし，Windows であれば図 2 のリンクからダウ
図2

ンロードします。解凍すればインストールせずに使えます。

ドリトルのダウンロード

解凍したフォルダにある，「dolittle.bat」をダブルクリッ
クすると，ドリトルが起動します。
「dolittle.bat」をダブルクリックで起動します

ド リ ト ル は Windows 用，Mac 用，Linux 用，Raspberry Pi
用があります。また，開発版もありますが，ここでは正式版のWindows 用を例に進めます。

図3

ドリトルの実行４ ドリトルの画面構成と主な機能
ドリトルは，編集画面と実行画面で構成されています。編集画面では，主に日本語と数字を使ってプログ
ラムを作成します。編集画面の「実行！」ボタンを押すと，実行画面に結果が表示されます。
編集画面

記述したプログラムを操作する
ボタン（コピー，貼り付けなど）
特定の文字列を検索する。指定した文字列があると黄色く表示される
MIDI の音源を選択するボタン
ここにプログラムを記述します
サーバーが起動し，ネットワー
ク通信ができるようになる

実行画面

プログラムの実行結果が表示されます
実行！ プログラムの実行
中 断 実行しているプログラムの中断

画面クリア 画面をプログラム実行前に戻す

開 く 保存されたプログラムを開く

閉

保 存 編集中のプログラムの保存

方 眼

印 刷 表示されているプログラムの印刷※実行画面と違うもののみ説明します

じる 実行画面を閉じる
紙 背景に格子模様が表示される

終 了 プログラムの終了

図4

ドリトルの画面構成と機能

19

ドリトル編

2 ドリトルの基本操作

基本

タートルオブジェクト，アニメーション，GUI 作成を含むプログラムを作成します。タートルオブジェクトが移動した跡が線になるため，星型を描画するように移動させましょう。また，移動の過程が見えるようにタイマーを設定することで，アニメーションのように動きを表示することができます。ドリト
ルではボタンなどの GUI 作成も簡単にできます。描かれた線の色を変更する
ボタンを作成してみましょう。

１ オブジェクトの操作（図形の描画）①オブジェクトを作る

ドリトルはカメ型のオ
ブジェクトを動かすこと が 基 本 で す。 オ ブ
ジェクトは変更することもできます。

①

ドリトルは，必要な部品を作りながらプログラムを作ります。
まずは「かめた」という名前のタートルオブジェ
クトを作成します。
②（順次）②オブジェクトに命令する「かめた」を移動（歩く）して，100 進んだところ
で 144°右回転します。5 回繰り返すと星型になりま
す。

実行画面
（反復）

（順次）作った部品に何をさせるかを命令します。
命令を並べれば，その順で実行します。
（反復）同じ命令を何度も繰り返す場合は，短くま「 」の中を５回繰り返す命令

とめることができます。
実行画面※同じ部品への命令は，短縮して書くことができます。

「歩く」と「右回り」を１行で記述できる③新しく部品を作る③

描いた図形を，新たな部品として使うことができます。描いた図形を「星」という部品として名づけます。
色は「黒，赤，緑，青，黄色，紫，水色，白」などがあらかじめ準備されています。好きな色を作ることも可能です。
20

実行画面

※図形を作る前に色を指定すると，色を塗ることができます。

④ 作った部品（図形）を使う

実行画面

作った部品（図形）は移動したり複製したり色を塗り直したりできます。
「星」④に命令して移動してみましょう。
< 命令 >
図形の名前！（a）（b）移動する。
X 軸方向の移動量 a, Y 軸方向の移動
量 b を設定します。図形を原点として，
右方向および上方向がプラス，左方向
および下方向がマイナスになります。

① タートルを動かす

２ アニメーション
タートルや作った図形などの部品を一定間隔で動かすと，アニメーションを作ることができます。

タイマーを使って一定時間ごとに動かすことで，アニメーションのように見せることができます。

①< 命令 >
時計！「・・・」実行。
・・・の部分に命令を書くと，一定間隔で記載した命令を実行します。
② 速度や時間，回数を変えるタイマーで動かす間隔や時間，繰り返す回数などを指定することができます。
< 命令 >
タイマーの名前！ < 秒数 > 間隔。
実行画面

実行する命令の実行間隔を指定する。
＜秒数＞に設定する値の単位は秒。

②< 命令 >
タイマーの名前！ < 秒数 > 時間。
最初に命令を実行してから何秒間繰り返すかを指定する。
0.5 秒毎に１０秒間命令を実行

１秒毎に５回命令を実行< 命令 >
タイマーの名前！ < 回数 > 回数。
命令を実行する回数を指定する。

21

③③ 図形を動かす
図形を部品化している場合は，図形自体をアニメーションに利用できます。
図形を「星」として部品化し，タイマーを使って回転しながら右下に移動させてみ
ましょう。

1）

C hallenge

2）

3）

4）

5）

・違う形の図形を描いてみよう。
・図形を違う方向へ移動させてみよう。
・図形がゆっくり動くようにしてみよう。

３ GUI（使う人の操作に応答する）
プログラムを使う人の操作などに対して，動きの変化などで応答する機能を持ったプログラムが作れます。
①①ボタンを作成する
ボタンを作成して，押すと星の色が変わるようにしてみましょう。動かす人の動作に応じて結果が変わるため，双方向性のあるコンテンツにつなげていくことも考えられます。
< 命令 >
ボタンの名前＝

ボタン！

作る。

（ボタンの名前）という名前のボタン（部品）を新しく作る。「」内はボタンのラベル。
< 命令 >
ボタンの名前：動作＝「・・・」。
・・・に命令を書くと，そのボタンを押した時に命令を実行する。
「赤色」ボタンを押す

星の色が赤くなった
実行画面

22

４ 動く絵本の作成（応用）
タートルを動かして絵を描き，その絵を動かして，物語のあるコンテンツを作ることができます。
下記は，海の上を進むヨットをイメージしました。進むほどにヨットが小さくなっていきます。

① 画面の色の設定
海の色が背景なので，画面の色を＜水色＞にします。
＜命令＞
画面！（＜色＞）塗る。
画面の背景色を好きな色で塗ることが出来る。

①② 山の作成②三角形の図形を緑色にし，右上に移動させます。
③③ 帆の作成黄色い三角形の図形を作成します。

④＜命令＞
タートル！閉じる。
描き始めの位置まで線を引く。
④ 船の作成⑤船の形をした赤い図形を作成します。

⑥⑤ ボタンの作成「スタート」という名前で，「Start」というラベルのボタンを作成します。
⑥ アニメーションの設定
帆と船を右上に移動させながら，同時に少しずつ縮小していくように設定しま
す。
＜命令＞
図形！

＜大きさ＞

拡大。

図形を＜大きさ＞の倍率で拡大する（１以下の値を設定すれば縮小する）。
実行画面

C hallenge
・海の上で波が動くような動作を追加してみよう。

23

3 ドリトルで通信しよう

ドリトル編

制作例

１ ネットワークを利用した通信プログラム
ドリトルには，ネットワークを利用して，オブジェクトを送信したり，受信したりする機能があります。
送信側で作成した図形を，受信側で見られるようなやりとりができるプログラムを作成します。

送信側が作ったデータを，受信側で受け取って表示することができます。Web 上のサービスも同じような仕組みです。

送信側

受信側

①準備
ドリトルで通信プログラムを作るときは，
はじめにサーバーを用意します。
サーバーとしたいコンピュータでドリトル

①

を起動し，
編集画面右側の「server」にチェッ
クを入れます。正しくサーバーが起動したときは，「server」表示の下に IP アドレスが表示されます。
（注意）コンピュータによっては，チェッ「server」ボタンにチェックを入れるクをした直後にネットワーク接続を許可する
かの選択画面が出ることがあります。
② ○サーバーに接続する②送信プログラムの作成○サーバーに接続する○送信用のデータ（図形）を作成する

接続するサーバーを設定します。同じコンピュータの中で通信する場合は，"localhost"とします。別のコンピュータ上のサーバー○図形に名前をつけて，サーバーに登録するに接続するには " " の部分に接続したいサー
バーの IP アドレスを記述します。
（事前に教室内のコンピュータの IP アドレスを確認しておく必要があります。
）○送信用のデータ（図形）を作成する
タートル（かめた）の書いた絵から図形を作り，送信用のデータとします。
○サーバーに登録する図形（データ）に名前をつけて，サーバーに登録します。
24

送信プログラム（完成）③受信プログラムの作成③ ○名前入力用のエリアと読み込み実行用のボタンの作成○受信画面用の部品を用意する
名前を指定して，データを読み出すために，
名前入力用のエリアと読み込みを実行するためのボタンを準備します。
○サーバーからデータを取得する○サーバーからデータを取得する

入力エリアに記述した名前を取得し，その名前を持つデータをサーバーから取得します。
※発展★が追加部分です。受信ボタンを押したときに，前の表示内容を消すようにしています。

発展

受信内容！消える。 だけでは，初めてボタンを押したときに消す図形がないためにエラーが起こります。それを回避するために名前が未設定でないときだけ，図形を消す処理を行うようにします。
○受信プログラムの完成②の送信プログラムでは，「sankaku」と「shikaku」という名前で，データを登録しています。
受信プログラムでは，名前を変更して「呼受信プログラム（完成）び出し」ボタンを押すことで，異なるデータを表示することができます。
たくさんの人とデータをやりとりするためには，どのようなルールが必要かなどを考えてみるとよいでしょう。

「sankaku」を呼び出した結果

このプログラム（"localhast" ではなく，IP アドレスを指定している場合）
では，受信者と送信者の間で直接通信が行われているように見えますが，実際にはサーバーを介して情報のやりとりが行われています。プログラムを作る過程で，通信を実現するための仕組みや技術について考えるきっか
けになります。
データの流れ25

２

ネットワークを利用した通信プログラムの応用図形だけではなく，文字や数値，ドリトルの部品（オブジェクト）も相手に送信することができます。
例えば，作ったタートルの部品に，絵を描くための命令を追加してから送り，受信したときにその命令を実行することで，複雑な絵を描くこともできます。

① 送信プログラムの作成①※ p.24 の送信プログラムを修正「かめた」というタートルの部品に，「絵を描く」という命令を追加してから，「kameta」という名前でサーバーに送るプログラムを作成します。
帆と船を描く一連の命令を「絵を描く」という命令にまとめています。

P oint○ ドリトルでは，部品（オブジェクト）にオリジ
ナルの命令を追加することができます。
オブジェクト：＜命令の名前＞＝「・・・」。
「 」の中に書いたプログラムを，＜命令の名前＞に書いた名前の命令として追加できます。
このプログラムでは，帆と船を書くプログラ
ムを「かめた」という部品（オブジェクト）の絵を描く という命令として追加しました。
追加した新しい命令は，すでに存在する命令と同じように利用できます。
プログラム中では「かめた！絵を描く。
」がこれに当たります。
実行画面② 受信プログラムの作成※ p.25 の受信プログラムを修正サーバーから「kameta」というプログラムを呼び出します。呼び出したプログラム「kameta」に入っている「絵を描く」という命令を実行し受信プログラムにも，データを受信したら，追加されている命令を実行するように修正します。
②

ます。

ここでの「自分」とは，作った命令を実行する
オブジェクト（部品）を指しています。
②のプログラムの 19 行目なら「かめた」になりますし，㈪のプログラムの 14 行目ならば「受信内容」というオブジェクトを指します。
②（送信側）で「かめた」という名前だったオ
ブジェクトは，㈪（受信側）で受け取った時には「受信内容」という名前に変わっています。そのためオブジェクトの名前を書かずに「自分」という書き方にする必要がありました。
実行画面

26

注意！イタズラプログラム○イタズラプログラム（送信プログラムを修正）

このプログラムでは，「絵を描く」命令の内容を変更するといたずらができてしまいます。
この命令を受け取った側のプログラムは，受信と同時に命令を実行します。
「絵を描く」というのはあくまで命令の名前なので，絵を描く動

すると，絵を描くのではなくドリトルを終作をするとは限りません。一方で受信側からはどのような内容な了しようとしてしまいます。

のかがわからないため，不利益な動作を実行してしまう可能性もコンピュータウイルスやセキュリティの学あります。ウイルス付きのファイルを例に，受信者が実行してし習につなげたり，このようなプログラムへの

まうといとも簡単にこのようなことができてしまうということを対策などの検討につなげたりすることが考え説明する投げかけが考えられます。

られます。

参考 ドリトルのいろいろな命令
ドリトルにはいろいろな命令が用意されています。これらの命令を使うことで，多様なプログラムを実現することができます。
タートルの動き

色○中心に戻る…画面の中心に戻ります。

画面や図形などの色が指定できます。黒，赤，緑，青，（例）かめた！ 中心に戻る。

黄色，紫，水色，が標準ですが，色を指定したり混ぜたりすることができます。

○線の太さ…線の太さを変更します（初期は３）。

○作る…RGB の値を指定して色を作ります。

（例）かめた！ ６ 線の太さ。

（例）灰色 ＝ 色！ 128 128 128 作る。

○円…円を描きます（数値は半径）。

○混ぜる…色を混ぜます。

（例）かめた！ １００ 円。

（例）オレンジ ＝ 光！（赤）（黄） 混ぜる。

※正の数は右回り，負の数は左回り。

※「光！」だと加法混色に，「絵具 !」だと減法混色になります。

○変身する…タートルの見た目を変更します。
（例）かめた！

画像ファイル名変身する。

※画像ファイルはドリトル本体と同じフォルダに入れる必○半透明にする…色を半透明にします。
（例）空 ＝ 青！ 半透明にする。

要があります。
※使える画像形式は，jpg，png，gif です。
※ car，star，apple など，予め用意されているものもあります（後に「png」を付けます）。

タートルに利用できる画像の例

27

制作例

ドリトル編

4 ドリトルで機器を動かそう

ここでは，Arduino 互換基板である，Studuino（アーテック社）を用いて，センサーによる計測結果を利用して LED やモーター等を制御するプログラムを作成します。

１ Studuino を動かす（LED 点灯）
ここでは Studuino を利用した計測・制御プログラムの書き方（ルール）と，実際に利用するまでの手順を確認します。
① 必要な部品を制御基板に接続する①

目的を実現するためのセンサーやアクチュ
エータなどの部品を，プログラムによって制御を行う対象（ここでは Studuino）に接続します。接続する端子には名前がついています。
プログラムを書くときは，
この名前を使って接続した部品に命令を与えます。この例では LED を A4 端子に接続しています。

②＜プログラムの手順＞② プログラムを記述する
プログラムを例に従って記述します。例は，⑴ Studuino 基板を使う事を指示。
⑵ プログラム実行時，初めに一回だけ実行するプログラムを指示。
センサーやアクチュエータの初期設定を行う。

制御対象である Studuino に LED を使うことを宣言し，LED の点灯と消灯を１秒ごとに繰り返すプログラムです。

⑶ 動作の主体となるプログラムを指示。
⑷ 作ったプログラムを基板に転送することを指示。

③ プログラムを転送＆実行する
パソコンと Studuino を接続してから，ドリトルの「実行！」ボタンを押します。
転送の確認画面が出てきたら「はい」ボタンを押し，しばらく待ちます。パソコンから基板にプログラムが正しく転送されると「転送完了」の表示が現れ，しばらくすると自動的に作ったプログラムが実行されます。
○ ST ！"A4" デジタル LED：A4 端子に LED を接続し利用することを指示

P oint○ ST ！"A4" １ 書く：A4 端子に接続 LED を点灯「０ 書く」で消灯○プログラムは，リセットボタンを押したり電○ ST ！1000 待つ ：次の命令までに 1000ms 待機する源を入れ直したりすることで，いつでも実行できます。
○「転送完了」が表示されずエラーが出る場
合は，プログラムに誤りがないか，ケーブルが正しく接続されているかなどを確認して
ください。

28

③

２ センサーを使って LED の点灯を制御する（L チカ）
LED の点灯制御を通して，センサーの利用の方法や具体的なプログラムの書き方を確認します。ここでは，
赤外線センサーの前に手をかざすと，LED が点灯するプログラムを作ります。
① 使う部品を追加する①

Studuino に，新たに使用する部品である「赤外線センサー」を A0 端子に接続して利用することを指示します。どの部品を使うかの指示は「最初に実行」の中に書きます。

○ ST ！ A0 赤外線センサー：A0 端子に赤外線センサーを接続し利用することを指示② センサーの計測結果を利用して，LED を制御する「赤外線センサー」は光（赤外線）の強さ②を計測するセンサーです。Studuino の赤外線センサーは，センサー自身が赤外線を出しており，その光が物体に反射して戻ってきた量を計測することができます。反射量が多いと計測値は大きく，反射量が少ないと計測値も少なくなります。センサーの前に手をかざしたときは反射量が多くなるので，計測値は大きくなります。
「手をかざすと LED を点灯（そうでないときは消灯）」という条件に応じた分岐を実現している部分が下記の記述の箇所です。
「＊＊＊」！なら「・・・」そうでなければ「###」実行。
「＊＊＊」に分岐する条件を書きます。条件を満たしているときに実行する内容を・・・の中に書き，条件を満たさないときの内容は「###」に書きます。

③ プログラムを転送＆実行する
パソコンと Studuino を接続してから，ドリトルの「実行！」ボタンを押します。
転送の確認画面が出てきたら「はい」ボタンを押し，しばらく待ちます。パソコンからプログラムを分岐するための条件の書き方は下記の通りです。例えば，セ基板にプログラムが正しく転送されると「転ンサーからの計測値が 30 である場合に分岐をしたいときは条件 (・・・) の送完了」の表示が現れ，しばらくすると自動部分に (ST ！"A0" 読む ) == 30 を書きます。否定の場合（そうでなけれ的に作ったプログラムが実行されます。

ば）に記述することがない場合は省略して「＊＊＊」！なら「・・・」実行。と書くことも可能です。
＊＊＊に書いた条件が成立しているときに・・・に記述した命令を実行する。
○ A == B：A と B が同じとき実行。
○ A != B：A と B が異なるとき実行。
○ A < B：A が B がより小さいとき実行。
○ A > B：A が B がより大きいとき実行。
○ A <=B：A が B 以上のとき実行。
○ A >=B：A が B 以下のとき実行。

C hallenge
・一度点灯したら，しばらく点灯し続けるようにしてみよう。
・LED と赤外線センサを追加して，手がかざされていないときだけ追加したLED が光るようにしてみよう。

P oint○ Studuino へのプログラムの書き方の詳細や，本書で紹介していない部品を使ったプログラミングの方法などが，ドリトル
公式ページのマニュアルの中で紹介されています（「使い方の説明を見よう」の項目からマニュアルを確認できます。マニュ
アルの「Studuino と通信しよう」の項目を参照）。
http://dolittle.eplang.jp/29

３ 応用例
同じセンサーを利用しても，計測対象を検討し制御のルールを考えることでいろいろなことを自動化することができます。また，LED にモーターなどのアクチュエータを接続することで，仕事の内容を変えることもできます。
①

３. １

自動停止ロボット

赤外線センサーを前方に向けると，何かに接近したかを判断することができます。また，LED の代わりにモーターを制御すれば，移動ロボッ
トを作ることができます。これを利用して，前方に何かがあることを検知したときに自動で停止するロボットを作成することができます。
① 使う部品を接続する②

Studuino に，DC モ ー タ ー と，A0 端 子に「赤外線センサー」を接続します。
② プログラムを記述する
赤外線の反射量が大きくなると停止し，それ以外では進むようにプログラムを作成します。

○ ST ！ "A0" 読む：A0 に接続したセンサーの値を取得する○ ST ！ 停止 ：DC モーターを停止する③ プログラムを転送＆実行する

３. ２○ ST ！ 前進 ：DC モーターを前進する

ライントレーサ

センサーを床面に向けると，床の状況を判断することができます。これを利用してライントレースカーを作成することができます。ここでは，赤外線センサーを A1 に接続しました。
①使う部品を接続する②②プログラムを記述する
黒い部分は光の反射が弱く，白い部分は光の反射が多いことを利用し，床の状況（線の上か）を判断して右折と左折を繰り返す
ことで線の上を走行します。
このプログラムでは，白い部分では左に進み，黒い部分では右に進みます。

○ ST！"A1" 読む：A1 に接続したセンサーの値を取得する○ ST ！左折 ：DC モーターを左に進むように回転する③プログラムを転送＆実行する

赤外線センサーを床に向けるように取りつける

30○ ST ！右折 ：DC モーターを右に進むように回転するラインの内側を左右に動きながら進む

３. ３

荷物運びロボット

これまでのプログラムを組み合わせ，荷物を運ぶためのアー
ムを取りつけると，荷物を運ぶロボットを作ることができます。
このプログラムは，荷物をおろす場所の壁を検知するまで，
床の線をトレースし，壁を見つけたら，荷物の乗ったアームをおろします。
②① 使う部品を接続する
Studuino に，DC モーター，A0，A1
端子に「赤外線センサー」，D9，端子にサーボモーターを接続します。
② プログラムを記述する○ ST ！"D9" サーボモーター：プログラムの最初でサーボモーター

D9 端子にサーボモーターを接続し利用すを利用することと，90°の位置にするることを指示すること（荷物を乗せるため）を設定して○ ST ！"D9" 0 書く。
：
サーボモーターの角度を指示するいます。
繰り返しの中では，まず A0 端子の＜サーボモーター＞
回転角度を指定することのできるモーターです。
今回は，荷物の上げ下ろしができるように，アームの付け根にサーボモーターを接続しています。

赤外線センサーを用いて「壁に到達したか」を判断しています。壁に達した
場合にはアームをおろします。
壁に達していない場合には，アームを立てた状態（90°）に設定します。
そのあと，A1 端子の赤外線センサーを使って「床の線上にいるか」を判断し，ライントレースの処理を実施しています。
③ プログラムを転送＆実行する

C hallenge

サーボモーター・荷物をおろしたあと，振り返ってコースを戻るようにしてみよう。
・サーボモーターを利用して，障害物をどけるロボットを作ってみよ
う。
0°

90°

180°

31

1 JavaScriptとはJavaScript 編

１

基

本

JavaScript について
ここでは，テキスト型のプログラミング言語で，スマートフォンやパソコン等で普段よく見る Web サイト等に多く使われている JavaScript を試してみましょう。
テキスト型のプログラミング言語は，命令の打ち間違いや，命令同士のつながりのルールなど，ビジュア
ル型の言語に比べると覚えなければいけないことが多いですが，プログラムの中の記述を検索・置換できる，
コピー＆貼り付けなどプログラムの制作・編集効率が高いといった特徴があります。また，世の中で使用されているソフトウェアの多くはテキスト型の言語で開発されているため，社会とのつながりで考えた場合，中学生にはこのような文字で記述するプログラミングにも触れさせたいところです。
そこで，プロのプログラマーも使用する JavaScript を使って，テキスト型のプログラミングを体験してみ
ましょう。
１. １

JavaScript の特徴● Web ブラウザ上でプログラムが実行されるので，パソコンやスマートフォン，タブレットなど多くの機種で動作させることができる。
●メモ帳さえあれば，すぐにプログラミングができる。
●チャットやアニメーション，グラフ表示など高度な機能を，ライブラリというものを使って拡張できる。
などがの特徴挙げられます。
１. ２

JavaScript で作ってみよう（ウィンドウの表示）

例えば，メモ帳などのテキストエディタで図１のプログラムを入力し，ファイル名を「test.html」として保存し（図２），そのファイルを Web ブラウザにドラッグ＆ドロップしてみましょう（もしくは，図 3 のよ
うにアドレスバーにファイルを保存した場所とファイル名を入力します）。
この「alert」という命令は，Web ブラウザに OK ボタ
ンだけがあるウィンドウを表示させることができます。
今度は 2 行目を，「alert(5+2);」と書き換えて上書き保存後，再度ブラウザで表示させてみましょう。すると，計算結果が表示されます。
図 1 JavaScript のプログラム例

図 2 HTML での保存32

図 3 実行結果

2 Makecode でブロック型と JavaScript の両方の言語を体験
JavaScript はできることが多く，さまざまなところで利用される言語ですが，命令の種類やその組み合わせ方等を調べる必要があるので制作に時間が掛かってしまいます。そこで，Makecode というプログラムの開発環境を使って，ブロック型で作ったプログラムがどのようにテキスト型のプログラムになるのかを見てみましょう。
ブラウザのアドレスバーに

https://makecode.microbit.org/と入力しアクセスしましょう。

このページは，計測・制御のプログラミングとしても使用できる micro:bit（マイクロビット）のプログラムを制作するものです。画面の中のシミュレーターで実行結果を確認してみましょう。
このブロック型の言語は，Scratch とは異なりますが，一度 Scratch でプログラムを作ったことがあれば，同じようなイメージで制作できるので，すぐにプログラムを作ることができます。ビジュアル型の言語の中でも，ブロックをつなげる言語は，このようにすぐにプログラムの制作に取りかかれることが特徴ともいえます。
では，図 4 のようにブロックをつなげてみましょう。
ブロックをつなげ終わったら，「{ }JavaScript」というボタンを押してみましょう。すると図 5 のように，作成したプログラムが JavaScript に変換されて表示されます。
ここで書かれていることの意味を全部理解できなくても，中学生程度の英単語力があれば，ブロックで表現したことが，どのように文字で表されているのか，対比させることが可能です。

図 4 ブロックでのプログラム

図 5 ブロックでのプログラムを JavaScript で表現したもの

続けて，JavaScript の 1 行目から 3 行目をマウスでなぞってからコピー（Ctrl+c）をし，4 行目の最後でEnter キーを押して表示された 5 行目に貼り付け (Ctrl+v) て，6 行目の ShowIcon の部分を図 6 のように書き換えてみましょう。また 4 行目の「Hello!」を「Bye!」に，5 行目の「Button.A」を「Button.B」に書き換えましょう。
今度は，「ブロック」のボタンを押して，ブロックによるプログラム表示に切り替えてみましょう。打ち間違いがなければ，追記・修正した通りに，ブロックが変更されて表示されます。
生徒の実態に応じて，こうしたテキスト
型のプログラミングにも挑戦させると，プログラミングの概念に対する理解もさらに深まるでしょう。

図6

追記，修正した JavaScript

②

監

修

竹野 英敏 （広島工業大学）

執筆

浅水 智也 （宮城教育大学附属中学校）
安藤 明伸 （宮城教育大学）
大村 基将 （大阪電気通信大学）
木村 浩之 （石巻市立牡鹿中学校）
紅林 秀治 （静岡大学）
藤原 英治 （石巻市立河南東中学校）
宮内

智 （さいたま市立大宮西中学校）
※五十音順

執筆協力
上野 耕史 （文部科学省）

広告
授業例で読み解く

新学習指導要領竹野 英敏 編著
B5判／80ページ
定価：本体1,500円＋税○H29 告示の新学習指導要領における主な考え方や授業での取り上げ方を解説。
○授業例を紹介しながら，実際にどのような授業をすればいいのか解説。

開隆堂出版株式会社
http://www.kairyudo.co.jp/●本社

TEL 03-5684-6111●北海道支社

TEL 011-231-0403●東 北 支 社

TEL 022-742-1213●名古屋支社

TEL 052-789-1741●大 阪 支 社

TEL 06-6531-5782●九 州 支 社

TEL 092-733-0174○本書で掲載している商品名およびサービス名は各社の登録商標，商標，または商品名です。
・ JavaScript...Oracle Corporation
・ Microsoft MakeCode...Microsoft Corporation
・ nekoboard2... 株式会社スイッチサイエンス https://www.switch-science.com/
・ Pyonkee( ピョンキー ) は，合同会社ソフトウメヤが，MIT メディア・ラボのScratch ソースコードライセンスにしたがって，Scratch をベースに開発した iPad
用のアプリケーションです。AppStore から無料でダウンロードできます。
http://softumeya.com/pyonkee/ja/
・ Scratch は，MIT メディア・ラボのライフロング・キンダーガルテン・グループによって開発されました。 http://scratch.mit.edu
・ Studuino... 株式会社アーテック http://www.artec-kk.co.jp/artecrobo/edu/
・ プログラミング言語「ドリトル」... 兼宗進 http://dolittle.eplang.jp/○本書に掲載されている URL は，2018 年 2 月 9 日現在に確認したものです。ページや内容は予告なく変更される場合があります。

AH○本書のプログラムは Windows10/7 にて動作確認を行っておりますが，全ての環境における動作を保証するものではありません。動作に関するお問い合わせにはお答えいたし
かねますので，ご了承ください。