ホームページの作成入門


 このページは電子情報通信学会誌の1997年3月号掲載記事「ホームページの作成入門」を、学会の許可を得て公開するものです.

ABSTRACT

1. はじめに
2. WWWの基本的な仕組みと特徴
3. HTMLでテキストを記述する
4. ホームページのハイパーリンクを書く
5. ホームページにイメージを入れる
6. さらに高度なホームページ作成
7. おわりに

文献


ABSTRACT

初心者を対象にWWWの基本的な仕組みと特徴を解説し,ホームページ作成への入門を述べた.学会や研究分野における大会・研究会や論文特集などの案内・周知,論文・研究成果や技術解説の公表などをホームページの対象とした.このため,動画像・音声の表示やリアルタイム表示などは省略したが,写真や図などをきれいに表示する方法を解説した.また,ホームページ作成における注意点とエチケット的な側面にも触れた.


1. はじめに

研究者や技術者にとっては既にWWW (World Wide Web)は電子メールと共に必須ツールになっており,特に検索エンジンやサーバを利用した情報検索の有効性は非常に大きい(1) (2).情報を検索し受け取るのみではなく,研究成果や技術解説などをWWWで提供したいと考える研究者や技術者も増えているであろう.また,電子情報通信学会でもWWWを使って大会・研究会の開催予定や論文特集などの情報発信を行っている(3) (4).今後は更にタイムリーできめ細かい情報提供が望まれており,そのためには学会の参加メンバー一人一人がホームページを作成することが期待される.

WWWのホームページを書くための記述法は,HTML (Hyper Text Markup Language)という言語仕様になっている.最近ではホームページ作成用としてHTMLを生成するソフトも出てきているが,本稿ではHTMLを直接記述する方法を説明する.直接記述する方がWWWをよく理解できるし,また,WWW作成ソフトを使い始めると「かゆいところに手が届かない」という状況になって,結局「直接書いた方が速い」というようなこともあるからである.

さて,いきなりであるが,ホームページ作成の上達の極意を説明してしまおう.それは,他のホームページの書き方をまねすることである.WWWのホームページ上で,気に入った書き方や自分の知らない書き方を見つけたとする.WWWブラウザでソースファイルを見ることができる(注1)ので,該当するHTMLの記述・書き方のところを参考にするわけである.それでも,やはり必要最小限の知識は必要なので,以下ではWWWを使ったことはあるがホームページ作成は初めてという方を対象にホームページ作成への入門を解説する.

  (注1) 例えばNetscape Navigator3.0では[View]から[Document Source]を選ぶ.
  Internet Explorer3.0では[表示]から[ソース表示]を選ぶ.

2. WWWの基本的な仕組みと特徴

WWWは図1に示すように,クライアント・サーバモデルによって実現されている.パーソナルコンピュータ(パソコン)などにはクライアントとしてWWWのブラウザが実装され,ネットワーク内のサーバはHTMLというフォーマットに従ったファイル(ホームページとその構成要素であるイメージなど)を保存しているのみである.ホームページの表示中で通常ブルーで表示されている文字をクリックすると,ブラウザはサーバへファイル転送の要求を出す.

WWWの規格はサーバとブラウザ間の転送プロトコルHTTPと,転送されるファイルの種類およびマルチメディア・フォーマット(例えばテキスト,GIFフォーマットのイメージ,MPEGフォーマットのムービーなど)を規定している.フォーマットは図2に示すように,ファイル名の後に付与する3ないし4文字で識別する.

受け取ったファイルをどのように表示するか,はすべてブラウザに依存する.従って,ブラウザによって見え方が違うということが起こる.また,HTMLの言語仕様が発展を続けており,一方,ブラウザ独自の仕様拡張も行われている.このため,特に新しい機能については,あるブラウザでは表示されるが,他のブラウザでは全く表示されない,ということも起る.作成したホームページは代表的なブラウザで確認することが重要である.

WWWのもう一つの大きな特徴は,ホームページ中に別のホームページへのリンク(ハイパーリンクという)そのものを書き込めることである.この結果,ホームページからホームページ,サーバからサーバへとリンクができ,ユーザからみて情報の見方あるいは検索方法が格段に簡略化された.また,ホームページの作成・更新を分散化でき,技術資料などのドキュメントをネットワーク内で分散管理することが可能となった.マルチメディア識別子とハイパーリンクの導入がWWWの爆発的な普及のキーになったといえよう.


3. HTMLでテキストを記述する

3.1 一番簡単なホームページの書き方

簡単なホームページの例を図3に示す.<記号と>記号の間に書かれた文字xxxがHTMLの制御文字でありタグとよばれる.タグは通常ペアで使用され制御対象を<xxx>と</xxx>の間で指定する.ブラウザはタグを解釈して大文字にしたりリスト表示したり,イメージやムービーを表示する.HTMLの制御文字は大文字でも小文字でも同じであるが,大文字で書いた方が本文と区別がつきやすい.

では,ホームページを作ってみよう.まず適当なテキストエディタあるいはワープロでテキストファイル(ソースファイルになる)を作り,名前(ここではtest.htmlとする)を付けて保存する.次にブラウザでtest.htmlを開く(注2).ブラウザはこのようにローカルに保存されたファイルも表示できるので,サーバへ転送する前に必ず自分のハードディスク内で表示を確認する.以下の説明を参考にソースファイルを書いてみよう.書き終ったらtest.htmlを保存しブラウザで 必ずReloadして(注3)表示を確認しよう.

  (注2) 例えばNetscape Navigator3.0では[File]から[Open File]を選ぶ.
  Internet Explorer3.0では[ファイル]から[開く]を選び[ファイルを開く]を選択する.
  (注3) ブラウザがパソコン内にキャッシュを持っているのでReloadが必要である.
  例えばNetscape Navigator3.0では[View]から[Reload]を選ぶ.
  Internet Explorer3.0では[表示]から[最新の情報に更新]を選ぶ.
なお,日本語ではJIS, SJIS(パソコンで使われる), EUCの3種類の代表的な漢字コードがある.電子メールではJISが標準であるが,WWWでは3種類のどれを使っても代表的なブラウザは自動的に漢字コードを判別して表示してくれる.但し,ページ内では自動判別は機能しないから,同一ページ内では漢字コードは統一しておく必要がある.

3.2 プログラムや電子メールアドレス

C言語プログラムなどのフォーマット化されたテキストは,図4のように<PRE>を使って書くと自動改行されずフォーマットされたままの形で表示される.プリ・フォーマットは通常等幅の小さい文字で表示されるので,注意書きのようことを書く場合にも適している.

電子メールアドレスは図4のように<MAILTO>を使って書く.ブラウザ上でクリックすると電子メール送信の画面に切り換るので,コメントなどを受けるのに使う.なお,複数の人が管理するホームページでは、www-admin@www.mydom.co.jpのような架空アドレスを作り,そのアドレスへの受信メールを実際の担当者へ分配するメールリスト方式にすると更に便利である.また,ホームページの更新日を書いておくとユーザに親切である.


4. ホームページのハイパーリンクを書く

リンクする相手先のホームページの場所によって書き方が変る.図5のように相手先が他のWWWサーバの場合,自分のサーバの他のホームページの場合,自分のホームページ内のどこかへ飛ぶ場合の3通りある.

(1) リンク先が他のWWWサーバの場合

以下のように書く.HREFは,Hypertext Referenceの意味である.http://と">の間がWWWサーバのアドレスで,">と</A>の間の文字がブラウザ上でブルーに表示される.

  <A HREF="http://www.lab.kdd.co.jp/">
  KDD研究所</A>

  上記のように書くとブラウザでは以下のように表示される.
  KDD研究所
上例のように/記号で終る場合,サーバはディレクトリ内のindex.htmlあるいはwelcome.htmlを自動的に選択する.サーバ内の特定のホームページを示すときは,以下のようにディレクトリ名とソースファイルを書く.

  <A HREF="http://www1.kcom.ne.jp/~webbook/inet/">
  つないで楽しむインターネット</A>

  上記のように書くとブラウザでは以下のように表示される.
  つないで楽しむインターネット

(2) 自サーバ内の他のホームページの場合

(1)の例のように自分のサーバアドレスから書いてもよいが,以下のように自分のサーバアドレスを省略する方法がある.この書き方をするとブラウザを使って自分のハードディスク内でハイパーリンクが可能になる.ホームページの作成とチェックをローカルで行うためにも,自分のサーバ内のホームページのアドレスは以下のように書く方が望ましい.

  <A HREF="xxxx.html">
  ホームページxxxxへ飛ぶ</A>

  上記のように書くとブラウザでは以下のように表示される.
  ホームページxxxxへ飛ぶ
上の例でxxxx.htmlというファイルはtest.htmlと同じディレクトリに置いてある.別のディレクトリにある場合はディレクトリ名から記述する.サーバの最初のディレクトリ(これを/記号で示す)へのハイパーリンクは,パソコン上でローカルには確認できない.なぜなら/記号で示されるのはサーバ内で指定した「ホームページの格納場所」のディレクトリ(サーバルートディレクトリという)でパソコンは理解できないからである.ルートディレクトリへのリンクはサーバへ転送してから確認する.

(3) 自分のホームページ内の場合

ハイパーリンクは自分のホームページ内に飛ぶこともできる.論文や技術解説などでちょっと長いホームページの場合に,目次からクリックして該当ページに飛ぶような場合に使うと便利である.以下の例のように#記号が自分のホームページ内であることを示す.

  <A HREF="#ABSTRACT">
  「ABSTRACT」へ飛ぶ</A>

  上記のように書くとブラウザでは以下のように表示される.
  「ABSTRACT」へ飛ぶ
上の例では「リンク」という名前で示される場所がホームページ内のどこなのかを指定する必要がある.これは以下のようにホームページ内に<NAME>タグを付けて置く.

  <A NAME=ABSTRACT>ABSTRACT</A>

5. ホームページにイメージを入れる

5.1 GIFとJPEGのフォーマットを使い分ける

WWWでは写真もイラスト(ドロー系ソフトで描いた図)も「イメージ」として扱う.代表的なフォーマットとしてGIFJPEGの2通りがあり以下のような特徴がある.

GIFにしてもJPEGにしてもファイルはかなりの大きさになる.モデムアクセス(28.8/33.6kbps)でホームページ全体を表示する時間を30秒程度として,ファイルの総容量を約100kbyte程度に抑えることが望ましい.

写真や印刷物はスキャナで取り込みフォーマット変換してGIF/JPEGフォーマットにする.最近ではパソコンに接続できるディジタルカメラが安価に入手できるのでこれを使うのもよい.またVTRで録画しておいてスロー再生&ポーズでスナップ写真を取り込むという方法も便利である.このようにして取り込んだオリジナル画像は通常1,670万色になるので,画質が許容できるならばGIF/JPEG変換と同時に256色にしてファイルを小さくしよう.

ネットワーク内にはイラストやアイコンを提供しているホームページがあるので,それらを使うと親しみやすいページができる.著作権の条件(非営利目的のホームページ内使用に限って無償など)をよく読んで使われたい.また,ホームページ自体のデザイン・意匠も基本的には著作物なので注意すること.

5.2 イメージの表示方法と「じわじわ表示」

イメージの表示方法は以下のようになる.これは「イメージを表示する,そのソース・ファイルはkami.gifである」を意味する.ここで,kami.gifというファイルはtest.htmlと同じディレクトリにある.別のディレクトリにある場合はディレクトリ名から記述する.

  <IMG SRC="kami.gif"ALT="上福岡">
ALTを使ってそのイメージの内容を書いておく.アクセスが遅いユーザは「イメージの表示をオフ」にしている場合があるが,そのときでもALTのテキストは表示される.ユーザはテキストを見た後でイメージを表示するか否かの判断ができる.

小さいイメージを表示して,そのイメージをクリックすると大きいイメージを表示することもよく使われる.ハイパーリンクを使って以下のように記述する.

  <A HREF="kami.gif">
  <IMG SRC="kami-min.gif">これを大きく表示(約45kbyte)</A>

  上記のように書くとブラウザでは以下のように表示される.
  これを大きく表示(約45kbyte)
アクセスの遅いユーザ対策のもう一つの方法は,図6に示すように大きなイメージを時間の経過と共に「じわじわ」とモザイク上に表示する方法である.GIFのインターレスという形式でファイルを作ると順番に符号化するのではなく数行間隔で飛ばしてデータを織り混ぜるようにして符号化する.ブラウザはまだ受信していない線間のデータを計算してモザイク状に表示する.インターレスはHTML上の記述とは関係なくファイルのフォーマットのみで実現できる.

  <A HREF="kami-int.gif">
  <IMG SRC="kami-min.gif">これを大きく「じわじわ」と表示(約45kbyte)</A>

  上記のように書くとブラウザでは以下のように表示される.
  これを大きく「じわじわ」と表示(約45kbyte)

5.3 イラストを透明化して図を見やすくする

システムやネットワーク構成図などのイラストはスキャナで読み取ると細かい文字が読みにくくなる.オリジナルフォーマットからフォーマット変換ソフトを使ってGIFへ変換する方が望ましい.また,HTMLではTeXと違って数式の記述ができないので,数式を書いた図をフォーマット変換して張り付けることになる.なお,いったんGIFに変換した後はイラストの編集はできないから,必ずオリジナルファイルを保存しておくこと.

イラストをそのまま表示すると図7のように「地」の部分にも色が付く.「地」の部分の色を「透明化」するとブラウザは背景色と同じ色にするので図がすっきりと表示される.論文や技術解説では図が多用されるので透明化を使うと見やすいホームページになる.特に,数式は本文中に図を埋め込むので透明化が必須である.透明化もインターレスと同様に,HTMLの記述とは関係なくGIF89というフォーマット形式に変換することで実現できる.なお,透明化したファイルを更にインターレスにすることも可能である.


6. 更に高度なホームページ作成

ここまででホームページ作成の基本的な仕組みは理解できたであろう.後は様々な機能とそれを実現するタグを理解すればよい.他のホームページの書き方を参考に試して頂きたい.以下では学会の用途などに有効ないくつかのタグを紹介する.

ホームページの最初のページ(トップページとよばれる)は「テーブル」という機能を使うと,画面上に表形式で項目を表示できるのでインデックス的な使い方ができて便利であろう.また,「フレーム」という機能を使うと,一つの画面を分割して表示できるので,大会・研究会などの案内・周知のホームページに便利であろう.但し,フレームを使うとフレームを表示できないブラウザでは全く何も見えなくなってしまうので,ノンフレームのページも用意するなどの配慮が必要である.

イメージの中の特定の箇所をクリックすると他のホームページへ飛ぶようにしたページがある.「クリッカブルマップ」あるいは「イメージマップ」とよばれるもので,イメージ中の座標からハイパーリンクへの計算はブラウザまたはサーバで行う.クリッカブルマップを使う場合にも,イメージファイルを大きくしないこととテキストによるハイパーリンク表示を混在することが望ましい.

動画像ほどデータ量が大きくなくて動きを出せるのが「GIFアニメーション」である.複数のGIFイメージ(アニメのコマに相当)を一つのファイルに重ねて実現する.これも透明化やインターレスと同様にHTMLとは関係なく,GIFのフォーマット処理のみで実現できる.写真をコマにすると動画像らしくなるがファイルが大きくなるので,256色のイラストをコマにするのがよいだろう.

ホームページ中に入力枠を設けて,ユーザからの入力をサーバ側へ転送する「フォーム」という機能がある.大会・研究会や講演会への参加申込みなどに有効であるが,サーバ側でCGI (Common Gateway Interface)というプログラムを動かす必要がある.また,ホームページへのアクセス数をカウントする「アクセスカウンタ」という機能や,上述のクリッカブルマップでサーバが座標変換をする場合も基本的にはCGIで実現する.これらの機能については事前にサーバの管理者に問い合わせて,CGIの使用の可否や使用できる機能を確認する必要がある.

HTMLの仕様はW3C (World Wide Web Consortium)でバージョン3.2が検討中であるが(5) (6),一方有力なブラウザは独自の機能拡張を進めつつある.学会の周知などでは,アクセス速度の遅いユーザやテキストのみのブラウザのユーザなどを含めてすべてのユーザに公平に情報を発信・提供することが重要である.特定の一部のブラウザのみで可能な表示,追加ソフトが必要な表示を避けるなどの注意が必要である.


7. おわりに

本稿ではホームページ作成の導入を解説した.やさしい解説書からHTMLやCGIの文法書まで出版されており(7)-(10),また,最新の情報や様々なチュートリアルがWWWで公開されているので参照されたい(11)-(14).本稿の補足情報やGIF透明化・インターレス用のソフトなどもWWWで紹介しているので利用されたい(15).本稿を契機に多くの方がWWWによる情報発信を始められることを期待したい.


文献


15 April 1997
「インターネット入門」のページに戻る