Webページづくりを楽しもう

情報基礎でホームページを作成する意義

　インターネット上に自分を紹介するWebページを作成することによって，インターネットやＬＡＮに関する興味・関心を高めるとともに，単に情報を受信するだけでなく，情報を発信できる生徒の育成を目指した。

１　自分のWebページを作成しよう(中学校第3学年技術・家庭科)

(1) ねらい

　これまで中学校技術・家庭科の情報基礎領域ではプログラミングや制御，アプリケーションソフトの活用などについて学習することで，情報活用能力の育成に重点を置くことが多かった。しかし，近年インターネットやイントラネットの普及が急激に進んでいる現状を考えると，これからの高度情報化社会を生きていかねばならない生徒たちにとってコンピュータ通信やインターネットについての知識や技能を習得することは必要であると思われる。しかしながらネットワークについて理解することは高度な知識を要したり，難しい専門用語などが多いため，どちらかというと敬遠されがちである。そこでコンピュータ通信やインターネットについて興味・関心および学習意欲を高め，楽しんで学習することを目標として，WWWサーバ上に自分たちのページを作成し，インターネット上に情報を発信するような授業を行った。

(2) 指導目標

　全国のWWWサーバから様々な情報を受信したり，受信した情報を自分のページづくりに利用することにより，Webページを作成，公開することを通して，現在のコンピュータ通信やインターネットの現状を知り，ネットワークを通じた情報の受信発信能力を培い，今後の情報化社会に意欲的，積極的に対応していこうとする態度を育てる。

(3) 利用環境

1)使用機種

WWWサーバ用UNIXワークステーション(fujitsu model S-4/5) 1台
教師用コンピュータ(fujitsu FMV133D/Windows NTサーバマシン) 1台
生徒用コンピュータ(fujitsu FMV Deskpower SE/Windows95マシン) 20台

2)稼働環境

10base-T Ethernetによる福井大学からの専用回線により，ＬＡＮ及びインターネットに接続されている。

3)インターネットに関する利用ソフト

インターネットエクスプローラVer3.0
メモ帳(Windows95付属の簡易ワープロ)
ペイント(Windows95付属の簡易お絵かきソフト)
ペイントショッププロVer2(画像ファイル変換に利用)
GIF Construction Set (GIFアニメーション作成用シェアウェアソフト)

　＊ペイントショッププロとGIF Construction Setは必要に応じて利用する。

２　Webページ作成についての指導計画

　情報基礎　全20時間配当(ただしWWWサーバへの転送は除く)

活動計画	活動内容や留意点
コンピュータ通信やインターネットについて	現在のコンピュータ通信やインターネットの現状について講義をする。
HTML文法の基礎	ページを作成する上での基本的なタグについて学習する。 <HTML>～</HTML> <BODY>～<BODY> <HR> <BR> 等
文書の作成	ワープロを利用する要領でタグを含めたHTML文書を作成していく。
背景(壁紙)や図の作成	背景や図については自分で作成してもよいが，Web ページを検索して壁紙集やGIF アニメーションのサイトを見つけ，無償で利用できる素材についてはダウンロードし利用してもよい。その際ネチケットや著作権については十分に注意させる。
インターネット利用による素材収集
Webページの体裁を整える	文字の大きさや色を背景色や壁紙にあわせて変えたり，体裁を整える。また<IMG>タグを利用し画像をページに張り付ける。
リンクの設定	<A> タグを利用し，他のページ（自分が作成したものでもよいし，世界中のWeb ページでもよい）にリンクを張ってもよい。
WWWサーバ転送	完成したページを ftpで WWW サーバに転送する。ただし，転送の際には WWWサーバにログインするためのパスワード入力が必要なため，転送は教師のみが行う。転送は授業中に行うこともあるし，放課後に転送することもある。

３本時の学習内容

　第３学年では「情報基礎」領域として今回の題材を学習しているが，ホームページを作成することにより以下の技能を習得できると考える。

基本的にはテキスト文書を作成するため，ワープロソフトの活用能力とほぼ同等の技能を身につけることができる。
ページに張り付けるための図形を作成することで，図形処理ソフトを利用することと同等の技能を身につけることができる。
ページレイアウトはタグと呼ばれる命令で行うため，ある種のプログラミング要素を盛り込むことができる。また高度なページの作成を自主的に進めることでJavaやVisual Basicなどの本格的なプログラミングに挑戦することも可能である。
自分たちのページを作成するに当たり，国内外にアクセスしさまざまなページレイアウトをみたり参考にすることにより，コンピュータ通信やインターネットの現況を体験できるとともに通信の仕組みや情報受信および情報活用能力を習得できる。
他のものが作成したページを参考にし，自分たちのページづくりに活かすことにより，主体的にページ作成に取り組むことができる。またこれらの取り組みにより，コンピュータを利用・活用する能力を自然に習得できる。

　生徒たちは実に意欲的にページ作成に取り組んだ。生徒たちはページづくりに関するさまざまな情報を，友人たちと相談したり，ページづくりに関する本を購入したり，国内外のWebページにアクセスしページづくりに関するページを検索することで主体的にWebページ作成に取りくんできた。生徒たちが参考にした主なサイトを以下に示す。

○ページづくりに関するサイト
日本語版yahoo!	http://www.yahoo.co.jp/
NTT Directory	http://navi.ntt.jp/
ホームページづくりに役立つページ	http://tnk1.cs.csse.yamaguchi-u.ac.jp/kozima/ww.html
KDD WWW/HTMLメモ集	http://w3.lab.kdd.co.jp/technotes/WWW/
福井県立大学田中先生Page	http://mtlab.ecn.fpu.ac.jp/ServerSetUp/EasyHTML.html
福井県立大学宮内先生Page	http://miya.ecn.fpu.ac.jp/thishmpg.htm
○アニメーション関連
奥野竜太郎さんのページ	http://www.big.or.jp/~ryutaro/index.html
P4room	http://www.big.or.jp/~roro/
BEAT Factory	http://members.aol.com/IndoModel/GIF/index.html
○JAVAアプレット関連
BigTime applet (c) The Internet Conveyor Ltd.	http://www.conveyor.com/
GAMELAN	http://www.gamelan.com/index.shtml

　＊上記のページは福井大学教育学部附属中学校ホームページからアクセス可能。
　福井大学教育学部附属中学校 URL http://jhssrv1.fukui-u.ac.jp/

　生徒各自が実際にインターネットのWebページにアクセスし情報を得る方が，遙かに効率よくページを作成していくことができる。実際，生徒たちは画像やページづくりに役立つような情報を自分たちで検索して探し出したり，附属中学校の技術科ページから「ホームページづくりに役立つページ」のリンクをたどりながら背景の画像を手に入れたり，アニメーションを手に入れたり，流れる文字を設定したりと思い思いの工夫を凝らしている。これらのテクニックや工夫については教師が強制的に指導したものは一つもなく，生徒同士の情報交換や教えあいといった相互作用の中で展開されてきたものである。したがって，授業の進め方も，教師は期間巡視を行い，必要に応じて支援するといった形態で行っている。

教師が支援する内容として

インターネット上のどこに有効な情報があるのかという情報提供
生徒の希望するレイアウトを実現するにはどうしたらよいか，またどのページを参考にしたらよいかなどのアドバイス
写真などのオブジェクトをスキャナなどで取り込むなどの技術的支援
アニメーション作成等の技術的支援
作成されたページをサーバにｆｔｐ転送するなどの技術的支援

などが主である。ただし，基本的なページの作成方法や著作権，ネチケット（ネットワークエチケット）問題などの法的知識や道徳的概念については強力に指導する必要があるため，これらの項目については教師主導型の授業を展開した。

　こうした主体的なページ制作活動を行うことによって，情報活用能力，情報選択能力，情報受信・発信能力が身につけられ，将来にわたって生きて働く力になり得ると考えている。

◎生徒作品例　生徒作品は福井大学教育学部附属中学校ページ内「各クラス」のページに掲載されています。( http://jhssrv1.fukui-u.ac.jp/student/class.html)


図１完成したページ(部分)	図２左のページからのリンクページ

図３ CGIカウンタを利用した例	図４フレームを利用した例

◎授業後の感想から

　自分たちで背景から文章まで全て作るホームページはとてもおもしろく，毎回の技術の授業が待ち遠しくてたまらなかったです。私は機械オンチで今回のコンピュータの使い方も結構苦労したこともあったけど，もうずいぶん慣れて進み具合もスムーズになったのでとてもうれしいです。(中略)それにしても画面に文字などを打ち込んで，それを送信するだけで，世界中の人々とコミュニケーションがとれるなんて技術の進歩はすごいなぁと感心させられます。核実験などにそのような技術の進歩を利用するのではなく，インターネットのような，世界中の人々と交流するのに生かすというのはとても良いことだと思います。（女子　Ｍ．Ｍ）

　技術の時間はとても楽しい。インターネットやホームページづくりを最新のコンピュータを使ってできるからだ。インターネットは本当に便利だ。世界中の情報が見られるし，わざわざ店に行かなくても買い物ができるし，メールを出せばすぐに着くし，インターネットの利点は数多くある。こんな便利なものがこの世にできてとてもうれしい。そんな世界的な情報交換の場でもあるインターネット上で世界中のいろいろな人たちに僕のページを見てもらいたい。(男子　Ｔ．Ｎ)

４　評価とまとめ

　今回の授業を通して，生徒たちにインターネットを利用させてページづくりに取り組んだことは，大変大きな効果を上げたと実感している。授業後の生徒たちの感想を見ても，どの生徒も意欲的に，主体的に，生き生きと取り組めた様子がうかがえる。

　時間的な制約から，本当に凝ったページを作ろうとすると大変だが，「自分が作ったものをより多くの人に見てもらいたい」という生徒たちの気持ちが大きな意欲につながり，興味・関心を高めることができたのではないだろうか。

　授業でのページづくりは終了したが，今後インターネットが一般家庭の中でもより身近なものになったとき，今回の授業内容が「生きる力」になってくれるものと願っている。

(実践者　福井大学教育学部附属中学校　吉川雄二)