情報処理IIA（HTML入門）第12回

目次	索引
12.1 URL 12.1.1 URLとは 12.1.2 絶対URLの書式 12.1.3 file方式 12.1.4 mailto方式 12.1.5 http方式 12.1.6 ディレクトリの指定 12.1.7 URLをどこに書くか 12.1.8 相対URL 12.1.9 絶対URLか相対URLか 12.1.10 baseタグ 12.2 演習12 12.3 レポート課題	<base> URI URL 基準URL 絶対URL 相対URL

12.1 URL

12.1.1 URLとは

URL （Uniform Resource Locator）とは、主にインターネットで利用できる情報サービスの、アクセス方式や設置箇所を表す文字列です。例えば、検索エンジン「ヤフー・ジャパン」を利用するときは、Netscapeの「場所：」入力欄に

http://www.yahoo.co.jp/

と入力して、ヤフーのホームページを表示します。この文字列がURLの一例です。 URLは、Netscapeの「場所：」入力欄に入力する他に、HTMLドキュメントに書いて、リンク先を指定したり、画像ファイルの所在を示したりするのに使われます。

もしかしたら、URIという用語を聞いたことがあるかもしれません。 URI （Uniform Resource Identifier）は、URLの拡張概念です。この授業では、両者の差を意識する必要はありませんので、URLをURIと読み替えてもかまいません。

URLには、 絶対URL （ absolute URL ）と 相対URL （ relative URL ）があります。絶対URLは、情報サービスのアクセス方式や設置箇所を完全に指定します。一方、相対URLは、それらを部分的に指定します。相対URLが書かれたところには、基準となる絶対URLがあり、基準のURLと相対URLの両者から完全な指定がなされます。

12.1.2 絶対URLの書式

絶対URLの書式は次の通りです。

scheme : scheme-specific-part

ここで、 scheme はアクセス方式を表す文字列です。アクセス方式のうち重要なものは次の通りです。

ハイパーテキスト転送プロトコル（http）
ローカルファイル（file）
電子メール（mailto）

scheme-specific-part はアクセス方式によって様々です。

12.1.3 file方式

file方式の場合は、file:（正式にはfile://）に続けてファイルの絶対パス名を書いて、ローカルファイルを指定します。

例えば、パス名が

/home/b00a/b00a001/schedule.html

であるファイルを作成した場合、Netscapeの「場所：」入力欄に

file:/home/b00a/b00a001/schedule.html

と入力しますと、そのファイルの内容が表示されます。

準備中のホームページや公開しないホームページは、この方法で開くとよいでしょう。

12.1.4 mailto方式

mailto方式の場合は、mailto:に続けてメールアドレスを書きます。

例えば、メールアドレスがb00a001@twcu.ac.jpである場合、HTMLドキュメントに

...
<a href="mailto:b00a001@twcu.ac.jp">
メールはこちらまで</a>
...

と書きますと、ブラウザは「メールはこちらまで」の部分を始点アンカーとして表示します。そして、もしそのブラウザにメール送信機能があれば、その部分をクリックしますとメール送信用のウィンドウが開きます。

12.1.5 http方式

http方式の場合、URLの書式は次のようになります。（もう少し複雑な形もあります。）

http:// host path

ここで、 host はWWWサーバのホスト名、 path はファイルの絶対パス名です。ただし、ファイルの絶対パス名と言っても、WWWサーバのホストにおける絶対パス名とは少し異なります。

例えば、Netscapeの「場所：」入力欄に

http://www.twcu.ac.jp/cis/index.html

と入力しますと、情報処理センターのホームページが表示されます。このURLは、ホストwww.twcu.ac.jpで稼働しているWWWサーバを指定しています。しかし、指定しているファイルは、/cis/index.htmlではありません。

WWWサーバは、すべてのファイルを公開するのではなく、あるディレクトリを定め、その下のファイルのみを公開するようにしています。そして、http方式で絶対パス名が指定されたときには、そのディレクトリの下になるように絶対パス名が構成されます。仮に、このWWWサーバではディレクトリ/var/lib/httpd/htdocsの下のみを公開すると設定しているとします。すると、このURLはファイル

/var/lib/httpd/htdocs/cis/index.html

を指定していることになります。

この授業の演習で、例えば

/home/b00a/b00a001/WWW-local/ip2a/ex1.html

にHTMLファイルを作成したとき、Netscapeの「場所：」入力欄には

http://www-local.twcu.ac.jp/~b00a001/ip2a/ex1.html

と入力してホームページを表示していました。ここでも同様の仕組みが働いています。

WWWサーバは、各々のユーザに対しても、ホームディレクトリの下のすべてのファイルを公開するのではなく、ユーザごとにあるディレクトリを定め、その下のファイルのみを公開するようにしています。そして、URL

http:// host /~ user / path

が指定されたときには、そのディレクトリの下になるように絶対パス名が構成されます。ホストwww-local.twcu.ac.jpのWWWサーバでは、WWW-localというディレクトリがそれです。したがって、URL

http://www-local.twcu.ac.jp/~b00a001/ip2a/ex1.html

は、ファイル

/home/b00a/b00a001/WWW-local/ip2a/ex1.html

を指定していることになるのです。

12.1.6 ディレクトリの指定

file方式やhttp方式のURLでは、ファイルの絶対パス名の代わりにディレクトリの絶対パス名が書けます。このようなURLが指定された場合、ブラウザの反応はWWWサーバの設定に依存しますが、たいていは次のいずれかです。

そのディレクトリにあるファイルindex.htmlを表示する。
そのディレクトリの内容一覧を表示する。
エラーメッセージを表示する。

例えば、Netscapeの「場所：」入力欄に

http://www.twcu.ac.jp/unofficial/

と入力しますと、東京女子大学の非公式情報のホームページが表示されます。このURLは、ホストwww.twcu.ac.jpのファイル

/var/lib/httpd/htdocs/unofficial/index.html

を指定しているのです。（公開ディレクトリが/var/lib/httpd/htdocsの場合。）

12.1.7 URLをどこに書くか

今までの授業では、ファイルのパス名を書いて、リンク先や画像ファイルを指定していました。実は、今までファイルのパス名を書いていたところには、本当はURLを書くことになっています。ただし、ファイルのパス名はURLの一種ですので、今まで間違っていたわけではありません。具体的には、次の部分に書きます。

画像（タグ）: <img src=" URL ">
背景画像（プロパティ）: background-image: url( URL )
始点アンカー（タグ）: <a href=" URL "> 〜 </a>
初期フレーム（タグ）: <frame src=" URL ">

絶対URLとは、アクセス方式と設置箇所を完全に指定する文字列でした。相対URLとは、これらを部分的に指定する文字列です。相対URLは、主にHTMLドキュメントで用いられ、そのHTMLファイルが基準になります。基準となるHTMLファイルを指定する絶対URLを、 基準URL （ base URL ）とよびます。相対URLが指定するものは、この相対URLと基準URLから決定されます。この決定手続きを、相対URLの解決といいます。

例として、基準URLが

http://www.fiction.co.jp/people/1999/list.html

であるとしまして、相対URLがどのように解決されるかを説明します。

基準URL http://www.fiction.co.jp/people/1999/list.html
相対URL top.html
　→    http://www.fiction.co.jp/people/1999/top.html

ファイル名は相対URLの一種です。この場合、基準URLの最後のファイル名を取り除き、相対URLのファイル名を付け加えた文字列に解決されます。すなわち、

http://www.fiction.co.jp/people/1999/list.html

で指定されたHTMLファイルのドキュメントに、

<a href="top.html"> 〜 </a>

という始点アンカーがあれば、そこをクリックしますと

http://www.fiction.co.jp/people/1999/top.html

の内容が表示されます。

基準URL http://www.fiction.co.jp/people/1999/list.html
相対URL konishi/intro.html
　→    http://www.fiction.co.jp/people/1999/konishi/intro.html

ファイルの相対パス名も相対URLの一種です。この場合も、基準URLの最後のファイル名を取り除き、相対URLの相対パス名を付け加えた文字列に解決されます。

基準URL http://www.fiction.co.jp/people/1999/list.html
相対URL ../1998/list.html
　→    http://www.fiction.co.jp/people/1998/list.html

相対URLでは、一つ上のディレクトリを指定することもできます。ただし、http方式の場合、公開ディレクトリより上は指定できません。

基準URL http://www.fiction.co.jp/people/1999/list.html
相対URL /about/detail.html
　→    http://www.fiction.co.jp/about/detail.html

ファイルの絶対パス名も相対URLの一種です。この場合は、基準URLの絶対パス名の部分を取り除き、相対URLの絶対パス名を付け加えた文字列に解決されます。

基準URL http://www.fiction.co.jp/people/1999/list.html
相対URL file:/home/staff/konishi/test.html
　→    file:/home/staff/konishi/test.html

HTMLドキュメントに絶対URLを書いた場合は、基準URLに関わらず、その絶対URLに解決されます。

12.1.9 絶対URLか相対URLか

HTMLドキュメントを書くとき、絶対URLと相対URLのどちらを用いたらよいでしょうか。これは、HTMLファイルどうしの関係によって様々です。

いま、ディレクトリ/home/b00a/b00a001/WWW-local/ip2aの名前をhp2002に変更したとします。もし、ファイルsydney.htmlのドキュメントでリンク先を絶対URL

http://www-local.twcu.ac.jp/~b00a001/ip2a/moscow.html

で指定していましたら、これを

http://www-local.twcu.ac.jp/~b00a001/hp2002/moscow.html

と書き直す必要があります。一方、リンク先を相対URL moscow.htmlで指定していましたら、sydney.htmlを書き直す必要はありません。なぜならば、名前の変更後のsyndey.htmlの基準URLは

http://www-local.twcu.ac.jp/~b00a001/hp2002/sydney.html

なので、相対URL moscow.htmlは絶対URL

http://www-local.twcu.ac.jp/~b00a001/hp2002/moscow.html

に解決されるからです。

絶対URLのほうが良い場合もあります。例えば、ディレクトリ/home/b00a/b00a001/WWW-localにHTMLファイルintro.html

...
私が
<a href="index.html">
はじめて作ったホームページ</a>
を見てください。
...

を作成していて、このintro.htmlをあるプロバイダでも公開したくなったとします。このとき、intro.htmlをプロバイダに転送した後で、

...
私が
<a href="http://www-local.twcu.ac.jp/~b00a001/index.html">
はじめて作ったホームページ</a>
を見てください。
...

と書き直す必要があります。一方、はじめから絶対URLで指定していれば、intro.htmlをプロバイダに転送した後は書き直す必要がありません。

12.1.10 baseタグ

<base> タグを用いますと、HTMLファイルの所在に関わらず、基準URLを明示的に指定できます。書式は、 <base href=" URL "> です。このタグに終了タグはありません。また、このタグは <head> 〜 </head> の中に書きます。

例えば、

<html>
  <head>
    <title>Image file collection</title>
    <base href="http://www.fiction.co.jp/img/list.html">
  </head>
  <body>
    <h1>画像ファイルコレクション</h1>
    <img src="pic01.jpeg" alt="pic01">
    <img src="pic02.jpeg" alt="pic02">
    ...
  </body>
</html>

と書きますと、このHTMLファイルがどこにあったとしましても、画像ファイル

http://www.fiction.co.jp/img/pic01.jpeg
http://www.fiction.co.jp/img/pic02.jpeg
...

が指定されることになります。

12.2 演習12

2002年12月30日、A子は日記のホームページを作成しようと考え、以下のような階層的ディレクトリを構成し、2003年1月2日までの4日間、日記を書き続けました。

                ip2a
                  |
        +---------+---------+
        |                   |
      2002                2003
        |                   |
        +                   +
        |                   |
       12                  1
        |                   |
   +----+----+         +----+----+
   |         |         |         |
30.html   31.html   1.html    2.html

30.html

2002/12/30の日記

部屋の大掃除を始めたが、面倒になって途中でやめた。

明日 2002/12/31 へ。

31.html

2002/12/31の日記

紅白歌合戦を見ていたら、いつのまにか寝てしまった。

昨日 2002/12/30 へ。明日 2003/1/1 へ。

1.html

2003/1/1の日記

とりあえず、届いた年賀状に急いで返事を書いた。

昨日 2002/12/31 へ。明日 2003/1/2 へ。

2.html

2003/1/2の日記

デパートに福袋を買いに行ったら、すでに売り切れだった。

昨日 2003/1/1 へ。

A子が悩んだのは、リンクを張るときのタグの書き方です。 2002年12月31日の日記へリンクを張る場合、絶対URLで

<a href="http://www-local.twcu.ac.jp/~b00a001/ip2a/2002/12/31.html">
2002/12/31</a>

と書くのは確実ですが面倒です。また、相対URLですと、ファイル30.htmlでは

<a href="31.html">
2002/12/31</a>

なのに、1.htmlでは

<a href="../../2002/12/31.html">
2002/12/31</a>

となって、統一感がありません。

そこでA子は、 <base> タグをうまく利用しました。（ここが問題です。）これによって、30.htmlでも1.htmlでも

<a href="2002/12/31.html">
2002/12/31</a>

と書くことができ、他の日についてもこの書き方でリンクを張ることができました。

A子が最終的に作成したホームページを再現してください。

12.3 レポート課題

今日の演習12に従ってホームページを作成し、そのファイル名をkonishi@twcu.ac.jpあてにメールで報告してください。メールには、学生番号、氏名、科目名、授業の日付け（7/4）を明記してください。

[小西ホームページ] [目次・索引] [前の授業] [次の授業]