１．単元名 双方向性のあるコンテンツのプログラミングによる問題解決
２．生徒の実態および指導観
生徒は日頃、スマートフォンやゲーム機などに触れ、一人で複数台のコンピュータ機器を所持している。そうした機器を便利に活用する力は、友人や保護者などから教わる機会もあり、ある程度備わっている。一方で、それらの機器を構成する技術や、サービスを提供するバックグラウンドについて意識が向くことはほとんどなく、誰が作り、どのように動作しているのか意識する機会もほとんどなかった。

３．教材観
本単元では、情報通信ネットワークを利用し、さまざまなコンテンツを双方向にやり取りするシステムをプログラミングによって制作する。また、プログラミングやデバッグすることによって問題解決を図ることを目指す。
今回は、事前に学習した情報通信ネットワークを利用して、サーバとクライアントが通信していることを意識づけたい。そのために、自身のPCの画面に表示させる学習を行った後に、サーバに送信したり、クラスメイトのメッセージを受信するなど順を追って理解させる。
そして、これらのシステムがプログラミングによって制作されていることに気づくとともに、利用しやすくするために自身で改修やデバッグが行えるような態度を育てていきたい。

4．単元の目標●●●

安全で適切なプログラムの制作と動作の確認、デバッグができる。
ネットワークを利用したデータの送受信の流れを理解する。
情報処理の手順を具体化することができる。

5．評価規準
知識及び技能①情報通信ネットワークの構成と,情報を利用するための基本的な仕組みの理解

思考力,判断力,表現力

主体的に学習に取り組む態度①情報の技術の見方・考え方を①自分なりの新しい考え方や働かせて、問題を見いだし課題を 捉え方によって、解決策を構想設定し解決できる力
しようとする態度②安全・適切なプログラムの制作,動作の確認及びデバッグ等ができる技能

6．単元の指導と評価計画（8時間扱い）②自らの問題解決とその過程を振り返り、よりよいものとなるよう改善・修正しようとする態度

時間

学習内容と活動

主な評価の観点２

・双方向性のあるコンテンツとはなにか→文字・音声・静止画・動画などメディアごとの違いを知る

思判表①、思判表①・問題を発見し、課題を設定する→身の回りの問題を発見する→問題を解決するための手立てを考える

思判表①、主体①

１Lesson1（伝言板をデザインしよう！）→伝言板のコメント欄やアイコンなどのデザインを考えプログラミングする

知技②、主体①

１

Lesson2（サーバと通信しよう！）→サーバにメッセージを送信する→順次・反復・分岐処理を活用する

知技①②

１

Lesson3（文字を送受信しよう！）→文字をサーバを経由してクラスメイトへ送受信する

知技②、主体①

１

Lesson4（画像を送信しよう！）→画像をサーバを経由してクラスメイトへ送受信す
る

知技②、思判表①、主体①

１

Lesson5（伝言板を完成させよう！）→文字と画像をサーバを経由してクラスメイトへ送受信する伝言板を制作する

知技②、思判表①、主体②

１

まとめ→今回制作した伝言板を振り返り問題解決の評価、改善、修正を行う

思判表①、主体②

7．本時で使用する環境
みんなのコード 技術・家庭科技術分野 プログル技術

https://middle.proguru.jp/● 事前に準備すること
・登録用のメールアドレスを1つ事前に準備しておく（アカウントの作成で必要）
・先生 → 利用登録 → 先生のアカウントを作成
・ログイン → クラスの登録（クラス名や人数）を行う
・生徒の初期パスワードを印刷し配布する準備を行う

1

8．各時間の指導計画
第1回 双方向性のあるコンテンツとメディア○ 達成目標・双方向性のあるコンテンツのしくみを理解する
・さまざまなメディアの特徴を理解する
学習内容

学習活動・内容

・本時の説明/目標の確認

本時の目標について理解する

双方向性のあるコンテンを考える

普段利用しているホームページなどを参考に双方向性のあるコンテンツとはどういったものがあるのかをあげる
上記をふまえ、ネットワークを利用することによる利点をあげる

指導上の留意点
及び評価

文字→多数
音声→ニュース読み上げサイトや翻訳サイトなど
静止画→多数
動画→動画配信サイト【評価】ネットワークを利用する事による利点を理解しようとしている(思判表)いろいろなメディアについて知るグループで話し合う

様々なメディアの特徴を理解し長所/短所をまとめる
文字の長所/短所
音声の長所/短所
静止画の長所/短所
動画の長所/短所
以下のテーマについてどのメディアを用いて伝えるのが適しているかグループ（2～3人で）話し合う
・明日の天気・私たちの学校（市や町）
・魚のさばき方・選挙の結果・富士山など発表
クラス内で発表
発表を振り返り、伝える内容によってメディアを使い分ける必要性について考える
まとめ

1つのテーマに対して複数のグループを割り当てて異なる意見を出し合わせる【評価】テーマや場面に応じたメディアを選ぼうと考えを働かせたか(思判表）同じテーマでもメディアが異なってもよいので、そのメディアを選んだ理由を述べさせる
動画が万能といううわけではなく、制作や修正の手間まで考えて、メディアを捉えられるようにする＜参考＞※NHKニュース読み上げサイト https://www.nhk.or.jp/radionews/read.html※google翻訳 https://translate.google.co.jp/2第2回 課題を発見し、課題設定を行おう○ 達成目標・問題を見つけ出し、課題を設定できる
・ID/パスワードの意味を理解し適切に管理する
学習内容

学習活動・内容

指導上の留意点
及び評価

・本時の説明/目標の確認

本時の目標について理解する・課題発見について

学校の中でコンテンツによって解決できる問題がないか考える。

前回学習したいろいろなメディアを活用する

・文章→学校だより
・画像→ポスター
・音声→チャイム、お昼の放送など【評価】身の回りの課題を発見し、解決の手立てを考える
(思判表)

・課題設定

生徒同士の情報共有するツールとしてチャットツー
ルを制作する・プログル技術の説明

チャットツールを制作するプログル技術について説
明を聞く

・パスワードとは

カスペルスキーパスワードチェックのホームページを開き、強いパスワードの作り方を考える（省略しても可）・初期パスワードの 配
布/サインアップ作業（初期登録作業）

ブラウザでhttps://middle.proguru.jp/にアクセスし、プログル技術のページを開く
初期パスワードを元にプログル技術の初期登録を行う。
→初期パスワードの入力→本パスワードを2回入力→ニックネーム＆アイコンの設定→ログイン

まとめ→1234のような脆弱なパスワードにならないように注意する。
【評価】強いパスワードを作り、適切に管理できる(主体）→本パスワードは紛失しないように注意する（その際は再発行）→初期パスワードを入力後、本パスワードをメモしてから2回入力させると、入力ミスなどが防げる

次回から行うプログル技術のパスワード管理をしっかり行うようにする＜パスワードについて補足＞● 初期パスワードから自分自身でパスワードを決定する場合、誕生日や電話番号など数字だけ、他人に推測されやすいものは使わない。
● アルファベット大小文字、記号()?-/!%&などを混ぜると破られにくいパスワードになる。パス
ワードの強度を体験する（カスペルスキーパスワードチェック）https://password.kaspersky.com/jp/3第3回 Lesson1の展開○

到達目標
・伝言板のデザインを行うことができる。
・ユニバーサルデザインに配慮した画面を設計することができる。

学習内容

学習活動・内容

指導上の留意点
及び評価

・本時の説明/目標の確認

本時の目標について理解する・ユニバーサルデザインとはユニバーサルデザインについて調べる

教科書だけでなくWebも利用して調べる

・ログインの確認

前回、設定したパスワードでログインしメインメニューを表示させる。

→紛失しないように注意する（その際は再発行）・基本操作の説明

ステージ１を用いて基本的な操作を身につける→該当する部分（吹き出し）をクリック→文字色やは背景色を入力していく→人によって見分けが付きにくい色や文字の大きさがあることを説明する。

以後、レッスンの流れにしたがって学習を進める。

・各レッスンのプログラミン
グを進める

ステージ2 → 文字サイズ、配置、余白
ステージ3 → 吹き出しの角を50px
ステージ4 → 画像サイズ、線の色、角丸
ステージ5 → テキストを入力するエリアの枠、 線、文字の大きさ、余白、角丸
ステージ6 →「送信する」ボタンの文字サイズ、 余白、角の設定をする。
ステージ7 → 背景色やフォントを設定する。
ステージ8 → 自由にデザインする

・まとめ
本時の振り返り＆次回のテーマを予告【評価】ｽﾃｰｼﾞ1〜7について画面の指示に従い、プログラミングを行うことができたか(知技)【評価】ｽﾃｰｼﾞ8で利用しやすい伝言板を制作しようと工夫できたか(主体)・自分の思い通りの伝言板を制作することができたか？また、その修正（デバッグ）も行えたか？
・ユーザ（利用者）の目線で見やすい/利用しやすい伝言板を作ることができたか？
・次回Lesson2はサーバとの通信について学習する

4第4回 Lesson2の展開○ 到達目標・サーバと通信をしてメッセージを送信することができる。
・順次処理、反復処理、分岐処理を理解してプログラムを制作することができる。

学習内容

学習活動・内容

・本時の説明/目標の確認

・前回の学習を踏まえ、サーバとの通信について新たに学習する

・各レッスンのプログラミングを進める

ステージ1 → 画面に「Hello World !」と表示
ステージ2 → 画面に「Hello」「World」「!」の順に表示

指導上の留意点
及び評価→順次処理を意識させる

ステージ3 → 画面に「Hello」を10回表示させる→反復処理を意識させる
ステージ4 → サーバとの接続を行う

ステージ5 → サーバに「こんにちは」とメッセージを送る

・まとめ/本時の振り返り→通信している相手がサーバであることを意識させる

ステージ6 → サーバに自分のニックネームを送信し、その結果を表示させる→ステージ5とは異なり、メッセージを送るだけではなく結果が表示されることを意識させる。

ステージ7 → サーバに午前中なら「おはよう」、午後なら「こんにちは」のメッセージを送る→分岐処理を意識させる→サーバの画面を正面に表示し、自分の送ったメッセージを確認させる・サーバに対してメッセージ（文字）を送ることができたか。
・既習の順次/反復/分岐をレッスンで活用できたか確認をする。
・次回はメッセージ（文字）を送受信する【評価】ｽﾃｰｼﾞ1〜7について画面の指示に従い、プログラミングを行うことができたか(知技)←今回はメッセージ（文字）をサーバへ送っただ
けで、友人たちとやり取りをしたわけではないことに気づかせる※ステージ2、ステージ3、ステージ7についてはフローチャートやアクティビティ図を書き、既習の内容を確認し理解を深めさせてもよい。

5

第5回 Lesson3の展開○ 到達目標・サーバと通信をしてメッセージを送受信することができる。
・送受信するメッセージを画面に表示させることができる。
指導上の留意点及び評価

学習内容

学習活動・内容

・本時の説明/目標の確認

・前回の学習を踏まえ、メッセージ（文字）の送受信とその表示について学習する

・各レッスンのプログラミングを進める

ステージ1 → 送信ボタン押下で「こんにちは」と表示させる

・まだ表示させているだけ
で誰にもメッセージは送っていない

ステージ2 →送信ボタン押下で入力エリアのメッセー
ジを変数に保存→ 画面にメッセージを表示

・変数の使い方を意識させる

ステージ3 → 送信ボタン押下で入力エリアのメッセー
ジを変数に保存→ サーバに送信→成功したら画面にメッセージを表示※教師のサーバ画面で送信されたことを確認

・ステージ2との違いをを意識させる(見た目は同じだがメッセージをサーバに送信している)

ステージ4 → サーバから新着メッセージを受信する→受信したメッセージがテキスト(文章)だった場合は変数に保存→変数を画面に表示

・自身のテキストだけでなく、クラスメイトのテキストも表示されたか？

ステージ5 → 入力テキストの送信→画面表示
新着メッセージの受信→画面表示ができるようにする。

・プログラムの内容がわからなくなってしまった
ら、送信:ステージ3
受信:ステージ4を参照【評価】ｽﾃｰｼﾞ1〜4について画面の指示に従い、プログラミングを行うことができたか(知技)【評価】ｽﾃｰｼﾞ5についてブロックを工夫し、テキストの送受信プログラムを作ることができたか(主体)

・まとめ/本時の振り返り

・サーバに対してメッセージ(文字)を送り、画面 に表示することができたか。
・サーバにあるメッセージ(文字)を受信し、画面 に表示することができたか。
・今回は文字の送受信を行ったが、次回は画像の送受信を学習する。

・コミュニケーションを取る
際に、文字より絵/写真の方がより正確に伝わることもある※今回のLessonで表示される伝言板のデザイン（色や形）を変更したくなった場合はLesson1のステージ8を変更すると反映される
6第6回 Lesson4の展開○ 到達目標・サーバと通信をして画像を送受信することができる。
・送受信する際に、データ量を考慮してファイルの圧縮やリサイズができる。

学習内容

学習活動・内容

・本時の説明/目標の確認

・前回の学習を踏まえ、画像の送受信とその表示について学習する

・各レッスンのプログラミン
グを進める

ステージ1 → 伝言板にサンプル画像を表示させる
ステージ2 → サンプル画像1を圧縮率10％、縦/横を300pxにリサイズして伝言板に表示させる

指導上の留意点
及び評価・サンプル画像は任意に選択・圧縮率やリサイズの数
字をいろいろと変更して比べてみるのもよい

ステージ3 → サンプル画像の高さ/幅が500px以上の場合、高さ/幅を300pxに変更(リサイズ)して伝言板に表示させる

・変数名を全てそろえる

ステージ4 → サンプル画像を圧縮/リサイズしてサーバに送信し、成功したら伝言板に表示する・通信している相手がサーバであることを意識させる（教師画面等で確認させる）

ステージ5 →

ステージ6 →

ボタンを押すと選択画面が表示されるので、そこから画像を選び伝言板に表示する
ボタンを押すと選択画面が表示されるので、画像を選択。その画像を圧縮/リサイズをしてからサーバに送信し、伝言板に表示させる【評価】画像を圧縮/リサイズする理由は?
メリット/デメリットは?(思判表)・ステージ5と異なりサーバに送信していることを意識させる

ステージ7 → 実行すると、サーバから新着メッセージを受信し、画像が含まれていたら伝言板に表示させる・テキスト（文字）が表示されないことを確認させる

ステージ8 →実行すると、サーバから新着メッセージを受信し、画像が含まれていたら画像を圧縮、リサイズを行ってから伝言板に表示させる【評価】ｽﾃｰｼﾞ1〜8について画面の指示に従い、プログラミングを行うことができたか(知技)ステージ9 →ステージ1〜8で学習した内容を使って、画像の送受信を行う【評価】ｽﾃｰｼﾞ9についてブロックを工夫し、画像の送受信プログラムを作ることができたか(学び)・サーバと通信をして画像を送受信することができる
・まとめ/本時の振り返り
7

・送受信する際に、データ量を考慮してファイルの圧縮やリサイズができる

・圧縮やリサイズをしないとどうなるかを考えさせる

・次回はこれまで学習した内容を組み合わせて、文字と画像の両方を送受信できる伝言板システムを制作する。
※重要 本授業を行う際は、事前に生徒のPCにJPGの画像を数枚保存しておくこと←左のボタンを押した際、画像を選んで送信する際に使用するため無料の画像サイト：https://pixabay.com/ja/ などを活用する
第7回 Lesson5の展開○ 到達目標・テキストと画像を送受信する伝言板をプログラミングすることができる。

学習内容

学習活動・内容

・本時の説明/目標の確認

・これまでの学習を踏まえ、メッセージの送受信及び画像の送受信が行える伝言板を完成させる・デザインの設計

ステージ1 → 以下の伝言板のデザインを行う
・発信者と受信者のアイコン/コメント
・入力エリア及び送信ボタン
・見やすさを重視し色や大きさを決定

・伝言板のプログラミング

ステージ2 → 文字と画像の送受信が行えるようにする
・入力エリアに入力した文字の送信・を押して画像を選び、送信・サーバにある文字と画像を受信して表示

・課題を解決する機能

メールアドレスや電話番号を制限するブロックを使って個人情報を保護する伝言板を作るよう促す。
キーワード検出のブロックを使って、不適切発言をブロックするような伝言板を作るよう促す。
工夫した点、改良したい点をワークシートにまとめ指導上の留意点
及び評価・内容を振り返りたい場合
はLesson1を参照【評価】ｽﾃｰｼﾞ1について
ユニバーサルデザインを意識したUIをプログラムすることができたか(思判表)
・内容を振り返りたい場合
はLesson3/4を参照【評価】ｽﾃｰｼﾞ2について
文字と画像を送受信できる伝言板をプログラムすることができたか(知技)【評価】画像を送受信する際に圧縮/リサイズの意味を考えてプログラムできた(思判表)【評価】課題を見つけ、課題を解決するために積極的にプログラムの機能を利用してプログラミングを行ったか（主体）8・まとめ/本時の振り返りる。

※Lesson1で設定したデザインはLesson2~4の画面に反映されるが、このLesson5ステージ1で設定した画面は「あなたの作成した伝言板」に反映されるので注意

第8回 単元のまとめの展開○ 到達目標・プログラムの制作過程や問題解決の結果を評価し、改善や修正を行える。
・利用規約を考え、どうすれれば利用者が快適に使えるかを考えることができる。

学習内容

学習活動・内容

・本時の説明/目標の確認

・これまでの学習を踏まえ、Lesson5で制作されたクラス伝言板の評価、改善/修正を考える

指導上の留意点
及び評価・利用者向けに利用規約を作る→守るべきモラルなどを考える。
・クラス伝言板の評価

・相互評価
2〜3人でグループを作り、お互いの伝言板を利用して相互評価を行う。
→ 見やすさ・操作性・効率的それぞれの観点でチェックを行う。

・利用規約の制作

・利用規約
クラス全員で伝言板を利用していくにあたって、使い方のルールをまとめた利用規約を作る。
→（3〜4名の）班ごとで意見を出し合う。
→順番に発表→重複するものなどをまとめ、クラス全体の利用規約にまとめる。
・伝言板の修正/改善→クラスメイトの指摘や自身の振り返りから伝言板の改善案を作る→クラスメイトとの話し合いなどから、新たな機能のアイデアなどを挙げてみる。

・まとめ/本単元の振り返り【評価】クラスメイトの作品をそれぞれの観点で評価が行えているか(思判表)【評価】利用規約を考え、必要な条文について作ることができる(学)【評価】伝言板の改善点を評価/判断することができる(思判表)
新たな機能のアイデアを挙げることができる(学)

全ての学習の振り返りを行う→（目標と照らし合わせて）プログラミングができるようになったか？
デバッグができるようになったか？
情報処理の手順を理解し具体化することができたか？等に触れながら、単元のまとめをする。
9

デジタル指導案
本指導案で取り上げる8回の授業を流れに沿ってまとめました。50分の授業の流れをイメージしながらご覧いただくと、授業が進めやすくなると思います。※以下はGoogleのcodelabsで作られた教材です。

第1回

双方向性のあるコンテンツとメディア

第2回

課題を発見し、課題設定を行おう

第3回

Lesson1の展開

第4回

Lesson2の展開

第5回

Lesson3の展開

第6回

Lesson4の展開

第7回

Lesson5の展開

第8回

単元のまとめの展開

10