Joho A Chapter 4.

これまでに、WWW上にはさまざまな人がさまざまな目的で公開しているさまざまなページがあることを見てきました。この節では、自分でWWW のページを作り公開することについて学びます。しかし、ひと口に「ページを作り公開する」といっても、そのためには次のような多くの作業が必要になります。

コンピュータになじみのない人にとっては、一見すると「ページ群のファイルを作成する」ことや「サーバにページ群を置いて公開する」ことが一番難しくかつ重要であるように思えてしまいがちですが、実際にはその他の部分も等しく重要なことなのです。以下ではこれらのことがらについて、順に学んでゆきます。この節では、上の課題のうち前半の3項目を取り上げます。残りの内容は次の節以降で取り上げます。

4.1.2 公開する情報と目的を決める

どのようなプレゼンテーションを作るのであっても、まず次の2点は、はっきりさせておかなければなりません。

これらがあいまいなままプレゼンテーションを作成しても、結果は「ただ何となく作っただけ」に終わってしまい、役に立たないものになりがちです。目的は、明快にひとことで言いあらわせるようなものであるべきです。たとえば、「WWWのページを作成する練習をする」ということでもよいのです。しかしWWWは他の人に何かを伝えるための手段ですから、「これこれのことを伝える」という目的の方がよいプレゼンテーション (他の人から見て面白いプレゼンテーション)になりやすいでしょう。プレゼンテーションに含まれる情報の範囲を決めることも重要です。そうしておかないと、プレゼンテーションが何パーセントぐらい完成したのか、まだ何が足りないのかといったことが分かりませんし、情報の構成を決めるのもうまく行かないでしょう。ここでは例題として、目的と範囲を次のように決めてプレゼンテーションを作成して行くことにします。

例題:目的

「なぜコンピュータについて学ぶのか?」という疑問について、私たちが考えたことを多くの人に知ってもらう。

例題:範囲

私たちは教科「情報」でどんなことを学んでいるか
なぜこれらのことを学ぶ必要があるのか
知らなくてもよいこと、もっと知った方がよいことは何か

4.1.3 情報の構成を決める

WWWのプレゼンテーションを作成するにあたって、どのようなページにどのようなつながりを持たせて構成するか決めることは、自分たちの表現したいことを相手に効率よく伝える上でとても重要です。構成がでたらめだと、読み手は必要な情報にたどりつく前にあきらめてよそへ行ってしまうかも知れません。

WWWのようなハイパーテキストのシステムでは、次の2とおりの構造が基本になると考えてよいでしょう(図4.1)。

メモ

コンピュータの技術用語では、階層構造のことを木の幹からの枝分かれになぞらえて木構造と呼ぶこともあります(上下がさかさまですが)。その場合、全体に相当する部分を根、根の反対側の端を葉と呼びます。

注意

図4.1の構造は、あくまでページ間の論理的な(互いに他のページを指しているリンクの結びつき方に基づく)構造です。各ページを構成するファイルをこの図のようなディレクトリ構造に配置する必要はありません。ファイルはすべて1つのディレクトリに入れておいてもよいのです。

実際には、線形構造でも途中で枝分かれがあったり、階層構造の下の方で一部に線形構造が使われたりして両者が組み合わされることが多いものです。しかしともかく、自分がプレゼンテーションを作る場合にはどちらの構造を基本にするかを決めてから始めるのがよいでしょう。ここの例題では、簡単な階層構造を採用することにして、次のような構成を採用します(図4.2)。

例題:構造

入口ページに、目的、科目構成、教科内容、議論などを入れる。
各教科内容ごとにページを用意し、入口ページからリンクする。

メモ

将来、議論などの内容が増えたり、各教科内容の詳しい説明が必要になったりしたら、これらも別のページに分けて行くことができます。このように、階層構造は柔軟に構成を手直しできるという特徴を持っています。

4.1.4 ページのスタイルや構成を決める

プレゼンテーション全体の構成が決まったら、次は個々のページの構成に進みますが、その前に1つ考えておくことがあります。それは、プレゼンテーションに含まれるページのスタイル(見え方)を決めておくことです。1つのプレゼンテーション内で各ページが共通のスタイルを持つようにしておくと、読み手は「まだ同じプレゼンテーション内を見ている」と安心できますし、複数人で分担してページを作成してもばらばらな印象にならずに済みます。ここの例題では簡単ながら、次のようなスタイルを取ることにします。

例題:ページのスタイル

各ページは次のような構成を取る。

先頭の見出し --- そのページの内容全体をあらわす
先頭の説明 --- そのページの目的や概要を述べる(省略可)
区切り線
中見出し + 内容 --- そのページに含まれる項目(必要なだけ繰り返す)
区切り線
署名 --- ページの書き手に関する情報

ではいよいよ、ページの構成に進みます。きちんとやるなら、主要なページすべてについて構成を考えて検討してから作成に進むことになりますが、この例題プレゼンテーションはごく簡単なものですから、入口ページの構成だけ決めて、残りのページは作るときにそのつど構成を考えることにしました。

例題:入口ページの構成

タイトル: なぜコンピュータを学ぶのか?

教科「情報」の構成 --- 科目構成の説明
教科「情報」の内容 --- 学ぶ項目の一覧(内容ごとのページにリンク)
不要な(?)内容
もっと知りたい内容
まとめ

演習

自分たちオリジナルのWWWプレゼンテーションを企画せよ。目的、範囲、構造、ページのスタイルと構成をひととおり決めること。

4.1.5 よいWWWページの設計とは

回線の種類、機械の種類、OSの種類、ソフトウェアの種類などが異なる、世界中のいろいろな環境にいる人がWebページを見ています。どんな人でも等しく情報提供が受けられるようなWebページを目指すには、読み手の環境の違いを意識したHTMLを書く必要があります。相手の画面の大きさや、相手の画面で使用可能な色数、他に必要なソフトウェアなどについても、Webページを見るために必要な条件はなるべく少なくしておくべきでしょう。以下にいくつかのヒントを挙げておきます。

よいWebページを見つけよう

まず、他人の書いたWebページを見てみましょう。見やすいWebページ、わかりやすいWebページがあったら、それが「よいWebページ」なのです。逆に、見にくいWebページ、わかりにくいWebページは「悪いWebページ」になります。よいWebページを書こうとするならば、まず最初に、「よいWebページと思われるものを探すこと」が大切です。

入口ページの問題

あるまとまった内容をWWWを使って情報発信する時、最初に訪れてもらうようにするのが、入口ページの役割です。入口ページは、ひと目見ただけでその中身のおおよその検討がつき、しかも、その中身を読む気にさせるものに工夫して書かれます。しかし、グラフィックに凝ってしまった結果、そのページを閲覧するために時間がかかってしまうと、遅い回線を使ってる人にとっては事実上読むことができないことになります。従って、入口ページは「早く、分かりやすく」という一見すると矛盾する条件を満たすことが求められます。

文書の分散

同じ量の文書をWWWを使って掲示する際に、それをいくつのHTML文書に分割するかによって、見え方が違ってきます。

しかし、リンク機能を使いたいために、不必要に多くの文書に分割をしてしまい、本当に得たい文書にたどり着く迄に、いくつものリンクをたどる必要がある文書は、読むのが非常に面倒です。多くても3回程度で最終的な文書にたどり着けるようなリンク構成を考えるべきでしょう。

演習

好きなテーマを1つ選び、検索サービスを利用してそのテーマを取り上げているWWWプレゼンテーションを複数探して、それらを比較してみよ。それらはどのように違っているか? それぞれのよい点、悪い点は何か? 表の形にまとめてみよ。

4.2 HTMLによるWWWページの記述

4.2.1 コンピュータと計算機言語

コンピュータは、さまざまな種類の情報をさまざまな形でビット列に符号化して表し、ディジタル情報として取り扱います。ここで、情報の種類として「人間から計算機への指示や意思の伝達」について考えてみましょう。人間どうしで指示や意思を伝達するときには、日本語や英語などの言語 (自然言語)を使います。コンピュータに対しても同じにできればよいのですが、それには次のような問題があります。

そこで、コンピュータに指示や意思を伝達するために、自然言語の代わりにコンピュータで取り扱うのに適した人工言語を定めて使うことが行なわれています。これを計算機言語と呼びます。計算機言語の代表は、CやBASICやCOBOLなど、コンピュータの動作(プログラム)を記述するためのプログラミング言語です。しかしそれ以外にも、データベースのデータを取り扱うためのデータ操作言語 や、コンピュータで扱う文書を表すためのマークアップ言語など、さまざまな計算機言語が作られ使われています。それぞれの計算機言語は、それ固有の書き方の規則があり、それに厳密に従っておかないとコンピュータでうまく扱ってもらえません。非常に杓子定規で不便な感じがしますが、その代わりとても短い記述でコンピュータにさまざまな指示を与えられるという利点が得られるのです。

4.2.2 HTML言語

HTML(HyperText Markup Language)は、WWWのページを記述するために作られたマークアップ言語です。HTMLを使うことで、箇条書き、画像、表、リンクなどWWWページに現われるすべてのものを作りだすことができます。

メモ

HTMLの重要な考え方に、「見え方ではなく意味を指定する」というものがあります。たとえば見出しは通常大きい字で表示されますが、HTMLでは「ここからここまで大きい字で表示」でははく「ここからここまで見出し」という形で指定するのです。そしてその具体的な見え方は環境ごとに変わってきます。たとえば、文字の大きさが1種類しか使えない環境用のブラウザは、見出しを下線つきで表示したり反転表示することで、見出しらしく見せてくれます。

4.2.3 HTMLの基本構造

HTMLによる記述は、基本的に次の形をしています。ここで1行目は DOCTYPE宣言と呼ばれ、続く記述がHTML 4.0という規格に従っていることを示します。ほかにHTML 2.0、HTML 3.2などもありますが、 HTML 4.0がHTML規格の最新版です。

2行目からがHTMLによる記述ですが、「<なんとか…>」という形のものが多数あります。これをHTMLではタグと言います。タグはさらに、開始タグ(例:<HTML>)と終了タグ(例:</HTML>)に分けられ、一対の開始タグと終了タグではさまれた範囲を要素 (例: HTML要素)と言います。HTMLでは要素の中に別の要素が含まれることができます。上に示したように、HTML記述ではHTML要素の中にHEAD要素とBODY要素がこの順で含まれます。 HEAD要素の内側をヘッダといい、ここにはこのWWWページがどのようなページであるかについての情報を記述します。一方、BODY要素の内側を本体といい、ここにページの内容(ブラウザの窓の中に現われるもの)を記述します。

4.2.4 表示させてみよう

いつまでもお話ばかりではつまりませんから、WWWページを作ってブラウザで表示させてみましょう。次に示すのは、そのままブラウザで表示させられる、完結したHTMLコードです。

例題: 最初のHTMLコード


  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

  <HTML>

  <HEAD>

  <TITLE>We Study Computers.  Why?</TITLE>

  </HEAD>

  <BODY>

  <P>私たちは教科「情報」で、コンピュータをはじめとする、

  情報技術について学ぶようになりました。</P>

  </BODY>

  </HTML>

ここでは新しいタグが2つ、出て来ています。TITLE(表題)は、ヘッダに入る代表的な要素で、ページの表題を定めます。表題はブラウザの窓のタイトルバーに表示されたり、しおり(bookmark)の項目名として使われたりします。P(paragraph、段落)は、本体に入る代表的な要素で、普通の文章(地の文)を書くのに使われます。では実際にやって見ましょう。ファイルhome.htmlに上の内容を打ち込んで、ブラウザの「ファイルを開く」機能で表示させたところを図4.4に示します。

これを見ると、確かに表題がブラウザのタイトルバーに、また段落がブラウザ窓の中に表示されています。ここで、段落の行の折り返しが元の HTMLファイルと違っていることに注意してください。ブラウザは窓の幅に合わせて段落の中の折り返しを自動的に調整します。一般にHTMLファイルの中での行かえや空白の入れ方はブラウザによる表示には影響しません。

メモ

ただし、後で出てくる<PRE>...</PRE>の中だけは例外で、PRE要素の内側ではHTMLファイルの空白や行かえがそのまま表示されます。

演習

上の例のHTMLファイルと同じものを打ち込み、ブラウザで表示させてみよ。またブラウザの窓の幅を変更して、折り返しのようすを観察せよ。

4.2.5 見出しと横線

ではいよいよページの内容を予定に沿って作っていくことにしましょう。その場合、上から順番にいきなり打ち込んでいくのではなく、まず見出しなど全体構造の分かるものを作り、そのあとでその項目ごとの内容を追加して行くのがよいでしょう。こうすると、ページ全体の内容のなかで現在作っている部分がどのような位置にあるかを常に見直しながら、ページを作っていくことができます。このように、自由な順序で文書を作成していけることも、コンピュータで文書を作ることの利点の1つです。 HTMLでの見出しは、H1、H2、H3、H4、H5、 H6という6種類の要素で表します。H1が一番上のレベルの大見出しで、H2、H3と数字が大きくなるほど小見出しになっていくのです。 HTMLでは区切りの横線は、HRという要素で表します。ただしこれまでと違って、HRは<HR>という単独のタグで、閉じタグはありません。横線を引くだけなので、それで十分なわけです。ページの最後の署名にはそれが署名であることを表すADDRESS要素を使うのが通例です。これらを使って入口ページの骨組みを完成させたところを次に示します。

例題: 見出し


  <!DOCTYPE HTML PUBILC "-//W3C//DTD HTML 4.0//EN">

  <HEAD>

  <TITLE>We Study Computers.  Why?</TITLE>

  </HEAD>

  <BODY>

  <H1>なぜコンピュータを学ぶのか?</H1>

  <P>私たちは教科「情報」で、コンピュータをはじめとする、

  情報技術について学ぶようになりました。</P>

  <HR>

  <H2>教科「情報」の構成</H2>

  <H2>教科「情報」の内容</H2>

  <H2>不要な(?)内容</H2>

  <H2>もっと知りたい内容</H2>

  <H2>まとめ</H2>

  <HR>

  <ADDRESS>コンピュータと教育研究会</ADDRESS>

  </BODY>

  </HTML>

4.2.6 箇条書き

ここからはいよいよ、それぞれの項目の内容を書いていきながら、HTML の機能を学んで行きます。情報をまとめる文章では、箇条書きを多く活用しますから、次にHTMLの箇条書きについてまとめましょう。まず、いちばん多く使われる箇条書きである番号なしリスト(UL、 unordered list)は次の形をしています。

LI要素(list item)が1つの項目に対応します。項目はいくつあっても構いません。<LI>の閉じタグは書いてもいいのですが、省略してもよいので、ここではそうしました。ではこれを利用して書いた内容の追加部分を見てみましょう(箇条書きでない部分はこれまで通りP要素になります)。

例題: 箇条書き


  <P>コンピュータを学ぶ目的について納得しておくと、次

  のようなよいことがあります。</P>

  <UL>

   <LI>学ぶことに対して意欲的になり効率よく学習できる。

   <LI>自分にとって重要なテーマに的を絞ることができる。

   <LI>目標をどれくらい達成したか自分で評価できる。

  </UL>

  <P>このページでは、「なぜコンピュータを学ぶのか?」という

  テーマについて、私たちなりに調べたことや、考えたことを

  まとめてみました。</P>

<LI>タグが他の行より1文字下げて書かれていますが、これは HTMLのファイルを見たり編集するときに分かりやすくするためです (HTMLファイルでの行かえや字下げはブラウザでの表示には影響しません)。これを表示したようすを図(4.6)に示します。

ここでタグ<UL>...</UL>を<OL>...</OL>に取り換えると、 番号つきリスト(OL、ordered list)になり、項目に1から順に番号が振られます(図4.7)。番号つきリストは、項目の順番に意味があるような箇条書きに使うとよいでしょう。

箇条書きの3番目の形として、項目ごとに短い語が見出しのようになった定義リスト(DL、definition list)があります。これは各項目が DT要素とDD要素の対になっていて、全体として次の形をしています。

DT要素やDD要素もLI要素と同様、閉じタグは省略できます。ではこれを使った内容を見てみましょう(図4.8)。

例題: 箇条書き(2)


  <HR>

  <H2>教科「情報」の構成</H2>

  <P>教科「情報」には情報A、情報B、情報Cの3つの科目があります。</P>

  <DL>

  <DT>情報A

   <DD>コンピュータやネットワークを活用して、情報を選択・処理・発信

   できる力を身につける。

  <DT>情報B

   <DD>コンピュータの機能や仕組み、コンピュータ活用の方法について

   科学的に理解する。

  <DT>情報C

   <DD>ネットワークやコンピュータが社会の中で果たしている役割や影響

   を理解し、情報社会への参加のしかたを考える。

  </DL>

4.2.7 表

箇条書きと並んで情報を整理するのに有効な手段に、表があります。表もタグの構造は箇条書きに似ていますが、箇条書きが1次元なのに対して表は2次元だという違いがあります。具体的には次のようになります。

なお、THとTDは、そのます目の内容が見出しであるか普通の情報であるかで使い分けます(見出しの場合はやや太字で中央揃えして表示されます)。そして、TR、TH、TDの閉じタグは省略できます。これらをまとめると、具体的には表をHTMLで書くと次のようになるわけです(すべてTD要素にした場合)。

表の行数や列数は中に入っているTR要素やTH、TD要素の数から自動的に決まります。なお、TABLEの開始タグについている「BORDER=1」というのは、表の罫線の太さを指定するもので、0を指定するか、またはこの指定をまったく書かないと罫線は描かれません。またもっと大きい数字を指定すると太い罫線になります。このように、開始タグの内側に書いてその要素に関する特性を調整するための指定をHTMLでは属性 (attribute)と呼んでいます。では、表を使った内容を見てみましょう(図4.9)。

例題: 表


  <TABLE BORDER=1>

  <TR>

   <TH>項目

   <TH>概要

  <TR>

   <TH>情報の表現

   <TD>ディジタル情報、ビット、2進数、各種の情報の表現

  <TR>

   <TH>コンピュータ

   <TD>コンピュータの原理、ハードウェア、ソフトウェア

  <TR>

  ... (途中略) ...

  <TR>

   <TH>応用ソフトウェアによる問題解決

   <TD>表計算ソフト、シミュレーション

  </TABLE>

4.2.8 インラインイメージ

ここまででは、プレゼンテーションの内容はすべて1つのHTMLファイルで「閉じて」いました。しかしWWWのよいところは、あるファイルから別のファイルを参照できるところにあります。ここではそのようは方法を2つ、取り上げます。 1つ目は、あるページの中に画像(イメージ)を埋め込むことです。これをインラインイメージ(inline image)と呼びます(inlineというのは「その場所に」という意味です)。そのためには、次のようなIMGタグを使います。

ここでSRC属性はイメージ(GIF形式またはJPEG形式)を格納したファイルを指定し、ALT属性はそのイメージに関する説明を書くようになっています。たとえば末尾の署名のところに自分たちの写真(?)を入れたとしましょう。そのファイル名をourphoto.gifであるとして、最後の部分を次のように直しました。

例題: インラインイメージ


  <HR>

  <ADDRESS><IMG SRC="ourphoto.gif" ALT="Our Photo">

  コンピュータと教育研究会</ADDRESS>

  </BODY>

  </HTML>

メモ

このブラウザではマウスカーソルが画像の上でしばらく止まると説明文が表示されるようになっています。このあたりの動きはブラウザによって違います。

4.2.9 リンク

他のファイルを参照するもう1つの方法であるリンクは、機能的にはページの中のある部分を選択すると表示が別のページに切り替わるというもので、これまでにも多く利用してきましたが、これもHTMLのコードにおいて別のファイルを参照しているわけです。HTMLでリンクを作る場合は、A(anchor)タグと呼ばれるタグを使い、次のように記述します。

ここでリンクテキストと書いた部分は下線つきなど他とは区別できるように表示され、ここを選択する(多くのブラウザではマウスでクリックする)と、HREF属性で指定したファイルに表示が切り替わります。なお、「リンクテキスト」の部分は実はテキストに限らず、インラインイメージなどを含んでいても構いません。ここでは、先に出てきた教科の各内容に関する表を手直しして、各項目の部分をリンクテキストにしてみます。

例題: リンクテキスト


  <TABLE BORDER=1>

  <TR>

   <TH>項目

   <TH>概要

  <TR>

   <TH><A HREF="info-repl.html">情報の表現</A>

   <TD>ディジタル情報、ビット、2進数、各種の情報の表現

  <TR>

   <TH><A HREF="computers.html">コンピュータ</A>

   <TD>コンピュータの原理、ハードウェア、ソフトウェア

  <TR>

  ... (以下略) ...

このように手直しした表の表示のようすを図4.11に示します。ここで「情報の表現」と記された部分を選択すると、 info-repl.htmlというファイルの内容がブラウザに表示されるのです。

4.2.10 URLの参照

上ではインラインイメージもリンクも、元のページのファイルと一緒に置いたファイルの名前を指定していました。しかし実際には、SRC属性やHREF属性では任意のURLを指定できます。これによって、リンクを選択すると他のサーバのページが表示されるようにできますし、(必要なら)他のサーバにあるイメージをページに埋め込んだりできるのです。たとえば、この章で最初に出てきたWWWページのHTMLコードは次のようになっています。

例題: URLを指定したリンク


  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

  <HTML>

  <HEAD>

  <TITLE>Welcome Page of "Jouhou"</TITLE>

  </HEAD>

  <BODY>

  <H1>科目「情報」の入口ページ</H1>

  <UL>

   <LI><A HREF="http://www.ntt.co.jp/japan/index-j.html">

       日本の情報(NTT)</A>

   <HR>

   <LI><A HREF="http://www.yahoo.co.jp/">

       ディレクトリサービス(Yahoo)</A>

   <LI><A HREF="http://www.infoseek.co.jp/">

       検索サービス(Infoseek)</A>

  </UL>

  </BODY>

  </HTML>

4.2.11 整形ずみテキストと文字エントリ

ここまでに見て来たように、HTMLファイルの上での行かえは原則として意味を持たず、表示するときブラウザの画面幅に合わせて詰め合わせと行かえが行われ、その際に空白も取り除かれます。しかしこれでは、プログラムや詩のように勝手に空白や行かえを直して欲しくないものをページに入れるのにとても不便です。このため、<PRE>...</PRE> というタグに囲まれた範囲については空白や行かえをそのまま残すようになっています。たとえば次のようなぐあいです。

これを表示したようすを図4.12に示します。ただし、 <PRE>...</PRE>の中は「何でもそのまま」というわけではなく、各種のタグは普通に使えます(リンクやインラインイメージなども入れられます)。

ただ自分の好きなところで行を変えたいときには、全部を <PRE>...</PRE>に入れる必要はなく、<BR>というタグを使います。自動的な詰め合わせをしていても、このタグが書かれたところでは必ず行かえが起こります。

メモ

ところで、それではタグや属性の指定に使う文字「<」、「>」はどうやって入れればよいのでしょうか。HTMLでは、これらの文字はぞれぞれ「<」、「>」と書くことになっています(この書き方をHTMLでは文字エントリ と呼んでいます)。また、「&」も(文字エントリのための特別な文字として扱われるため)、WWWページに入れるためには「&」と書く必要があります。

メモ

ブラウザによっては、文字エントリを使わずに「<」や「>」などを書いてもうまく表示されることがありますが、それはたまたまであって、別のブラウザで見ている人には見えないかも知れません。ですから面倒でも、上の3つの文字をページに入れる時は文字エントリを使って表してください。

4.3 プレゼンテーションの公開・検査・保守

4.3.1 サーバへの転送

ここまでは、自分が作成したページやそれが参照する画像のファイルなどは、すべて手元のコンピュータに置かれていました。実際にこれらのページをWWWに公開するためには、これらのファイルをWWWサーバ(正確にはWWWサーバプログラムを実行しているコンピュータ)に転送する必要があります。もっとも、普段からWWWサーバを実行するのと同じコンピュータで作業をしているとか、そのコンピュータのファイルをネットワーク経由で読み書きしている場合などは、特別なことをしなくても、ある決まった (公開用の)ディレクトリにHTMLファイルなどを置くだけでページが公開できることもあります。具体的な転送方法やファイルの置き場所はそれぞれのコンピュータ環境で違っています。

演習

自分の作成したページをWWWサーバに転送してみよ。さらにそのURLを指定してネットワーク経由で表示させてみよ。

4.3.2 プレゼンテーションのチェック

ここまでで、コンテンツをサーバに転送してサーバから表示できるようになりました。しかし、「一応表示できる」ということと「プレゼンテーションとして完成した」ということはまったく別のことです。作成したプレゼンテーションは、最終的には世界中の人が(日本語で作ったのなら日本語ができる人に限られはしますが)見ることになるのです。ですから、あなたがプレゼンテーションを良くするために1分間を掛けることが、多数の人の1分間を節約するのだと思ってください。そのためにはまず、作成したプレゼンテーションに欠陥がないか確認します。具体的には、次の点をチェックしてください。

言うのは簡単ですが、これらをきちんとチェックするのは結構大変です。しかしもちろん、これらのことを自動的にチェックしてくれるプログラムがいくつも用意されています。そのようなプログラムの助けが借りられるのなら、ぜひ利用してください。しかし実は、もっと大切なのは上に挙げたような「機械的にチェックできる」ことがらではなく、「読み手にとってわかりやすいプレゼンテーションであるかどうか」なのです。このために、次のようなチェックをしてください。

演習

作成したプレゼンテーションをチェックして、問題点を思いつく限りたくさん書き出せ。それらを手直しする方法を考えて、できるものから実行してみよ(最初から完璧を目指さなくてもよい)。

4.3.3 プレゼンテーションの公開

これでようやく、自分のプレゼンテーションが公開できたことになります。しかしそれは「終わり」ではなく「始まり」にすぎません。プレゼンテーションを公開すれば、それを見た人からさまざまな反応が(電子メールなどで)あるかも知れません。また、そのような反応はなくても、WWWサーバはいつどのページが取り寄せられたか、どのようなエラーが発生したかなどをログファイル と呼ばれるファイルに記録していますから、これを見ることでどのページがどれくらい参照されているか、どんなエラーが起きているかを知ることができます。そして、WWWページは生きものですから、これらの反応に対応して、絶えずよりよく改良して行くべきものです。また、公開した内容自体も、状況が変化したり、新しい情報が現われるのに対応して改訂して行くべきなのです(何か月もほったらかしのWWWページは見るからにつまらなそうに感じられるものです)。ですから、ページの公開を続ける限り、改良と更新は続けて行ってください。

演習

公開したWWWページについて、反応を収集して整理してみよ。またその情報を参考に、どのような改訂がのぞましいかを計画せよ。

4.4 スタイルシート

4.4.1 スタイルシートとは

ここまでに学んだHTMLの機能はすべて、「ここは箇条書き」「ここは見出し」のようにテキストの論理的構造を規定するものでした。具体的に箇条書きがどのように整形され、見出しがどのような大きさの文字で表示されるかはブラウザに任されることになります。実は、HTMLには文字の大きさや色など、見ため(表現)を直接指定するような機能も用意されています。しかし、最新のHTML規格(HTML 4.0)ではこのような機能を非推奨(なるべく使わない)と指定しています。なぜでしょう? それは、HTMLで論理的構造と表現を両方とも指定してしまうと、文章をさまざまな形で利用しようとしたとき、じゃまになったりするからです。

メモ

HTMLで表現まで指定してしまうと、見出しだけ取り出して目次を作るときに、<H1>...</H1>の中を取り出して整理しようとしたら、中に色指定のタグが混ざっていた、などの不都合が起きるかも知れません。

そこでHTML 4.0では、HTMLそのものは文章の論理的構造を指定するのに用い、表現を指定するためにはスタイルシートと呼ばれる別の指定方法を併用するという方針になったのです。スタイルシートとは簡単に言えば、「<H1>の見出しはすべてゴシック体で」というふうに HTMLの各要素単位でその表現を指定する機能です。以下では現在もっとも普及しているスタイルシートの記法である CSS(直列スタイルシート)を取り上げ、その機能や使い方を見てみましょう。

演習

先に作ったHTMLプレゼンテーションについて、表現(色、文字の大きさ、かこみ枠など)をどのようにつけたら見ためがよいか、計画を立ててみよ。

4.4.2 スタイルシートの指定方法

HTMLでスタイルシートを使う場合、次の3通りの指定方法があります。

4.4.3 CSSの指定方法

ではいよいよ、CSSの指定方法を説明しましょう。CSSではスタイル定義は

という形をしています。セレクタはとりあえずタグ名だと考えてください。そしてそれぞれの規則は

という形になっています。たとえばページ全体の背景をうす青にするには、セレクタBODYに対してbackground-colorプロパティを指定します。

また、H1とH3の見出しすべてに対して青い枠をつけたければ、borderプロパテイとしてsolid、border-colorプロパティとしてblueを指定します。

上の2つのスタイル規則を適用したようすを、図4.13に示します。

演習

自分の作ったページについて、上で挙げたようなスタイル指定を入れてみよ。<HEAD>...</HEAD>の中に入れ、全体を{\tt <STYLE>...</STYLE>}で囲むのを忘れないように。成功したら、タグ指定や色指定を変更してみよ。

4.4.4 CSSのおもなプロパティ

上の例に出て来たものを含めて、代表的なプロパティについて紹介しておきましょう。

演習

本節で説明したスタイル機能から面白そうなものを選び、前節のスタイルシート定義に追加してみよ。それぞれのプロパティはどのような目的に利用できると思うか考えよ。

4.4.5 スタイルの設計

ここまででスタイルシートの機能について説明しましたが、どのようにスタイルを利用するべきかについては説明しませんでした。単に「目立てばよい」では、見ためだけ派手になってしまい、かえって伝えたい内容が読み手に伝わらなくなるため逆効果です。ですから、ちょうど内容(コンテンツ)について行ったように、いきなり気ままにスタイルをつけるのではなく、どのようにスタイルをつけるか予め設計するべきなのです。スタイルの設計に際しては次のことがらを参考にしましょう。

演習

1つのWWWページに対して、数人/数グループでそれぞれが別個にスタイルをつけてみてコンテストを行え。さらにその結果に基づいて、どのようなスタイルが好感を持たれるか分析してみよ。

4.4.6 個別的なスタイル指定

ここまででは、スタイルを「すべてのH1」とか「すべてのP」のようにタグごとに指定していました。しかし場合によっては、「このH1の見出は重要なので赤にしたい」ということもあるでしょう。そのような場合はまず、セレクタとしてタグの代わりに「クラス」を指定します。セレクタにクラス名を指定するときは、先頭にピリオドをつけて

のように指定します。次に、タグの方はCLASS属性でクラス名(こんどはピリオドなし)を指定します。

こうすると、そのH1の見出しには通常のH1のスタイルに加えて importantクラスとして指定されたスタイルが追加適用されます。しかし、これでもまだスタイルの適用範囲はタグの範囲と一緒ですね。そこでHTMLでは、スタイル指定に便利な次の2つのタグを用意しています。

たとえば、段落のある1フレーズだけにimportantクラスを適用したければ、次のようにするわけです。

SPANはこのよう段落の内側に使いますが、もっと広い範囲(複数の段落、箇条書き、見出しなどを含む範囲)を囲む場合にはDIVを使ってください。

4.4.7 要素の独立配置

ここまでのところ、ある要素にスタイルをつけてもその要素が置かれる位置は他の要素との関係で決まってきました。しかし、スタイルシートで要素にposition指定を行うことで、その要素を本来の位置からずらしたり、他の要素と独立に任意の位置に置いたりできます。具体的には次のプロパティを使います。

4.5 スクリプト

4.5.1 スクリプトとは

コンピュータの動作がすべてプログラムによって定められることはすでに学びました。プログラムも人間が書いて計算機に読み込ませるので、ちょうどHTMLやCSSのように人工言語を使います。これをプログラム言語と言いますが、ひとくちにプログラム言語といっても用途に応じてさまざまなものが作られ使われています。ここではHTMLファイルの中に、画面上のボタンを押すと簡単な計算を実行する、小さなプログラムを埋め込んで動かしてみます。このように簡単な動作をすぐ書けることをめざして作られたプログラム言語のことを スクリプト言語、そのような言語で書かれた簡単なプログラムのことをスクリプトと呼びます。ここではJavaScriptという名前のスクリプト言語を使っています。

4.5.2 例題1: ボタンを押した回数を数える

最初の例題として、ボタンを押した回数を数えるスクリプトを見てみましょう。この例題では図4.16のようなWWWページを作り、「押して!」と書かれたボタンを押すたびに、回数欄の数が1ずつ増えて行きます。

なお、フォームの各要素を配置するには<BR>などこれまでに学んだタグを使い、説明などを表示するのもこれまでと同じようにテキストを書けば済むことに注意してください。さて、上の例ではONCLICK="keisan()"と指定していますが、こうするとボタンが押されたときにスクリプトのkeisanという名前がついた命令列(関数)が実行されます。これは{\tt <SCRIPT>...</SCRIPT>}の内側で定義するので(上で※となっている箇所)、見てみましょう。

まず、documentというのはこのスクリプトのあるページ全体を表す名前です。そして、「.」は「～に属している、」という意味を持ち、document.forms[0]は「このページにあるフォームの最初のもの」を意味します(コンピュータの上では、番号を1から順ではなく0から順につけることがあり、ここでもそうなっているのです)。このページにはフォームは1つしか入れませんでしたが、2つ、3つと入れた場合はdocument.forms[1]、document.forms[2]などと書くことでそれらを指定できます。さらに、document.forms[0].elements[0]だと「このページにあるフォームの最初のものの、最初の部品」という意味になりますから、これは入力欄を意味します。そして、field = ...というのはその入力欄を以後fieldという名前で扱えるようにすることを意味しているのです。次の行で、さっそくその入力欄を扱います。field.valueというのは、入力欄に入っている内容(文字のならび)を表します。そして、 parseInt(...)というのは、...が表している文字を整数の値に変換するという意味です。「+ 1」は想像がつくように、その値に1を足し算します。そして最後に、field.value = ...で計算した値を入力欄の内容として入れ直します。つまり、これによって今までの入力欄の値はなくなり、代わりに計算した結果が入力欄の新しい内容になるのです。

4.5.3 例題2: 華氏を摂氏に変換する

では次に、もう少し役に立つ例題として、華氏の温度を摂氏の温度に換算するスクリプトを見てみましょう。このスクリプトを使うページのようすを図4.17に示します。1番目の欄に華氏の温度を入力して、変換ボタンを押すと、2番目の欄に摂氏の温度が表示されます。

今度はもう分かるでしょうから、スクリプトも一緒に示します。HTMLの部分は、入力欄が増えただけで前と同様です。

スクリプトですが、さっきは整数の計算でしたが今度は少数点つきで計算したいので実数に変換するparseFloat(...)を使います。今度は欄が2つあるので、それぞれの欄をkashi、sesshiという名前で扱えるようにします。そして、3行目で華氏の温度を実数にして、 32を引いて 5/9 倍すると、それで摂氏の温度になります。なお、JavaScriptをはじめ多くのプログラミング言語では割り算は「÷」ではなく「/」、掛け算は「×」ではなく「*」で表します。そして最後に、計算した結果を、欄sesshiの値として設定すればよいのです。

演習

もう1つボタンを追加して、摂氏を華氏に変換できるようにしてみよ (ヒント: keisanのほかにもう1つ関数を追加し、新しいボタンからはこの関数を呼ぶようにするとよい)。

4.5.4 例題3: 最大公約数

3番目の例題として、もっと込み入った計算を繰り返すものを見てみましょう。この例題では、図4.18のように、2つの数値を入れてその数値の最大公約数を求めます。

HTMLの部分は、またまた入力欄が増えただけで前と同様です。

スクリプトですが、今度は入力欄だけでなく、2つの数値もxと yという名前で使えるようにしています。そして次の

というのは、「指定した条件が成り立っている間、...の部分を繰り返し実行する」という動作になります。ここでは条件は「x != y」ですが、これは数値xと数値yが等しくない間繰り返す、ということになるのです。さて、繰り返す中身を見て見ると、

となっています。これは、「指定した条件が成り立っていれば(a)の部分、成り立っていなければ(b)の部分を実行する」という動作になります。ここで「x > y」というのは見ての通り数値xが{\tt y}より大きい、ということですから、xがyより大きいときはxからyを引いたものを改めてxという名前で表せるようにします。逆にyがxより大きいときはyから xを引きます。すると、この繰り返し部分は全体としては、「xとyが等しくない間、大きい方から小さい方を引くことを繰り返す」動作になります。ところで、次のことに注意しましょう。

つまり、この繰り返しを行っている間、x、yの最大公約数は最初の x、yの最大公約数と変わっていません。ということは、最後に xとyが等しくなって繰り返しが終わったときも同じことが成り立っていますから、そのときのxの値がもともとの2つの数の最大公約数であり、これを表示欄に入れればよいわけです。

第4章 電子情報ネットワークへの情報発信

4.1 WWWプレゼンテーションの計画

4.1.1 WWWでの情報発信への道のり