はじめに

　２学期の最初の日、「室蘭工業大学でインターネットの研修があるけど行くかい」といわれて、高額な受講料に「行きたいけど受講料がちょっと高くない？」と返事をした私。研修部が学校側とうまく話をつけてくれて大変幸いなことに経費学校負担で出張させてもらえた。インターネットの研修は過去に数回受けているが、たいていは多くの機能の説明やデモンストレーション中心で、よくて会場に数台置かれたパソコンでの体験がせいぜいだった。したがって、インターネットでのホームページが簡単に作れるらしいことは知っていたが、自分で作ったことがなく、今回の室工大で一人一人を占有しての実習付きの研修は、私としては大変魅力的であった。

　本稿は、その研修体験記を中心にまとめたものである。今回の研修を通し、プロバイダーに加入していなくてもインターネットの開設時に使うホームページ作りは実習できることも確かめられ、今後の生徒の実習範囲も大幅に広がったように思える。現実的にはいつの時点から本校でもインターネットの利用ができるかわからないが、教える側の研鑽はさらに進めておきたいと考える次第である。

第１章　「室蘭工業大学　高度技術研修」講義ノートより

　今回の室工大での研修ではインターネットだけに限らず、関連するイントラネット関係の講義や講演などもあったが、本稿ではインターネットに関する基礎知識部分とホームページ作成に関する基本部分だけを扱うことにした。本章はその講義ノートである。

第１講　インターネット利用の基礎（情報工学科　杉岡一郎　教授）

１．インターネットの歴史の概要

１．１　海外におけるコンピュータネットワークの歴史

（１）ARPANET(Advanced Research Project Agency NETwork)（1969年）

• アメリカ国防総省が、核戦争が起きた場合に備えて、ダメージを最小限に押さえるために構築した分散管理型ネットワークである。
• 米国内の大学、研究所のコンピュータを接続し、コンピュータ資源を共有しながら軍事応用を含む科学技術の研究を行うために構築された。
• 初のパケット交換方式の実用化が実現した。
• しかし、後にNFSNETに吸収される。
• このシステムの電子メールで意見交換を行ってCommon Lispが開発される。
• TCP/IPの原形を公開。

（２）BITNET(Because It's Time NETwork)（1981年）

• ニューヨーク市立大学とエール大学のIBM機を接続してコンピュータ資源の共有化が図られた。
• 専用回線を使用し、回線料はIBMが負担した。
• 電子メール(E-mail)、ファイル転送(FTP)等のサービスを提供した。
• 日本のゲートウェイは、東京理科大である。
  　　□CSNET（Computer Science research NETwork)（1981年)
  
• UNIX上のネットワークである。
• 公衆回線パケット交換網を利用している。
• 電子メール交換ができる。
• 日本のゲートウェイは、東大大型計算機センター（後に学術情報センターに）

（３）NSFNET(National Science Foundation NETwork：全米科学財団)（1984年)

• 学術研究ネットワークである。
• スーパーコンピュータ利用、電子メール、ファイル転送等のサービスを提供。
• この一部が今日のインターネットに発展した。

１．２　我が国におけるコンピュータネットワークの歴史

（１）N１ネット（1981年）

• 全国国立大学大型計算機センターに、その他の大学のコンピュータセンターを接続
• TSS、リモートバッチ等のサービスを提供した。
• 専用回線を使用した。
• しかし、下記の（３）の学術ネットに統合化されつつある。

（２）JUNET（1984年）

• UNIX上のネットワークである。
• 公衆電話回線を利用していた。
• しかし、1994年に解散した。

（３）学術情報センターネットワーク（1987年）

• 全国の国公私立大学、高専、短大等をネットワークしたものである（高校は不可）。
• 大型計算機センター、情報処理センター、図書館、国立大学共同利用機関等のコンピュータをネットワークしている。
• パケット交換専用回線を使用している。
• 学術教育研究機関のインターネット接続に利用されている。

２　インターネットの利用

２．１　インターネットとパソコン通信との区別

• パソコン通信はホストコンピュータに接続する集中管理形態である。
• インターネットは、コンピュータまたはLANを芋づる式に接続する分散形態

２．２　インターネット利用の日向の部分

• 世界に向けての情報の発信ができる

  　　○地域情報、企業情報、製品情報の発信が可能となる。
  　　○WWWの利用ができる。
  　　○ビジネスチャンスの拡大が期待できる
  

• 世界中からの情報の収集ができる

  　　⇒無尽蔵の情報の中から必要な情報を検索できる。
  　　⇒新しいビジネス創出のアイディアに生かせる
  　　　＊この部分が非常に強調されているが、鵜呑みにするのは危険である。

２．３　インターネット利用の日陰の部分

• 無防備システムであり、一種の無法社会である。
  　　　⇒万人が善人とは限らないので、危険管理を自分の責任で行う必要がある。
  
• セキュリティの不安がある
  　　　⇒データ漏洩、ハッカーの侵入などに対する防御が必要
  　　　⇒Fire Wall、暗号化技術などが研究されているがまだ完全なものはない
  
• 玉石混交の情報である
  　　　⇒意図的でないにしても不正確あるいは誤った情報があるかもしれない
  　　　⇒自分の判断で取捨選択の必要がある
  　　　　（例）1996年1月、ソニー社がアップル社を買収する、との偽情報が広まる
  
• ネチケット（ネットワーク・エチケット）の問題
  　　　⇒表現の自由とモラルの問題
  　　　　著作権、知的所有権保護の問題
  
• 魅力あるホームページ作成への負担増
  
• ホームページは作っただけでは多くの人にみてもらえるとは限らない
  
• 情報は生ものであるから、常に新鮮さを保たなければならない
  　　　⇒専任のスタッフが必要となる
  
• 話題の「電子マネー」に潜む危険性
  　　　⇒まだ研究途上である
  　　　　＊こういった部分を十分理解した上で利用する必要がある

２．４インターネットの使い道

• 電子メールの利用
  　　　⇒最寄りのプロバイダと契約
  　　　⇒しかし、これだけならパソコン通信(Nifty Serve,PC-VAN等)で十分
  
• WWW(World Wide Web)の利用
  　　　⇒しかし、最近ではパソコン通信からもWWWへアクセス可能となった。

２．５　WWWの利用

プロバイダの種類は次の通りである。

�@一次プロバイダ
Wide Projectが管理しているコンピュータに接続している大手プロバイダ
　　＜特徴＞・通信速度が速い
　　　　　　・通信回線容量が多い
　　　　　　・料金が比較的高い
�A二次プロバイダ
一次プロバイダに接続している中小のプロバイダ
　　＜特徴＞・通信速度は千差万別
　　　　　　・通信回線容量と繋がり易さもまちまちなので注意する必要あり
　　　　　　・料金が比較的安い

２．６　ホームページの持ち方

ホームページの持ち方にも何通りかある。

�@契約したプロバイダに接続した自分のコンピュータに持つ方法
　　⇒事実上不可能
�A契約したプロバイダのコンピュータの中に持つ方法（共有サーバ方式）
　　⇒プロバイダのホームページから自分のホームページに分岐する形態になる
�Bプロバイダからコンピュータを借りて、そこにホームページを作る方法（専用サーバ方式
　　⇒ユーザのホームページに直接リンクする形態になる
�Cユーザのコンピュータを預かり、管理してホームページを作らせるプロバイダもある

第２講　WWW利用技術（前編）　（情報工学科　　田中和之　助教授）

１　WWWの歴史としくみ

＜キーワード＞

• インターネット
• コンピュータネットワーク
• IP　Address
• 157.19.134.1
• epsilon2.csse.muroran-it.ac.jp
• ドメイン名
• 通信用ソフト
• アプリケーションソフトの互換性
• World Wide Web（略してWWW）
• WWWとワープロとの相違
  　　　　ワープロ⇒自分のコンピュータの文書を編集し印刷することが目的
  　　　　WWW⇒他のコンピュータの中の文書をディスプレイ上でみることが目的
  
• FDやHDを介しての文書の読み取り
• ＷＷＷは相手方のコンピュータ内部にある文書を直接みる
• WWWの進化←制作者のソースプログラムのネットワーク上での公開の賜物
• Mosaic
• Netscape
• Internet Explorer
• WWWブラウザ←上記３つのアプリケーションソフト
• WWWサーバ⇒情報を抱えているコンピュータの面倒をみるプログラム
  　　　　　　　　　WWWクライアントの要求に応じて情報を送り出す
  
• WWWクライアント⇒情報を入手するときに用いるプログラム
  　　　　　　　　　　　　WWWブラウザ、FTP
  
• ファイル名
• ディレクトリ構造
• URL(Uniform Resource Locator)
• http://www.csse.muroran-it.ac.jp/kazu/homepage.html
• http←通信方法
• www.csse.muroran-it.ac.jp←ドメイン名
• kazu/homepage.html←ファイル名

２　HTMLの基本文法

• WWWで見ることができるデータは、ある決められたスタイルで書かれた物
• そのスタイルで書かれてあれば、NetscapeでもMosaicでもInternet Explorerでも見ることができる
• この形式のファイルはHTMLファイルと呼ばれる。
• 作成は一太郎や松などのワープロでも、MIFESなどのエディターを使っても作成できるが、重要なことはテキスト形式で保存されていること。
• HTMLのスタイルで書かれてあっても、一太郎特有の形式（ファイル名.jsw）で保存されていたのでは他のコンピュータからは読むことはできない。

＜例１＞単に「HELLO」と一行表示するだけ。
ファイル名：mypage0.html

＜ＨＴＭＬ＞
＜ＢＯＤＹ＞Hello＜／ＢＯＤＹ＞
＜／ＨＴＭＬ＞

＜例２＞上の例にNetscapeの画面の一番上にタイトル「My Home Page 1」をつける
ファイル名：mypage1.html

＜ＨＴＭＬ＞
＜ＴＩＴＬＥ＞My Home Page2＜／ＴＩＴＬＥ＞
＜ＢＯＤＹ＞Hello＜／ＢＯＤＹ＞
＜／ＨＴＭＬ＞

＜例３＞改行・段落分けなど
ファイル名：mypage2.html

＜ＨＴＭＬ＞
＜ＴＩＴＬＥ＞My Home Page 1＜／ＴＩＴＬＥ＞
＜ＢＯＤＹ＞Hello.＜Ｐ＞
This is my home page.＜ＢＲ＞
How are you?＜Ｐ＞
if you read this page,would you please reply me?＜／ＢＯＤＹ＞
＜／ＨＴＭＬ＞

【解説】

• ＜ＨＴＭＬ＞はHTMLファイル全体の始まりを意味する。
  　　　＜／ＨＴＭＬ＞はHTMLファイル全体の終わりを意味する。
• ＜ＴＩＴＬＥ＞はTITLEの始まりを意味する。
  　　　＜／ＴＩＴＬＥ＞はTITLEの終わりを意味する。
• ＜ＢＯＤＹ＞は本文の始まりを意味する。
  　　　＜／ＢＯＤＹ＞は本文の終わりを意味する。
• ＜ＢＲ＞は改行を意味する。
  　　　＜Ｐ＞は段落分けを意味する。
  　　＊HTMLではファイル作成時にリターンキーで行った改行は無視される。

＜例４＞文字の大きさ各種
ファイル名：mypage3.html

＜ＨＴＭＬ＞
＜ＴＩＴＬＥ＞My Home Page 3＜／ＴＩＴＬＥ＞
＜ＢＯＤＹ＞
＜Ｈ１＞Muroran Institute of Technology＜／Ｈ１＞
＜Ｈ２＞Muroran Institute of Technology＜／Ｈ２＞
＜Ｈ３＞Muroran Institute of Technology＜／Ｈ３＞
＜Ｈ４＞Muroran Institute of Technology＜／Ｈ４＞
＜Ｈ５＞Muroran Institute of Technology＜／Ｈ５＞
＜Ｈ６＞Muroran Institute of Technology＜／Ｈ６＞
＜／ＢＯＤＹ＞
＜／ＨＴＭＬ＞

【解説】
・＜Ｈ１＞最も大きい文字
　＜Ｈ４＞標準状態
　＜Ｈ６＞最も小さい字
＊＜Ｈｎ＞と＜／Ｈｎ＞で囲まれた部分の前後は必ず改行される。

＜例５＞リンクについて
　ここでは、２つのファイルhyper1.htmlとhyper2.htmlの相互のリンクを設定するものとした。すなわち、hyper1.htmlをWWWブラウザで表示させ、キーワード「ここをクリック」部分をクリックするとhyper2.htmlが表示される。また、逆にhyper2.htmlを表示させ、キーワード「表示する」部分をクリックするとhyper1.htmlが表示されるものである。リンクについての文法は、
　　＜Ａ ＨＲＥＦ＝”リンク先のページ(URL)”＞キーワード＜／Ａ＞
である。

　ファイル名：hyper1.html

＜ＨＴＭＬ＞
＜ＴＩＴＬＥ＞hyper1.html＜／ＴＩＴＬＥ＞
＜ＢＯＤＹ＞
＜Ｈ１＞ハイパーリンクのテスト＜／Ｈ１＞
＜Ａ ＨＲＥＦ＝"./hyper2.html"＞ここをクリック＜／Ａ＞すると、ファイルhyper2.htmlの内容が表示されます。
＜／ＢＯＤＹ＞
＜／ＨＴＭＬ＞

ファイル名：hyper2.html

＜ＨＴＭＬ＞
＜ＴＩＴＬＥ＞hyper2.html＜／ＴＩＴＬＥ＞
＜ＢＯＤＹ＞
＜Ｈ１＞このファイルはhyper2.htmlです。＜／Ｈ１＞
ファイルhyper1.htmlの内容を＜Ａ ＨＲＥＦ＝"./hyper1.html"＞表示する。＜／Ａ＞
＜／ＢＯＤＹ＞
＜／ＨＴＭＬ＞

＜例６＞画像データの貼り付けについて
　行の途中に画像データを入れることができるので、「インラインイメージ(In-Line Image)」と呼ばれている。タグは下のように設定する。なお、イメージを貼り付けた時、イメージはその行の中の文字と同等の扱いとなる。つまり、イメージと文字が続いて表示される。このことにも注意が必要であろう。

＜ＩＭＧ ＳＲＣ＝”イメージファイルのURL”＞

ファイル名：inline.html

＜ＨＴＭＬ＞
＜ＴＩＴＬＥ＞inline.html＜／ＴＩＴＬＥ＞
＜ＢＯＤＹ＞
ここに＜ＩＭＧ ＳＲＣ＝"./lenna256.gif"＞イメージを入れる。
＜／ＢＯＤＹ＞
＜／ＨＴＭＬ＞

＊イメージファイルには様々なファイルフォーマット（ファイル形式）があるが、GIF形式あるいはJPEG形式が現在最も多く使われている。ちなみにGIF形式は使える色数が最大256色で、もともとパソコン通信でイメージを送るために開発された形式である。

＊その他にも表の作成や音声データの入れ方などいろいろ応用的な事項もあるが、ページ数の関係もあり本稿では省略した。しかし、これらのことも使用環境さえ整っていれば簡単であることが実際の体験からわかった。

第３講　WWW利用技術（応用）　　（情報工学科　　堀　勝博　助手）

１　人に優しいホームページの作り方

　アクセスしやすいホームページの制作を目指すことが大切である。

◎作り方のポイントとして次の４点があげられる。

�@構成の指針

●必須項目

• 情報アクセスのためのインデックス
• 発信情報の分割（原則１ページ１テーマ）
• 作者の連絡先やコピーライト

●留意点

• 通信時間を考慮に入れたデザイン
  　　⇒必要以上にトップページを重くしない
  　　　よけいなイメージを載せない
  　　　複数バージョンによる対処
  

�Aインデックス関連
●ハイパーテキスト

• ページの前後関係が決まっていない⇒リンクの定義が必要

●インデックス

• 主要なページへのリンクを定義した効果的情報アクセスのためのリンクメニュー
  　　⇒基本的な情報提供メニュー
  　　　新着（更新）情報
  

�Bイメージ関連
●画像データはテキストに比べ非常にデータ量が大きいので、必要最小限に押さえることが大事
●画像データ圧縮

• 代表的データフォーマット
  　　(1)GIF（イラスト等色数が限られた画像向き）
  　　(2)JPEG（写真等フルカラー画像向き）
  　　これらの特性を生かしてデータ量をコンパクト化
  

●画像取り込み・画像制作

• デジタル画像を得る方法は次の通り
  　(1)アナログ画像経由
  　　・スキャナによる取り込み
  　　・デジタルカメラによる取り込み
  　(2)直接デジタル画像
  　　・ペイントソフトによる画像制作
  　　・著作権フリーの画像の入手
  

�C間違いのないHTMLを
　HTML文書を書くのは非常に易しいが、その分、タイプミスや記述の誤りなどが起こりやすいのも事実である。
・引用符による記述ミス
　URLを記述する際に、引用符で囲むが、その引用符を忘れたり、付けすぎると表示がおかしくなる。
（例）＜Ａ ＨＲＥＦ＝"http://www.foo.co.jp/＞Foo Homepage＜／Ａ＞
　　　　　　　　　　　　　　　　　　　　　　　↑
　　　　　　　　　　　　　　　　　　クォートがない
　　　＜ＩＭＧ ＳＲＣ＝"foo NAME="bar"＞
　　　　　　　　　　　　　　　　↑
　　　　　　　　　　　クォートがない
・終了タグを間違える
　よく起こるミスとして、見出しタグにおいて、開始タグと異なるタグを書いてしまうことがあげられる。
（例）＜Ｈ２＞はじまり＜／Ｈ３＞
　　　　　　　　　　　　　　　　↑
　　　　　　　　　　　終了タグが違う
また、終了タグのスラッシュ（／）を忘れてしまう場合もある。
（例）＜ＰＲＥ＞
　　　これは整形テキストです。
　　　＜ＰＲＥ＞
　　　　↑
　　　スラッシュがない
・タグの入れ子のミス
　タグを入れ子にした場合、終了タグの位置を間違えると表示がおかしくなる。また、アンカータグ（＜Ａ＞）のように入れ子にしてはいけないタグを入れ子にしたりするミスもある。
（例）＜ＳＴＲＯＮＧ＞This is ＜ＥＭ＞WRONG＜／ＳＴＲＯＮＧ＞text＜／ＥＭ＞　　　　　　　　　　　　　　　　　　　　　　　　　　　　　↑　　　　　　　↑
　　　　　　　　　　　　　　　　　　　　　　　　　　　入れ子ミス
　　　＜Ａ ＨＲＥＦ＝"/"＞This is ＜Ａ ＨＲＥＦ＝"~yaj/"＞Yaj＜／Ａ＞'s homepage＜／Ａ＞
　　　　　　　　　　　　　　　↑　　　　　　　　　　　　　↑
　　　　　　　　　　　　　終了タグの位置が違う　　　　終了タグの位置が違う
・その他
　その他、ブラウザによっては、段落タグの取り扱いが期待通りにならない場合があるなど、いろいろな誤記入の例について説明があったが、本稿では上記基本的なもののみの説明で終了したい。

２　マルチメディア技術
ヘルパーアプリケーションとプラグイン
�@ヘルパーアプリケーション＝ブラウザ外部
�Aプラグイン　　　　　　　＝ブラウザ内部
　　⇒代表的Netscapeプラグイン
　　　　・QuickTime
　　　　・MIDPLUG
　　　　・ShockWave
　　　　・Live3D
　これらの事項についてもていねいな説明があったが、内容的にはかなり高度な内容を含むため、本稿では見出し程度にとどめておくこととする。

第２章　ホームページ作成体験の感想について

　大切ではあるもののやや内容が多めな講義が続いた２日目午後、待望の実習となった。私が最初に作ったのは、第１章の第２講の中で例示のあった例１〜例６迄の基本例であったが、これはすぐに終わってしまった。実はこれらの例に限らず、HTMLの文法に従って記述していくことは非常に簡単なのだが、その入り口となるUNIXによるエディタの起動や保存の仕方などの部分がいつも使っている機械ではないのでやや手こずってしまった。何度も何度も間違え、その都度アシスタントで補助してくれた院生や学部生の人に助けてもらうのは何とも恥ずかしかった（でも、教員になって以来大型計算機を使って仕事をすることは皆無になってしまったから仕方のないことか・・・）。加えて、自分でインターネットを使っていないせいもあり、Netscape Navigatorの操作法もすぐには修得できず、日頃からインターネットを使っている方がスイスイと進めていく横で悪戦苦闘していた私でした。基本例を終えてもかなり時間があったので、HTMLの文法書に従ってどんどんと作っていったが、時間がなおも余るので後半はホームページ作りから離れてインターネットに入って（と言っても覗くだけだが）いろいろな所のホームページを見たり、山梨大学に代表される教育におけるインターネットの利用実践の進めているところの論文などを見ていた。こうした利用を通して、研究を進めて行くためにはインターネットは大変便利な道具であることが実感できたのも今回の一つの収穫のように思えます。

　このようにして初めてホームページ作成を体験しましたが、ホントに簡単でした。しかし、作り方が簡単な分だけ実はホームページの見た目の評価は材料になる画像の鮮明度や見やすい構造といった点にあることもよく実感できました。極論すると作成するときに使う素材次第でホームページの見栄えが決まると言ってもよいように思います。

おわりに

　学校祭の後片付けの終了後、それまでの半月あまりなかなか落ち着いてワープロに向かえなかったことの反動のように一気にこの原稿を書き上げてしまった。本当は室工大で研修を受けていた時点から書き出せばよかったのだろうが、現実には研修中は時間さえあればインターネットを使ってあちこちにアクセスし、たくさんの情報をながめることに専念していたため、原稿をまとめる余裕まではなかった。ただ、そうした「遊び」のなかで山梨大学にいる友人が講師から助教授に昇任していたことやNTTが進めている「コネットプラン」についての実践報告がどこにあるかもわかり、これからの研究には大いに役立った。国立大学で自由にインターネットが使えることは「大学」だから当然といえば当然だが、情報教育の研究を進めている私にとってはうらやましい限りであった。

　本稿は一気に書き上げたためもあり第１章がページ数全体のほとんどを占め、レポートの構成の仕方としては全く落第なものとなってしまった。第２章をカットして第１章の内容だけを小分けにした方が良かったような気もするが、やや多忙な時期ゆえご勘弁願いたい。なお、本稿は８月２１日〜２３日の室蘭工業大学における「平成８年度　高度技術研修」のうち、インターネットの基礎部分だけでまとめたものだが、今後は過去に受けたインターネット関係の研修のノートも参考にしてホームページのインタラクティブ化に関するものなど本稿で割愛した部分も加えてまとめてみたいと思っている。加えて、本校でもインターネットが利用できる状況が出てきた際には、数学の授業でのインターネットの利用についても模索してみたいと考えている。数学におけるインターネットの利用については、すでに実践されている方もおられると思うので、体験談などをお聞かせ願えれば大変幸いである。

【参考文献】
・入門ＨＴＭＬホームページ作りのすすめ　（富田憲範　著）　ジャストシステム社
・平成８年度　室蘭工業大学　高度技術研修　講義用各種プリント