3.1 絶対パスと相対パス
3.1 絶対パスと相対パス
実際に使われているWebアプリケーションは、1つの画面で完結するものはほとんどなく、通常は複数の画面で構成されます。そのため、表示した画面から別の画面へ移動する場面がよくあります。
画面の移動を行う際には、次に実行したいファイルのパスを指定しますが、パスには以下の2種類が存在します。
絶対パス
http://やhttps://から始まるアドレスを使ってファイルの場所を指定します。これまでプログラムを実行する際にブラウザに入力していたURLが絶対パスで、主に他のサイトにリンクする場合に利用されます。
例）http://localhost:8080/web_basic/view/ch03/beforeLink.html
相対パス
基準となる現在のファイルから見て、任意のファイルがどこにあるかを指定します。具体的な記述方法については、プログラムを作成しながら学習していきます。相対パスは、主に同一アプリケーション内のファイルの移動に利用されます。
例）../beforeLink.html や ./ch01/hello.html
では、相対パスのリンクを使ったプログラムを作成し、実行しましょう。
相対パスを利用したHTMLプログラム
相対パスを利用したHTMLファイルを作成し、リンクの確認を行います。相対パスの記述方法と動作をしっかりと理解するため、これから3つのプログラムを作成します。
フォルダとhtmlファイルの作り方
以下の手順に沿って動的Webプロジェクト内にフォルダとhtmlファイルを作成してみましょう。
新規フォルダ作成ウィザードの起動
新規にフォルダを作成するフォルダを右クリックし、表示された一覧の中から以下の項目を選択します。
新規 ＞ フォルダ
今回は、webappフォルダ直下にフォルダを作成するため、webappフォルダを右クリックします。
② 新規フォルダの作成
表示された新規フォルダ作成画面のフォルダ名に「ch03」と入力し、「完了」ボタンを押下します。
webappフォルダの直下にch03フォルダができていることがわかります。
同様に、ch03フォルダの直下にsubフォルダを作成しましょう。
2つのフォルダが作成できたら、それぞれの階層にhtmlファイルを作成します。
③ 新規ファイル作成ウィザードの起動
新規にファイルを作成するフォルダを右クリックし、表示された一覧の中から以下の項目を選択します。
新規 ＞ htmlファイル
今回は、ch03フォルダ内にhtmlファイルを作成するため、ch03フォルダを右クリックします。
④ 新規ファイルの作成
表示された新規ファイル作成画面のファイル名に「beforeLink.html」と入力し、「完了」ボタンを押下します。
⑤ 新規ファイルの確認
パッケージ・エクスプローラー内の「ch03」フォルダの中に「beforeLink.html」ファイルが作成されます。
「afterLink1.html」「afterLink2.html」も同様に作成したら、HTMLファイルにソースコードを記述します。
また、HTMLファイルを作成した際にデフォルトで色々なタグが記載されていることがありますが、それらは無視して、テキストのサンプルコードの記載内容に合わせて書き直してください。
① 親フォルダの入力または選択： web_basic/src/main/webapp/ch03
② ファイル名： beforeLink.html
③ アクセスURL： http://localhost:8080/web_basic/ch03/beforeLink.html
beforeLink.html
<html>
<head>
<meta charset="UTF-8">
<title>リンクを使ったHTML</title>
</head>
<body>
<h2>beforeLink</h2>
<p><a href="afterLink1.html">afterLink1</a>へ移動</p>
<p><a href="sub/afterLink2.html">afterLink2</a>へ移動</p>
</body>
</html>
① 親フォルダの入力または選択： web_basic/src/main/webapp/ch03
② ファイル名： afterLink1.html
③アクセスURL： beforeLink.htmlから画面遷移でアクセスされる
afterLink1.html
<html>
<head>
<meta charset="UTF-8">
<title>リンクを使ったHTML</title>
</head>
<body>
<h2>afterLink1</h2>
<p><a href="beforeLink.html">戻る</a></p>
</body>
</html>
① 親フォルダの入力または選択： web_basic/src/main/webapp/ch03/sub
② ファイル名： afterLink2.html
③アクセスURL： beforeLink.htmlから画面遷移でアクセスされる
afterLink2.html
<html>
<head>
<meta charset="UTF-8">
<title>リンクを使ったHTML</title>
</head>
<body>
<h2>afterLink2</h2>
<p><a href="../beforeLink.html">戻る</a></p>
</body>
</html>
解説
beforeLink.html内のリンクをクリックすることで、対応した画面が表示されます。また、移動後に各画面にあるリンクをクリックするとbeforeLink.htmlを表示することができます。
このプログラムでは、相対パスを使ってパスを指定しています。beforeLink.htmlファイルから見て、表示したいファイルがある場所によってパスの指定方法が異なります。
まずはafterLink1のリンクです。
beforeLink.htmlから見た場合、afterLink1.htmlは同じフォルダの中にあります。このような場合は、ファイル名のみを記述します。
afterLink1.htmlからbeforeLink.htmlに戻る場合も同様です。同じフォルダの中にあるため、ファイル名のみを記述します。
次にafterLink2のリンクです。
beforeLink.htmlから見たとき、afterLink2.htmlは同じフォルダの中のsubフォルダの中にあります。このような場合には、「フォルダ名/ファイル名」と記述します。
また、afterLink2.htmlからbeforeLink.htmlに戻るときは逆に、1つ上の階層にあるので、「../ファイル名」と記述します。ファイル名の前につけた「../」が1つ上のフォルダを意味します。
フォルダの構成が複雑になると、指定するパスが分かり難くなる場合があります。しかし、基本的にはここで学んだように、1つ上のフォルダへ移動する、もしくは1つ下のフォルダへ移動するという記述の組み合わせによってパスを指定します。しっかりと理解して進みましょう。
同じ階層を意味する記述
本テキストでは同じ階層にあるファイルを指定する場合、パスはファイル名のみを記述しましたが、
他のWebサイト等でサンプルを見たとき、ファイル名の頭に「./」と付いている場合があります。
この「./」は「現在あるフォルダの」という意味を表しているので、ファイル名のみを記述した場合と同じ意味を持ちます。
「../」と似ていますので、間違えないように注意しましょう。
ポイント
リンクを指定するパスには、絶対パスと相対パスと呼ばれる2種類のパスがある。
同じ階層のファイルは「ファイル名のみ」、もしくは「./ファイル名」と記述する。
1つ上の階層を指定する場合は「../」を記述する。
1つ下の階層はフォルダ名を記述する。