【教材３】 ホームページ・ビルダーによる地域素材を生かした教材の開発

	下妻市立高道祖小学校　教諭　田中　照子
(1)	教材開発のねらい
	ほとんどのＷｅｂページは，「ＨＴＭＬ」という記述言語（英数字と記号を組み合わせたもの）によって作成されており，リンクを使ってファイルをつないだものが多い。ＨＴＭＬは，「タグ」と言われる符号を使って，ページの中に文字や画像などをどのように配置するか，文字の大きさや色，背景はどうするかなどの様々な様式を記述する。そのため，ＨＴＭＬを使いこなすにはある程度の知識が必要である。そうなるとハードルが高くて，なかなかＷｅｂ教材を作成しようという気持ちにはなれないのが一般的であろう。 　そこで，画用紙などの文具を利用して簡単に教材を作るのと同じように，コンピュータを利用して手軽にＷｅｂ教材を作る方法を提供できればと考えた。 　結論から言えば，簡単にＨＴＭＬファイルを作成するには，Ｗｅｂページ作成用ソフトウェアを利用すればよい，ということである。 　今回は，Ｗｅｂページ作成用ソフトウェアの一つである「ホームページ・ビルダーＶ６」を利用し，ワープロ感覚で簡単なＷｅｂ教材の作成を試みた。手軽にＷｅｂ教材を作成する手がかりとなればと考えている。
(2)	教材の内容
	ア 　学習内容 　 (ア) 　茨城に関する調べ学習用の検索エンジンとしての活用 　 　教材を利用した児童が，郷土の自然や文化，歴史などに思いを馳せ，「行ってみたくなる」「やってみたくなる」「もっと知りたくなる」という気持ちになるとともに，「自分の知らない茨城を発見できる」といった広がりのあるＷｅｂ教材となることをねらいとした。 　 　 (イ) 　茨城に関して新たに発見したことを情報提供できる場としての活用 　 　茨城についての様々な情報を提供する場とし，みんなで作り上げていく双方向性のＷｅｂ教材となることをねらいとした。 　具体的には，次のようなコンテンツと学習利用を考えた。 　 ○ 　市町村分布図 　 ・ 市町村名を地図から検索するのに利用。 ・ 茨城県の市町村名を覚える学習に利用。 ・ 各市町村の調べ学習に利用。 ○ 　自然案内 　 ・ 県内の名所などの調べ学習に利用。 ・ 茨城県の地形の調べ学習に利用。 ○ 　植物 　 ・ 県内に生息する植物についての調べ学習に利用。 ○ 　動物 　 ・ 県内で生息する動物についての調べ学習に利用。 ○ 　昆虫 　 ・ 県内に生息する昆虫についての調べ学習に利用。 ○ 　水辺の生物 　 ・ 県内に生息する水辺の生物についての調べ学習に利用。 ○ 　伝説 　 ・ 県内に古くから伝わる伝説や民話についての調べ学習に利用。 ○ 　ふるさとの歌 　 ・ 県内の郷土の音楽の歌詞の調べ学習に利用。わらべ歌，民謡，祭りばやしなど。 ○ 　伝統工芸 　 ・ 代々受け継がれている伝統工芸についての調べ学習に利用。 ○ 　有名人 　 ・ 郷土の偉人についての調べ学習に利用。 ○ 　まつり 　 ・ 郷土の祭りについての調べ学習に利用。 ○ 　名産・特産 　 ・ 各地域の名産品や特産品についての調べ学習に利用。 ○ 　資料はここ 　 ・ 茨城についての調べ学習に利用できる参考文献，資料などの検索に利用。 ○ 　○×クイズ 　 ・ 茨城についてクイズ形式で学習するために利用。 ○ 　参考 　 ・ このサイトに関する参考資料，参考文献，協力者，助言者のページ。 イ 　教材の構成 　 　解説指導型のＷｅｂ教材であり，図3-1のトップページから各コンテンツにリンクする。リンク先から前のコンテンツに戻る場合は，Ｗｅｂブラウザのツールバーにある「戻るボタン」をクリックするようにし，リンクを複雑にしないようにした。
(3)	開発の方法
	ア 　開発の方針 　 ・ 簡単にＷｅｂ教材を作成することができること。 ・ 情報の窓口となり，広がりのある教材にすること。 ・ 様々なコンテンツの情報を集める場であること。 ・ 新しいＷｅｂ教材を増やすためのきっかけ作りのページであること。 ・ 人との関わりをもたらす教材作りに努めること。 　 　 イ 　開発の手順 　 �@ 　参考資料を探す。 　 ・ 学校図書館，公立図書館等にある茨城県に関する寄贈資料など。 ・ 地域の郷土博物館や市役所，役場にある郷土に関する資料など。 ・ 社会科の副読本など。 �A 　教材に掲載する画像などの素材を収集する。 　 ・ 必要な写真の撮影など。 ・ 地域の写真愛好家の方への依頼など。 �B 　教材に掲載する画像や作品などの資料作成者，編集者，出版社等に著作権の許諾をとる。 　 ・ インターネット上で情報を公開する場合には，著作権を侵害しないよう十分な配慮が必要である。著作権を侵害した場合には，罰則として，３年以下の懲役又は300万円以下の罰金が科せられる（申告罪）。 �C 　アプリケーションソフトウェアを利用して教材を作成する。 　 ・ アプリケーションソフトウェアの解説書をもとに作成。 ・ Ｗｅｂページを完成させてからリンクする（途中で変更するのは手間がかかるため）。 ・ インターネットからダウンロードして利用するフリー素材については，利用上の注意をよく読んでから利用すること。他のＷｅｂページの画像等を勝手に利用することは，著作権の侵害になるので，勝手にＷｅｂページに掲載することは許されない。 �D 　資料提供者に作成したページの確認をしてもらう。 　 ・ 相手が電子メールを利用できれば，これを利用した方が便利である。不可能な場合には，印刷したＷｅｂページを郵送するなどして，確認をお願いする。 ・ 提供者への確認はしなくてよい場合もあるが，礼儀や著作権の侵害に配慮する意味でも大切である。 �E 　ＦＴＰクライアントを利用して，プロバイダのサーバにＷｅｂ教材を転送（アップロード）する。 　 ・ 「ホームページー・ビルダーＶ６」には，ＦＴＰクライアント機能が含まれているので，それを利用する。（インターネット上でも，フリーソフトのＦＴＰクライアントを得ることができる。） �F 　Ｗｅｂブラウザで転送したページを確認する。 　 ・ Ｗｅｂサーバ上に転送したファイルがきちんと表示されるかどうか確認する。 　 　 ウ 　ホームページ・ビルダーＶ６でページを作成する前に 　 (ア) 　Ｗｅｂページが閲覧できる仕組みについて 　 　インターネットに接続したパソコンとブラウザがあれば，いつでもどこでもＷｅｂページを見ることができる。またインターネットに接続するためには，プロバイダと呼ばれるインターネット接続業者と契約する必要がある。インターネットに常時接続しているプロバイダのサーバに，Ｗｅｂページを置くスペースを提供してもらって，そこにＷｅｂページのデータを転送する。 　Ｗｅｂページを閲覧したいときにはブラウザを使って，見たいページのＵＲＬ（Ｗｅｂページのアドレス）を入力するか，検索サイトでキーワードによる検索などをする。これにより，知りたい情報を保有しているサーバから，データを自分のパソコンにダウンロードする。 　 　 (イ) 　ＷＷＷ（World Wide Web）とは 　 　ＷＷＷを簡単に言えば，インターネット上にある様々なＷｅｂページを相互に結んだハイパーテキストの集まりである。 　ＷＷＷでは，テキスト（文字だけのデータ）だけではなく，画像や音声，更に動画のやりとりもできるようになっている。つまり，ネットワーク上の様々な形式のデータを，簡単に見ることができるシステムなのである。 　 　 (ウ) 　ブラウザ(browser) とは 　 　ブラウザとは，ＨＴＭＬ言語を使って書いたテキストファイルを翻訳して表示させるアプリケーションソフトウェアである。主なブラウザには，Internet ExplorerやNetscape Navigator などがある。また，UNIX系ＯＳ上で使えるLynxなどのテキストベースのブラウザもある。とにかく，これらのブラウザがないことには，ＨＴＭＬファイルを図3-3 のような形式で見ることはできないのである。る。これにより，知りたい情報を保有しているサーバから，データを自分のパソコンにダウンロードする。 　 　 (エ) 　ＵＲＬ(Uniform Resource Locator)とは 　 　ＵＲＬを簡単に言えば，インターネットの住所である。ＨＴＭＬでリンクするときや，見たい情報のあるＷｅｂページをダイレクトに見たいときに，このＵＲＬを使用する。指定の方法は，次のようになっている。 protocol://host.domain/pass/file.htm ↓ プロトコル名://ホスト名.ドメイン名/パス名/ファイル名 プロトコル（ＷＷＷではhttpを使用している）とは，ＨＴＭＬファイルの転送手順を示したもので，ＨＴＭＬで記述されたファイルを見るための，まじないのようなものだと理解してもいいだろう。 　ホスト，ドメインは，Ｗｅｂサーバのアドレスを表している。パスの部分は，ディレクトリ（フォルダと同じようなもの）名を指定し，目的のファイル名を最後に指定する。このＵＲＬは，全世界中のすべてのＷｅｂサーバにあるファイルに付けられ，しかも，同じものは一つとして存在しないように構成されている。 　 　 (オ) 　ＨＴＭＬ(HyperText Markup Language) について 　 　ＨＴＭＬは，ハイパーテキスト形式で文書を表示させるための言語である。 　今回は，Ｗｅｂ教材の作成に図3-4に示すようなホームページ作成ソフトウェア「ホームページ・ビルダー」を利用するので，ＨＴＭＬタグをダイレクトに記述するようなことはしない。しかし，この文書は，実際には図3-5に示すように，英文字を不等号で囲むＨＴＭＬタグで作成されている。つまり，ワープロ感覚で作成した文書が，自動的にＨＴＭＬファイルに変換されているということである。 　 　 　ＨＴＭＬファイルのソースは，ホームページ・ビルダーの「ＨＴＭＬソース」表示機能を使えば見ることができる。また，作成されたＨＴＭＬファイルは，拡張子が「.htm」という形で保存される。 　 　 　ＨＴＭＬタグの構造は，図3-6のようになっている。Ｗｅｂ教材をホームページ・ビルダーのページ編集画面で作成するときに，ＨＴＭＬソース画面を開きながら行えば，簡単なタグを覚えていくこともできるので一石二鳥である。 　 　 　 エ 　ホームページ・ビルダーＶ６を利用したＷｅｂページの作成 　 (ア) 　ホームページ・ビルダーの画面構成 　 　 　 (イ) 　タスクメニューを利用したページ作成の流れ 　 　「ツールバー」や「メニューバー」でも同じように作成できる。ここでは，ページ作成の流れが分かりやすいように「タスクメニュー」を利用した説明をする。 　ページを作成する前に，図3-8のようにページを保存するフォルダを，ローカルディスクに作成しておく。また，ＨＴＭＬファイルを保存するフォルダの中に新規フォルダ（ここではフォルダ名を「gazo」とした）を作成し，このフォルダの中にページで使用する画像やイラストなどを保存できるようにしておく。 　ページをフォルダで管理すると，ページ全体の再構成がしやすくなる。フォルダ名，ファイル名は半角英数のみを利用し，かつ，８字以内で作成しないと，ＷＷＷ上で認識されないことがあるので注意する。異なるフォルダ名の中にある同一名のフォルダは，別なものとして認識されるため，同一名のファイルを作成することができる。 �@ 「スタート」からページの作成方法を選ぶ。 　「標準モード」を選択 「標準モード」は，見る人のＯＳやブラウザの種類やバージョンに表示が影響を受けにくいので，制作者の意図に近いレイアウトで表示される。ただし，好きな位置に配置するには表組みを使用するなどのテクニックが必要で手間がかかるため，「どこでも配置モード」の方がよい。 �A ページ全体に関する基本設定をする。 　「ページの設定」をクリックすると順にダイアログボックスが表示される。 　「ページのタイトル」を入力ページタイトルはＷｅｂブラウザのタイトルバーに表示される。 「背景色とテキスト色」 　背景やテキスト色のダイアログで「カラーギャラリー」を選択すると簡単に背景やテキストの色を設定することができる。この他にも，あらかじめ用意してある画像ファイルやウェブアートデザイナーで作成したファイルも，背景にすることができる。 �B 文字，画像やリンクなど，そのページを構成する部品を挿入する。 「ページ部品の挿入」をクリックする。 文字（テキスト）は，ワープロ感覚で挿入できる。 タイトル文字（ロゴ）はウェブアートデザイナーというツールで簡単に作成することができる。 画像やイラストは，ファイルがあるフォルダを開き，ファイルを指定してから「開く」をクリックすると編集画面に貼り付けることができる。 「リンクの挿入」をクリックすると，ダイアログボックスが表示され，「通常のリンク作成」と「メールリンクの作成」が選択できるようになっている。 自分で作成したページをリンクする場合は，「選択」をクリックして，目的のファイルを選ぶ。 �C 作成したページを保存する。 「ページの保存」をクリックすると，「名前を付けて保存」のダイアログが表示される。わかりやすいファイル名を入力し，「保存」をクリックする。作成したページはＨＴＭＬファイルで保存される。 画像ファイルは，ＨＴＭＬファイルと同じフォルダ，またはその下層のフォルダに存在しないと，ＷＷＷ上で表示されないことがある。 作成したＨＴＭＬファイルの中に画像ファイルがある場合には，画像ファイルをコピーするダイアログが表示される。 あらかじめ作成した画像保存用のフォルダを「参照」から選択し，その中にファイルをコピーする。 　 �D Ｗｅｂ教材を公開する。 　Ｗｅｂ教材を構成するＨＴＭＬファイルと画像ファイルなどを，サーバの保存用スペース に転送する。この場合，Ｗｅｂページの構成を把握している管理者が転送することが望まし い。 　 　 (ウ) 　画像の編集をするには 　編集したい画像を選択し，右クリックすると「画像の編集」が表示される。 　クリックすると，四角の枠が表示される。枠のサイズを変更できる。枠内でダブルクリックすると，枠の形に切り抜かれる。 クリックするたびに，画像が90度ずつ回転する。 ▼をクリックして，使いたい効果を選択すると，画像に効果が設定される。 ＧＩＦ形式やＪＰＥＧ形式で変換できる。作成ページの表示サイズに合わせて，元の画像サイズを変更できる。 （注）デジタルカメラで撮影した写真は，あらかじめのサイズの縮小や明るさの調節をしてから利用した方がよい。 　 　 (エ) 　タイトル文字やボタンを作成するには 　 　タイトル文字（ロゴ）やボタンなどを作成するためのツール「ウェブアートデザイナー」を使用して作成する（図3-18）。このツールは，入力した文字をデザイン化したり，写真にフォトフレームを付けたり，手書き風の地図を作成するなど，いろいろな素材（オブジェクト）を簡単に作成するときにも使える（図3-19）。 　また，写真のサイズの変更や明るさの調節など，画像を加工するいろいろな機能がある。 　 　 �@ ボタンを作る。 　ボタン作成のアイコンをクリックする。 　「ボタン作成ウィザード」ダイアログが表示されるので，ダイアログに沿って作成する。「完了」ボタンをクリックすると，キャンバスの上にボタンが表示される。 �A ボタンに載せる文字を作る。 　ロゴ作成のアイコンをクリックする。 　「ロゴ作成ウィザード」ダイアログが表示されるので，ダイアログに沿って作成する。 　「完了」ボタンをクリックすると，キャンバスの上に文字が表示される。 　 �B ボタンと文字を組み合わせる。 　文字をドラックして，ボタンの上に移動させる。 　 �C ボタンと文字を一つの画像として保存する。 ツールバーの「オブジェクトの選択」アイコンが選択されていることを確認する。 ボタンと文字を囲むようにドラッグして選択する。 続いて「Ｗｅｂ用保存ウィザード」アイコンをクリックする。 　 「Ｗｅｂ用保存ウィザード」ダイアログが表示されるので，ダイアログに沿って作成する。 　 　 (オ) 　表をつかって複数の画像や文章などを整理するには 　 　表を使うと，複数の画像や文章などの情報を整理して配置することができる。 　図3-25のツールバーを用いて，図3-4 のように簡単に表を作成することができる。 　 　 (カ) 　その他の便利な機能について 　 ・ 　ウェブアニメータ 　 　アニメーションを作成するためのツールで，イラストを動かしたり，文字や写真を点滅，回転させたりするなど，動く画像を作成することができる。 ・ 　ウェブビデオスタジオ 　 　このツールを利用すると，ビデオ画像をパソコンに簡単に取り込むことができる。また，タイトルやＢＧＭなどの効果を取り入れたビデオ編集もでき，作品をＷｅｂ教材に簡単に組み込むことができる。 ・ 　ＣＧＩプログラム 　 　ＣＧＩとは，ＨＴＭＬのみでは実現できないアクセスカウンタや電子掲示板，アンケート集計などに利用される技術であり，サーバとクライアントがデータをやりとりするときなどに使われる。ホームページ・ビルダーでは，このＣＧＩを利用するするためのスクリプトを，ＣＧＩプログラムといっている。 ・ 　スクリプト 　 　ＨＴＭＬと組み合わせる簡易プログラム言語のことで，JavaScriptやVBScriptなどがある。これを使って，簡単なアニメーションや時間によってテキストの表示を変えるなど，ページに動きをつけることができる。 ・ 　Javaアプレット 　 　Sun Microsystems社が開発したプログラム言語である。ＨＴＭＬを利用して動的なページを生成する。 ・ 　ダイナミックＨＴＭＬ 　 　アニメーションＧＩＦやJavaScript，スタイルシートなどの，動きのあるＷｅｂページを作ることができる技術の総称。
(4)	今後の課題
	・ 　多くの情報を盛り込めるよう，地域の情報や画像などの提供者を多くすること。 ・ 　地域の公共施設と連携を図ること。 ・ 　見やすいページにするために，利用者の意見などを採り入れながら再検討すること。

---

[目次へ]