プログラミング的思考staff.miyakyo-u.ac.jp/~andy/distribute2.pdf2017/9/20 2 •論理 •予測と分析 •アルゴリズム •順序性とルール •分解 •細かな部分に分ける

2017/9/20

1

宮城教育大学技術教育講座

安藤明伸

https://www.facebook.com/ando.akinobu

プログラミング的思考

• プログラミング的思考とは，いわゆる『コンピュテーショナル・シンキング』の考え方を踏まえつつ，プログラミングと論理的思考との関係を整理しながら提言された定義• 自分が意図する一連の活動を実現するために，どのような動きの組合せが必要であり，一つ一つの動きに対応した記号を，どのように組み合わせたらいいのか，記号の組合せをどのように改善していけば，より意図した活動に近づくのか，

• といったことを論理的に考えていく力

ネットワークを利用した双方向性のあるコンテンツ（宮教大：安藤） 2

2017/9/20

2

• 論理• 予測と分析

• アルゴリズム• 順序性とルール

• 分解• 細かな部分に分ける

• 規則性• 類似性に焦点を当て，利用する

• 抽象化→モデル化• 必要の無い詳細部分を取り除く

• 評価• 判断する


プログラミング的思考

• 自分が意図する一連の活動を実現するために，• どのような動きの組合せが必要であり，

• 一つ一つの動きに対応した記号を，

• どのように組み合わせたらいいのか，

• 記号の組合せをどのように改善していけば，

• より意図した活動に近づくのか，

といったことを

• 論理的に考えていく力

文部科学省，小学校段階における論理的思考力や創造性，問題解決能力等の育成とプログラミング教育に関する有識者会議，小学校段階におけるプログラミング教育の在り方について（議論の取りまとめ）平成28年6月16日

プログラミング的思考とは，いわゆる『コンピュテーショナル・シンキング』の考え方を踏まえつつ，プログラミングと論理的思考との関係を整理しながら提言された定義

抽象化

分解

符号化アルゴリズム一般化

デバッグ

評価モデル化概念形成

Computational Thinking


2017/9/20

3

小学校算数図形の事例サンプルプログラムは

https://scratch.mit.edu/projects/169257232/


具体例

• 意図する活動＝正三角形を書く• 3本の辺の長さが全て等しい三角形。

• 3つの内角の大きさが全て等しい三角形。

• 一つの内角が60°である二等辺三角形

• 辺の長さだけ前進し，向きを変えることを3回繰り返す

•

ネットワークを利用した双方向性のあるコンテンツ（宮教大：安藤）

を書くように鉛筆に指示する意図する一連の活動

動きの組み合わせ

動きに対応した記号の組み合わせ

どのように改善していけばより意図した活動に近づくのか

抽象化

分解アルゴリズム

デバッグ評価

符号化

プログラミング

一般化？

Computational Thinking

6Scratch is developed by the Lifelong Kindergarten Group at the MIT Media Lab. See http://scratch.mit.edu

https://scratch.mit.edu/projects/169257232/

2017/9/20

4

抽象的な概念を定義する

ネットワークを利用した双方向性のあるコンテンツ（宮教大：安藤） 7Scratch is developed by the Lifelong Kindergarten Group at the MIT Media Lab. See http://scratch.mit.edu

辺の長さを一般化


2017/9/20

5

図形として一般化


ツールとして扱いやすいように一般化


2017/9/20

6

インタラクティブ性を持たせる


辺の長さは？何角形を書く？

応用（手書きでは時間がかかることを試す）


2017/9/20

7

プログラミング教育で育成する資質・能力

• 【知識・技能】• （小）身近な生活でコンピュータが活用されていることや、問題の解決には必要な手順があることに気付くこと。

• （中）社会におけるコンピュータの役割や影響を理解するとともに、簡単なプログラムを作成できるようにすること。

• （高）コンピュータの働きを科学的に理解するとともに、実際の問題解決にコンピュータを活用できるようにすること。

• 【思考力・判断力・表現力等】• 発達の段階に即して、「プログラミング的思考」を育成すること。

• 【学びに向かう力・人間性等】• 発達の段階に即して、コンピュータの働きを、よりよい人生や社会づくりに生かそうとする態度を涵養すること。

文部科学省：小学校段階におけるプログラミング教育の在り方について(2016)ネットワークを利用した双方向性のあるコンテンツ（宮教大：安藤） 13

情報の技術


2017/9/20

8

情報の技術に関する見方・考え方

• 生活や社会において，社会からの要求，使用時の安

全性，情報の倫理やセキュリティ，活用，管理，シ

ステム，費用等の視点から技術により解決する問題

を捉え，

• その解決に向けて，情報の表現，記録，計算，通信

等の特性にも配慮し，

• 情報のディジタル化や処理の自動化，システム化等

による処理の方法等の最適化について考えること。


技術の見方・考え方生活や社会において,社会からの要求，安全性，環境負荷や経済性等の視点から技術により解決すべき問題を捉え，その解決に向けて，技術の最適化について考えること

15

情報の技術：指導で踏まえる4つの活動

• 生活や社会を支える情報の技術について調べる活動

• 情報の技術による問題解決• ネットワークを利用した双方向性のあるコンテンツのプログラミングによって解決する活動

• 計測・制御のプログラミングによって解決する活動

• これからの社会の発展と情報の技術の在り方を考える活動


「何を知っているか、何ができるか（個別の知識・技能）」

「知っていること・できることをどう使うか（思考力・判断力・表現力等）」

「どのように社会・世界と関わり、よりよい人生を送るか（学びに向かう力、人間性等）」

16

2017/9/20

9

に関わる基礎的な技術の仕組みの原理・法則

生活や社会を支える情報の技術について調べる活動

生活や社会を支える情報の技術について調べる活動などを通して，次の事項を身に付けることができるよう指導する。

• ア

について理解すること。

• イ技術に込められた問題解決の工夫について考えること。

内容の取り扱いについては，情報のデジタル化の方法と情報の量，著作権を含めた知的財産権，発信した情報に対する責任，及び社会に

おけるサイバーセキュリティが重要であることについても扱うこと。アで取り上げる原理や法則に関しては，関係する教科との連携を図ること。イでは，社会からの要求，安全性，環境負荷や経済性などに着目し，技術が最適化されてきたことに気付かせること。


• 情報の表現，• 記録，• 計算，• 通信の特性等

• 情報のデジタル化• 処理の自動化• システム化• 情報セキュリティ等

の必要性と及び

情報モラル

• コンピュータではすべての情報が二値化されて扱われること

• デジタル化された情報は劣化しないこと，同一の複製が作れること，

• 論理演算や，圧縮・暗号化が可能となること• 通信速度により，通信できる情報の量が変わること

情報セキュリティは，デジタル・アナログ問わず情報一般，

サイバーセキュリティは，情報セキュリティの中でもデジタル化された情報を対象

• A/D変換• デジタルの情報処理

• アウトライン・プロセッシング• 情報の構造化

• スタイルとコンテンツ• 情報の区分• 情報の再利用性

17

ネットワークを利用した双方向性のあるコンテンツのプログラミングによって解決する活動

生活や社会における問題を，ネットワークを利用した双方向性のあるコンテンツのプログラミングによって解決する活動を通して，次の事項を身に付けることができるよう指導する。

• ア情報通信ネットワークの構成と，情報を利用するための基本的な仕組みを理解し，安全・適切なプログラムの制作，動作の確認及びデバッグ等ができること。

• イ問題を見いだして課題を設定し，使用するメディアを複合する方法とその効果的な利用方法等を構想して情報処理の手順を具体化するとともに，制作の過程や結果の評価，改善及び修正について考えること。

内容の取り扱いについては，コンテンツに用いる各種メディアの基本的な特徴や，個人情報の保護の必要性についても扱うこと。

イでは，社会からの要求，安全性，環境負荷や経済性などに着目し，技術が最適化されてきたことに気付かせること。知的財産を創造，保護及び活用しようとする態度，技術に関わる倫理観，並びに他者と協働して粘り強く物事を前に進める態度を養うことを目指すこと。

映像編集ソフトの使い方を目的にせず，プログラミン

グを通して学ぶ

現行の指導要領から記述箇所が移動。

Web系の理解も（HTML+CSS）

小学校：体験→使う側への配慮

情報処理における安全・適切＝セキュリティ→例えば，webページを作るのであれば，パス

ワード入力フォームは，入力された文字が＊になるようにする

情報デザインにおける安全・適切＝誤操作のおきにくいユーザインタフェース設計→例えば，ボタンの配置や，見やすい画面設計


2017/9/20

10

コンテンツをどう解釈するか

• 中身，内容

• 情報の内容。放送やネットワークで提供される動画・音声・テキストなどの情報の内容をいう(大辞林第三版)

• 「文字、図形、色彩、音声、動作もしくは映像もしくはこれらを組み合わせたもの」• 「人間の創造的活動により生み出されるもののうち、教養又は娯楽の範囲に属するもの」

• 具体的には、文芸、写真、映画、音楽、演劇、マンガ、アニメーション、コンピュータゲームなど、さまざまなものが含まれる。(「コンテンツの創造、保護及び活用の促進に関する法律」（コンテンツ振興法）2004)


双方向性=Interactive

• 動的：Dynamic, Active, Responsive

• As adjectives the difference between interactive and responsive is that interactive is acting with each other while responsive is answering, replying or responding. • インタラクティブは，相互に動作すること

• レスポンシブは，反応があること

Webアプリケーションに限定しない


http://wikidiff.com/responsive/interactive

2017/9/20

11

ネットワークを利用した双方向性のあるコンテンツ• コンテンツとユーザとの間で、情報を双方向性でやりとりする仕組みを持つ

コンテンツ

ユーザ・インタフェース

ネットワーク

音，画像，動画，アニメーション，

ネットワーク

ネットワーク

入力情報と

フィードバック


共有フォルダへのアクセス等

他のコンピュータとのやりとり等

インターネット上で提供されているAPIやデータベース等

インターネット，校内LAN，コンピュータ室内だけの限定的なLAN，Bluetooth等で構成される無線通信

Scratch1.4の場合


2017/9/20

12

ダウンロードとインストール


Scratch1.4

• Scratchには，ブラウザで動くオンライン専用ものと，ダウンロードしてインストールするオフライン用のものがあります。

• バージョンは，1.4，2.0が出ており，3.0が近日公開予定です。• 1.4と2.0は，できることに違いがあり，バージョンが高いから2.0の方が良いというわけではありません。

• 例えば，Meshネットワークは2.0では使用できません。


2017/9/20

13

ダウンロード

• オフラインで動くものを，オフラインエディターと言います。

• ここからダウンロードします。• https://scratch.mit.edu/scratch_1.4/


Windows，Mac，Linuxがあります。

Ipadで行う場合は，Pyonkeeという

Scratch互換のアプリを使います。

Scratch1.4のMeshによる通信


答え

Name_a組込み（初めから用意されている）変数。「～と聞いて待つ」で入力されたものがはいる

端末a 端末b

Meshでの共有

42001番ポート Meshネットワークに接続され

ている端末で作成された変数は，他の端末からは「～センサーの値」で取得できる。

MESHネットワークで共有するために作成した変数（Name_a）に，「答え」の内容を入れ替える。（変数名の末尾に_aとつけて，どの変数かがわかるようにした。）


https://scratch.mit.edu/scratch_1.4/

2017/9/20

14

Shiftキーを押しながら，Rをクリック

詳細は，

https://wiki.scratch.mit.edu/wiki/Mesh

http://itpro.nikkeibp.co.jp/article/COLUM

N/20111019/371083/?rt=nocnt

1. ScratchのロゴマークのRの部分をShiftキーを押しながらクリック2. メニューからturn fill screen off →灰色のエリアが表示

3. 灰色のエリアでクリックし「open」→「browser」4. 上記の赤字の個所を左からクリックし，t2 ← false.に変更5. Alt+s（or 右クリック→「accept」) →Scratchのイメージファイルをコンパイル

6. システムブラウザの左上にある「x」をクリック →ウィンドウを閉じる。

7. Shift＋Rのクリック→「save image for end-user」→「yes」8. コンパイルされたものは，通常C:¥Program Files (x86)¥Scratch¥Scratch.image


一度設定すればOK。すべてのPCでこの設定をしなくても，一度作成したscratch.imageを，他のコンピュータへ上書き

保存すればOK

限定的なネットワークを構成する

• 利用するネットワークは，インターネットに限らず，例えば，校内ＬＡＮ，あるいは特定の場所だけで通信できるネットワーク環境も考えられる。

• アクセスポイントだけ設置しDHCPさせる。

• インターネット接続は行わない


2017/9/20

15

Shift+「共有」クリック

Scratch is developed by the Lifelong Kindergarten Group at the MIT Media Lab. See http://scratch.mit.edu

うまくいかない場合

• Meshにアクセスするのに，単なるクリックではなくて，Shiftキーを押しながら「共有する」をクリックしているかどうか。

• システム・ブラウザで，“false”の後ろにピリオドがあるか。

• システムブラウザに変更を保存しないと，次回Scratchを起動したときに，Meshは動作しない。

• VPNが使われている場合は，もともとのIPよりも，VPNのIPアドレスが使われているかどうかを確かめる。

• Scratchは時々誤ったIPアドレスを表示するので，他の方法で自分のIPアドレスを確認する。

• （もし使用しているルータを適切に設定していなければ）インターネット経由よりも，LAN経由で接続されていることを確認する。

• それぞれのプロジェクトで，変数名や「～を送る」の名前が，大文字小文字の間違いなど正確に書かれているかを確認する。

• （同一ネットワークに，Hostは1つになっているか）


2017/9/20

16

ネットワーク上の他のコンピュータのキャラクターを操作したり，データを読み取る例

動画の解説を用意しました。

https://youtu.be/UHH1ww2fthI

サンプルプログラムは

http://staff.miyakyo-u.ac.jp/~andy/scratchsample.zip



https://youtu.be/UHH1ww2fthI

http://staff.miyakyo-u.ac.jp/~andy/scratchsample.zip

2017/9/20

17



2017/9/20

18


問題を見出して，課題を設定し，解決策を構想する「最低レベル」の題材例


2017/9/20

19

題材研究

• 問題：遠隔でコミュニケーションができない• 課題

• 文字のチャットでコミュニケーションしたい• （発展系）グループチャットができるようにしたい

• 概念設計• 端末Aで文字入力されたものが，ネットワークを通じて端末Bに表示される。その逆も。

• 詳細設計• 次ページ

• 安心・安全への配慮• 使いすぎないように，所定の時間が経過したら，そのことを知らせて注意喚起する。


UMLの1つ：アクティビティ図


2017/9/20

20

5秒タイマーと場合分け


問題を見出す地味で気がつかない・効果がない

↓課題の設定

より目立つようなお知らせをする。強制的に使用不能にする

同じ名前になるように


それで十分か？


メディアを複合する

音を加える

アニメーションを加える

• 時間経過を示す変化を加える

• 使いにくくする

テクノロジーで解決する。

Meshに参加している端末


2017/9/20

21

Meshで変数の共有


端末AでMessage_fromAという共有された変数にメッセージが入る。

受信側でMessage_fromAという共有された変数からメッセージを表示する。


Meshネットワーク上では接続されているScratchの全て変数名が共有されるので，

fromAとつけないと，自分が必要とする変数がどれなのか

わからなくなる。

メッセージを双方向にやりとりできるように


端末B側で，message_fromBの変数を作る

端末Aでは，message_fromBという共有された変数からメッセージを表示する


2017/9/20

22

題材研究2

• 問題：不審者が来ても分からない

• 課題• 物音があれば，それを遠隔で把握したい。• 不審者を入れたくない。

• 概念設計• マイクで音を検知して一定の音量を超えた場合に，検知側の端末で警告を発し，ネットワークを経由して遠隔側でセンサが発動したことを把握する。

• 安心・安全への配慮• 誤作動を防止するため，検知してから3秒以内にパスワードを入れれば警報がならない。


全体の概要


Me

sh

ネットワーク

端末に接続されたマイク

①マイクからの音量が閾値が越えたら警告フラグを立

てる

②ネットワークを通じて，警告フラグが届いたら，音や画面でそのことを知らせるコンテンツが走る

③不審者に注意喚起するためのフラグを立てる

④ネットワークを通じて，注意喚起フラグが届いたら，音や画面で警告するコンテンツが走る

上図は，ケーブルや無線で離れたところにマイクを設置して・・・というのは，情報通信ネットワークを利用していないのでダメ

画面やスピーカー

画面やスピーカー

ネットワーク接続された検知端末ネットワーク接続された警告表示検知端末

2017/9/20

23

ネットワーク接続された検知端末側


もしくはブロードキャストを使う


ネットワーク接続された警告表示端末側

自習できるプログラミング学習サイト

• http://www.kodomonokagaku.com/magazine/programming/index.php• 全5回に分けてゲーム作りを通して，Scratchの使い方を一通り独学できる。

• http://www.nhk.or.jp/gijutsu/programming/• NHK EテレのScratchプログラミング番組。教材や先生用の素材も。

• https://hourofcode.com/jp/learn• スモールステップでクイズ形式でプログラミングやアルゴリズムについて独学できる。


http://www.kodomonokagaku.com/magazine/programming/index.php

http://www.nhk.or.jp/gijutsu/programming/

https://hourofcode.com/jp/learn

Documents

プログラミング的思考staff.miyakyo-u.ac.jp/~andy/distribute2.pdf2017/9/20 2 •論理 •予測と分析 •アルゴリズム •順序性とルール •分解 •細かな部分に分ける