このファイルは授業用スライドです

授業で改編して使用する場合は Googleスライド形式でこちら に用意してあります。
共有権限をリクエストせず、ファイル → ダウンロード からファイル形式を選んで、ダウンロードしてください。

©2022 特定非営利活動法人みんなのコード

info@code.or.jp

1

双方向性のあるコンテンツのプログラミング①©2022 特定非営利活動法人みんなのコード

info@code.or.jp

2

今日のめあて● 双方向性のあるコンテンツのしくみを理解する● 様々なメディアの特徴を理解する©2022 特定非営利活動法人みんなのコード

info@code.or.jp

3双方向性のあるコミュニケーション
私たちは日常、友達や先生たちとコミュニケーションを取るとき、お互いに会話をします。

©2022 特定非営利活動法人みんなのコード

info@code.or.jp

4双方向性のあるコミュニケーション
話しかけた内容に対して、返事をしたり、答えを返しますよね？

あしたの天気は？

晴れだよ©2022 特定非営利活動法人みんなのコード

info@code.or.jp

5双方向性のあるコミュニケーションとは双方向性とは、利用者の働きかけ（入力）に応じて、応答（出力）する。そのやり取りが一方向ではなく、相互にやり取りする様子です。
あしたの天気は？

晴れだよ

入力

出力

©2022 特定非営利活動法人みんなのコード

info@code.or.jp

6双方向性のあるコンテンツとは何か
例）スマートスピーカー（音声コンテンツ）

あしたの天気は？

電話かけて©2022 特定非営利活動法人みんなのコード

スマートスピーカー

info@code.or.jp

7双方向性のあるコンテンツとは例）地図検索（画像コンテンツ）例）オンラインショッピング（画像、文字、動画コンテンツ）©2022 特定非営利活動法人みんなのコード

info@code.or.jp

8これらのコンテンツはみなインターネットを利用している©2022 特定非営利活動法人みんなのコード

info@code.or.jp

9もしもインターネットがなかったら...
● インターネットを利用しないこれらのコンテンツとの差はなんだろうか？

©2022 特定非営利活動法人みんなのコード

info@code.or.jp

10ネットワークを利用することの利点● 情報が新しい● 知りたい情報を詳しく知れる● 知りたい情報を素早く知れる● 文字・音声・画像など複数の情報を得られる©2022 特定非営利活動法人みんなのコード

info@code.or.jp

11様々なメディアとその特徴
文字

音声

静止画

動画

●情報が正確に伝わりやすい。

● 音楽で作品の内容を伝えることができる●大きさや形を変えるこ
プラとで、伝えたい部分をス強調できる。
面●容易に作成し、修正できる● 音声を流すことで、人がいなくても説明できる● 文字で説明しにくい
状況を、わかりやすく伝えられる● 伝えたい情報に動きを持たせ、変化を強調して表現できる● デジタルカメラなどで撮影すれば、簡単に作成できる● 状況の変化を、時間を追って伝えることができる● 多くの情報を見るままに伝えることができる● 編集でさまざまな効果を付けられる● データを修正しにくい● データを修正しにくい● データ量がやや多い● データ量が多い●データ量がやや多い● 前後の動きを示しにくい● 順番に時間をかけて見なくてはならない●聴覚に障害のある人には、内容が伝わらない。

● 視覚に障害がある人には内容が伝わらない● 視覚に障害がある人には内容が伝わらない● 視覚に障害がある人にも内容を伝えることができる●データ量が少ない●多くの情報を伝えにくいマイナス
面●視覚に障害のある人
や、まだ文章が読めな
い子どもには、内容が伝わらない。

●順番に時間をかけて聞かなくてはならな
い。また、データを修正しにくい。

©2022 特定非営利活動法人みんなのコード

info@code.or.jp

12いろいろなテーマに適したメディア● 次のテーマについてどのメディアで伝えるのが良いか、グループで話し合ってみよう
1.明日の天気2.魚のさばき方3.富士山
4.私たちの学校
5.選挙の結果©2022 特定非営利活動法人みんなのコード

info@code.or.jp

13今日のまとめ● 双方向性のあるコンテンツのしくみを理解する● 様々なメディアの特徴を理解する©2022 特定非営利活動法人みんなのコード

info@code.or.jp

14双方向性のあるコンテンツのプ
ログラミング②©2022 特定非営利活動法人みんなのコード

info@code.or.jp

15

双方向性のあるコミュニケーション
双方向性とは、利用者の働きかけ（入力）に応じて、応答（出力）する。そのやり取りが一方向ではな
く、相互にやり取りする様子です。

あしたの天気は？

晴れだよ©2022 特定非営利活動法人みんなのコード

info@code.or.jp

16双方向性のあるコンテンツ（例）地図検索○×中学校ってどうやって行くんだろう？

©2022 特定非営利活動法人みんなのコード

info@code.or.jp

17

今日のめあて● 問題点を見つけ出し、課題を設定してみよう● ID/パスワードの意味を理解し適切に管理しよう©2022 特定非営利活動法人みんなのコード

info@code.or.jp

18

学校内で友達と情報のやり取りをするときの問題点● コロナ禍のために人が一ヶ所に集まれない● メールアドレスや電話番号を知らない人がいるチャットツール（伝言板）で情報を共有©2022 特定非営利活動法人みんなのコード

info@code.or.jp

19

チャットツール（伝言板）を作ってみよう● クラスのみんなが自由に書き込めるチャット

Social Networking Service → SNS（例）LINE、Facebook、Twitter、Instagram...
文字・写真・動画などそれぞれに得意なメディアがある©2022 特定非営利活動法人みんなのコード

info@code.or.jp

20

チャットツールではどのような情報をやり取りしたいか● 文字・文章● 写真・イラスト・地図・スタンプ● 動画 など©2022 特定非営利活動法人みんなのコード

info@code.or.jp

21

ブラウザを起動● 「プログル技術」と検索©2022 特定非営利活動法人みんなのコード

info@code.or.jp

22

プログル技術を使う準備をしよう©2022 特定非営利活動法人みんなのコード

info@code.or.jp

23

利用登録画面

クラスID

自分の出席番号
先生から配られたもの©2022 特定非営利活動法人みんなのコード

info@code.or.jp

24パスワードの設定①まず、強いパスワードを考えてみよう。

②考えたパスワードをメモしよう。

③間違えないように２ヶ所に入力しよう④更新する©2022 特定非営利活動法人みんなのコード

info@code.or.jp

25

ブラウザにパスワードの保存を聞かれたら...

スキップしてください（保存しない）©2022 特定非営利活動法人みんなのコード

info@code.or.jp

26

ニックネームとアイコンの決定①ニックネームを入力②好きなアイコンを選んでください※あとで変更もできます③更新する©2022 特定非営利活動法人みんなのコード

info@code.or.jp

27

ログイン画面①クラスID②出席番号③自分で作ったパスワード©2022 特定非営利活動法人みんなのコード

info@code.or.jp

28

この「ホーム画面」になったら準備完了©2022 特定非営利活動法人みんなのコード

info@code.or.jp29

今日のまとめ● 問題点を見つけ出し、課題を設定してみよう● ID/パスワードの意味を理解し適切に管理しよう→次回からプログル技術を起動できるようにしっかりと管理しよう©2022 特定非営利活動法人みんなのコード

info@code.or.jp30

双方向性のあるコンテンツのプ
ログラミング③
チャットツールをデザインしよう！

©2022 特定非営利活動法人みんなのコード

info@code.or.jp

31

今日のめあて● ユニバーサルデザインに配慮した、誰にでも使いやすい伝言板を作ろう！
＜ここで質問＞
ユニバーサルデザインってなに？

©2022 特定非営利活動法人みんなのコード

info@code.or.jp

32

プログルを使う準備をしよう©2022 特定非営利活動法人みんなのコード

info@code.or.jp

33

ログイン画面①クラスID②出席番号③自分で作ったパスワード©2022 特定非営利活動法人みんなのコード

info@code.or.jp

34Lesson1 伝言板をデザインしよう©2022 特定非営利活動法人みんなのコード

info@code.or.jp35

伝言板のデザインって？
● 色を変えるだけで、印象が大きく変わる©2022 特定非営利活動法人みんなのコード

info@code.or.jp36見やすい色って何だろう？
● どの色に目が行きますか？

©2022 特定非営利活動法人みんなのコード

info@code.or.jp37町中でもよく見かけますよね？

©2022 特定非営利活動法人みんなのコード

info@code.or.jp38見やすい色って何だろう？

明度差があると文字が読みやすい
明度差があると文字が読みやすい
明度差があると文字が読みやすい©2022 特定非営利活動法人みんなのコード

info@code.or.jp39

本日のめあて● チャットツールのデザインを行ってみよう● ユニバーサルデザインに配慮した画面をプログラミングしてみよう
文字の大きさコメント欄の角を丸める

アイコンの大きさ
コメント欄の色
文字の色

ボタンの色
ボタンの大きさメッセージ入力欄の色©2022 特定非営利活動法人みんなのコード

info@code.or.jp

40

ステージ1● 文字の色と背景の色を見本と同じ色に変更してみよう。
→ 文字：白→ 吹き出し：青©2022 特定非営利活動法人みんなのコード

info@code.or.jp

41

ステージ2● 文字の大きさ → 16px
● 左揃え
● 余白の設定 → 20px

©2022 特定非営利活動法人みんなのコード

info@code.or.jp

42

ステージ3● 3つの角を50pxに設定しましょう。

50px

50px

50px

©2022 特定非営利活動法人みんなのコード

info@code.or.jp

43

ステージ4 画像サイズと角丸についてアイコンの角Rを指定
縦・横の大きさを指定©2022 特定非営利活動法人みんなのコード

info@code.or.jp

44

ステージ5 テキスト入力エリア● テキスト入力エリアの枠線 → 1px● 文字の大きさ→16px● 余白を上下左右→14px

テキスト入力エリアはここ©2022 特定非営利活動法人みんなのコード

info@code.or.jp

45

ステージ6 送信ボタンのデザイン● 送信ボタンの文字の大きさ →16px● 文字の配置を中央揃え● 余白を上下左右 →14px● 全ての角 →4px

送信ボタンはここ©2022 特定非営利活動法人みんなのコード

info@code.or.jp

46

ステージ7● 背景● フォント

全体設定で変更

フォント

背景色©2022 特定非営利活動法人みんなのコード

info@code.or.jp

47

ステージ8 まとめ● ステージ1〜7までで学習したことを生かして、画面の制作をしよう。
● ユニバーサルデザインを意識して制作しよう

この掲示板を使う人はどんな人？
この掲示板を使って欲しい人はどんな人？
©2022 特定非営利活動法人みんなのコード

info@code.or.jp

48

この時間の振り返り● プリントに自己評価をしましょう● 工夫した点をアピールしましょう＜書き方の例＞〜のために、○○を大きくしました。
〜のために、△△を選びました。など...
コメントが書けたら1～4で自己評価しよう©2022 特定非営利活動法人みんなのコード

info@code.or.jp

49

今後の注意● 次回の授業でLesson2以降を学習していきます。そこで使用する画面デザインは、本日制作したLesson1-ステージ8のものが使用されます。
デザイン変えたいなぁ

Lesson1-ステージ8に戻って修正をしてください©2022 特定非営利活動法人みんなのコード

info@code.or.jp

50

双方向性のあるコンテンツのプ
ログラミング④
サーバと通信しよう！

©2022 特定非営利活動法人みんなのコード

info@code.or.jp

51

通常の利用はこちら©2022 特定非営利活動法人みんなのコード

info@code.or.jp

52

ログイン画面①クラスID②出席番号③自分で作ったパスワード©2022 特定非営利活動法人みんなのコード

info@code.or.jp

53

この画面になったら準備完了©2022 特定非営利活動法人みんなのコード

info@code.or.jp

54この時間のめあて● サーバと通信してみよう©2022 特定非営利活動法人みんなのコード

info@code.or.jp

55

この時間のめあて● サーバと通信してみよう©2022 特定非営利活動法人みんなのコード

info@code.or.jp

56この時間のめあて● 順次処理、反復処理、分岐処理を理解してプログラムを作ってみよう。

©2022 特定非営利活動法人みんなのコード

info@code.or.jp

57

ステージ1● 画面にHello World ! と表示させよう©2022 特定非営利活動法人みんなのコード

info@code.or.jp

58

ステージ2 順番に表示させよう
始め

Helloを表示

Worldを表示！

を表示

左図のことをフローチャートという上から順番に実行されるプ
ログラムのことを順次処理という終了©2022 特定非営利活動法人みんなのコード

info@code.or.jp

59

ステージ3 繰り返し表示させよう
始め

繰り返し10回Worldを表示

繰り返し

終了

同じ処理を決められた条件
で繰り返し処理することを反復処理という終了©2022 特定非営利活動法人みんなのコード

info@code.or.jp

60

ステージ4 サーバへの接続

成功しましたって言われても...😅

©2022 特定非営利活動法人みんなのコード

info@code.or.jp

61

ステージ5 サーバへのメッセージ送信
成功しましたって言われても...「こんにちは」が出てないぞ

前のスクリーンに注目©2022 特定非営利活動法人みんなのコード

info@code.or.jp

62

ステージ6● サーバにニックネームを送る● 応答の内容をコンピュータに表示する©2022 特定非営利活動法人みんなのコード

info@code.or.jp

63

ステージ7 分岐処理
● 条件によって処理を選択する分岐処理
始め

はい雨が降っているか？

いいえ

傘をさす
終了
©2022 特定非営利活動法人みんなのコード

info@code.or.jp

64

ステージ7 分岐処理

● 作ったプログラムをフローチャートで表してみよう©2022 特定非営利活動法人みんなのコード

info@code.or.jp

65この時間の振り返り● サーバにメッセージを送ることができた● 順次処理・反復処理・分岐処理を理解することができた©2022 特定非営利活動法人みんなのコード

info@code.or.jp

66

双方向性のあるコンテンツのプ
ログラミング⑤
文字を送受信しよう！

©2022 特定非営利活動法人みんなのコード

info@code.or.jp67この時間のめあて
1. サーバとメッセージの送受信を行う
2. 送受信するメッセージを画面に表示する©2022 特定非営利活動法人みんなのコード

info@code.or.jp68

今日の授業で学ぶこと「文字の送受信」④友達のメッセー
ジも表示①入力エリアに文字を入力③コメントが表示される②送信する
今日、遊ばない？

©2022 特定非営利活動法人みんなのコード

info@code.or.jp

69

チャット画面を変更したくなった場合● 修正したくなった場合は、Lesson1、ステージ8に戻り、変更するとLesson3にも反映されます。

©2022 特定非営利活動法人みんなのコード

info@code.or.jp

70

ステージ1● 送信ボタンを押したら「こんにちは」と表示しよう②こんにちは①送信するを押すと©2022 特定非営利活動法人みんなのコード

info@code.or.jp

71

ステージ2● 送信ボタンを押したとき、変数[送信テキスト]に入力エリアの内容を保存し、表示しよう。
③コメントが表示される①文字を入力②送信するを押す©2022 特定非営利活動法人みんなのコード

info@code.or.jp72

変数とは？
● 以下の式のXとYに、それぞれX=５、Y=３を入れると答えはいくつ？

５２ X

３＋ Y

©2022 特定非営利活動法人みんなのコード＝ 13？
info@code.or.jp73

変数とは？
● 数値や文字をしまっておける箱● 名前を自由につけることができる

名前X©2022 特定非営利活動法人みんなのコード

info@code.or.jp

74

ステージ３

ステージ2と何が違うの？

©2022 特定非営利活動法人みんなのコード

info@code.or.jp

75

ステージ4● 新着メッセージを受信したとき，変数[受信テキスト] に新着テキストを保存し，表示しよう

サーバにあるメッセージを取ってきて表示する©2022 特定非営利活動法人みんなのコード

info@code.or.jp

76こんにちは受信トレイ©2022 特定非営利活動法人みんなのコード

info@code.or.jp

77

ステージ5● 今まで出てきたブロックを使ってテキストの送受信ができるようにしよう！

考え方はステージ3 ＋ ステージ4（送信） （受信）©2022 特定非営利活動法人みんなのコード

info@code.or.jp

78

今日のまとめ
1. サーバとメッセージの送受信を行う→ 送受信するときに変数にメッセージを貯めておく

2. 送受信するメッセージを画面に表示する©2022 特定非営利活動法人みんなのコード

info@code.or.jp

79双方向性のあるコンテンツのプ
ログラミング⑦
画像を送受信しよう！

©2022 特定非営利活動法人みんなのコード

info@code.or.jp

80

今日の授業で学ぶこと「画像の送受信」
1. 画像を表示する
2. 画像を圧縮する＆サイズ修正(リサイズ)する
3. 大きい画像のリサイズを修正する©2022 特定非営利活動法人みんなのコード

info@code.or.jp

81今日の授業で学ぶこと「画像の送受信」
4. 画像を圧縮＆リサイズして、サーバに送信→成功したら画面に表示
5. 選んだ画像を変数に保存→画像を表示
6. 選んだ画像を変数に保存→圧縮＆リサイズ→サーバへ送信→画像を表示©2022 特定非営利活動法人みんなのコード

info@code.or.jp

82

ステージ1 「表示」
● サンプル画像を表示©2022 特定非営利活動法人みんなのコード

info@code.or.jp

83

ステージ2 「圧縮とリサイズ」● 圧縮率10％● 幅と高さをそれぞれ300pxにリサイズ※圧縮とは：色の数や目の細かさを粗くすることによってデータ量を減らすこと。
圧縮率が高いほどデータは小さくなるが、画質は悪くなる。
※リサイズ：画像の大きさを変更すること©2022 特定非営利活動法人みんなのコード

info@code.or.jp

84

ステージ3 「大きい画像のリサイズ」● サンプル画像の幅と高さが500px以上の場合、幅と高さをそれぞれ300pxにリサイズ＜参考＞
写真などの縦横比のことをアスペクト比というちなみに フィルムカメラ3：2

デジタルカメラ

4：3

液晶テレビ

16：9

©2022 特定非営利活動法人みんなのコード

info@code.or.jp

85

ステージ4 「リサイズした画像の送信」● サンプル画像を圧縮＆リサイズ● サーバに送信● 成功したら画像を表示©2022 特定非営利活動法人みんなのコード

info@code.or.jp

86

ステージ5 「自分で選んだ画像を表示」●

を押して、画像を選択し変数に保存● 変数に保存した画像を画面に表示©2022 特定非営利活動法人みんなのコード

info@code.or.jp

87

ステージ6●を押して画像を選択する● 選んだ画像を変数に保存する● 圧縮やリサイズを行う● サーバーに送信する● 送信に成功したら、画面に表示©2022 特定非営利活動法人みんなのコード

info@code.or.jp

88

画像の圧縮＆リサイズについて● 通信量を減らすためにできることはなんだろう？
→プログラミングで、できること→デジカメなどの操作でできること● リサイズしていて困ることは？

©2022 特定非営利活動法人みんなのコード

info@code.or.jp

89

ステージ7● 新着メッセージ(画像)を受信したとき、変数に新着画像を保存する● 変数に保存した新着画像を表示する©2022 特定非営利活動法人みんなのコード

info@code.or.jp

90

ステージ8● 新着メッセージ(画像)を受信したとき、変数に保存する● 新着メッセージ(画像)に圧縮やリサイズを行う● 画面に表示する©2022 特定非営利活動法人みんなのコード

info@code.or.jp

91

ステージ9● 画像の送受信ができるようにしよう

考え方はステージ6 ＋ ステージ8（送信） （受信）©2022 特定非営利活動法人みんなのコード

info@code.or.jp

92

ステージ9● 下のブロックを活用すると大きいサイズの画像もちょうど良い大きさで表示することができるので、活用しよう●

どうすれば通信量を削減できるか？通信網の混雑を減らせるか？を考えてプログラムを工夫してみよう©2022 特定非営利活動法人みんなのコード

info@code.or.jp

93今日のまとめ
1. サーバと通信して画像を送受信することができた
2. 送受信する際に、データ量を考慮してファイルの圧縮やリサイズができた©2022 特定非営利活動法人みんなのコード

info@code.or.jp

94双方向性のあるコンテンツのプ
ログラミング⑧
伝言板を完成させよう！

©2022 特定非営利活動法人みんなのコード

info@code.or.jp95

今日の授業で学ぶこと「掲示板の制作」

1. 画面のデザインを制作しよう→ ユニバーサルデザインに配慮する

2. テキストと画像の送受信ができるようにプログラミングしよう→ データの通信量を節約するには....
→写真を見やすく表示するには...
※わからなくなってしまった人は以前のLessonやプリントに戻って考えてみましょう©2022 特定非営利活動法人みんなのコード

info@code.or.jp96

課題を解決するブロック● Lesson5-2では以下の3つのブロックが使えます

電話番号

メールアドレス

キーワード

検出ブロック

検出ブロック

検出ブロック

これらを活用して、課題を解決してみよう©2022 特定非営利活動法人みんなのコード

info@code.or.jp

97電話番号が含まれていたら...
アラート表示の文章も考えましょう

アラート表示の例©2022 特定非営利活動法人みんなのコード

info@code.or.jp

98メールアドレスが含まれていたら...

©2022 特定非営利活動法人みんなのコード

info@code.or.jp

99

キーワードを設定する（最大10個）● Lesson5-2の画面
キーワードを設定する©2022 特定非営利活動法人みんなのコード

info@code.or.jp

100キーワードを生徒ごとに設定（10個）最大10個まで登録できます©2022 特定非営利活動法人みんなのコード

info@code.or.jp

101設定したキーワードによって分岐処理©2022 特定非営利活動法人みんなのコード

info@code.or.jp

102設定したキーワードを出力してテキストマイニング● クラス一覧 → チャットを見る©2022 特定非営利活動法人みんなのコード

info@code.or.jp

103

AIテキストマイニングで分析する● CSVファイルをアップロードする

https://textmining.userlocal.jp/©2022 特定非営利活動法人みんなのコード

info@code.or.jp

104

サンプル（走れメロス）©2022 特定非営利活動法人みんなのコード

info@code.or.jp

105今日のまとめ● これまでの学習であなたが気づいたこと、考えた事を書きましょう。
→書けた人は振り返りで自己採点も行いましょう©2022 特定非営利活動法人みんなのコード

info@code.or.jp

106双方向性のあるコンテンツのプ
ログラミング⑧©2022 特定非営利活動法人みんなのコード

info@code.or.jp107今日のめあて● 完成したチャットツールを友達と評価し合い、改善につなげよう● チャットツールの利用規約について考え、お互いに気持ちよく利用できるようにしよう©2022 特定非営利活動法人みんなのコード

info@code.or.jp

108

グループを作ってお互いに評価しあいましょう
次の項目についてチェックしましょう● 見やすさ● 操作性● 効率● 上記以外に良い点/惜しい点©2022 特定非営利活動法人みんなのコード

info@code.or.jp

109

利用規約とは● 利用規約とは、掲示板の利用者が守らなくてはいけない（ ルール ）をまとめたものです。利用者のモラルだけに頼って運営するのではなく、文章として（ ルール ）を示すことも大切です。

©2022 特定非営利活動法人みんなのコード

info@code.or.jp

110利用規約を考えてみよう● プリントのキーワードを参考に利用者が気持ちよく使える規約（ルール）を考えて、プリントに記入しましょう©2022 特定非営利活動法人みんなのコード

info@code.or.jp

111

掲示板の改善● これまでの授業を振り返り、制作したプログラムの修正/改善点をあげましょう● また、新たに追加してみたい機能のアイデア（あくまでアイデアなので、実現できなくてもよい）をあてましょう©2022 特定非営利活動法人みんなのコード

info@code.or.jp

112