情報処理 I － 第８回

１．ホームページ作成（基本編）

「ホームページ」について

インターネット上で現在もっとも人気のあるアプリケーションである WWW (World Wide Web) において閲覧されるコンテンツのことを、 普通ホームページと呼びます。 ただし、厳密な意味での「ホームページ」は、 ある単位のコンテンツの集まりの起点となっている コンテンツのことを指します。 これは、例えばみなさんの「ホームページ」は、 みなさんのホームページを開いたときに最初に出てくる画面になります。 したがって、この起点以外のコンテンツを含めた一般的なものを指す場合には、これを Web ページと呼んだ方が正確でしょう。

なお、ここではみなさん自身に関する内容（コンテンツ）を作成しますから、 以降ではその Web ページを指すものとして 「ホームページ」という用語を用います。

URL について

Web ページが保存（登録）されている“場所”は、 URL (Universal Resource Locator) という記法 （厳密には URI - Universal Resource Indicator）で表されます （最近は URN - Universal Resource Name という記法も用いられます）。 メールアドレス同様、 既にみなさん自身のホームページの URL が存在します。 "~"（チルダ）は [Shift]を押しながら [Tab]の上のキーをタイプしてください。

システム工学部（６Ｆ演習室）の URL
http://www.sys.wakayama-u.ac.jp/~ユーザ名/
システム情報学センター（３Ｆ演習室ほか）の URL
http://www.center.wakayama-u.ac.jp/~ユーザ名/

では、 自分自身のシステム工学部のホームページを開いてみてください。

URL を指定して開く方法は 第２回で説明しています。 みなさんはまだホームページを作っていない（ハズな）ので、 "File not found" と表示されるはずです。

システム情報学センター側のホームページについて
３階やシステム情報学センターの演習室を一度でも使ったことがある人は、 システム情報学センター側にホームページが既につくられてると思います。 IRIX にはもともと、 はじめてログインした時に、 その人のホームページを自動的に作る機能があるのですが、 ６階ではその機能を止めています。

それでは、自分ホームページの作成をはじめましょう。

public_html の作成

まず最初に、ホームディレクトリの直下に public_html というディレクトリを作ってください。 public と html は "_" （アンダースコア）でつながっていることに気をつけてください。 "_" を入力するには [Shift]を押しながら [Backspace]の２つ左のキーをタイプしてください。

これはディレクトリウィンドウで行えます （第５回参照）。 コマンドで行うなら、 “コンソール”か“UNIXシェル”を開いて次のコマンドを実行してください。

% pwd[Enter]
/usr/people/ユーザ名 ←ホームディレクトリであることを確認
% mkdir public_html[Enter]

ここで Netscape の再読み込み (Reload) ボタンをクリックしてみてください。 今度は "File not found" にはならなかったでしょう？

"~"（チルダ）について

"~"（チルダ）は画面表示に使う字体（フォント）の種類によって、 上の方にあったり、波線だったり、直線だったりしますが、 単に字形の違いですから気にしないで下さい。

"~" は UNIX（というより csh）では“ホームディレクトリ”の意味に使われます。 例えば、シェルで ls ~ というコマンドを実行すれば、 カレントディレクトリがホームディレクトリでなくても、 ホームディレクトリのファイル一覧が表示されます。 また ls ~guest とすれば、 guest というユーザのホームディレクトリのファイル一覧が表示されます。

これと同様に、URL における "~USER" は、 その WWW サーバにおける USER という利用者のホームページの場所、 という意味で使われています。

自己紹介のページを作る

public_html を作ると、 ホームページにはそのディレクトリに置かれたファイルの一覧が表示されます。 まだそのディレクトリには何も入っていないので、 一覧には "Parent Directory" くらいしか表示されていないと思います。 では、ここに自己紹介のファイルを置いてみましょう。

シェルでカレントディレクトリを public_html に移し、 mule で profile.txt というファイルを作成してください。

% cd public_html[Enter]
% mule profile.txt[Enter]

一応自己紹介なので、 次のような内容を書いてください（もちろん自分のことを書くように）。

自己紹介

　　　　名前　　　：　和歌山健太郎
　　　　出身地　　：　和歌山県和歌山市
　　　　生年月日　：　昭和52年6月23日
　　　　趣味　　　：　美食
　　　　メッセージ：　美食サークルメンバー募集中

書き終わったら C-x C-s をタイプして、 ファイルを保存してください （mule は終了しないでください）。 その後 Netscape の再読み込み (Reload) ボタンをクリックすると、 ホームページのファイル一覧に profile.txt が現れると思います。 それをクリックして、 自分の自己紹介が表示されるかどうか見てみてください。 見終わったら Netscape の“戻る (Back)”ボタンをクリックして、 ファイル一覧に戻っておいてください。

で、このままだとちょっと味気ないので、 もうちょっと飾りを入れてみましょう。 profile.txt を下のように変更してください。

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

<head>
<title>Profile</title>
</head>

<body>

<h1>自己紹介</h1>

<dl>
<dt>名前</dt>
<dd>和歌山健太郎</dd>
<dt>出身地</dt>
<dd>和歌山県和歌山市</dd>
<dt>生年月日</dt>
<dd>昭和52年6月23日</dd>
<dt>趣味</dt>
<dd>美食</dd>
<dt>メッセージ</dt>
<dd>美食サークルメンバー募集中</dd>
</dl>

</body>

</html>

これを、profile.html というファイル名で保存します。 C-x C-w をタイプして、 ファイル名に profile.html とタイプして改行してください。

Write file: ~/public_html/profile.html[Enter]

Netscape の再読み込み (Reload) ボタンをクリックしてください。 ファイルの一覧の中に profile.html が現れたら、 それをクリックしてみてください。 今度はレイアウトされたページが表示されたでしょうか？ では、次に進む前に Netscape の“戻る (Back)”ボタンをクリックして、 ファイル一覧を表示させておいてください。

HTML について

Web ページのレイアウト制御は、 HTML (Hyper Text Markup Language) というある種の“プログラミング言語”によって行います。 Hyper Text というのは、文書中に関連する情報への指標（ポインタ）を埋め込んだ、 構造を持った文書のことを言います。Markup というのは（文書の）構成要素が何を意味しているのか （タイトル、見出し、本文など）を明示することを言います。 このために使われる <head> や <img src="photo.jpg"> のようなものを、 HTML タグ（あるいは単にタグ） と呼びます。 タグに使用する英文字には、大文字／小文字の区別はありません （でも小文字の使用を勧めます）。


ファイルの拡張子について

ファイル名の後ろの、"."（ピリオド）に続いた ".txt" や ".html" のことを、ファイル名の拡張子と言います。 普通、ファイルの種類はファイル名だけでは判別できないので、 このように拡張子でファイルの種類を明らかにします。 ".txt" は普通のテキストファイル、いわゆるプレーンテキストで、 ".html" は HTML で記述されたテキストファイルであることを示します。

ファイル名の拡張子が ".txt" だと、 中身が HTML で書いてあっても HTML だと解釈されないので、 テキストエディタで作成したそのままの内容が表示されます。

index.html を作る

たいていのホームページでは、 こういうファイルの一覧が表示されることはないと思います。 これを隠す、あるいは自分で一覧のページを作るためには、 そのディレクトリに index.html というファイルを作ります。

mule で C-x C-f をタイプして、 ファイル名に index.html を指定してください。

Find file: ~/public_html/index.html[Enter]

このファイルには、 次のような内容を書いてください。

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

<head>
<title>Kentaro's page</title>
</head>

<body>

<h1>和歌山健太郎のホームページ</h1>

<p>和歌山健太郎のホームページへようこそ。</p>

</body>

</html>

出来上がったら、 C-x C-s でファイルを保存してください。 その後、Netscape の再読み込み (Reload) ボタンをクリックしてください。

これで profile.txt や profile.html を隠すことができたと思います。

index.html について
Web サーバ（www.sys.wakayama-u.ac.jp のようにホームページを管理するコンピュータ）の設定にもよりますが、 URL がディレクトリを指しているとき （URL の最後が http://www.sys.wakayama-u.ac.jp/ のように "/" で終わっているとき）は、 そのディレクトリに index.html があれば index.html を表示し、 無ければそのディレクトリの一覧を表示します。

リンクを張る

先ほどのファイル一覧のページのように、 ページ上の特定個所をクリックして、 別のページを表示できるようにしてみましょう。 いま、mule は index.html を編集している状態だと思いますから、 それに下線部のような内容を追加してください。

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

<head>
<title>Kentaro's page</title>
</head>

<body>

<h1>和歌山健太郎のホームページ</h1>

<p>和歌山健太郎のホームページへようこそ。</p>

<a href="profile.html">自己紹介</a>

</body>

</html>

出来上がったら、 C-x C-s でファイルを保存してください。 その後、Netscape の再読み込み (Reload) ボタンをクリックしてください。

“自己紹介”の文字の色が変わっていると思いますから、 それをクリックしてください。 先ほど作った自己紹介のページが表示されましたか？

画像を埋め込む

今度は、自己紹介のページに、自分の写真を埋め込んでみましょう。 この授業の第３回で静止画像の取り込み をしましたが、 今回は Web 用に画像を作るため、 少し手順が違います。 そこで、おさらいを兼ねて、もう一度画像を取り込みましょう。

  1. デスクトップの camera をダブルクリックして、 mediarecorder を起動してください。

  2. 静止画像の取り込みを行うために、 mediarecorder の“顔”の絵のボタンをクリックして、 “接続されているソースからのイメージ:O2ビデオ・ハードウェア”→ “システム・カメラ”という順にメニューを選んでください。

  3. mediarecorder の“タスク”のメニューから“イメージ”→ “Web 文書”という順に選んで、 ホームページ用の画像を作成する設定にしてください。

  4. もう一度“タスク”のメニューを開き、 今度は“タスク設定を表示”を選んでください。
  5. タスクとして“Web 文書”を選んでいるので、 ファイル形式には最初から JFIF（いわゆる JPEG 画像）が設定されていると思います。 ビデオ・フレームのサイズは、“全体”だと大きすぎるので、 "1/4" にします。 その後 "OK" のボタンをクリックして、 このウィンドウを閉じてください。

  6. カメラのシャッターボタンを押すか、 mediarecorder の“記録”ボタンをクリックすると、 静止画像が取り込まれます。 ファイル名は“イメージ(数字).jpg”になっていると思います。

  7. ファイル名に日本語が混ざっていると、 漢字コードの問題で Web ページ上に画像を貼り付けるのに失敗する場合があるので、 これを photo.jpg という名前に変更します。

  8. このファイルを public_html の中に入れます。

次に、mule で自己紹介のページ (profile.html) を開きます。

おそらく、今起動している mule のバッファのウィンドウには index.html が表示されていると思いますが、 profile.html もその mule の他のバッファに読み込まれていると思います。

そのときは、C-x b をタイプしてください。

Switch to buffer: (default profile.html) profile.html[Enter]

ここで profile.html をタイプして改行します。 もちろんここでもスペースバーを叩けば、 バッファ名（ファイル名）のコンプリーション（補完）ができます。 default が profile.html になっていれば、 改行するだけで構いません。

もし、profile.html が読み込まれておらず、 バッファのウィンドウ内に下に示す profile.html の内容が表示されなければ、 C-x C-f をタイプして、 profile.html をバッファに読み込んでください。

profile.html を開くことができたら、 それに下線部の内容を追加してください。

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

<head>
<title>Profile</title>
</head>

<body>

<h1>自己紹介</h1>

<img src="photo.jpg" alt="自画像">

<dl>
<dt>名前</dt>
<dd>和歌山健太郎</dd>
<dt>出身地</dt>
<dd>和歌山県和歌山市</dd>
<dt>生年月日</dt>
<dd>昭和52年6月23日</dd>
<dt>趣味</dt>
<dd>美食</dd>
<dt>メッセージ</dt>
<dd>美食サークルメンバー募集中</dd>
</dl>

</body>

</html>

出来上がったら、 C-x C-s でファイルを保存してください。 その後、Netscape で自己紹介のページを表示させて、 再読み込み (Reload) ボタンをクリックしてください。

自分の顔写真が自己紹介のページに埋め込まれましたか？

顔写真の公開は、課題の確認まで （今日から１週間以内）は継続してください。 その後は顔写真を削除して頂いて結構です。

画像ファイルの種類について

画像ファイルの書式（画像フォーマット）には、 かなり多くの種類があります。 IRIX の標準の画像フォーマットは SGI RGB という形式 （拡張子 ".rgb"）ですが、 Web ブラウザで表示可能なのは、 GIF（ファイルの拡張子は ".gif"）、 JFIF（ファイルの拡張子は ".jpg" ".jpeg"）などです。 また最近のブラウザでは PNG（ファイルの拡張子は ".png"）が表示できます。

SGI RGB 形式の画像データは、 一般の Web ブラウザでは表示できないので、 ホームページ用の画像として使うには、 これを GIF や JFIF に変換する必要があります。

GIF はアメリカのパソコン通信の CompuServe で、 画像データの交換のために考えられた画像フォーマットです。 これは約 1677万色中から 256 色を選んで使うインデックスカラー画像なので、 写真のようなフルカラー画像を保存するには不向きですが、 画像の一部を透明にしたり、 簡単なアニメーションを表示するなどの機能があります。

一方 JFIF (JPEG File Interchange Format) は、 画像の符号化・データ圧縮に JPEG を用いたもので、 一般に JPEG などと形式と呼ばれます。 これは写真のようなフルカラー画像を、 高い圧縮率で保存することができます。

課題

今作った自分のホームページを、 自分なりにアレンジせよ。