総合学習情報特論 - 兵庫教育大学｜hyogo university of teacher … · 2006-08-28 · 6...

1

総合学習情報特論

1. 情報科学基礎（１）－情報量

2. 情報科学基礎（２）

3. プログラミング言語の話

HTML,JavaScript、コンパイラ言語、軽量言語（Perl,Ruby,PHP,Squeak,ドリトル,….)

4. Squeakの学習

5. Squeak（eToys)を用いた作品作り

6. 作品発表

2

情報とは？メディアとは？

データと情報

データは情報の入れ物である

メディアと情報

メディアは情報の乗り物である

3

情報技術の学習体系

情報科学基礎情報量、符号化、有限オートマトン、ブール代数、チューリングマシン

プログラミング基礎構造化プログラミングとオブジェクト指向プログラミング

アーキテクチャ、ハード論理回路

アルゴリズムと計算量オペレーティングシステム

資源管理、並列処理、メモリ管理情報ネットワーク、インターネット、TCP/IPヒューマンインタフェース、ユーザインタフェースグラフィックス人工知能、知識処理データベース、データモデリングソフトウエアエンジニアリング社会と技術

技術者倫理、社会の諸問題

4

本講義で取り上げる情報技術

情報科学基礎

情報量、符号化、有限オートマトン、ブール代数、チューリングマシン

プログラミング

HTML,Javaｓｃriｐｔ,コンパイラ言語、軽量言語（Perl,Ruby,PHP,Squeak,ドリトル,HSP….)

5

情報科学基礎（１）情報の量―情報を定量的に扱う

情報量

「出現確率の等しいｎ個の記号からなる情報源の中から1個の記号を選び出したとき、この記号が担う情報量Iは」

I=log２ｎ 単位：ビット、ハートレーの情報量

「ある情報源内の出現確率がpiである記号1個を提示したとき、その記号が担う情報量Iiは」

Ii=-log２pi 単位：ビット、シャノンの情報量

6

情報量としての単位：ビット

2桁の数字1個は、1桁の数字1個の2倍の情報量を持つ

I桁の数字1個は、1桁の数字1個のI倍の情報量を持つと考える。

2進数の情報源の有する記号の数をｎとするとき

n=2I

の関係がある。

両辺の対数（底２）をとって、

I=log２ｎ

=log２(1/(1/n))= -log２(1/n)= -log２p ここでp:出現確率

7

情報量の例

1桁の数字：n=10, I=log210=3.3bitサイコロの目：n=6, I=log26=2.6bitアルファベット：n=26, I=log226=4.7bitカナ文字：n=45, I=log245=5.5bit漢字：n=6355, I=log26355=???bit

漢字の１字の情報量がカナ１字よりも圧倒的に大きく感じる訳

練習：以下の出現確率を持つ情報源の各記号の情報量と、平均情報量を求めてください。a=0.125,b=0.25,c=0.125,d=0.5

8

平均情報量（エントロピー）

H＝ ∑pi Ii ＝-∑pilog２piここで∑pi＝１ (i=0～ｎ）

コイン投げの場合：H=-plog2p+-(1-p)log2(1-p)効率（相対エントロピー)ｈ＝H/log２ｎ

冗長度

ｒ＝１－ｈ

9

コイン投げ：H=-plog2p+-(1-p)log2(1-p) での

平均情報量Hと確率ｐの関係

H>=0H=最大 at p=1/2不等式H<=1が成立

すべての記号の出現確率が等しいときエントロピーHは最大となる

H

p0 1

1

0

10

情報科学基礎（２）

情報の符号化、モールス信号、ハフマン符号化

ブール代数

自動販売機（有限オートマトン）、状態遷移、プログラム

（メモリ階層と参照の局所性 ）

11

10進数、2進数、16進数

(0101)2, (10111)2, (1100100)2

18, 108, 1024, 68030

12

データの圧縮符号化ーハフマン符号

4つの記号の出現確率がa=0.6, b=0.25, c=0.1, d=0.05のとき何ビットで符号化できるか。2ビット？

H=1.49ビットなので、これに近いビット数に圧縮符号化可能

方法

符号 確率ｘ符号長

A 0 0.6

B 10 0.5

C 110 0.3

D 111 0.15

平均符号長1.55bit

13

符号化の練習

以下の確率で出現する情報源がある。

ハフマンの方法で符号化してください。

そのとき平均符号長はいくらになりますか。

[練習]a: 0.5, b: 0.125, c: 0.25, d: 0.125

14

解答例

H=1.75ビットなので、これに近いビット数に圧縮符号化可能

方法

符号 確率ｘ符号長

A 1 0.5

B 110 0.125

C 10 0.25

D 111 0.125

平均符号長1.75bit

15

ブール代数

論理回路の動作理解

命題と真／偽（true/false)論理変数と真理値表、ベン図

論理積(・:AND)、論理和(+:OR)、否定(~:NOT)z＝ｘ・ｙ, z=x+y, ~ x０＝０・０ ０＝０＋０ １＝~０

０＝０・１ １＝０＋１ ０＝~1０＝１・０ １＝１＋０

１＝１・１ １＝１＋１

16

真理値表

~(x・y)=~x+~yを真理値表およびベン図で証明してください。

x y ｘ・ｙ ~(ｘ・ｙ) ~x ~y ~x+~y0 0 0 1 1 1 10 1 0 1 1 0 11 0 0 1 0 1 11 1 1 0 0 0 0

左辺の真理値表 右辺の真理値表

17

x・y

~(x・y) ~x+~y

~x ~ｙ

＝

ベン図での証明~(x・y)=~x+~y

18

自動販売機

自動販売機の内と外の出入り

もの 信号

外から内 お金 ボタン

内から外 ジュース ランプ

120円のジュースを買うのに10円、50円、100円玉が使え、おつりは出ない機械の場合

19

自動販売機の動作を表す特製シート

20

特製シートからプログラムへ

21

有限オートマトン

「丸が矢印でつながれたもの」を有限オートマトン（有限自動機械)と言う。

状態遷移図

22

プログラミングについて

プログラミング≒運動会のプログラム、料理のレシピの作成

プログラミングとは何か

コンピュータを利用者（ユーザ）の希望通りに働かせるための一連の作業依頼手続き（プログラムと呼ぶ）を、コンピュータの解釈できる言語で、予め記述する作業である。

なぜプログラミングが必要か？

産業界、研究開発者の立場

コンピュータを有効活用できるようなソフトウエアをつくるため

学習者の立場

コンピュータの動作原理、内部構造をより深く把握理解するため

科学的、論理的な思考力を養成

23

プログラミング言語の分類

コンピュータに命令を出すための記号体系。私たちが使っているアプリケーションソフトはすべて何らかのプログラミング言語で書かれている。

プログラミング言語の分類

低級言語と高級言語

コンパイラ型とインタープリタ型

低級言語と高級言語

低級言語は、コンピュータが直接、理解実行できる言語で、機械語（マシン語）とも呼ばれ、2進数の羅列である。 .exe 等のファイルがこの形式で、テキストエディタで開いてみると文字化けにしかならない。人間がこれを直接記述理解するのは困難なため、高級言語を利用する。

高級言語は、人間にも記述理解しやすくした言語で、命令は英単語の羅列で指定でき、低級言語と比べると人間の言葉に近い。しかし高級言語で書かれたプログラム(ソースと呼びます)をコンピュータが直接理解することはできない。そこで、コンパイラあるいはインタープリタを介して低級言語に翻訳する作業が必要。

低級言語は一を聞いて一を実行するが、高級言語は一を聞いて十を実行する聖徳太子のような言語である。

24

コンパイラ型とインタープリタ型

高級言語は直接コンピュータが解釈実行できないため、翻訳（通訳）を通して機械語に変換してやる必要がある。翻訳の仕方には、

コンパイラ型とインタープリタ型が存在する。コンパイラ型は、完成したプログラム（ソース）を一括で翻訳する。「コンパイルする」と呼ぶ。コンパイルが終わると実行ファイル（.exe）が生成される。このファイルを実行すると、プログラムが動作する。元のソースファイルは、ソフトウェア実行には直接必要はない。コンパイラ型は、コンパイル作業がある分だけ手間がかかるが、プログラムの実行は速い。コンパイラ言語の例 ： C, C++

インタープリタ型は、プログラム作成しながら、すぐに翻訳実行できる。すなわちプログラムを一行記述する入力するたび機械語に同時通訳されます。コンパイルする手間がかからないが、同時翻訳するときに、「変換 -> 実行」という作業を繰り返し行うため、処理速度が多少遅い。インタープリタ言語の例 ：Perl, PHP

25

プログラミング言語の仲間（１）

スクリプト言語： ShellScript, JavaScript、VBScript、 Perlなど機械語への変換作業を省略して簡単に実行できるようにした簡易プログラムを記述するためのプログラミング言語。スクリプト言語で作られたプログラムはスクリプトと呼ばれる。「簡易プログラミング言語」と呼ばれることもある。

通常のプログラミング言語と同様、英単語や記号・数字の組み合わせによってプログラムの設計図にあたるソースコードを記述するが、コンピュータが実行できる形式への変換は自動的に行われるため、手間をかけずに実行することができる。小規模なプログラムをすばやく作成することが主な目的であるため、一般のプログラミング言語に比べて機能は少ないが、習得が容易で記法も簡便であることが多い。これらの言語はWebページに動きを加えたり、Webサーバ上で動的にページを生成するのに用いられる。ワープロソフトや表計算ソフトなどのマクロ言語もスクリプト言語の一種である。

マークアップ言語：HTML, XML, VRMLなど文書の一部を「タグ」と呼ばれる特別な文字列で囲うことにより、文章の構造(見出しやハイパーリンクなど)や、修飾情報(文字の大きさや組版の状態など)を、文章中に記述していく記述言語。

マークアップ言語を使用して書かれた文書はテキストファイルになるため、テキストエディタを使って人間が普通に読むことが可能で、もちろん編集もできる。

代表的なマークアップ言語としては、SGML(Standard Generalized Markup Language)、SGMLから発展したHTML(HyperText Markup Language)、TeXなどがある。

ちなみに、XML(eXtensible Markup Language)はタグを使用した囲み方は規定しているが、タグの意味は規定していない、メタ言語と呼ばれるものである。メタ言語はタグの意味を規定するスキーマ言語と組み合わせてマークアップ言語になる。

26

プログラミング言語の仲間（２）

手続き型言語： C言語やBASIC、Pascalなど、多数のプログラミング言語が所属

記述された命令を逐次的に実行し、処理の結果に応じて変数の内容を変化させていくプログラミング言語のこと。処理速度が速い反面、動作を検証するには処理の流れを追う必要があり、開発効率は関数型言語に劣るといわれる。

オブジェクト指向言語： C言語にオブジェクト指向的な拡張を施したC++言語や、Sun Microsystems社のJava、Xerox社のSmallTalk、NeXT社(現Apple社)が自社のOSであるNeXT STEP向けアプリケーションソフト開発用に開発したC言語ベースのObjective-Cなど

データとそれを操作する手続きをオブジェクトと呼ばれるひとまとまりの単位として一体化し、オブジェクトの組み合わせとしてプログラムを記述するプログラミング技法。プログラムの部分的な再利用がしやすくなるなどのメリットがある。

27

古くからあるプログラム言語

古くからあり、現在も使われている主なプログラム言語COBOL

事務処理向きのコンパイル言語。データベース操作に伴う帳票や伝票の整形出力が得意。

FORTRAN科学技術計算向きのコンパイル言語。

アセンブラ言語ＣＰＵに固有のプログラム言語。機械語と１対１で対応するきめ細かいプログラムが可能。アセンブラというソフトにより機械語に変換される。

Ｃ言語アセンブラに近い処理が可能なコンパイル言語。

BASIC初心者用の入門用言語。インタープリタ方式。

28

最近使われている言語

Javaサンマイクロシステムズ社が開発した、オブジェクト指向の開発言語（C++に近い）。単独で動く「アプリケーション」とブラウザ上で実行される「アプレット」が作成可能。インターネットの普及に伴い、今最も注目を浴びている言語である。Javaはコンパイル後に実行モジュール（クラスファイル）を生成するが、異なるプラットフォームでも実行できるように、中間コードである（各マシンでネィティブコードに変換され実行される）（参考）http://www.sun.co.jp/java/

Visual Basic またはVBA(Visual Basic for Application)マイクロソフト社が開発した、ビジュアル開発環境。Windows系OSで実行可能なアプリケーションを開発するのに適した開発環境。Basicではあるがコンパイル言語。（参考）http://www.microsoft.com/japan/developer/vbasic/prodinfo/

Perl動的なホームページの作成（CGI)に適した開発ツール。テキスト処理が強い。インタープリタ方式。（参考）http://www.perl.com/pub

PHP動的なホームページの作成に適した開発ツール。プログラムの記述が簡易でデータベースとの連携が得意。今後もWebアプリケーションの隆盛から普及の可能性が高い言語。（参考）http://www.php.gr.jp/

29

軽量言語（Light Weight Language)Perl,Ruby,PHP,Squeak、ドリトル,….など参考書紹介 「Light Weight Language （株）IRIコマース＆テクノロジー編 ASCII」

Perl(Practical Extraction and Report Language=実用データ取得レポート作成言語）1987年、Larry Wallが開発「正規表現」と呼ばれるテキストマッチングの機能を実装し、テキスト処理に優れるインタープリタ型Active Perlの入手先：http://www.activestate.com/

PHP(Hypertext Processor)Webアプリケーション構築用のスクリプト言語として普及。RDBMSと簡単に連携できる。1997より知名度。PHP入手先：http://www.php.net/

Squeak（ネズミの“ちゅうちゅう”）、子供版：eToysパソコンの父、アラン・ケイが開発、オブジェクト指向言語smalltalkで作られている（参考書）

スクークであそぼう 翔泳社 ISBN4-7981-0480-X「先生とパソコン」 ムック出版 ISBN4-7741-2092-8

入手先：http://www.squeakland.jp/ドリトル

学校教育(小中高)を中心に、大学生や社会人の入門用にも使ってもらえるプログラミング言語。BASICやLOGOといった、30年以上前に設計された言語に代り、最新のオブジェクト指向の考え方でプログラムを学ぶことができるのが特徴。タートルグラフィックソフト入手先：http://kanemune.cc.hit-u.ac.jp/dolittle/

30

軽量言語を使ってプログラミングを体験しよう

Do-little（ドリトル）サンプル紹介入門マニュアルや命令一覧はダウンロードソフトに添付されている実行環境にはJava2 JREが必要。事前にインストールしてください。ただし、実習室の計算機にはインストール不可。

HSP(Hot Soup Processor)サンプル紹介絵が動く、音が出る、反応するなど、興味を失なうことなく継続して学習することのできる要素を手軽に実践することができる。楽しみながら実践することのできる敷居の低さと、コンピューター動作の基本を押さえた言語の仕様がＨＳＰの魅力であり、またIT教育に最適である。

Squeak（スクイーク)オブジェクト指向言語Smalltalkをベースに作られた言語サンプル紹介参考書

「スクイークで遊ぼう」 やまもと とーる著 翔泳社「実践スクイーク教室」斉藤礼美著 アカデミア

Squeak日本語版をダウンロード／インストールしてください。

31

スクイークと「総合的な学習の時間」における作品作り

１．自ら課題を見付け、自ら学び、自ら考え、主体的に判断し、よりよく問題を解決する資質や能力を育てること。

２．学び方やものの考え方を身に付け、問題の解決や探究活動に主体的、創造的に取り組む態度を育て、自己の生き方を考えることができるようにすること。

（目的）「生きる力」⇒創造性「確かな学力」⇒発展的な学力・実践的な学力

数学的な概念・科学的な概念の獲得と論理的思考力の向上算数や理科などを統合した科目横断的、体現的な知識獲得

32

スクイークプログラミングのイメージ

33

スクイーク教育の階層（BJアレンーコンほか著、：「スクイーク」WAVE出版より）

人間の認識 現実世界での発見 車が道からはみ出たら回転させる

手続きとしての表現代入文や式、場合分け、繰り返し処理

道からはみ出たことを検知するセンサをつけて、車を回転させる

スクイークの技能タイルスクリプト、スクリプトの実行手順

｢テスト」「色が触れているか」「車を回す」といったタイルを使う

スクイークの基本的使用法ファイルの読出/書出、スクリプトタイルの編集

「色が触れているか」タイルの色をセンサと道の色に合わせる

コンピュータの基本的使用法マウス操作、キーボード操作、漢字変換

車に名前を付ける、ドラッグ＆ドロップ、マウスクリック保持

重要

知識から知恵へ

34

情報処理のピラミッド（van Diik,J. 1999)

構造化、組織化、体系化

35

子供に身に付けさせたい能力、生きる力とは

抽象化

「具体思考」から「抽象思考」へ

本質的なものだけを強調して抜き出し、後は捨て去る作業

複雑な学習対象

総合的学習

複雑系

多様性

分析 発見

モデル化の力

抽象化の力

本質を見抜く力

より高い視点に転換

ザックリ、かつ正確な把握

抽象思考のモデル

現代社会を行きぬく力

構造化、組織化、体系化

36

抽象度と粒度の関係

粗粒度

細粒度

抽象度

抽象的＝高い抽象度

構造化、組織化、体系化

具体的＝低い抽象度

到達目標

37

スクイークプログラミングの実際

ダウンロードサイト公式サイト内のhttp://www.squeakland.jp/入門解説はたとえば以下を参照。http://www.thoruman.com/squeak/etoy/about.html

38

新たにインストールした場合は“拡張モード”にしてください

「outOfTheBox」を選択

「テーマの選択」を選択

「外観」を選択

ESCキーを押して「ワールドメニュー（デスクトップメニュー）」を出す

変更後“保存”してください。

39

スクイークの画面構成と用語の理解

フラップ（ナビゲータ、部品）モーフハロビューワタイルスクリプト（プログラム本体）

ビューワハロ

モーフ タイル

スクリプト

フラップ

40

プログラミング＝スクリプトの作成

41

ナビゲータフラップの機能

”新しく作る”新しい作品を作る。”<前へ”前のページに戻る。（Internet Explorerの”戻る”ボタンと同じ役目）”次へ>”次のページへ行く。（Internet Explorerの”進む”ボタンと同じ役目）”公開する!”自分のハードディスクなどに作品を保存する。長押しするとより多くの保存先選択肢が表示される。ただし“拡張モード”に設定してある場合に限る。”探す”プログラム（作品）を開く。長押しするとより多くのオープン先選択肢が表示される。”全画面表示にする”Squeakをフル画面にする。”ペイント”絵を描く。”地球”言語を選択する。”元に戻す”最後にやったことを戻すことができる。

42

部品フラップの中身

部品はドラッグドロップで画面上に配置する

43

スクイークの学習児童生徒への指導手順

1. ペイント（ウインドウズアクセサリのペイントではない)の練習

2. ペイントでモーフを作る、名前を付ける、大きさを変える、保存する

3. ビューワのタイルを使って動かす、音を出す

4. ペンを下げて軌跡を描いてみる、色や太さを変えてみる、画面を消去してみる

5. タイルを引っ張り出してスクリプトをつくる、タイルを積み重ねる、多角形・星型などを描く

6. テストタイルを使って衝突の判定と次動作の指定

44

ペイントでモーフを描く

ペイント

45

ビューワのタイルを使って動かす、音を出す

！マークをクリックしてモーフを動かす、鳴らす、回す

46

ペンを下げて軌跡を描いてみる、軌跡の色や太さを変えてみる、画面（軌跡)を消去してみる

ペンを下げるを“はい”にすると軌跡が描ける

軌跡の消去

47

タイルを引っ張り出してスクリプト（=プログラム）を作る

スクリプト

ビューワ 時計をクリックして”チクタク“にすると連続で動く

犬+車.pr

48

Squeakの例題サンプル

本稿で取り上げる例題としての練習サンプルは

下記Web教材ページから各自ダウンロード解凍し

てください。

http://www.life.hyogo-u.ac.jp/ina/

49

多角形・星型などを描く○△□.pr

50

ハロの出し方と各ハロの意味Alt＋モーフの左クリック

またはマウスカーソルのモーフ上での長置き

詳しくはhttp://www.thoruman.com/squeak/etoy/etoy.html

51

テストタイルを使って衝突の判定と次動作の指定

衝突判定によるモーフ跳ね返りの動作

「テスト/はい/いいえ」

部品をスクリプトに配置して色の接触判定を行う。右図は、緑のボールが上下の茶色のフェンス枠で跳ね返るようにしたプログラムである。

楕円跳ね返り.pr

52

その他の部品活用および変数利用

二つのモーフの連携（車とハンドルなど）

ジョイスティックの利用

画像の利用（モーフあるいは背景画として）

ボタン

変数の利用：加速度運動，折れ直線

衝突判定（テストタイル：色の重なりによる判断）

ロケット宇宙旅行

車のコース内自動運転

53

二つのモーフの連携：車とハンドル運転ハンドル.pr

54

ジョイスティックによるモーフの制御joystick-kantan.pr

joystickUFO.pr

55

画像の取り込み

写真などの画像をモーフや背景として使うことができる。

画像ファイルをSqueak画面上にドラッグドロップするだけ。

背景にするには右図のように画像のハロからメニューハロを選び、「背景として設定」を選ぶ。

ルミナリエ.jpg

56

ボタンの利用

ボタンーワンステップ実行 ボタンone_step実行.pr

ボタンースクリプト（連続)実行 ボタンスクリプト実行.pr

57

変数の利用：等速度と加速度

ここでは速度を保存する変数として“積荷”を定義

加速度軌跡.pr

ペンの軌跡を点（線でなく）にする

58

変数の利用：折れ直線の作画

変数として直線を作画する“回数”を定義。

回数が150回で作画を停止するようにしている。

折れ直線１.pr

59

衝突判定（テストタイル：色の重なりによる判断）

宇宙旅行

space-trip.pr

60

車の自動運転 auto_drive.pr

衝突判定（テストタイル：色の重なりによる判断）

61

モーフ追跡、部品の埋め込みスターボール.pr

メニューハロを開き

ここにチェックを入れる

鬼ごっこ.pr

その方向へ動かすタイル

62

アニメーション=ぱらぱら漫画おたまじゃくし一匹.pr動き回り乱数.prあおむし.pr

入れ物

入れ物

63

作品作りの実践

（方法）個人またはグループで

基本の学習修得、教えあい

アイデアと作品づくり

作品発表

小さくてもいい、短くてもいい、簡単でもいい、しかし個性のあるものを！

実用性教育性夢美しさ、鑑賞性将来性、発展性アイデア（機知）技術（テクニック）ゲーム性その他

作品の観点、重点

64

先輩の作品紹介2006年度サテライト

それ行けサンタ.prゴールできるかな(Part2).prdrive.pr信号機のある車.pr花火.pr公園.pr星のダンス.pr国旗修正版.pr無事ゴールできるかな？.prしゃくとりくん.pr顔.pr

2005年度「ねずみとねこの知恵くらべ」「むしとりゲーム」“Save the princess.”「ねずみくん☆１０にして」「ピヨピヨ大冒険」

2004年度仮面ライダー2号ワジワジボー ほか

65

サンプルが紹介されているWebページ

公式サイト内のhttp://www.squeakland.jp/kids/kidshome.htmlその他、スクイーク、squeakなどのキーワードで検索すると、多くの参考になるサイトがヒットするので試してください。気に入ったものがあればダウンロードして動かしてみてください。

66

では残り時間を使って

作品作りをしましょう

出来上がった作品は、下記メールアドレスにメール添付して送ってください。必ずしも完成していなくてもOKです。

ina@life.hyogo-u.ac.jp添付するプログラムファイル名は「名前ｘｘｘｘｘｘｘｘｘｘ.pr」にしてください。