新学習指導要領対応

D 情 報の 技 術
学習テキストネットワークを利用した双方向性のあるコンテンツのプログラミングによる問題の解決

指導の手引き目次
事前準備
準備…………………………………………………………………………………………
ソフトウェアの起動方法…………………………………………………………………
ソフトウェアの画面構成…………………………………………………………………
ソフトウェアの基本操作…………………………………………………………………

2
3
4
5

双方向性のあるコンテンツの制作
１．双方向性のあるコンテンツとは…………………………………………………… 8
２．双方向性のあるコンテンツのプログラム………………………………………… 9
３．発展学習……………………………………………………………………………… 20
ネットワークの利用
１．情報通信ネットワークの構成としくみ…………………………………………… 25
２．サーバとクライアント……………………………………………………………… 27
３．ネットワークを利用したチャットプログラムの制作…………………………… 33
４．発展学習……………………………………………………………………………… 39
指導案例

授業時間数や学習進捗に合わせて複数の指導案に対応できるテキスト構成となっています。

案①：プログラミングによるコンテンツ制作に重点を置いた指導案※コンピュータのローカルエリアネットワーク接続不要。

案②：ネットワークの利用に重点を置いた指導案※プログラミングについては別途「計測と制御」等で学習済み。

案③：コンテンツ制作とネットワーク利用を通して学習できる指導案
案④：自ら課題設定できる指導案
テキスト対応表
双方向性のあるコンテンツの制作

ネットワークの利用

節

1

2

3

授業想定単位数

１コマ

１コマ

１コマ

１コマ

案①３コマ

○

○

○

×

×

×

案②３コマ

×

×

×

○

○

○

案③４コマ

○

○

×

○

○

×

案④６コマ

○

○

○

○

○

○

1

1

2

3

4
１コマ

事前準備
①準備
１．
ソフトウェアのインストール
本テキストではStuduinoソフトウェアを活用しコンテンツ制作のプログラミングを行います。
各PCに事前にStuduinoソフトウェアをインストールしてください。
Studuinoソフトウェアのインストール手順につきましては、弊社ウェブサイトに最新のマニュアルを掲載しておりますので、以下の手順をご参照ください。
①Studuinoソフトウェアダウンロードサイト
へアクセスします。
（http://www.artec-kk.co.jp/studuino/ja/）②表示されたページの「ソフトウェアダウンロード」
メニューより「Studuino」
をクリックします。
③「ソフトウェア」の下の「Studuinoソフトウェアのインストール方法」
をクリックすると、マニュアル（PDF形式）が開きます。

２．
ネットワークの接続
本テキスト二章では複数のPCをローカルエリアネットワーク（LAN)で接続された環境での授業を想定しています。
Wi-FiやLANケーブル等でLAN接続されたPCをご準備ください。

問い合わせ窓口

株式会社アーテックTEL

e-mail072-990-5656
info@artec-kk.co.jp

2②ソフトウェアの起動方法（Windows版の場合）①デスクトップにある右のショートカットアイコンをダブルクリックすると、
ソフ
トウェアが起動します。

②ソフトウェアを起動すると、右の画面が表示されます。
２種類のプログラミング環境が選択できますので、ブロックプログラミング環境を選択してください。

③次の画面で「ロボット」「キャラクター」「電気実
験」の３つのバージョンが選択できます。
本テキストでは「キャラクター」
を使用します。
起動するとブロックプログラミング環境の画面が表示されます。

3③ソフトウェアの画面構成
Studuino ブロックプログラミング環境キャラクターバージョンの画面は、以下の４つのエリアに分けられます。

スクリプトエリアステージ

スプライトリスト

ブロックパレット

エリア名
1

ブロックパレット

機能
プログラムで使う命令が、機能ごとに分類されてブロックの形で表示されます。
この中にブロックをドラッグ＆ドロップして並べてプログラムを作成

2

スクリプトエリア

していきます。
スクリプトとは？・・・・・13 ページ参照

3

ステージ

プログラムによってスプライトが動くエリアです。
プログラム内で使用するキャラクターが表示されます。

4

スプライトリスト
スプライトとは？・・・・・11 ページ参照

4④ソフトウェアの基本操作①スプライトの追加

起動時、「スタディーノ」
スプライトのみ表示されています。

スプライトの追加をする場合は、スプライトエリア上部の「新しいスプライト」
からスプライトを追加します。

A

B

C

※
「スタディーノ」
スプライトは、ArtecRobo制御基板Studuinoを制御する専用のスプライトです。
本テキストでは使用しません。

A

A 新しいスプライトを描く

ペイントエディターが開きます。

B 新しいスプライトをファイルから開く
ファイル参照画面が開きます。

Studuinoソフトウェアに標準で準備されている画像のフォルダが開きます。

B

自分で用意した画像を開く場合は、ファイル保存先を参照
してファイルを選択してください。
テキスト内では参考画像として「People」フォルダ内の「roundman」
および「squaregirl」
を使用しています。

C なにがでるかなスプライト
Studuinoソフトウェアに標準で準備されている画像の中からランダムにスプライトが追加されます。
スプライトとは・・・。
コンピューターの画面上で画像や図形を動かす表現を実現する仕組みのひとつで、各画像を背景と別に作成し、それらを合成する仕組みです。この仕組みを使って表示される各画像のこともスプライトとよびます。スプライトは主に、コン
ピュータゲームなどで用いられている手法です。

②プログラムの作成方法■スプライトの切り替えプログラムはスプライトごとに作成します。
スプライトエリアの各スプライトをクリックすることで、それぞれのプログラム作成画面に切り替わります。

5

■プログラムのつくり方
ブロックパレットの中のブロックをドラッグ＆ドロップをし選択てプログラムを作成します。
表示されるブロックは８種類にまとめられており、ブロッ
クパレットの上部ボタンをクリックして切り替えます。

ドラッグ＆
ドロップ

すでに並べられているブロックの下に別のブロック並べられたブロックをドラッグすることで移動させるをドラッグすると、上の図のように白い線があらわ

ことができます。そのとき、下につながっているブ

れて、
ブロック同士をつなぐことができます。

ロックも一緒に動きます。

ブロックによってブロックを中に入れたり、間に挟■ブロックの消し方

んだりして並べるものもあります。

消したいブロックをブロックパレットにドラッ
グ＆ドロップするとブロックを消すことができます。

③プログラムの保存方法

メニューバーの「ファイル」
より「保存する」を選択

保存先を指定し、ファイル名をつけて保存します。
ファ

します。

イルに作者名とコメントを記入することができます。

6

双方向性のあるコンテンツの制作
目標
・ソフトウェアの基本操作の習得
・プログラムの基本構造の理解
・双方向性のあるコンテンツへの理解

授業目安：50 分×３コマ

7

１．双方向性のあるコンテンツとは
解説：
５分 【計５分】

コンテンツとは・・・
英語で「内容」を意味する言葉で、情報の世界ではディジタルで取り扱うことができる情報の内容のことをさし、「文字、図形、色彩、音声、動作もしくは映像もしくはこれらを組み合わせたもの」があげられます。

双方向性のあるコンテンツ
テレビ番組のようにメディアから視聴者へ向けて一方向から発信されるコンテンツに対して、
テレビゲームのように操作（入力される情報）
によってその場その場で発信されるコンテンツが変化するようなものを双方向性のあるコンテンツといいます。
近年ではインターネットの登場により、情報の発信者は一度に多くの人に情報発信するということが可能となったのと同時に、
ネットワークを通じて情報の受け手から反応を確認するといった、発信者と受信者の間における「双方向性」のある情報のやり取りが容易にできるようになりました。
例えば、
ディジタル番組での視聴者参加型コンテンツのように閲覧者からの入力情報に応じて必要な情報を配信するなど双方向で必要な接点を持つことができることがネットワークを利用した双方向性のあるコンテンツの大きな特長です。

従来の新聞、
テレビなどのメディア

インターネットなどの双方向メディア

PCTV
一方通行の情報受け取るだけではなく、発信もされる情報●一方向のコンテンツと双方向のコンテンツの例を考えよう
一方向のコンテンツ

双方向のコンテンツ（例） 従来のテレビ番組

ディジタル番組（ｄボタン）

映画

TV ゲーム新聞

インターネット掲示板・SNS

8

２．双方向性のあるコンテンツのプログラム
テーマ（例）：じゃんけんゲームをつくる。
簡単なじゃんけんゲームの制作を通して、ソフトウェアの基本操作およびディジタルコンテンツ制作における制
作手順について学習します。

①構想を立てる

作業：10分 【計15分】

どのようにしてじゃんけんゲームを制作するか構想を立てて、必要な機能や条件について整理しましょう。

制作する「じゃんけんゲーム」の概要
コンピュータがランダムに出す手と、プレーヤーがキー入力で選択する手でじゃんけんをするゲーム。
●コンピュータの手とプレーヤーの手を画面に表示させる。

制作条件●手が決定するまではグー・チョキ・パーをルーレットのように高速で切り替える。
●プレーヤーの手は、キー入力に応じて自由に選択して決定できる。
●コンピュータの手は、プレーヤーの手が決定すると同時にランダムに決定される。

②素材を集める

作業：15分 【計30分】

じゃんけんゲームを制作するにあたり、必要な素材を準備しましょう。

必要な素材●パー・チョキ・グーの画像<素材の収集方法>
ディジタルコンテンツの制作に必要な素材の準備するには、次の方法が考えられます。
①ディジタルカメラで撮影した画像を使用する。

9

②図形処理ソフトウェアで画像を制作する。

③Webページから画像を収集する。

PC「Studuinoプログラミング環境」に内蔵された画像制作ツール

これらの方法の中で状況に応じて最適な方法を選択してください。

参考 知的財産の保護
ディジタルコンテンツの制作にあたり素材を収集する際に知的財産を保護する必要性と、知的財産の適切な利用方法について理解しておく必要があります。Webページなどから素材を収集する際には特に気を付けなければなりません。
●知的財産・・・イラスト、写真、音楽、
ソフトウェア、小説、発明など人間の創作活動で作り出されたもの。
知的財産を保護するための権利を知的財産権といいます。
●著作物・・・・公開されている文章や写真、イラスト、絵画、音楽だけに限らず、自分自身で考えて作ったものなども全て著作物にあたります。著作権は著作物がつくられた時点で発生し、保護の対象となります。誰かの著作物を他人が勝手に使用したり、まねしたり、つくり変えることは著作権法で禁止されています。
●著作物の使用・・・Webページなどで公開され、無料で配布されているものでも使用条件があればそれに従う必要があります。

クリエイティブ・コモンズ・ライセンス

著作物を利用しやすくするために国際非営利団体によって提案された著作権に対する新しい考え方です。作者自身が著作権の範囲（使用条件）を決めて公開します。
これにより「この条件を守れば私の作品を自由に使って構いません。」という意思表示がされます。
著作者や作品に関する情報の表示「BY（表示）」

作品自体の改変（加工・編集）
禁止「ND（改変禁止）」
作品を改変して新しい作品を作った場合に、その新しい作品にも元の作品と同じ使用条件を設定「SA（継承）」営利目的での利用禁止「NY（非営利）」

表示例

著作者や作品に関する情報を表記し、元の作品を改変しなければ、営利目的で利用（転載、コピー、共有）を許可しているライセンスです。

10

③ソフトウェアへの取り込み

作業：20分 【計50分】＜画像の取り込み方法＞ 〜新しいスプライトをファイルから選ぶ〜①画面右下のをクリックします。

②表れたウインドウからフォルダを指定して準備した画像を選択します。

③選択した画像が表示されます。

スプライトとは・・・。
右クリック

コンピューターの画面上で画像や図形を動かす表現を実現する仕組みのひとつで、各画像を背景と別に作成し、それらを合成する仕組みです。
この仕組みを使って表示される各画像のこともスプライトとよびます。

④画像を削除する場合は追加された画像の上で右クリックし、表示さスプライトは主に、コンピュータゲームなどで用いられている手法です。

れたメニューから削除を選択してください。

参考 画像の制作方法 〜新しいスプライトを描く〜
事前に画像素材を準備できない場合、
簡単な画像であればソフトウェア上でイラストを描いてスプライ
トとして使用することができます。
①画面右下の②下図のようにペイントエディターが開きます。

をクリックします。

ここでイラストを描いてOKをクリックすると、作成したイラストがスプライトとして表示されます。

11

＜スプライトの編集方法＞●サイズの変更表示されたスプライトのサイズを変更する場合は、画面右上の拡大・縮小ボタンを使用します。

縮小ボタン
拡大ボタン
拡大・縮小ボタンをクリックすると、マウスカーソルがそれぞれのボタンの図
柄に変わります。
この状態でサイズ変更させたいスプライトの上にカーソルを合わせてクリッ
クするごとに、サイズを変更することができます。

●コスチュームの編集
一つのスプライトに複数の画像をコスチュームとしてもたせることで、コマ送りのアニメーションのように画像に変化を持たせることが可能となります。
編集したいスプライトをクリックし、下図の「コスチューム」
をクリックすることでコスチューム編集の画面が表示されます。
事前に準備した素材を使用する場合は「読み込み」を、新たにイラストを作成する場合は「ペイント」をクリッ
クして新しいコスチュームを追加してください。
クリック

クリック

●名前の変更それぞれのスプライトやコスチュームの名前は自由に変更できます。
プログラム作成の際にわかりやすいようにそれ
ぞれの名前を登録しておきましょう。
※ここではスプライト１→コンピュータの手
コスチューム１→パー
コスチューム２→グー

コスチューム３→チョキ
としています。

12

③プログラムの作成

解説：5分 【計5分】②で準備したスプライトに対しP.9の①で立てた構想に基づいてプログラムを作成していきます。
プログラムを作成したいスプライトをクリックし、下図の「スクリプト」
をクリックして表示される画面に、左側のエリアにあるブロックをドラッグ＆ドロップして並べることで作成することができます。

スクリプトとは・・・。
クリック

簡易的なプログラムとして用いられる用語で、ス
クリプトを作成するための言語を「スクリプト言

ドラッグ＆
＆ドロップ

語」
と呼びます。
一度並べたブロックは左のエリアにドラッグ＆ドロップをすることで消去できます。

スクリプト言語は機械語への翻訳を必要とせずにプログラムを実行することができ、特定のア
プリケーションの動作など簡単なプログラムにクリック用いられています。
用途を限定しているため、構造自体も本格的なプログラミング言語よりも簡単に作成できます。

プログラムの作成例
例で示した制作条件に基づきじゃんけんゲームを作成する手順を以下に示します。

STEP1

パー・グー・チョキをランダムに表示させるプログラム

作業：5分 【計10分】
①

から

をドラッグ

②

＆ドロップします。

グ＆ドロップし、

13

から

をドラッ
の下に並べます。

③からをドラッグし、④の値を1から3と変更します。

の中にドロップます。

コスチュームにはそれぞれ順番に番号が割り振られており、1〜3の番号のコス
チュームがランダムで表示されます。

⑤動きを確認してみましょう。

作成したプログラムをフローチャートであらわそう

をクリックするたびに、
パー・グー・チョキのいず
れかがランダムに表示されます。

クリック

はじめ

コスチュームをランダムに
表示する

おわり

チェック
動作が確認できた

14

STEP2

手を表示するまではグー・チョキ・パーをルーレットのように高速で切り替える。
作業：5分 【計15分】

ここでは、0.1秒間隔でコスチュームを10回切り替えた後にランダムでグー・チョキ・パーのいずれかがランダムに表示させるプログラムを作ります。
①

から

ロップし、

③

をドラッグ＆ド②の下に並べます。

から

から

ロップし、

をドラッグ＆ドのの中に並べます。

作成したプログラムをフローチャートであらわそう

をドラッグし、をの下に並べ、

はじめ

値を「0.01」に変更します。

繰り返し１０回

次のコスチュームにする④動きを確認してみましょう。
をクリックするたびに、高速で切り替わった後、繰り返し戻るグー・チョキ・パーのいずれかがランダムに表示されます。

コスチュームをランダムに
表示する

チェック

おわり

動作が確認できた

15

STEP3コンピュータの手のスプライトを複製して、プレーヤーの手のスプライトを作成する。
作業：5分 【計20分】

コンピュータの手のスプライトを複製して、プレーヤーの手のスプライトを作成します。

①画面右下のスプライトアイコンの上で右クリックし、②複製されたスプライトの名前を変更します。

表示されたメニューから「複製」を選択します。

（ここでは「プレーヤーの手」とします。）

右クリック

クリック

③２つの画像が重ならないようにマウスで画像をド④動きを確認してみましょう。

ラッグ＆ドロップし、配置を調整しましょう。

をクリックするたびに、２つの手でじゃんけんするアニメーションが再生されます。

ドラッグ＆
ドロップ

チェック
動作が確認できた

ようやくじゃんけんらしくなってきました。ただし、このままでは画面の中でアニメーションが動いているだけです。いわゆる一方向のコンテンツとなっています。
ここにキー操作に応じて出す手を変化させることで双方向性を加えるプログラムの改良を行い、じゃんけんゲームに仕上げましょう。

16

STEP4

キーボードの入力に応じてプレーヤーの手の表示を選択できるようにする。
作業：15分 【計35分】

ここでは、キーボードの左向き矢印を押したときにパーを、上向き矢印を押した
とき、グーを、右向き矢印を押したときチョキを出すプログラムを作ります。

パー

新たに使用するブロック①

指定したキーが押されたかどう①②

かを判定するブロック

グー チョキ①の条件が成立するまで、②に挿入した処理を繰り返し実行します。

②①の条件が成立した場合、②に①挿入した処理を実行します。

②①と②に挿入した条件の少なくとも一方の条件が成立したかどうかを判定します。

「プレーヤーの手」
スプライト①「プレーヤーの手」
スプライトを選択し、プログラム
を右図のように追加します。

②キーが押されたと同時に出す手が決まるよう下図のようにプログラムを変更します。
「プレーヤーの手」
スプライト③動きを確認してみましょう。
をクリックしてからキーボードの指定したキーを押すまで、プ
レーヤーの手は高速に切り替わり、指定したキーが押されたと同時にプレーヤーの手が決定され表示されます。
17

チェック
動作が確認できた

STEP5プレーヤーの手が表示されると同時にコンピューターの手も表示される。
確認問題：15分 【計50分】

確認問題
ここまでで作られたプログラムでは、プレーヤーのキー入力の有無にかかわらず、コン
ピュータの手は一定時間後にランダムで決定し表示されてしまいます。
プレーヤーのキー入力と同時にコンピュータの手も決定し表示されるようにプログラムを改良しましょう。

解答例「コンピューターの手」
スプライトを以下のようにする。

作成したプログラムをプリントアウトして貼り付ける場合は、以下の手順でプログラム画面を画像ファイルとして保存することができます。
①スクリプトエリアで
右クリックすると表示されるメニューから「ス
プ ラ イト の 画 像 を 保存」
を選択します。

②保存先を指定し、ファイル名をつけてOKをクリックしてください。
画像はGIFイメージファイルとして保存されます。

18

作成したプログラムをフローチャートであらわそう
プレーヤーの手

はじめ

次のコスチュームにする

左向き矢印キーが押されたNo

上向き矢印キーが
押された

YES

YES

No

右向き矢印キーが押された
YES

コスチュームをパーにする

コスチュームをグーにする

コスチュームをチョキにする

おわり

コンピュータの手

はじめ

次のコスチュームにする

左向き・上向き・右向きのいずれかの矢印キーが押された

YES

コスチュームをランダムに
表示する

おわり

19

No

No

３．
発展学習 ～じゃんけんゲームの追加機能を考える～
検討：15分 【計15分】
授業時間に応じて割愛可能

じゃんけんゲームにどのような機能があるとよいか考えましょう。
●プレーヤーがコンピュータに勝ったか負けたかを表示する機能

例●点数表示機能●５回勝ったら CLEAR と表示する機能

発展学習のプログラム作成例①〜勝ち負け判定の表示〜
作業：35分 【計50分】① 判定表示のための「判定」
スプライトを追加で作成します。
コスチュームは右図のように
「勝ち」
「負け」
「あいこ」
の3種類に設定します。

②

から「新しい変数を作る」
をクリックします。

「判定」
スプライト

下図のようなウインドウが表示されるので、変数名を入力して変数を作成します。
ここでは「プレーヤーの手」と「コンピュータの手」という２つの変数を作成します。

クリック
クリック

変数が作られると、使用できるブロックが表示されます。

変数名
入力

こちらに
チェック
クリック

20

③
「コンピュータの手」
スプライトを選択し、プログラムを下図のように変更します。

新たに使用するブロック①で指定した変数を②で指定①②

現在のコスチュームの番号を調した値に設定します。

べます。

「コンピュータの手」
スプライト追加されたプログラム④「プレーヤーの手」
スプライトを選択し、プログラムを下図のように変更します。

新たに使用するブロック
設定した通知を送ります。

「プレーヤーの手」
スプライト

追加されたプログラム

21

「判定」
スプライト

⑤
「判定」
スプライトを選択し、プログラムを下図のように作成します。
新たに使用するブロック
設定した通知を受け取ったときに処理を開始します。

スプライトを非表示にします。

スプライトを再表示します。

各変数の値を示します。

⑥動きを確認してみましょう。
をクリックしてからキーボードの指定したキーを押して手が確定すると、じゃんけんの勝敗に応じて「判定」
スプライトが正しく表示されるか確認しましょう。

参考 変数ってなに？
変数は数字を入れて保存しておくことができる箱と考えることができます。
箱に名前を付けておくことで色々なところで中身を取り出して確認することができます。

7

5+
3+

8

箱に7を入れると・・
・

7
7

＝12

2+

×2＝17 4×

7

7

＝9

5+

＝28

3+

箱の数字を8に変えると・・・

8
8

箱の数字を変えるだけで、たくさんの式を一度に変更できます。

22

＝13

2+

×2＝19 4×

8
8

＝10
＝32

まとめ
●今回学習したことを通して、今後プログラムをつかってどのようなコンテンツが作成できそう
か記入しましょう。

●双方向性のあるコンテンツであなたが一番利用していると思うものについて記入しましょう。

●コンテンツのプログラムで難しかった点、気付いた点、工夫した点を自由に記入しましょう。

23

ネットワークの利用目標
・ネットワークの仕組みの理解
・ネットワークを利用した双方向性のあるコンテンツの制作
・チャットの問題点と改善方法の考察
授業目安：50 分×３コマ

24

１．
情報通信ネットワークの構成と仕組み
検討：10分 【計10分】

ネットワークとは・・・
複数のコンピュータやプリンタなどの機器を接続し、お互いに通信できるようにした状態のこと。
接続する方法にはケーブルを使用して接続する有線接続と電波などを利用した無線接続があります。

有線接続
無線接続

インターネットテレビ

PC

インターネット

ルーター

TV
ハブ

無線ルーター

PC

無線ルーターPC

プリンター●身の回りにあるネットワークに接続されている機器にはどのようなものがあるか調べてみましょう

有線接続

無線接続

（例）プリンター・デスクトップPC・テレビなど（例）携帯電話・スマートフォン・ポータブルゲーム
Bluetoothスピーカーなどスマート家電

情報通信ネットワーク
テレビや電話、パソコンなど様々な機器が接続され、情報を相互にやりとりできるネットワークのことを情報通
信ネットワークといい、近年ではエアコンなどの家庭用電気製品も情報通信ネットワークに接続できるようになってきています。

25

LANとWAN
LAN（ラン）とは、Local Area Network（ローカルエリアネットワーク）の頭文字をとったもので、家庭や学校などの限定された範囲を接続したネットワークのことです。
WAN（ワン）とは、Wide Area Network（ワイドエリアネットワークの頭文字をとったもので、電話回線または専用回線などを使いより LAN 同士をより広い範囲で構成されたネットワークのことです。

インターネット
インターネットも WAN（ワン）のひとつで、世界中のコンピュータ同士がクモの巣のようにつながった大きなネッ
トワークになります。

IPアドレス
手紙を送るときに相手の住所がわからないと正しい送り先に手紙を届けられないのと同様に、コンピュータ等の情報機器がネットワーク上でデータをやりとりするときも住所に相当する識別番号が必要になります。
インターネットに接続されている全ての情報機器にＩ
Ｐアドレスという識別番号が割り当てられています。
Ｉ
Ｐアドレスはインターネットに接続された他の機器と重複しないように割り当てられます。
現在広く使われてるＩ
Ｐｖ4 という方式では 0 〜 255 の数字４組を「.」で区切った数値として表現されます。
（近年Ｉ
Ｐｖ４で表現できるＩ
Ｐアドレスでは足りなくなってきており、
Ｉ
Ｐｖ６方式へ移行が進んでいます。）
同一ＬＡＮ内でも下図のように「192.168.・・・」というように同一ＬＡＮ内で接続された情報機器が重複しない
ようにＩ
Ｐアドレスが割り当てられます。

PC

192.168.0.2

インターネット
192.168.0.1

ルーター

ハブ

26

PC

192.168.0.3

PC

192.168.0.4

２．
サーバとクライアント
サーバとクライアント

解説：5分 【計15分】

複数のコンピュータをネットワークでつなぐには、そのいずれか１台

PCがその他複数のコンピュータをつなぐまとめ役にならなくてはいけません。
その接続のまとめ役になるコンピュータを「サーバ」と呼びます。

サーバ

それ以外のコンピュータを「クライアント」と呼びます。

①ネットワークをつなぐ

PC

PC

クライアントクライアント

解説：5分 【計20分】

２台のコンピュータの一方をサーバ、もう一方をクライアントとしてネットワークでつないでみましょう。

■サーバ側のコンピュータの設定

サーバとするコンピュータでメニューの「編集」から「ネットワークを作る」
を選択します。
すると、
このコンピュータの IP アドレスが表示されますので、メモをしておきましょう。

サーバのIPアドレス________ . ________. ________ . ________■クライアント側のコンピュータの設定

クライアントとするコンピュータでメニューの「編集」から「ネットワークにつなぐ」
を選択します。
IP アドレスを入力する画面が表示されますので、接続先のサーバの IP アドレスを入力しましょう。

※IP アドレスは４つの数字をピリオド（.）
で区切って入力します。
※IP アドレスは半角英数字で入力してください。

27

②簡単な双方向コンテンツをつくってみる
２台のコンピュータをつかって、簡単なクイズに答えるプログラムを作ってみましょう。

サーバ側

STEP1

STEP1

スタート

STEP2

２択クイズを出題

STEP3

YES/NOで回答

STEP4

判定結果を返すスタート
グループ作業：5分 【計25分】

クライアント側①新しいスプライトを追加します。

③

クライアント側②下図のようにブロックを並べます。

に「スタート」と入力します。

全角で入力する際、入力の文字が画面左上に表示されます。

Enterキーを押すとメッセージボックスの中に入力されます。

28

STEP2

２択クイズを出題
グループ作業：10分 【計35分】

サーバ側①新しいスプライトを追加します。

③下図のようにブロックを並べます。

②「問題」変数を追加します。

④に「スタート」、入力します。

⑤に２択クイズの内容を入力します。

クライアント側①下図のようにブロックを
並べます。

②

ブロックを
ブ
を入れます。
を29につなげ、中に

に
「問題」
と

③

を
「問題」
に変更します。

※サーバ側とネットワークでつながっていると、サーバ側で作った変数の値をクライアント側で変数の値として取り込むことができるようになります。

STEP3

YES/NOで回答
グループ作業：5分 【計40分】

クライアント側①下図のようにブロックを並べます。

STEP4②それぞれのブロックに以下のように入力します。

判定結果を返すグループ作業：10分 【計50分】

サーバ側①「答え」変数を追加します。

30

②下図のようにブロックを並べ、それぞれの入力文字を変更します。

クライアント側①下図のようにブロックを並べ、それぞれのを「答え」に変更します。

以上でネットワークを利用した簡単な双方向性のあるコンテンツが完成しました。
②動きを確認してみましょう。
クライアント側のをクリックすると、サーバ側で設定した問題が表示されます。
①クリック
キーボードの「Y」
を押すとキーボードの「N」を押すと②問題が表示される
31

確認問題●作成した 2 択クイズのプログラムについて、以下の①〜②のプログラムはサーバ側・
クライアント側のどちらのコンピュータで処理されているか整理しましょう。
①出題するための問題を設定する。
②人間の入力に応じてスタートの通知を送る。
③スタートの通知を受けて、設定された問題を送る。
④送られてきた問題を画面に表示する。
⑤問題に対する回答をキー入力で受け付けて、人間のキー入力に応じた回答結果を送る。
⑥送られてきた回答結果に応じて、判定結果を送る。
⑦送られてきた判定結果を画面に表示する。

サーバ側

①

③

クライアント側

⑥

②

④

⑤

⑦

●２択クイズの出題プログラムについて、考えられる改良点を記入しましょう。

例）●事前に複数の問題をサーバ側に設定し、複数の問題を出題させる。
●正解数をカウントして得点を出すシステムを追加する。

32

３．
ネットワークを利用したチャットプログラムの制作
ここではネットワークを利用して複数のパソコン間でメッセージのやり取りを行えるチャットアプリのプログラミ
ングを学習します。

元気？
元気だよ！

①ネットワークをつなぐ

グループ作業：5分 【計5分】■サーバ側のコンピュータの設定

サーバとするコンピュータでメニューの「編集」から「ネットワークを作る」
を選択します。
すると、
このコンピュータの IP アドレスが表示されますので、メモをしておきましょう。

サーバのIPアドレス________ . ________. ________ . ________■クライアント側のコンピュータの設定

クライアントとするコンピュータでメニューの「編集」から「ネットワークにつなぐ」
を選択します。
IP アドレスを入力する画面が表示されますので、接続先のサーバの IP アドレスを入力しましょう。

※IP アドレスは４つの数字をピリオド（.）
で区切って入力します。
※IP アドレスは半角英数字で入力してください。

33

②メッセージを送るプログラムの作成
サーバ側

STEP1

メッセージ入力欄を作成する。

新たに使用するブロック
入力欄を表示し、文字入力を受け付けます。

①新しいスプライトを追加します。

③

入力欄に入力された文字を調べます。

②下図のようにブロックを並べます。

をクリックするとの中の文字がスプライ

ト上に表示され、下段にメッセージ入力欄が表示されることを確認しましょう。

STEP2

入力したメッセージを文字をスプライトに表示させる。

①

②

の中に

を入れ、
を

をクリックし、メッセージ入力欄に文字を入力し、をクリックすると、
スプライトに入力した文字が表示されます。

34

で全体を囲みます。

STEP3

入力したメッセージをクライアント側に送る。

①入力されたメッセージを格納する変数を作ります。
変数名はわかりやすいように自分の名前にしておきましょう。

②作成した変数ブロックに③を入れます。

を追加し、「（自分の名前）のメッセージ」と入力しましょう。

35

①ネットワークをつなぐ

グループ作業：10分 【計30分】

クライアント側

STEP1

サーバ側から送られてきたメッセージを受け取る。

①新しいスプライトを追加します。

③サーバ側でSTEP2①②

を並べます。

に設定した名前と同じ名前を入力します。

受け取ったメッセージをスプライトに表示させる。
ブロックをにつなげ、中に36をを入れます。

②

をサーバ側で設定した変数の値を（ここでは「山田太郎」）に変更します。

※サーバ側とネットワークでつながっていると、サーバ側で作った変数の値をクライアント側でセンサーの値として取り込
むことができるようになります。

以上でネットワークを利用してメッセージを送るプログラムが完成しました。
動きを確認してみましょう。
サーバ側のをクリックし、メッセージを入力すると、クライアント側にもメッセージが表示されます。

サーバ側

クライアント側37

確認問題
グループ作業：20分 【計50分】●クライアント側からもメッセージをサーバ側に送れるようにプログラムを追加し、双方向性のあるチャットプログラムを完成させましょう。
追加するスプライト例
クライアント側

サーバ側

38

４．
発展学習
グループ作業：50分 【計50分】①～チャットの改善点を考えよう～●チャットでメッセージをやり取りする中で、問題点や改善点を見つけて、どのような機能があると、より安全で便
利か考えましょう。

４．
発展学習

例１：相手の顔が見えないので知らないうちに相手を傷つけてしまっているかもしれない。
グループ作業：
50分 【計50分】 次の日寝不足で授業をちゃんと受けられない。
例２：夜遅くまでチャットをしてしまい、①〜チャットの改善点を考えよう〜
例3：パソコンを見ないかぎりメッセージが確認できないので、緊急度の高いメッセージを
問題点●チャットでメッセージをやり取りする中で、問題点や改善点を見つけて、どのような機能があると、より安全で便利か考えましょう。

見逃してしまう。

例4：他人が友達になりすましてチャットにメッセージを送る危険性がある。
（セキュリティ
例１：相手の顔が見えないので知らないうちに相手を傷つけてしまっているかもしれ
の問題）

問題点

ない。

例２：夜遅くまでチャットをしてしまい、
次の日寝不足で授業をちゃんと受けられない。
例１：
特定の文章をNGワードに設定して、NGワードを送れないようにする。

例２：9：00～21：00の間しかメッセージを送れなくする。

改善方法
改善方法

例3：緊急度の高いメッセージは音で知らせるようにする。
例１：特定の文章をNGワードに設定して、NGワードを送れないようにする。
例２：9：00〜21例4：00の間しかメッセージを送れなくする。
：パスワードを入力しないとメッセージのやりとりをできないようにする。

上記で示した例は、実際にプログラムを作成すると以下のようになります。

４．
発展学習
上記で示した例は、実際にプログラムを作成すると以下のようになります。
例１例1

例2
例２

例3

グループ作業：50分 【計50分】①〜チャットの改善点を考えよう〜●チャットでメッセージをやり取りする中で、問題点や改善点を見つけて、どのような機能があると、より安全で便利か考えましょう。

４．
発展学習

例１：相手の顔が見えないので知らないうちに相手を傷つけてしまっているかもしれ
グループ作業：50分 【計50分】
ない。

な機能がある問題点①〜チャットの改善点を考えよう〜

例２：夜遅くまでチャットをしてしまい、次の日寝不足で授業をちゃんと受けられない。

●チャットでメッセージをやり取りする中で、問題点や改善点を見つけて、どのような機能があると、より安全で便利か考えましょう。

ているかもしれ例１：相手の顔が見えないので知らないうちに相手を傷つけてしまっているかもしれ

例１：特定の文章をNGワードに設定して、NGワードを送れないようにする。
ない。
問題点

受けられない。
改善方法にする。

例２：夜遅くまでチャットをしてしまい、次の日寝不足で授業をちゃんと受けられない。
例２：9：00〜21：00の間しかメッセージを送れなくする。

グループ作業：50分 【計50分】

例１：特定の文章をNGワードに設定して、NGワードを送れないようにする。

改善方法
上記で示した例は、実際にプログラムを作成すると以下のようになります。

を考えよう〜

例２：9：00〜21：00の間しかメッセージを送れなくする。

例１

例２

る中で、
問題点や改善点を見つけて、どのような機能がある

例4

上記で示した例は、実際にプログラムを作成すると以下のようになります。
例１

例２

ないので知らないうちに相手を傷つけてしまっているかもしれットをしてしまい、次の日寝不足で授業をちゃんと受けられない。

Gワードに設定して、NGワードを送れないようにする。

の間しかメッセージを送れなくする。

ムを作成すると以下のようになります。
例２

39

緊急度の高いメッセージには最初に＊を入力する。

②～アンケートシステムを構築しよう～②〜アンケートシステムを構築しよう〜●３台以上のコンピュータをネットワークで接続してアンケート集計システムを構築しましょう。

●３台以上のコンピュータをネットワークで接続してアンケート集計システムを構築しましょう。

サーバ側
サーバ側

クライアント側
クライアント側

アンケート結果
アンケート結果■授業例■授業例①指導者のコンピュータをサーバとして、
上記サンプル①指導者のコンピュータをサーバとして、上記サンプルプログラムを設定し、各生徒のコンピュータをプログラムを設定し、各生徒のコンピュータをクライア
クライアントとして接続させ、アンケート結果を返すプログラムを作成させる。
ントとして接続させ、アンケート結果を返すプログラム②上記アンケートシステムの問題点・改良点を構想させる。
を考えさえる。
②上記アンケートシステムの問題点・改良点を構想させる。

●アンケートシステムの問題点や改善点を見つけて、どのような機能があるとより安全で便利か考えましょう。

問題点

回答例①
自分がどちらを入力したか表示したい。

回答例②
１人で複数回答入力できてしまう。

〜と言うブロックを使って、回答結果を自分のコンピュータにも表示させる。

〜と言うブロックを使って、回答結果を自分のコンピュータにも表示させる。

改善方法

40

アンケートシステムの問題点・改良点を構想させる。

ケートシステムの問題点や改善点を見つけて、どのような機能があるとより安全で便利か●アンケートシステムの問題点や改善点を見つけて、どのような機能があるとより安全で便利か考えましょう。
しょう。

題点

回答例①
回答例②
問題点
例1：自分がどちらを入力したか表示したい。
例2：１人で複数回答入力できてしまう。
自分がどちらを入力したか表示した
１人で複数回答入力できてしまう。
い。
改善方法

例1：～と言うブロックを使って、回答結果
を自分のコンピュータにも表示させる。

例2：変数を使って回答した回数をカウントし、2回以上回答できないようにする。

上記で示した例は、実際にプログラムを作成すると以下のようになります。
〜と言うブロックを使って、回答結果を〜と言うブロックを使って、回答結果を自分のコンピュータにも表示させる。
自分のコンピュータにも表示させる。
例2
例1

方法
善方法

●構築したアンケートシステムを学校生活のどのような場面で活用できるか考
えて見ましょう。

例）●文化祭の出し物を決めるアンケート。
●部活のユニフォームを決めるアンケート。

41

メ モ

42

B093889

K0619