情報科教育法 II 2002 ＃ 2
久野靖∗

2002.10.23

はじめに

1

先週はおつかれ様でした。1 回の授業でどれくらいの内容量にするかまだ掴めていないので、資料の量が多めで失礼しました (授業ではだいぶスキップしました)。今回からもうすこし減らすようにします。
あと、先週のアンケートで「HTML は書けない」「HTML について忘れているのでもう 1 度学びたい」といった意見を書かれた方が複数いました。私としても、「情報」の教員としてやって行く場合、Web ページをうまく活用できるようになるのは重要だと思うので、今回からしばらく、授業の最後の方を「HTML 教室」にして基本からひととおり復習しようと思います (CSS も併せてやります)。
もう 1 つ多かった意見は「『情報』の授業とはどのように進めて行ったらいいものなのか知りたい」というもので、これは前回喋ったように「受けたことのない科目」なので当然の意見だと思います。これについては、皆様の中から交替で模擬授業をやって頂き (今回から始まりますね)、それについて意見を交換したりアイデアを出したりすることで皆様の中に「こうやれば何とかなりそうだ」という具体的なイメージを作って頂きたいと思います。こればかりは、お話だけでは絶対に分かりませんから。ということで、今回の内容は次の通り予定します。最後の方は時間が足りなければ適宜スキップして次回以降に回しますので。

• 「情報」教室のデザイン/配置/運営について• 模擬授業「アナログとディジタル」 (p14-15)• 授業の評価/検証について• プレゼンテーションと教科「情報」• 「色」に関する話題• HTML — 基本的なタグ/CSS による色の設定• (授業終了後)11 月以降の模擬担当の割り当て相談

2「情報」教室のデザイン/配置/運営

2.1

教室設計の重要性

教科「情報」では計算機を用いた実習が多く必要となるため、「情報教室」「コンピュータ室」といった形で専用の教室を用意して使用することが多いと思われる。計算機を多数配置した教室の設計は予算が掛かることもあり、一度決めてしまうと手直しが難しいので、最初にうまく設計しておく必要がある。
Q. あなたが「好きなように 30 人入る教室を作れ」と言われたらどういう配置にする? 紙に書いてみよう
Q. 「情報」教室を設計するとき注意すべきことには何があると思う?
∗筑波大学大学院経営システム科学専攻

1

2.2

久野が見聞したさまざまな設計自分もこの仕事長いので、いろいろな「計算機実習教室」を見てきた。ざっと思い出した範囲で次のようなものがある。

• 30 台の端末が前を向いて並んでいて、普通の教室スタイル (Tk 大)• 普通の書道教室だが、机の引出しをあけるとノート PC が入っている (Ts 大附属高校)• ぎっちり並んだすべての机が前を向いていて、巨大なマシン本体とディスプレイが鎮座していて、そこに座ると画面以外は何も見えない (W 大)• 3 人がけの机に 3 台の端末が載ったものが 8 行× 8 列に並んでいて、人数が多くなければ 3 台の中央の画面は教師画面に切り替えられる (T 大)• 4 台ずつ 8 台の机が向かい合わさった「島」が見渡す限り広大な教室を埋めていて、どこで説明しても説明している人が見えない席がある (D 大)• 5 台ずつノート PC ののった丸い机が教室に点在して、教師席が中央にある (Kg 大)• 3 角形の教室の壁に沿って PC が並んでいて中央にも 1 列だけ PC が向かい合わせで 8 台くらいおいてある (H 台附属高校)• 4 列縦並び、2 つの島になっている (テキスト 18p の図 2.2 と同じ) ☆ 1• 上と同様だが、ただしほとんど歩く場所が空いていない (G 大附属高校)• やはり 4 列縦並びだが、壁際-中央の島-壁際、と並んでいる (Tk 大大塚地区)(久野のいるところ) ☆ 2

2.3

似たような配置なのに差が出る例

次のものは、どっちがいいと思いますか?
(A)

(B)

(A)

(B)

(A)

(B)

2

2.4

機器配置において注意すること

教室デザインで重要と思うことをあげておく。

• 教師が説明しているところがちゃんと見えるようにする。その意味では縦並びが一番よい。液晶モニタで高さが低ければ縦でなくても見えるかも知れないが相当くるしい。
• 授業形態は PC に向かっている時だけではない。たとえばグループで相談する場合を考えると、椅子をぐるっと回すとグループで相談できるスペースになる、といった配慮が欲しい。
• ノートを取ったり紙に書いて考えたりすることもある。キーボードがじゃまくさいのは困る。横に (空中に?) のけておけるとかだといいかも。
• 教師の教材提示も重要な機能。大画面にプロジェクタ、というのが比較的簡単にできるが、暗くしないと見えないようだと授業の障害になる (資料が見えないから)。また縦長の教室だと遠くて見えない。天井吊り補助ディスプレイ、中間モニタ (生徒 2 名につき間に 1 つディスプレイを置く)、などがあるといい。どれも、字が読めないようでは失格。ここの教室は昨年は失格だったが、今年はプロジェクタとスクリーンがまともになったので△くらい。

2.5

管理上の問題上のような授業のやりやすさ、使いやすさという問題以外に、実際に情報教室を運用すると山のようなトラブルを抱える。そのことも注意しておく。

• プリンタトラブル — 紙の補給、ちらかし、印刷しっぱなし、紙詰まり、私用印刷、トナー交換 → 管理する立場となったら大変。生徒を信用できるくらいきっちり教育するか、信用せずに教師が立ち会わない限り印刷させないか、どっちか悩むところ。
• 計算機の自由利用 — できるなら、放課後なども自由に利用できるようにしたい。しかし管理する人がいないと何をされるか分からない。「図書委員」みたいに当番があって管理とか?
• 機器の破損、盗難 — イタズラは当然ある (マウスボールが盗られるとか)。モラルの問題。盗難対策としては、ワイヤーで固定するとか? 液晶モニタとシャープペンシルは相性が悪い (つつかれると壊れる)。
このほか、セキュリティや危機管理の話題があるが、長くなるのでまた回をあらためて。

3

模擬授業「情報 C」p.34-35

模擬授業の運営は「先生役」の人にすべておまかせします。「生徒役」の人はホンモノの高校生になったつもりで、それらしくふるまってください。また、当然「授業」なので筆記用具を出してノートを取るなどすること。
「授業参観役」に回っている人は気が着いたことをなんでもメモするようにしてください。評価用紙を配りますので裏面 (進行記録) から記入してください。同じ評価用紙を生徒役の人にも記入して頂きますが、生徒役の記入は模擬授業終了時に表面のみお願いします。

4「アナログとディジタル」に関する補足
そもそも、なんで「アナログとディジタル」なんて学ぶのでしょうか?

• ディジタル時代だから (?)• コンピュータではディジタルで扱うから (まあそうなんだけど…)3• 情報はディジタル化してあると扱いやすい
なぜディジタルだと扱いやすいの? 扱いやすいってどういうこと?
例: 自分の前にある PC 画面の「幅」知合いに教えるには?
要するに「単位を決めて数字を使って表す」ことは柔軟性があるし、安定した記録が得られる。コンピュータで扱うというのもその一環。ではアナログには利点がないのか?
ディジタルの利点と弱点:○ 扱いが便利。さまざまな情報をまとめて扱える (マルチメディア)○ 情報が失われにくい。コピーしても劣化しない× ディジタル化する時には必ず誤差が発生する (細部は失われる)× 扱いやすさが逆に欠点ともなる (例:コピー問題)
アナログの利点と弱点:
× 扱いがそれぞれ「専用のもの」を必要とし不便
× 記録や伝達や複写において誤差 (ノイズ) が入りやすい○ 連続しているものをそのまま表す (自然さ)
どっちが常にいいとか悪いとかいう問題ではない、ということ。

5「色」に関する話題

5.1

教科「情報」と「色」の関係

教科「情報」ではさまざまな個所で「色」が出て来る。まず、Web ページやマルチメディア作品の作成においては「色づかい」は必須である (情報 A〜C)。そして、画像の表現について学ぶ場合も色の表し方は学ぶことになる (情報 B、情報 C)。
さらに、専門教科「情報」の中でも次の 3 つの科目は色と関係が深い。

• コンピュータデザイン — デザインと関連して、配色、色の持つ効果などについて学ぶことになる。
• 図形と画像の処理 — 画像を変換するなどの際に、色を修正するなどの作業が含まれる。
• マルチメディア表現 — 画像、動画を扱うので、その中で色をつけたり加工することを学ぶ。
専門教科について全体をカバーするのはこの科目では無理だが、重要な話題について触れる機会があれば取り上げるということ (実際に「コンピュータデザイン」の担当にされたらどうします???)

5.2

画像の原理

そもそも、皆様はコンピュータの中で画像がどういう風に表現されているのかは知っていますか? (これを知らないで「情報」の先生になられると大変困ると思う…)ピクセル（ＲＧＢ値）

高さ（ピクセル数）

画像サイズ

幅（ピクセル数）4基本的な原理は次の通り:• 画像は「ピクセル」と呼ばれる「色のついた点」が縦横に集まったもの。縦と横のピクセル数を「画像のサイズ」という。たとえば 400x300 の画像、とか。
• 画像を表示したり打ち出した時にどれくらいの大きさになるかは、出力装置の解像度による。たとえば100dpi(dot per inch) のディスプレイだと横幅 10cm くらい、1200dpi のプリンタだと 6mm くらいということになる (1inch 〜 2.5cm だから)。
• 各ピクセルの色は RGB 値を指定することで表す。よく使われるのは RGB ともに 8 ビット (0〜255) の値で強さを表す→ 24 ビットカラー• 画像データの大きさ→圧縮しないと 1 ピクセル 3 バイト。400x300 の画像だと 360,000 バイト (フロッピーに 3 枚しか入らない)。通常は圧縮された形のファイル形式 (GIF、JPEG、PNG) を使う。

5.3

色のしくみと HSB モデル

計算機では RGB 表現を使うが、人間にとっては HSB モデルが分かりやすい:• Hue(色相) — 色相輪にそって赤→橙→黄→黄緑→緑→水色→青→紫→赤というふうに連続して色がつながっている• Saturation(彩度) — 色の「強さ」(鮮やかさ) を表す。これを減らすとだんだん薄い色になり、最後は灰色になる。
• Brightness(明度) — 明るさ。もちろん、減らすと暗くなり、最後は真っ黒になる。
美術の時間にこれを立体模型にした「色立体」を見せられた人もいると思うが…なぜかというと、「色の違い(色相)」とは色の波の周波数の違いに対応し、明度は波の強さに対応し、彩度は「どのくらい特定の周波数に偏っているか」に対応しているから。 (Web ページ参照)
真っ白

色立体

断面灰色

真っ黒

色相

5.4

鮮やかな色

RGB カラーモデルでの色指定

結局、なぜ計算機では RGB を使うかというと、表示装置の発色のしくみがそうだから。 CSS でいうと「rgb(赤, 緑, 青)」という書き方で 3 つの色の強さを 0〜255 で表す。たとえば rgb(255,255,255) は真っ白、rgb(0,0,0) は真っ黒。人間にとっては使いづらいが、 HTML でも CSS でもこれを使って指定することになってしまったのでしかたがない。ちょっと練習しておくとよい。
演習 次の色を CSS で作ってみよ。
「真っ黒」
「真っ赤」
「真っ青」
「真緑」
「濃い灰色」「薄い灰色」「黄色」「紫」「茶色」「パステルピンク」「パステルブルー」「紺色」「深緑」「若草色」「空色」「肌色」。
実習方法: UNIX に入り「cp
これをエディタで開き、kuno/work/colors.html colors.html」でファイルをコピーしてくる。

5

<div style="background-color: rgb(255,255,255)">色の名前</div>となっているところの色の数値を変更する。

5.5

配色

実際にページに色をつけるときは、でたらめにそれっぽい色を指定してもあまりうまく行かないことが多い。
デザイン屋さんは色の配置 (配色) について山のようにノウハウを持っていて、それを駆使してきれいなページを作っている。配色の勉強をしてたければ本がたくさん出ている。
ちょっとだけ述べると…色にはさまざまな「次元」がある。

• 寒色系←→暖色系• 刺激色←→鎮静色• 軽快色←→重量色• 男性色←→女性色• 自然色←→都会色
これらの次元からうまく選択して「おいしそう」「華やか」「おちつき」「スポーティ」などのイメージをつくり出す。もちろん、色の選択だけでなくそれぞれの色の比率や配置なども問題になる。

6HTML 教室

6.1

基本的な HTML の書き方

皆様の要望に従い、もっとも基本的な HTML から始めて HTML に入門し直してみる。CSS は最初から使うようにする。HTML のバージョンは 4.01 Strict(厳密版) で。今回は初回なので学ぶ要素 (タグ) はこれだけ。

• <html lang="ja">...</html> — HTML 全体を囲む。どうせ日本語で書くのだから常に日本語だと指定しておこう。
• <head>...</head> — ヘッダ。この HTML ファイルに関する情報を一通り書く場所。
• <title>...</title> — ページのタイトル。必須。
• <meta http-equiv="Content-style-type" Content="text/css"> — HTML タグに「style="CSS指定"」という形で CSS をつける時は必要。
• <style type="text/css">...</style> — CSS を指定するので常に入れることにする。
• <body>...</body> — ページ本体• <h1>...</h1>、<h2>...</h2>、…、<h6>...</h6> — 見出し。大見出しから小見出しまで 6 レベル使える。
• <p>...</p> — 段落。
• <ul>...</ul> — 番号なしの箇条書き。
• <li>...</li> — 箇条書きの項目。
ちょっと多いけど、この 10 種類だけとりあえず覚える。先頭部分はほとんど同じものをコピーして使えばよい。テンプレートとして~kuno/work/htmltempl.html
6を用意したので、これをコピーして編集してくれてよい。作成した HTML は間違っていないかどうか次のコマンドでチェックする。

~kuno/htmllint

ファイル名

100 点になる必要はないが、ちゃんとメッセージを読んで未定義なタグ (たいていはミスタイプ) とか閉じ忘れたタグとかは直しておくこと。

6.2

テンプレート HTML ファイル<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html lang="ja"><head><title>Sample Title</title><meta http-equiv="Content-style-type" content="text/css"><style type="text/css">
body { background-color: white }</style></head><body><h1>見出しです</h1><p>段落です。</p><ul><li>箇条書き項目その 1</li><li>箇条書き項目その 2</li></ul></body></html>
演習 上記のテンプレートファイルをコピーしてきて編集し、「自己紹介」のページを作れ。作ったら、地の色、文字の色を調整してみよ。たとえば CSS 指定のところを次のように直していく (1 行ずつ修正ないし追加していくとよい)。見やすい配色とはどのようなものか考えてみること。

body { background-color: rgb(...) }body { color: rgb(...) }h1 { color: rgb(...) }p { color: rgb(...) }ul { color: rgb(...) }7