このファイルはプログル技術のワークシートです。
授業で改編して使用する場合 word 形式でこちらに用意してあります。
ワークシート（全 8 回分）は次のページからです。

年組番

氏名

① 双方向性のあるコンテンツとは何だろう

学習日

月日

⚫ 今日のめあて
双方向性のあるコンテンツのしくみを理解する。
さまざまなメディアの特徴を理解する。
⚫ 双方向性のあるコンテンツとは何か
いろいろなホームページやサービスなどを探して、利用者の問いかけ（入力）に対してどのような情報（出力）を返しているか調べてみよう。
サイト名やサービスなど

問いかけ（入力）

情報（出力）

例）Google Map例）Google ホーム

住所（文字）
明日の天気は？（音声）
電話かけて（音声）
東京駅まで （音声）

地図（静止画）
明日の天気（音声）通話する（音声）
地図や音声案内

日本語（文字）
自宅までの経路（文字）（画像＆音声）英語（文字＆音声）
路線図（文字＆地図）例）カーナビゲーション
例）翻訳ページ例）経路検索⚫

インターネットを使わない方法で、情報（出力）を得るための方法（サービスなど）を調べてみよう。また、インターネットの有無による違いを考えてみよう。
知りたい情報方法（サービス）例）住所例）天気地図
テレビ例）天気例）電車の時刻

新聞
時刻表

ネットワークを使ったサービスとの違い自分で探す必要がある
ニュース番組のお天気コーナーでないとわからない
大きい都市の天気しかわからない
細かい表から自分で探す必要がある⚫ ネットワークを利用することによる利点
情報が新しい（地図や天気など）

自分の知りたい情報に詳しく答える

複数のメディアで情報を提供できる

自分の知りたい情報にすぐに答える⚫ いろいろなメディアの特徴について
文字

音声

静止画

動画

データ量

少ない

多い

多い

とても多い

加工のしやすさ

簡単

難しい

難しい

難しい

情報を簡単につた 目が見えない人に 耳が聞こえない人 伝えたい情報を順えることができるも情報を伝えるこ にも情報を伝える 序ごとにつたえる

プラス面とができる

ことができることができる

目の見えない人に 耳が聞こえない人 目の見えない人に 順番に時間をかけ
マイナス
面

は情報が伝わらな には情報が伝わら は情報が伝わらな て見なくては必要
いない

いな情報にたどりつけない⚫ いろいろなテーマに適したメディアの選択
以下のテーマについて、どのメディアで伝えるのが良いのかグループで話し合ってみましょう。
・明日の天気・魚のさばき方

私たちが話し合ったテーマ

使用するメディア・富士山

・私たちの学校（市や町）・選挙の結果 など

富士山
その理由

・静止画（写真）

数字で大きさを伝えるよりも写真で見せた方がより大きさが伝わるから・文字

数字で表した方が正確につたわるから今日の振り返り

よくできた

まあできた

あまりできなかった

できなかった

双方向性のあるコンテンツの仕組を理解できた。

1

2

3

4

いろいろなメディアの長所/短所を理解しメディアを選択することができた。

1

2

34

年組番

氏名

② 問題を発見し、課題を設定しよう！

学習日

月日

⚫ 今日のめあて
問題点を見つけ出し、課題を設定してみよう。
ID/パスワードの意味を理解し適切に管理しよう。
⚫ 学校内で友達と情報のやり取りをするときの問題点を考えよう
例）クラスが違い、教室が遠くて会って話がしづらい
大勢に情報を伝えたいとき、一度に伝えるのが大変
コロナ禍のせいで一ヶ所に大勢で集まれない
メールアドレスや LINE の ID、電話番号を知らないので連絡がとれない人がいる⚫

チャットツールではどのような情報をやり取りできるとよいでしょうか
例）文字・文章
写真・イラスト・地図・スタンプ
動画⚫ プログルを使う準備をしよう
1. ブラウザを起動する。
2. URL を入力する。（https://middle.proguru.jp/）
3. 初期登録をしましょう。
➢[生徒] → [利用登録]

先生からもらった[クラス ID]と[初期パスワード]を使ってアカウントを作成※クラス ID は自分のクラス名とは異なるので注意
簡単に破られない強いパスワードを作ろう※簡単に破られない強いパスワードを作るコツは？
例）長くする（文字数多く） 記号を使う（？／＋！＄など） etc

自分で作ったパスワードをメモしよう → 画面の指示通り、2 ヶ所へ入力➢

ニックネームを入力し、アイコンを選択する→ これでプログルの準備が完了

年組番氏名③ Lesson1 伝言板をデザインしよう！

学習日

月日

⚫ 今日のめあて
伝言板のデザインを行ってみよう。
ユニバーサルデザインに配慮した画面をプログラミングしてみよう。
ユニバーサルデザインとは？
例）年齢、性別、障害の有無や国籍などの、人それぞれの状況にかかわらず、誰もが使いやすいよ
うに製品や施設、環境をデザインすること⚫ 掲示板を見やすくデザインしよう
今回の授業では右の図のような掲示板のデザインを行います。次のステージ 1～7 までを順番に行いデザインを学習しましょう。
➢ ステージ 1□ 吹き出しの色を白にできた？
□ 吹き出しの背景色を青にできた？
＜豆知識＞色の組み合わせ
町中の看板や標識、ホームページなど、目立たせるためにいろいろな工夫があります。
目立つ色の組み合わせを考えましょう

ステージ 2□ 文字の大きさを 16px、左揃えにできた？
□ 吹き出しの中の余白を 20px にできた？
□ 「送信テキスト」欄にテキスト（文字）をたくさん入れたら改行した？
ステージ 3□ 吹き出しの右上以外の角を丸くできた？

ステージ 4□ アイコン画像の大きさを縦/横 70px にできた？
□ アイコン画像の全ての角を丸くできた？
ステージ 5□ デザイン見本のような「テキスト入力エリア」を作れた？
ステージ 6□ デザイン見本のような「メッセージ送信用のボタン」を作れた？
ステージ 7□ 「全体設定」ボタンからチャット画面の背景色や使用するフォントを変えることができた？
ステージ 8□ 「送信側の吹き出し」「受信側の吹き出し」は送信メッセージか受信メッセージかわかりやすいデザインにできた？
□ 「送信側のアイコン」「受信側のアイコン」は見やすいデザインにできた？
□ 「入力エリア」や「送信用のボタン」はそれぞれの特徴がわかりやすいデザインにできた？
□ 「全体設定」でチャット画面を見やすいデザインにできた？
⚫

今回の課題（ステージ 8）であなたの工夫した点を書きましょう

背景に黄色など明るい色を使うと目立つが、読みにくいので、落ち着いた緑色にした。 など
文字が小さいとお年寄りが読みにくいので、大きくした

今日の振り返り
よくできた

まあできた

あまりできなかった

できなかった掲示板についてプログラミングを行うことができた。

123

4

誰にでも見やすい画面をプログラムすることができた。

12

34

年組番

氏名

④ Lesson2 サーバと通信しよう！

学習日

月日

⚫ 今日のめあて
サーバと通信をしてメッセージを送信してみよう。
順次処理、反復処理、分岐処理を理解してプログラムを制作してみよう。
⚫ サーバとの通信について今回のレッスンではサーバとの通信を学習します。
気をつける点は、隣のクラスメイトとやり取りをするのではなく、サーバを相手に通信しサーバます。

インターネット➢ ステージ 1□ コンピュータの画面に「Hello World！」と表示できた？
➢ ステージ 2□ コンピュータの画面に「Hello」 「World」 「！」と順番に表示できた？
➢ ステージ 3□ コンピュータの画面に「World」と 10 回、表示できた？
始め※ステージ 2 で行った、順番にプログラムを実行する手順のことを（ 順次処理 ）という。
※ステージ 3 で行った、同じ処理を決められた条件で繰り返す処理のことを（ 反復処理 ）という。それぞれの処理について、
下のフローチャートを完成させてみよう。

Hello を表示

始め繰り返し 10

回

World を表示

Hello を表示

！ を表示

繰り返し終了終了➢ ステージ 4□ サーバ「192.168.0.1」への接続が成功したか？

終了➢ステージ 5□ サーバ「192.168.0.1」への接続が成功したか？
□「こんにちは」とサーバに送ったら、コンピュータの画面に「送信に成功しました！」と表示された？
□サーバ（先生の画面）に自分の送ったメッセージ「こんにちは」が表示されているか？

➢ステージ 6
□ニックネームをサーバに送ったら、コンピュータの画面に「送信に成功しました！」と表示された？
□サーバからの応答を受け取ったら、コンピュータの画面に「応答を受け取りました！」と表示された？
□コンピュータの画面に「サーバで“自分のニックネーム”を受け取りました！」と表示された？
＜ステージ 7 のフローチャート＞□サーバ（先生の画面）に自分の送ったメッセージ「“自分のニックネーム”」が表示されているか？
➢

始め

サーバに接続ステージ 7□「もし～なら～」ブロックを使って、午前なら「おはよう」、午後なら「こんにちは」というメッセージをサーバに送ることができた？
□サーバからの応答を受け取ったら、コンピュータの画面に応答の内容が表示された？
午前なら「おはよう！」午後なら「こんにちは！」いいえ

時刻は午前か？
はい「 おはよう 」を送信

応答の受け取り成功？

□サーバ（先生の画面）に自分の送ったメッセージ「おはよう/こんにちは」が表示されているか？ ←この質問は授業の環境によって確「こんにちは」を送信

いいえ

はい

応答の内容を表示認できないことがあります。

終了

今日の振り返り
よくできた

まあできた

あまりできなかった

できなかったサーバと通信してメッセージを送信することができた。

1

2

3

4

順次処理、反復処理、分岐処理を理解してプログラムを制作することができた。

1

2

3

4

年組番

氏名

⑤ Lesson3 文字を送受信しよう！

学習日

月日

⚫ 今日のめあて
サーバと通信をしてメッセージを送受信してみよう。
送受信するメッセージを画面に表示させてみよう。
⚫ 文字の送受信について今回のレッスンでは文字の送受信を学習します。注意すべき点は、画面に「おはよう」と表示する命令と、サーバに「おはよう」と送信する命令は別々に考える必要があります。Lesson2の内容とよく見比べながら学習を進めよう。
➢ ステージ 1□ 「送信する」ボタンを押すと、伝言板に「こんにちは」と表示された？
➢ ステージ 2□ 「送信する」ボタンを押すと、伝言板に入力エリアに書き込んだテキストが表示された？
※ステージ 1 と 2 の違いは？
ステージ 1 は毎回「こんにちは」しか表示できないが、ステージ 2 は自分の入力した文章が表示される変数とは送信
ああああ

ああああ

送信
テキスト

➢ ステージ 3□ ｢送信する」ボタンを押すと伝言板に入力エリアに書き込んだテキストが表示された？
□ ｢送信する」ボタンを押すと先生の画面に送信したテキストが表示された？
※ステージ 2 と 3 の違いは？
ステージ 2 は自分の入力した文章が表示されるだけ、ステージ 3 は自分の画面に表示されるだけでなく、サーバにメッセージが送信される。

➢ ステージ 4□ ｢実行する」ボタンを押すと伝言板にクラス内の人が送信したテキストは表示された？
➢ ステージ 5□ ｢送信する」ボタンを押すと入力エリアに書き込んだテキストは送信して伝言板に表示された？
□｢実行する」ボタンを押すと伝言板にクラス内の人が送信したテキストは表示された？

＜送信プログラム＞＜受信プログラム＞
始め

始め（ 入力エリア ） に文字を入力

新着ﾒｯｾｰｼﾞを受け取る

送信ボタンを押す

受信は成功か？

いいえ

はい（ 変 数 ） に保存（ 変 数 ） に保存（ 変 数 ） を表示

サーバにを送信

送信は成功か？

終了

いいえ

はい

（ 変 数 ） を表示

終了

今日の振り返り
よくできた

まあできた

あまりできなかった

できなかったサーバと通信してメッセージを送受信することができた。

1

2

3

4

送受信するメッセージを画面に表示させることができた。

1

2

34

年組番氏名⑥ Lesson4 画像を送受信しよう！

学習日

月日

⚫ 今日のめあて
サーバと通信して画像を送受信してみよう。
送受信する際に、データ量を考慮してファイルサイズの圧縮やリサイズをしてみよう。
⚫ 画像の送受信について今回のレッスンでは画像の送受信を学習します。注意すべき点は、単純に画像を送受信するだけではなく、伝えたい（送りたい）内容と通信量のバランスを考え、プログラムを作りましょう。
➢ ステージ１□ 「実行」ボタンを押すと、伝言板にサンプル画像が表示された？
➢ ステージ２□ 伝言板にサンプル画像の圧縮率を変えて表示できた？
□ 伝言板にサンプル画像のサイズ（大きさ）を変えて表示できた？
※圧縮/圧縮率とは（教科書 P.200～201）
画像のデータは、目の細かさ（
よってことによって、（解像度データ量）を下げたり、使う色の数を減らす事に）を減らすことができます。

➢ ステージ３□ サイズに応じてサンプル画像のサイズを変えて伝言板に表示できた？
＜参考＞一般的な画像の縦横比について
デジタル画像は撮影したカメラの種類によって縦横比が異なります。この縦横比のことを（ アスペクト比 ）といいます。
フィルムカメラの写真は（ 3：2 ）液晶テレビは（ 16：9 ）デジタルカメラの写真は（4：3 ）➢ ステージ４□サーバにサンプル画像のサイズや圧縮率を変えて送信できた？
□サイズや圧縮率を変えて送信した画像は伝言板に表示できた？
□「送信する」ボタンを押すと先生の画面に送信した画像が表示された？
圧縮率が何％くらいまでだったら、相手に画像の内容が伝わると思いますか？
（％の数字を変更しながら、調べてみよう）

私は％に設定します。

➢ ステージ５□ 画像選択画面は表示された？
□ 画像選択画面で選択した画像を伝言板に表示できた？
➢ ステージ６□ 先生の画面に画像選択画面で選択した画像は表示された？
□ 選んだ画像を適切な圧縮率とサイズにできた？
□ サーバに送信した画像は伝言板に表示できた？
※適切な圧縮率とサイズについて考えよう。
例えば最近のスマートフォンのカメラ（1200 万画素）で写真を撮ると約 4.5MB/枚
スマートフォンを月々1GB の定額料金で利用した場合、約 250 枚程度送信したら上限に達してしまいます。
その対策として、通信量をできることはなんだろうか、考えてみよう。

画像を圧縮する（画像の色を減らす、画像の解像度を下げる）
デジカメ、スマートフォンで撮影するときに小さいサイズで撮影する
リサイズするときの問題点…
縦横比（アスペクト比）が画像によってバラバラで、リサイズすると画像がゆがんでしまう。→解決策はステージ 9 に➢ ステージ７□ 「実行する」ボタンを押すと、伝言板にクラス内の人が送信した画像は表示された？
➢ ステージ８□ 「実行する」ボタンを押すと、伝言板にクラス内の人が送信した画像のサイズや圧縮率を変えて表示できた？
➢ ステージ９□ 画像選択画面で選択した画像は、送信して伝言板に表示できた？
□「実行する」ボタンを押すと、伝言板にクラス内の人が送信した画像は表示された？
今日の振り返り
よくできた

まあできた

あまりできなかった

できなかったサーバと通信して画像を送受信することができた

1234

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

1

234

年組番

氏名

⑦ Lesson5 掲示板を完成させよう！

学習日

月日

⚫ 今日のめあて
テキストと画像を送受信する掲示板をプログラミングしてみよう。
⚫ 掲示板の制作について掲示板のデザイン、テキストの送受信、画像の送受信など、これまで学習してきたことをまとめて、使いやすい掲示板をプログラミングしましょう。その際、技術の見方・考え方を働かせながら、プログラミングを行いましょう。
➢ ステージ１□ 「送信側の吹き出し」「受信者側の吹き出し」は送信メッセージか受信メッセージかわ
かりやすいデザインにできたか？
送信者/受信者を区別着きやすくするために私は...のような工夫しました。
□「送信側のアイコン」「受信側のアイコン」は見やすいデザインにできたか？
送信者/受信者のアイコンを見やすくするために私は…のような工夫をしました。
□「入力エリア」や「送信用のアイコン」は見やすいデザインにできたか？
入力エリアと「送信する」ボタンを見やすく（使いやすくする）ために私は…のような工夫をしました。
□「全体設定」で伝言板の画面を見やすいデザインにできたか？
私が作った掲示板の見た目の売りは…

です。

➢ ステージ２□ ｢送信する」ボタンを押すと伝言板に入力エリアに書き込んだテキストは送信して表示された？
□画像選択画面で選択した画像は送信して伝言板に表示できた？
□｢実行する」ボタンを押すと伝言板にクラス内の人が送信したテキストは表示された？
□｢実行する」ボタンを押すと伝言板にクラス内の人が送信した画像は表示された？
⚫

このプログラムを作るとき、工夫した点はどこか？
私が工夫した点は…
・画像を選択してサーバに送信するとき、パケットを節約するために、圧縮してからデータを送信した。
・掲示板に入りきらない写真が見切れてしまわないように、リサイズを行った。etc...
です。

⚫

この単元を学習してあなたが気づいたこと、考えたことを書きましょう。

今日の振り返り
よくできた

まあできた

あまりできなかった

できなかったサーバと通信して画像を送受信することができた。

1234

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

1234

とても思う

まあ思う

12

またプログラミングをして身近な問題を解決してみたい。

あまり思わない

3

まったく思わない

4

年組

番

氏名

⑧ 完成した掲示板を評価・改善してみよう

学習日

月日

⚫ 今日のめあて完成したチャットツールを友達と評価し合い、改善につなげよう
チャットツールの利用規約について考え、お互いに気持ちよく利用できるようにしよう⚫ 掲示板の評価
クラスメイトとグループを作ってお互いに評価し合いましょう。
私は組番➢ 見やすささんの掲示板を評価しました。
とても良い

まあ良い

あまり良くない

良くない

フォントの色・大きさ

123

4

アイコンの色・大きさ

1234

送受信した画像の表示

1234➢ 操作性
「送信する」ボタンの大きさ

1234

テキスト入力エリアの大きさ

12341234ルール）をまとめたもの➢ 効率的送受信する画像を圧縮している

ここが良い！ここが惜しい！

⚫ 利用規約について考えよう
利用規約とは、掲示板の利用者が守らなければならない（です。利用者のモラルだけに頼って運営するのではなく、文章として（すことも大切です。

ルール）を示＜利用規約を考える上で大切なキーワード＞
信ぴょう性

安全性

プライバシー

迷惑

著作権

個人情報

人権

どんな決まりを入れるとみんなが気持ちよく使えるか考えてみよう！
 例）ウソ/デマの情報を書き込んではいけません。





クラスのみんなで意見を出し合い、クラス掲示板の利用規約を完成させましょう。

⚫ 掲示板の改善
今回完成させたクラス掲示板について改善をしましょう。
クラスメイトの指摘＆自分の振り返りから、改善点を洗い出してみましょう。
また、新たにこんな機能を追加してみたい、というアイデアも挙げてみましょう。
改善アイデア

改善アイデア

改善アイデア

改善アイデア

改善アイデア

改善アイデア

例）顔のアイコンが大きすぎたので小さくする