O-157 問題で2回も空けてしまったら、何を書いていたのかわからなくなってしまいました。しかも、そろそろ最終回にというつもりで着地点を探していたのに、発行人からずっと続けてほしい旨の要請をいただきましたので、全体構成を見直すことにしました。そこで、今回はつなぎとして、「1日で作れるホームページ」を紹介しましょう。それも、プロでもオタクでもない、中学卒業程度の読解力があれば誰にでもできる方法です。
ホームページを作るには、当然のことながらインターネットを利用できる環境が必要です。具体的にはハードウェアとしてパソコン、ターミナルアダプタとDSU(ISDN を使う場合)またはモデム(普通の電話を使う場合)を、ソフトウェアとして接続ソフト、ブラウザ(WWWを見る)、FTP(ファイルを送る)、エディタ(原稿を書く)を揃えます。そして接続プロバイダと契約。
このどちらが良いかは、それはすぐに神学論争に陥りますので言わないでおきましょう。管見の範囲ですが、どちらの肩をもつにしても、えらく断定的に評価を下す割には、実際に両方を使っている人は少なく、良くて触ってみた程度。自分の狭い経験と噂で話を組み立てているような人が多い。会社で聞いた話ですが、秋葉原の電機店で Macintosh をいじっていた女子高生とおぼしき2人連れが「わぁー、これってWindows そっくり」と言っていたとか。Mac の雑誌で「そのうち言われかねないぞ」と指摘されていた事態ですが、だいたいこのレベルの話が多いようで。
以前、本誌で「購入パソコン決定法」という小文を載せていただきましたが、そこで書いたように、相談に乗ってくれる人が身近にいるなら、その人の勧めに従うのが無難です。
TA はそんなに種類が出ていませんし、パソコンの機種によって決まってしまう場合もあるようです。契約しているプロバイダ(の実際に使うアクセスポイント)が同期か非同期かを確認して、それに合うものを購入しましょう。DSU は INS(ISDN)の契約をすると NTT が貸してくれます。もちろん市販もされています。
モデムについては 28800bps のものであれば良いでしょう。いろんな種類が出ていますが、本質的に速度以外に違いがあるのか、私にはわかりません。
Windows 95 では標準で添付されていますから、特に用意する必要はありません。Win 3.1 の場合は購入する(インターネット用パッケージソフトに入っている)なりパソコン通信ネットからダウンロードなりする必要があります。
Macintosh の場合は MacTCP をシステムディスクからカスタムインストールします(標準のインストールでは入っていない)。なお、新しいパワーマックからは TCP/IP になっているそうです。もう一つ必要な FreePPP はフリーウェアなので雑誌の付録やパソコン通信から取り寄せます。
ネットスケープ社の NetscapeNavigator (ネットスケープナビゲーター)が事実上の標準ソフトとして通用しており、多くのホームページが NetscapeNavigator で見られることを想定して作成されています。Win 95 では Internet Explorer というソフトが標準で添付されています。
Fetch というソフトが有名で、ネット上で公開されています。
ホームページの原稿を書くためのソフトです。最近はワープロソフトのなかに、そのままホームページ原稿になる HTML 形式で保存できるものもでてきましたが、簡単なものならエディタで書いてタグ付け(HTML 化)できます。
これはこれで2回分くらいの内容がありますので簡単に書きますと、特別な追加料金無しでホームページが開設できるところが望ましい。無料で提供される容量としては2〜5Mが多い。ちなみにフロッピーディスク1枚で約 1.4M。またプロバイダによっては凝った作りのできないところがあるので、凝りたい人はあらかじめ仕様を確認した方が良いでしょう。
ホームページに載せる内容は自分で作らなければなりません。非公開で自分だけ(く、暗い)あるいは少数の友人とだけ楽しむ場合ならば雑誌などからのコピーも咎められはしないでしょうが、そうでない以上は著作権法その他法令に抵触しないように作る必要があります。
ミニコミののりで作る素人が犯しやすい失敗には次のようなものがあります
無名の人(友人など)の写真であっても、本人の了解無しにホームページで公開することは肖像権の侵害になりえます。たとえ自分で撮影したものであっても許されませんから注意しましょう。
言うまでもないことですが、個人の名誉を傷つけるような内容のものを公開すれば、刑事・民事で責任を問われます。
また、政治的あるいは宗教的に著しく突出した信念の持ち主があなたのホームページを見て激昂するかもしれません。一風変わった性的嗜好の持ち主が、あなたの嗜好を無視して興味を示してくる可能性も否定できません。世界に向かってものを言うということは、それなりの危険をも含むという点に注意しましょう。
さて、こうして道具立てが揃いました。「1日でできる」はここから始まります。
前置きが長くなりました。「HTML ってなぁに?」「タグってなぁに?」「日本語で説明できないの?」という嘆きが聞こえてきます。中学卒業程度って、開成中学?という嫌味さえ。
まず定型的な説明。HTML とは Hyper Text Markup Language すなわち「超文書に仕立て上げる作法」(拙訳)の略で、普通の文書をハイパーテキストにする約束事。そのための修飾をするのがタグ(tag=下げ札)。
こんな説明でわかる人は聞かなくてもわかっているでしょう。ハイパーテキストという言葉でうろたえるのが普通の人。しかし、文字でハイパーテキストを説明するのは白黒テレビでカラーテレビの解説をするようなもの。百聞は一見に如かずで、HTML 文の現物を見てもらいましょう(図1)。ところどころに読める文字もありますが、<BR> とか <A HREF=> とか訳のわからない文字がいっぱいある。これがタグで、それぞれ役割を持っています。これをブラウザで見ると図2のようになります(ちょっと縮小がきつかった)。この2つを比べながらタグの役割を見てみましょう。
前回、キャセロールの仮想ホームページを作り、その HTML 文とブラウザで見た場合を図示しましたが、画面の縮小がきつかった上に、例としてはあまり適切でなかったので作り直してみました。今度は26号を新刊として紹介するページです。図1がその HTML 文で、相変わらず唐人の寝言みたいですが、これは普通のワープロを使って作ることができるのが大きな特長です。これをブラウザ(NetscapeNavigator を使用)を使って見るとアラ不思議、「いかにもホームページ」というものが現れます(図2)。
上から見ていくと、まず「 Netscape: キャセロールホームページ」というのがあって、これで「ははぁ、<TITLE> はそのページのタイトルを決めるのだな」とわかります。勘のするどい人ならば「<TITLE> と </TITLE> で挟んだものがタイトルだ。/ は指定終りの意味だな」というところまで気がつかれるでしょう。続いて真ん中に大きく「キャセロール」という文字。これを HTML 文で見ると <CENTER><H1> というのがある。「センター(中央)寄せは <CENTER> だから、<H1> は字を大きくする指定」というのは残念ながらハズレ。表面的にはそれであっていますし、実際、この程度の理解で作られたホームページも沢山あるそうです。何が違うかというと <H1> の解釈。これは字を大きくするという意味ではなく、“一番大きな見出し”(第1段階の見出し)を指定しているのです。NetscapeNavigator ではたまたまこの大きさに見えるけれども、<H1> 自体には何ポイントのどういうフォントを使えというような情報はありません(逆にあったらスゴイと思いません?ワープロ開発の苦労って何だったのってことに)。
見よう見まねの HTML 化なら1日もかからないで身につきます。本を見ると、気に入ったホームページのソース(HTML 文)を取ってきて、中身を入れ替えることから始めてみようみたいなことが書いてあります。模倣から始めるのは習い事の通例。しかし学習上の模倣と猿真似とは異なります。やっていることの意味をつかんでいないと応用が利かない。ステーキを焼くのに、買ってきた肉片をいつも半分に切り分ける人がいた。理由を聞くと「母はいつもそうしていた」。それは単に大きなフライパン(あるいは皿)が無かったから2つに切り分けていたわけで、そういう制約が無いところでは無意味な作業。(まぁ、子供の頃を思い出すには適しているかもしれないが。)
では HTML の意味は何かというと、それは文章の構造を明確化すること。文章の構造?また難しい話になりそうです。では図2を見てください。これは先号の目次ですが、ちょっと変だと思いませんか。「この人に聞く」と「インターネットって何?10」、それに「詩」は強調されていますね。図1で確認すると <H3></H3> で挟まれています。つまり第3段階の見出しです。一方、「第7回…」「インターネットって何?10」「雪の日」などは下線が引いてある(ここをクリックすると本文が読めるという表示です)。図1でみると <A HREF= … </A> で挟まれている。
こうしてみると「この人に…」「詩」「私の…」は記事の項目であり、「身近な暮らしから…」「雪の日」「ヨーロッパ…」はその号での内容である、という目次の構造が見えてきます。そうすると「インター…」と「“金子…」は項目あるいはその号の内容を示す題が無いことがわかります。これがパッと見たときの違和感の正体。自分を例にとれば「インターネットって何? 知ったかぶり講座その10 1日で作れるホームページ(2)」としておけば良かったわけです。もちろん本文がそうなってない以上、目次作成者を責めることはできません。実はこの問題、私も薄々気付いてはいたのですが、今回こうして HTML 化してみてやっと明確化しました。
私の煽りが功を奏したのか、とうとうキャセロールのホームページが開かれました(図1)。サイトは地元のプロバイダ「ネットクリック」の中にあり、URL で記せば http://www.click.or.jp/‾itoh/ です。これは日本(jp)の click という組織(or. = organization)の伊藤さんのディレクトリ(/‾itoh/)にデータがあります、という事を意味しています。NetClick は入間市にある今年(96 年)2月に営業を開始した一般二種のプロバイダで NIS インターネットサービスという特別二種プロバイダに 128K で接続しています。
それではお祝いを兼ねて、そのホームページのでき上がりを見ていきましょう。
サイトの所在を URL で指定すると一ページ目が表示されます。Interlink やリクルートという少し離れたプロバイダから接続してもすんなりと表示される軽い画面です。たまたまネットワークが空いていただけかもしれませんが。
題字に続いてイラストが現れました。紙面ではわからないでしょうが、イラストはカラーです。けばけばしい色使いが氾濫する日本の WWW にあって実に抑制のきいた、言わば大人のホームページを象徴する淡い彩色。マウスのコードがカールしていたりある筈のプリンタが省かれているのは御愛敬としましょう。この画面だとイラストは毎回変わるのか、それとも看板として定着するのかはわかりません(HTML 文からは毎月変えるものではない、と判断されます)。
そして 27 号の目次。「キャセロール…」と各記事のタイトルは見出しレベルを変えてあるのですが、この画面からは違いはわかりにくい。ちょっと工夫が必要です。10/20青梅市「ままごと屋」レポートの色が変わっているのでクリックしてみると、本文が読めるようになっていました(私のブラウザは下線も引く設定にしてあるのに、なぜか表示されません (;_;) 2.02 にバージョンアップしよう)。そう言えば、この原稿も「HTML 文でくださいね」と言われてました。
図ではわかりませんが、下へスクロールすると水平の罫線で仕切った次は「キャセロールのお友達」という項目が現れます。ここは一般にリンク集と言われるもの。それぞれの項目をクリックすると該当するホームページを見ることができます。でも慣れない人はそのページに飛んだことに気付かず戻れなくなってオロオロすることがあるので「飛ばされます」と言った方が合っているかもしれません。また東村山インターネットクラブのロゴが唐突な感じでありますが、これはその上と一体にしておいた方が良いでしょう。
HTML 文を取得して見ると、なぜか H1(見出し1)がありません。大きすぎて下品に見えるのを嫌ったのかもしれません。しかし H3 と H4 (そして本文)の区別がつきにくいことを考えると順次繰り上げた方が良いように思えます。あるいは「キャセロール第 27 号」と「キャセロールのお友達」は H2 とする。さらに 27 号の目次は「お友達」と同じように <UL> を使ってリスト化するか、 <DL> を使うかすると見やすくなります。見出しだけでは内容がわかりにくいので要約を <DD> を使って付けるわけです(誰が要約文を書くのだろう...)。
それにしてもタグに大文字・小文字が混在していて、何日もかけて作られた苦労の様子がうかがわれます。印刷物ですと、刷り上がりを見て「しまったぁ」と言っても後の祭りですが、WWW は仕上がりを確認しながら作れ、またすぐに修正できます。おそらく正月休みはホームページ作りに熱中されることでしょう。私も年賀状はやめて e-mail とホームページで済ませる予定でいます。
そこで次回は簡単にホームページが作れるという HTML エディタを紹介しましょう。
(続く)筆者紹介:会社員.89 年からバイオ研究者のための情報交換・研究支援システム Bio-Net の運営に携わる.94年1月から商業パソコン通信サービス NIFTY-Serve でバイオフォーラム(FBIO)のマネージャー.勤務先のホームページ作成も担当するが、偉そうに人の批評をする割にはあまりパッとしない出来栄えである。
e-mail address:SDI00733@niftyserve.or.jp
http://www.niftyserve.or.jp/forum/fbio/
注意:ニフティのドメイン変更により、現在のアドレスはそれぞれ SDI00733@nifty.com、http://www.nifty.ne.jp/forum/fbio/ となっている。