教育研究実習2002年度参考資料

実施課題

目的

概念地図法(Concept Mapping)ないしは描画法と呼ばれる一連の 教授テクニックが存在します。 皆さんに先月作成していただいたA型図形はまさに概念地図と言えます。 そして、皆さんが普段活用しているWebページも実はこの概念地図と 近い関係にあると言えるでしょう。 たとえば、Webページのようなハイパーテキスト (Windowsのヘルプファイルなども含む)は、 人間の知識構造を反映した構造になっていると言われています。 ある論文で引用した文章ですが、このように言われています。

Many hypertext researchers claim that the node-link relationships within a hypertext model the general structure of human knowledge and should facilitate natural processes for information access (Fiderio, 1988).

つまり、ノード(各Webページ)とそれらを結ぶリンクによって構成されるハイパーテキストは、我々自身が持っている知識構造と似たような構造を持っており、したがって、ハイパーテキストを用いた教材などの有用性も高いだろうということです。

上記の知識構造と概念地図の関係をもう少し詳しく説明してみましょう。

概念地図法は、オーズベルが提唱する有意味学習の延長線上にあります。有意味学習の文脈では、新しい概念は既存の概念(体系的な知識構造)に包摂されるような形態で取り込まれると考えますが、概念地図とは、その時点での知識構造を外部に図として示したものと考えるのです。つまり、単元の前に概念地図を描かせることによって、生徒たちの認識の枠組みのようなものを知ることができ、また、単元終了後に描かせることによって、生徒たちが何を学んだかを把握することができるわけです。

特に、この最後の部分の生徒の知識状態の「把握のし易さ」が授業を行う教師にとっては決定的に重要になってくるのですが、生徒たちにとっても、比較的容易に発見学習ができたり、自分が学習している内容の全体的な位置づけが理解しやすかったりといった利点が存在します。この辺りの利点は、図を用いた表現全般に共通する現象と言えるかも知れません。

つまり、今回の実習では、クリッカブルマップを併用したWebページを作成するわけですが、このようなWebページは、皆さん各自の知識構造を何らかの形で反映しているといえるということです。自分の中における概念変化の過程を経験し、それがどのように表現さえれうるかを理解することが、今回の実習の目的です。

参考資料

なお、ハイパーテキストを用いた教材には以下のような問題が存在します。 このような問題は、今風のいわゆる電子化教材全般が抱える問題と言ってよいでしょう。 時間の余裕があれば、これらの問題についても言及する予定です。

 However, hypertext users become disoriented while browsing, particularly when they lack understanding of the overall scope and organization of the target domain (Gay and Mazur, 1991). Careless introduction of WWW and search engines into the classroom settings can be harmful for the students, because students who lack basic academic abilities cannot utilize search engines fully.

.. snip ...

 Moreover WWW is different from normal hypertexts in the openness of node-link structures. The latter usually has a clear boundary between system (local PC) and outside (e.g., network), while the former can trail the links almost endlessly. It is difficult to build a coherent navigational aid for all web sites in which the node-link structures can be different because designers' domain semantics cannot be the same even if they have addressed similar topics. Therefore, when users are looking for the target pages by search engines, they may need some other knowledge than PC literacy and they may alter the searching and browsing strategies according to the degree of their knowledge in each target domain. We should consider both technical aspects of web surfing and domain knowledge-based metacognitive decision making, to understand the search and reading behavior in the Internet.

5月23日

まず始めに、以下のテーマについてKJ法を用いた討論を行ってもらいます。

「子どもをとりまく社会環境と教育問題」

前回と同様に、A型図形の作成を目指して討論を行い、各グループごとにその内容をまとめて発表してもらいます。このA型図形をベースにして、各自の概念地図をHTMLとして表現するテクニックを学ぶことが、当面の目標です。このとき、各自が検索サイトを利用して探してきたWebページへのリンクが、KJ法でいうところのカードに相当しています。

検索して調べてきたページが蓄積されてきたら、以下の手順で概念地図を作製してもらうことになります。

  1. 1つのカードが1つのリンクに相当している
  2. 小グループごとに章立てを作成する (各グループごとに簡単なコメントも書く)
  3. 中グループ単位でファイルに分割する
  4. 中グループそれぞれをリンクでつなぐ (リンクの意味--対立概念、因果関係など--も必要に応じて示す)
  5. 必要に応じて、友人のページにリンクを張る (問題の分担をしても構わない)
  6. 最終的に、自分の概念構造を示すような図表を作成する

つまり、上記の中グループごとのリンク構造を クリッカブルマップとして表現することになるわけです。

技術的に言って、普通のHTMLファイルを作成することで手一杯だと思いますので、5月23日の目標はindex.htmlを作成することとしたいと思います(これが何であるかは、当日説明します)。また、おそらく検索の仕方を忘れてしまった人はいないと思いますが、効率的な検索方法について説明し、ブックマークからHTMLへと移す方法も練習する予定です。

一度だけ行うコマンド

Webページを公開するための準備をするために、 以下の呪文をそれぞれ一度だけ唱えます。 理屈はさておき、とりあえず、TeraTermが起動している状態で、 各行をコピーペーストして実行してみてください。 一行コピーして、張り付けたらリターンキーを押します。 NetscapeからCtrl+Cでコピーして、 TeraTerm側にAlt+Vで張り付けます。

  1. tcsh
  2. cd ..
  3. chmod 744 [insert your id]
  4. cd
  5. mkdir public_html(←この操作は助っ人I君の解説の方が詳しい
  6. chmod 744 public_html

たぶん、僕の説明はマニア向けだと思うので、 訳が分からなくなったら助っ人I君のページを参照するとよいでしょう。

5月23日〜6月6日

この期間に行って欲しい作業は以下の通りです。

上記の作業と同時に、 必ず作業メモを残しておくようにしてください。 後で、自分の中での変化プロセスもレポートとして提出して頂きます。 特に、概念図の中の、どこが、どのように変わったかをまとめてください。

メモとして記録してもらいたい内容は以下の通りです。

もちろん、閃き感がないまま淡々と作業が終了しても構わないので、 そういう時には、 そのまま正直に、最初の計画通りページを作成したと報告してください。 また、いつ、どこのページにリンクをはったかといった細かい作業記録は、 原則的に不要です(ただし、日記風に細かい作業記録をつけていくと、 上記のような閃き感を記録しやすいかもしれません)。

なお、作業の途中で操作方法が分からなくなったり、更に進んだテクニックを学びたくなったりする方もいるはずですが、そういう人のために、 チューターを1名 確保しています。どうぞ気兼ねなく質問してください。きっと気さくに教えてくれるでしょう(もちろん、僕に直接質問しても構いません)。作業の進捗状況を随時チェックするので、怠けずに作業を進めてください。

6月6日

作成してきた中グループ(各HTMLファイル)を、 クリッカブルマップとして結びつける作業を行います。 この作業と合わせて、各参加者に簡単な発表をしてもらうことを予定しています。

レポート

まず始めに、各自が作成してきたWebページを作品として評価します。 評価の観点は大まかに以下の通りです。

これとは別に、 上記のWebページ群を要約する文章(いわゆるB型文章)を提出してください (これはTOPページに要約文を掲載しても構わない)。 また、作業を進めていく過程で、 初期のA型図形から、 自分の知識構造がどのように変化したかもあわせて報告してください。

提出物

参考リンク集

本学固有の設定など

Netscape Composer の操作説明

ヘルプファイルを適当に切り貼りして作成したページです。 取り扱いに注意してください。

解説ページ

安江先生が作成された学内向けの公開方法の説明

助っ人I君

その名の通り。期待しています。

パーミッションについての説明

おそらく、一番ひっかかる概念だと思いますので、ご一読ください。

Windows NTでログインに時間がかかるときへの対処

IEを使うときの設定と注意です

HTML全般について

Another HTML -lint Gateway

HTMLの文法チェックをします。

HTMLのコーディングチェック

本実習ではHTMLの文法の解説をほとんど省略しています。でも、 背景知識(理念)としてこのようなことは知っておくべきだと思います。 きっと、膨大なので途中でめげてしまうと思いますが、しかし、皆さんは、 学校の顔である「ホームページ」を作る可能が高いわけですから、 是非とも一読してください。

Webユニバーサルデザインガイドライン (日立製作所)

情報弱者への配慮の仕方などを学ぶことができます。

HTML TAG Library

微妙な調整をするときには、 TAGを手で入力しなければならないこともあります。

HTML TAG Reference

微妙な調整をするときには、 TAGを手で入力しなければならないこともあります。

HTML例文辞典

面白そうだと思うようなページを見つけたら、 それを真似ることが一番です。

WEB COLOR 216

物凄い便利!

トライネットWeb制作 TIPS

色見本など、綺麗なページを作るときに参考になる

クリッカブルマップ

ちょろいページ

名前の通りです。あまり参考にはならんでしょう。

クリッカブルマップの作成例 1

クライアントサイド・クリッカブルマップの作成法が簡単に書いてある

クリッカブルマップの作成例 2

クライアントサイド・クリッカブルマップの作成法が簡単に書いてあ る

クリッカブルマップの作成例 3

クライアントサイド・クリッカブルマップの作成法が簡単に書いてあ る

その他 … レポートと関連した内容

参加者各位のページ

分担できるところは分担して、協力しながら楽しんでください。 皆さんが作ったA型図形。巨大なファイル(2.6メガバイト)なので、学外からのアクセスはお勧めしません。


講義資料一覧に戻る