情報科教育法 II 2003 ＃ 3
久野靖∗

2003.11.12

はじめに

1

前回もだいぶ内容を積み残してしまいました。模擬授業をやって頂く分だけ時間を確保しないといけませんからね…まあ、できるだけ内容にはメリハリをつけて進めるようにします。今回の内容は次のように予定します。

• プレゼンテーションと情報教育• 模擬授業「情報 C」p.34-35• メディアとコミュニケーション (時間があれば)• HTML 教室 — 基本的なタグ (前回積み残し)

2

プレゼンテーションと情報教育

2.1

プレゼンテーションの位置づけ (「教育法」p78-79)

なぜプレゼンテーションか?

• プレゼンテーションの技能は今日の社会を生きていくのに重要• プレゼンテーションを計画する→自分が考えたことを整理する手段• プレゼンテーションを実施する→他人とコミュニケーションする手段
別にプレゼンテーションでなくてもやっていたことだが→プレゼンテーションの形を取ることで、効率よく、余計なことに煩わされずに可能。
さらに、教科「情報」ではプレゼンテーションが重要な「(教師にとっての) 道具」になると考える。

• グループ学習、調べ学習の動機づけ「共同で/調べて、発表する」• 生徒から教師に情報を (試験以外で) もらう手段となる• 生徒どうしの相互評価を練習するのによい題材• プレゼンソフト→日本語入力が遅くても使える (大量に打ち込んだらそもそもいけないから)• OHP シートや紙でもできる→計算機を使わないで実習可能∗

筑波大学大学院経営システム科学専攻

1

2.2

プレゼンテーションの計画 (「教育法」p80-81)

生徒にやらせる上でどういうことを注意すべきか:• 発表したいと思わせること (テーマ、雰囲気) →自分が喋りたいと思わないことをプレゼンさせても楽し
くない、動機が重要• 上と同じことだが、テーマを明確に決めること• 精神論ではなく、きちんときまった手法があることを伝えてその練習をさせる→誰でもちゃんとできる• 喋るからには聞き手を面白がらせる! サービスする! 自分の喋る内容は重要だから聞いてくれるはず、というのは通用しない。
テーマの選定:• テーマは「はっきり分かるもの」「ひとことで言えるもの」に• 「聞く相手は誰か」もきちんと想定する。

2.3

プレゼンテーションの手法:

あくまでも「久野のおすすめ」だが自分としてはこういうのが標準的な方法だと思っている。

• 紙芝居。スライドを最初から最後まで均等なペースで出しながら喋るようにする。1 枚を出したまま長々と喋るのは×。
• スライド 1 枚の平均的な所要時間は 2 分。だから 20 分なら 10 枚とか。どんなに詰め込んでも 1 分 1 枚を超えてはいけない。スライドを見てもらっている暇がなくなる。
• スライドにはキーワードを載せる。詳細はアドリブで喋る (生徒さんがアドリブで喋るのが無理なら喋る原稿は別途用意)。
• スライド 1 枚につきメモ用紙 1 枚のラフスケッチを作る→並べてみて構成を決める• ちゃんとストーリーになって枚数が予定時間ぶんになるように→それが完成したら製作する

2.4

プレゼンテーションの製作

ある程度「定石」を守って作らないと効率が悪いし失敗しやすい。少なくとも最初のうちは次のような規則を守るようにさせる。

• すべてのスライドにタイトルをつける• 文字を書くのは最大で 7 行まで。箇条書きがよい。
• スライドに文章を書いてはいけない。文章が書いてあったら読んでしまう。読むと 3 分とか 5 分とか浪費してしまう。
• 1 つの行は最大 20 文字まで。
• できるだけ文字ではなく絵や図やイラストを使う。
プレゼンテーションソフトを使うとある程度までは上の規則にかなったものができる。「入り切らないから文字を小さくして詰めよう」などと思わないこと。また逆に、写真や絵だけで字がないというのも (よほどその対象物を詳細に示すことが目的でない限り) おかしい。
一方で、プレゼンソフトを使うと文字ばかりになってしまいやすいし、レイアウトも定型的になりやすい。
手描きの OHP や紙に描いて実物投影機を使うなどの方法も体験してもらうのがよい。

2

演習:

• 皆様に「10 分間」のプレゼンテーションを設計していただく。
• テーマ「高校生に学芸大の利点/弱点を紹介する」• 意図「学芸大に合った人に受験してもらう/合ってない人にはやめといてもらうために情報を伝える」

やること:• A6 サイズの紙を数枚ずつ配る (追加が必要なら取りに来る)• 1 枚をスライドの 1 枚としてスライドのラフスケッチを作る• 適宜並べかえてうまい構成にする• 10 分間なので表紙を除いて 5〜7 枚程度のスライドにする• 表紙 (タイトル、発表者) と目次をつける

東工大の紹介
理学部情報科学科
久野靖

目次

東工大とは？

イントロ
立地・設備
利点・弱点
学生生活
まとめ

一応国立大学
理系のみの大学（理学部・工学部）
レベル的には高い
世間には知られていない

よいところ

弱点

立地

研究水準はすぐれている

男ばっかり、暗い

大岡山（目黒・大井町線）

実験・研究設備はある（建物はぼろいかも）
勉強の邪魔が少ない

油くさい、白衣、ツナギ

東京南部・神奈川から便利

遊びはあまりない

敷地はまあ広い

設備・施設

部活

まとめ

生協売店（本、文具）

それなりに盛ん

就職とかはいいけど…

食堂（生協・業者）

運動部、コーラス、オケ（合コンとか…）

やっぱり「勉強メイン」の人むきではある…

自動車、無線、パソコン（理工系ぽい）「理系人生」が待っている！

遠い地区だと不便〜
グランド・プール（あまり使うことはない）

坂がある→運動部にはいい？

入口〜出口
１年→類別で教育（進振りのため勉強！）
２〜３年→専門バカになるまで仕込まれる４年→研究！研究！研究！
半数は大学院でさらに研究！

サンプル: 「東工大の紹介」

3

模擬授業
今回の模擬授業は「情報 C」p.78-79「情報の受信にかかわる問題」です。先生役の人、よろしく。

3

4

メディアとコミュニケーション

4.1

メディアとは?

QUIZ: 「メディア (媒体) とは何でしょう?」という質問に対して、次の回答のうち適切と思うものには○、一番適切と思うものには◎、違っていると思うものには×をつけよ。
• 新聞やテレビ。
• 空気や水。
• 同軸ケーブルや光ファイバーケーブル。
• 電話や電子メール。
• 会話、おしゃべり。
• 手紙やはがき。
• ポスターや壁新聞。
• コンピュータネットワーク。
• 情報を伝える物質。
• 情報を伝える手段。
• 情報を伝えるもの。

4.2

メディアリテラシー

メディア→いちばん広い意味では「情報を伝えるもの」。マスメディアだけをさしてメディアという流儀もあるが、会話なども (個人) メディアと考えることができる。
メディアリテラシー→メディアからくる情報を読み解く能力 (狭い意味)、メディアを活用する能力 (広い意味)。「情報科教育法」 p.108-113 を読んでおくこと。
非常に簡単に言えば、メディアが伝える情報には「発信者の意図」の影響が及んでいる→その意図を分かった上で情報を受け取る。

4.3

コミュニケーションとは

では、コミュニケーションとは?

• 親子で対話すること• 電話やメールで会話すること• 新聞や雑誌などを読むこと• 情報を伝達すること• 意図を伝達すること

4

4.4

コミュニケーションの特性・特徴

コミュニケーションは必ず何らかのメディアを通して起こる→そのメディア固有の制約による影響を受ける(例: 新聞では音は伝わらない等)。従って、その制約を考慮した上でコミュニケーションに参加する必要がある (メディアリテラシーも広い意味ではそのための技能と言える)。逆にその制約を活かしたコミュニケーションをすることもできる (例: 面と向かって言えないことが電話だと言えるとか?)
たとえば次の媒体はどのような制約や特性を備えていると思うか?

• 会話
• 電話
• 手紙・はがき• 新聞・雑誌• テレビ・ラジオ• 電子メール
• WWW

4.5

ネットワーク時代のコミュニケーション

計算機とコンピュータネットワークの発達により、コミュニケーションにおいてこれまでなら考えられなかったようなことが可能になっている→具体的にはどんな?

• 誰もが「世界中への情報発信者」になれる←従来は大手マスメディアだけだった• 「短時間で」「大量の」「正確な情報が」「その時点で相手が不在でも」伝達できる←おもに電子メールのこと• 「多数の人が参加するコミュニケーション」が物理的に集まらなくても持てるようになった←グループコミュニケーション• 自分の居室に居ながらにして、世界中の相手と、 (もしかしたら自分の正体を明かさないままで) コミュニケーションできる←匿名性
Q. インターネット上でメールや掲示板でコミュニケーションする場合、匿名性が保証されていると思いますか?
Q. 2 ちゃんねるで悪意ある匿名者の書き込みによって被害を受けたと主張する人物が 2 ちゃんねる主催者のひろゆきを訴えた。
• 原告の主張: 悪意ある書き込みをひろゆきが削除しなかったことで自分は損害を受けた。ひろゆきは自分に損害を賠償するべきである。
• ひろゆきの主張: 自分は多くの人に書き込みができる場を提供しているだけであり、書き込みの内容をチェックしたりする立場にはない。
裁判所の判断はいかに?

4.6

グループコミュニケーション

グループコミュニケーション (掲示板、ネットニュース、チャットなど) は多くの参加者を集めている←会話が楽しい、有益な情報が得られる、 etc.
1 対 1 のコミュニケーションはだいたい「知り合いどうしで」起こるのであまりトラブルはないし、あってもコミュニケーションしなければ済む。しかしグループコミュニケーションではコミュニティ内で喧嘩が発生

5

して騒ぎになることが多い。なぜだろう? どうしたら喧嘩をなくせるか? または、なくそうとすることは正しいのかどうか?
(時間があれば掲示板で体験議論してみたいですね)5HTML 教室

5.1

基本的な HTML の書き方

皆様の要望に従い、もっとも基本的な HTML から始めて HTML に入門し直してみる。CSS は最初から使うようにする。 HTML のバージョンは Strict(厳密版) と Transitional(互換版) があるが、とりあえず 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> — 箇条書きの項目。
• <pre>...</pre> — 詰め合わせせずにそのままにする。
• <blockquote>...</blockquote> — 引用など。
ちょっと多いけど、この 11 種類だけとりあえず覚える。先頭部分はほとんど同じものをコピーして使えばよい。テンプレートとして~kuno/work/htmltempl.html
を用意したので、これをコピーして編集してくれてよい。

5.2

クイズ

次の HTML は正しいか正しくないか、正しくないならどこが間違っていると思うか?

<h1>簡単な C のプログラム。
<pre>main() { printf("hello, world.\n"); }</pre>
答え: <h1>...</h1>の閉じタグがない。どこまでが見出しか分からない。

6

<p>彼は次のように行った。 </p><ul>私は向こう町から来ました。 </ul>
答え: <ul>...<ul>は箇条書だから中には<li>...</li>しか入れてはいけない。上のような引用は<blockquote>...</blockquote>が正しい。

<h1>私の趣味</h1>
私の趣味は釣りです。
答え: HTML 移行版では許されるが、厳密版でははだかのテキストを書いてはいけない。必ず何かの要素で囲むのがよい。ここでは普通の段落だから<p>...</p>で囲むのがよい。

<p>
私の趣味は 2 つあります。
1. お天気のいい日に散歩に行くこと。川ぞいの土手とかがおすすめです。
2. お菓子を作ること。ただし試食ばっかりしていると太るので要注意です。
</p>
答え: HTML 的には間違ってないが全部詰め合わされる。箇条書きは<ul>...</ul>(番号なし箇条書き) か、または<ol>...</ol>(番号つき箇条書き) としてマークアップするのがよい。面倒だったら全部<pre>...</pre>(整形ずみテキスト) にしてもまあいい。

5.3

HTML をチェックする作成した HTML は間違っていないかどうか次のコマンドでチェックする。

~kuno/htmllint

ファイル名

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

5.4

テンプレート 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>
7

<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(...) }8