「パス」についてのあれこれ


■Q&A

■Question

ランダムリンクについて 2002.5.16.Thu No.3485

ぴろあきさん、いつもお世話になり誠に有難うございます。またまた質問ですが、宜しければ教えて下さい。

絵をクリックするとランダムに飛ぶという、いわゆるランダムリンクボタンを作ってみたのですが、上手く機能しません。以下のスクリプトに誤りがありましたら、或いは「こっちの方が分かりやすいぞ」というようなスクリプトがございましたらお手数ですが、ご一報頂ければ幸いです。

<script language="JavaScript">
function LinkRan()
{
  switch(Math.round(Math.random()*3)){
    case 0: {
      location.href = "C:\WINDOWS\テ゛スクトッフ゜\aska\HP\aaa.html" ;
      break ;
    }
    case 1: {
      location.href = "C:\WINDOWS\テ゛スクトッフ゜\aska\HP\profile.html" ;
      break ;
    }
    case 2: {
      location.href = "C:\WINDOWS\テ゛スクトッフ゜\aska\HP\好きなこと.html" ;
      break ;
    }
  }
}
</script>
<table align="right">
<a href="JavaScript:LinkRan();">
<img src="C:\WINDOWS\テ゛スクトッフ゜\aska\animation.gif" border="0"></A></table>

いつもいつも有難うございます。

■Answer

Re:ランダムリンクについて ぴろあき 2002.5.16.Thu No.3491

最初にひとつ。
  "C:\WINDOWS\テ゛スクトッフ゜\aska\HP\好きなこと.html"
という指定は、自分のパソコンでは動きますけど、サーバーにアップロードしたら絶対に動かないので注意してくださいね。念のため…。(フロントページとかの作成ソフトを使うとよくやってくれます)

それで、ランダムリンクみたいな使い方をする時、switch 構文は融通という点で向かないです。以下のようにしてみたらどうでしょう?

function LinkRan()
{
  var path = new Array(); //変数 path を配列にする宣言
  path[0] = "aaa.html"; //path の0番に "aaa.html" を入れる
  path[1] = "profile.html"; //path の1番に以下略
  path[2] = "like.html";

  //配列数の範囲内でランダムな数値を作る
  var randomNum = Math.floor(Math.random() *path.length);

  //できた数値の配列番号に入ってるパスへジャンプ
  location.href = path[randomNum];

  //false を返して href のリンク動作をキャンセルさせる
  return false;
}

このようにしておくと、path[x] 配列を直すだけでいいので、管理が簡単です。
そしてそれを呼び出すリンクは、

<a href="aaa.html" onclick="return LinkRan()">

という方法がおすすめです。(Netscape2 で動かない欠点はありますが、さすがにもう絶滅状態ですので)

href="aaa.html" と入れておくと、JavaScript 非対応環境や、右クリック→新しいウィンドウ を選んだ時に、aaa.html が開かれます。普通にクリックした場合にのみ、LinkRan() が動きます。

onclick="return LinkRan()" は、LinkRan() を実行して、返ってきたやつをさらに href="" へ返します。LinkRan() 関数からは false を返すようにしているので、href のリンク動作はキャンセルされます。つまり、true を返せば href も作動します。
これを知っておくと、作れるスクリプトの幅が広がりますので、憶えておくとお得ですよ。
  例:IEだったらランダムリンクを動作させて false を返し、Netscape だったらランダムリンクさせずに true を返す…など

以上、お試しください。
関係ないですが、<table> の書き方が違います…。(最低でも <tr> と、<td> または <th> が必要です)

■Question

言われてみれば… 2002.5.17.Fri No.3498

今日は、ぴろあき様
先日はランダムリンクについてご助言下さり、有難うございました。
言われてみればその通りですよね…ソフト無しでやっていたので気付きませんでした。
非常ー――――に初心者のどん底な質問で恐縮ですが、
これはどうやって修正したら宜しいのでしょうか…
悲しいまでに、基本的な質問ですが、教えてやって下さい(T_T)

■Answer

Re:言われてみれば… (回答者2) 2002.5.17.Fri No.3499

横から失礼します。

好きなこと.htmlsukinakoto.html
と修正すれば大丈夫じゃないでしょうか?
日本語で入力された名前等は使用できません。

■Answer

Re:言われてみれば… (回答者3) 2002.5.17.Fri No.3500

まさかとは思いますが…
webのurlを指定していないのでは!?
私は初めてHP作った時にやってしまいましたが(-_-;)
自分のPCでは見れていたので友達に見てみて〜って言ってオオハジかきました彡

■Answer

Re:言われてみれば… ぴろあき 2002.5.17.Fri No.3503

上記でお二人がおっしゃってる通り、ホームページに使うフォルダやファイルの名前は、半角の英数字と一部の記号だけしか使えません。世界中につながるインターネット、日本語がわかるコンピュータなんて、ほんの一握りですしね。

加えて、大文字と小文字が区別されます。これ、必ずやるミス(Windows は区別しないので、アップするまで気づかない)ですので、どっちかに統一しておくと安心です。

"C:\WINDOWS\テ゛スクトッフ゜\aska\HP\好きなこと.html"

この引用符の中は、<A href=""> の中身と同じです。

  path[0] = "aaa.html"; //同じフォルダの aaa.html へ
  path[1] = "../index.html"; //ひとつ上のフォルダにある index.html へ
  path[2] = "profile/like.html"; //profileフォルダの中にある like.html へ
  path[3] = "http://www.google.com/"; //googleへ

など、絶対パスや相対パスでファイルのある場所を指定するだけです。

もし「パス」そのものについての質問だった場合、これじゃ意味わかりませんね。
その時はお手数ですが、再度の質問をお願いします。

■Question

ありがとうございます。 2002.5.19.Sun No.3506

>webのurlを指定していないのでは!?
えっ???
webのurlとは、どういう事なのですか?(もうこの子駄目だ…/涙)

>この引用符の中は、<A href=""> の中身と同じです。
>絶対パスや相対パスでファイルのある場所を指定するだけです。
>もし「パス」そのものについての質問だった場合、これじゃ意味わかりませんね。
これは、そのアドレスの後ろにつけるものでしょうか。
そしてパスとは何でしょう?

先生方、御迷惑を更にお掛けして生みませんが、もう暫しお付き合い下さいませ(T_T)

■Answer

Re:ありがとうございます。 (回答者2) 2002.5.19.Sun No.3508

こんばんわ。cgiの勉強してたらこんな時間になってしまいました。
早速ですが、webのurlとはインターネットのアドレス。と考えてもらって大丈夫だと思います。

パスとは、う〜ん。そのファイルまでの経路って感じです。
例えば、Googleまでのパス(経路)は、http://www.google.com/ です。
この http から始まるパスを絶対パスといいます。

相対パスとは、自分の開いているファイルからたどる経路のことです。
現在開いているファイルが aaa.html だとすると、ひとつ上のフォルダにある index.html を見る場合、../index.html とします。
これを相対パスっていいます。

こんな感じで分かっていただけるでしょうか?
説明下手ですいません。間違ってたらすいませんです。

■Answer

Re:ありがとうございます。 ぴろあき 2002.5.20.Mon No.3515

まぁそう落ちこまずに。最初から知ってたら、赤ん坊でも東大に現役合格できてしまいますよ。(現役?)
とりあえずパスについて、最初から順を追って説明を書いてみたので、お暇があれば見てみてください。
http://faq.creasus.net/02/0520/

■Res

すみません… 2002.5.21.Tue No.3524

数日間ネット落ちしていた為お返事が遅れてしまい、申し訳ありません。有難うございます。
お手数も煩わせたようで申し訳ないです。おかげさまで何とかなりそうです。

ああ…返事が遅れてなんだかタイムラグが…マヌケだ…(泣)
とはいえ、皆様にはお世話になりました。本当に有難うございます。


■パスとは?

"C:\WINDOWS\デスクトップ\aska\HP\好きなこと.html"

のように、ファイルのある場所を示す一列を、「パス」と言います。Pass じゃなくて Path です。
直訳すれば「道・進路・経路」で、いわゆるファイルのある場所です。ファイルの住所、とも言えますね。上の例の場合、「Cドライブの "WINDOWS" フォルダの "デスクトップ" フォルダの "aska" フォルダの "HP" フォルダにある、"好きなこと.html"」という意味ですよね。

ご存知と思いますが、\/ はフォルダごとの区切りを表します。Windows ではどちらも使えますが、インターネットでは / だけです。

パスには「絶対パス」「相対パス」という難しい名前の2種類がありますが、どっちを使ってもパソコンが自動で見分けてくれますから、人間様は正しいパスを書くことだけに集中します。


■絶対パス(フルパス)

「絶対ここにあるパス」と解釈します。住所で言うなら「日本国○○県△△市××町1-2-3」で、世界中のどこにいても、必ず目的地へ行けますよね。つまり、「重複した住所は存在しない」わけです。
主に二通りの呼ばれ方がありますが、インターネットでは絶対パス、自分のパソコンの中ではフルパスと区別されることが多いです。これは習慣的なものでしょう。

絶対パスをぶっちゃけて言えば、

  1. インターネット上のページの場合、http: で始まる。
  2. 自分のパソコンの中では、C:\D:\ のように始まる。(これは Windows の場合)

…です。

そして、インターネットでは C:\ の形を使うことはありませんhttp: で始まるか、下記の「相対パス」を使うか、二択です。(「webのurl」とは、このふたつのことを指します)
面倒くさければ「絶対パスは他のサイトにリンクを張る時だけ使う」と憶えておきましょう。

この説明はかなり不完全です。「絶対パス= http: で始まる」ではありません。

他にも https: ftp: file: mailto: news: gopher: nntp: telnet: wais: prospero: ついでに sstp: などなど、阿呆みたいにあります。前者4つは見る機会も多いですが、これらは望まない限り知る必要もないでしょう。
また、これらに加えて javascript: livescript: mocha: view-source: about: montulli: なんていうのもあります。
そして、「xxxx: で始まる=絶対パス」でもないです。(これらには「スキーム」という名前が付いてます)


■相対パス

「今いる場所から見たパス」で、自分のサイト内にリンクを張る時は、通常こちらを使います。これ、あまりに簡単すぎて、逆にうまく説明できないんですよね。
初めのうちはたしかに少しややこしいですが、感覚でなんとかなっちゃうものなので、一回わかれば実にあっけないです。難しく考えるほどハマります。

その仕組みを説明するには通常「道案内」のたとえを使うのですが、ここは結果優先で行きましょう。

■相対パスの作り方

index.html から like.html へ(相対パスで)リンクを張りたい」

大基本:
相対パスは「../フォルダ名/ファイル名」の3つの部品を順番に組み合わせて作る。
部品がなかったり複数あったりはしても、順番が入れ替わることはない。

まず、index.html があるフォルダをエクスプローラかなんかで開きます。

同じフォルダに like.html が一緒に入ってれば、今いる場所から動いてないので、そのまま

<a href="like.html">like.htmlへリンク</a>

と、ファイル名を書くだけで終わりです。スクリプトの場合もたいして変わらず、

path[0] = "like.html";

です。もちろんスクリプトの場合は通用しないこともありますが、サンプルとして公開されているものは、こんな感じで指定できるようにしてあるはずです。
あっけないですね。
つまり、全部のファイルをひとつのフォルダにまとめちゃうのが、一番簡単な方法です。

どこか別のフォルダに like.html がある時は、まず、紙と鉛筆を用意します。
そしてエクスプローラを操作して、そのフォルダまで行ってみてください。ただし、左側にあるフォルダツリーを使って横着しちゃダメです。
この時、

  1. 「上へ」ボタンを押した(ひとつ上に上がった)なら、押した回数だけ ../ と書きます。3つ上がったら ../../../ になります。
    ボタンを押さなかった時は、なにも書きません。
  2. どこかのフォルダに入ったなら、そのフォルダの名前を 1. の後ろに足して、さらに / (スラッシュ)を足します。
    document フォルダに入ったなら、document/ と書きます。さらに profile フォルダに入ったなら、document/profile/ となります。
    どこのフォルダにも入らなかった時は、なにも書きません。
  3. like.html のあるフォルダに辿り着いたら、ファイル名を 2. の最後に足します。これは必ず書かないといけません。(特例を除く)

これで「index.html から like.html への相対パス」ができます。
3つ上に上がって document フォルダ → profile フォルダに入ったなら、

../../../document/profile/like.html

となってるはずです。これが、いわば index.html から like.html までの道路地図です。
あとは

<A href="../../../profile/like.html">like.htmlへリンク</A>
path[0] = "../../../profile/like.html";

で相対パスリンクの完成。
パソコンはこの通りに辿れば、like.html まで行くことができますね。


■絶対パスのまとめ

絶対パスとは「ファイルの住所」です。ただし、インターネットと自分のパソコンは「別の惑星」というレベルで違うので、自分のパソコンでのパス(C:\ の形式)は、インターネットでは無意味です。

メリット

インターネットの絶対パスは、インターネットのどこにいようと、必ずそこへ行けます。
自分のパソコンの絶対パス(フルパス)は、どこのフォルダ・ドライブにいようが、必ずそこに行けます。Windows で言う「ショートカット」が、この形式です。
葉書に住所を書いたら、それが合ってる限り、必ず届きますよね。

デメリット

パスが一文字でも変わったり、あるいは間違えたりすると、リンクが切れてしまいます。
宛て先で福島県を福岡県と間違えたら、全然別のとこに行っちゃいますよね。

これは相対パスにもあるデメリット…というか、あたり前ですね。


■相対パスのまとめ

相対パスとはindex.html (のあるフォルダ)から like.html への行き方を書いた道路地図」です。他のフォルダにあるファイルからは、また違うものになります。

メリット

道路地図に書いてある行き方が変わらない限り、リンクが切れないことです。
自分の住んでる町の名前が変わったら、他の町からの郵便は届かなくなるけど、近所の友達の家へは同じ地図で行けますよね。

具体的には、自分のパソコンでもサーバーでも、たとえホームページを引っ越しても、リンクが切れません。もしリンクが全部絶対パスだったら、引っ越ししたら全滅することになります。だから普通は相対パスを使うわけです。

デメリット

地図がちょっと変わっただけでリンクが切れます。
友達の家が引っ越したら、行っても本人はいませんし、自分が引っ越したら、友達の家への行き方も変わります。
つまり、地図が役に立たなくなりますよね。

要するに「フォルダ名やファイル名などの構成をみだりに変えちゃダメ」ということです。
また、ドメイン(http://www.xxx.yy.jp/ までの部分)が違うと、相対パスは使えません。他の人のサイトへリンクを張るのは、必ず絶対パスを使います。


■おまけ〜もうひとつのパス形式

実は、パスにはもう一種類あります。絶対パスと相対パスを併せたような意味をもち、使いようによっては結構便利ですが、デメリットもあるので使ってる人はあまりいません。
余裕があったらついでに憶えておくと、得することもあるでしょう。

<a href="/index.html">トップのindex.htmlへ</a>

先頭に / が付いてるのが、この形式。意味は「ルートからの絶対パス」です。ルートとは、「一番上のフォルダ」です。一番上のフォルダとは、「ドメイン名の直下」です。
アドレスバーを見ると「http://faq.creasus.net/02/0520/」となってますよね。太字になってるとこがドメイン名です。この場合、http://faq.creasus.net/index.html へのリンクと同じ意味になります。
サイトを引っ越しても、変わったのがドメイン名だけならリンク全滅の憂き目に遭いません。

また、これは自分のパソコンでも同じです。自分のパソコンではドライブが「一番上のフォルダ」ですから、C:\ とか D:\ からの絶対パスとなります。
上記の例では C:\index.html へのリンクになります。(C:\ は今いるドライブによって変わります)

しかし普通の人はドメイン名の後に ~piroaki みたいなアカウント名が付きますし、サーバーと自分のパソコンでフォルダ構成を合わせておかないといけないので、使い勝手はいまいち良くないです。自分ドメインとサイト専用のドライブを用意すれば、かなり使えるんですけどね。


■さらにおまけ

<a href="./index.html">今いるフォルダのindex.htmlへ</a>

先頭に付いてる ./ は「今いるフォルダ」を表しますが、付けなくても同じなので、無理して使う必要はありません。


■おわりに

基本はなんといっても相対パスです。どうしてもわかんなければ、全部のファイルをひとつのフォルダにまとめてしまう方法がいいかも。こうしておけば、ファイル名を書くだけですみます。(ただし、サイトが成長するに従ってフォルダの中身がすごいことになって、管理が非常に面倒くさくなります)

相対パスの知識は、HP作成ソフトを使っていても必要になりますから、この機会にぜひ憶えておきましょう!


■追記:2003.8.17

再編集前のページ


■ このページについて

このページは、質疑応答掲示板で使用した回答の残骸です。検索エンジンに捕まったりリサイクルしたりすることもあろうので、なんとなく残してあります。広く公開しているページではありませんが、第3者の閲覧を禁止するものでもありません。
恒久的なURIは保証できないものの、よほどのことがない限り削除されることはないでしょう。心配性な人はページの保存をおすすめします。(IEは mht 形式でないと保存できないかも)