Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTML5
入門編

トップページ
HTML5入門編 - その他のパスの記述方法と使い分け

その他のパスの記述方法と使い分け

ガリガリ君といえばソーダ味だと思っていましたが最近現れたニューフェイス、梨味に心を奪われつつあります。

というわけでどうも。みなさまいかがお過ごしでしょうか。

続きまして『ドキュメントルート』からの位置を指定する記述方法を解説していきたいと思います。これについてはウェブサーバーにファイルを置いた場合の話となりますのでゆくゆく必要になるであろう知識となります。そして、ちょっと内容が難しいので今のところはざっと読むくらいで十分かと思います。腕前があがってきましたら読み直してみてください。

ではいきます。まず『ドキュメントルート』ってなにそれ？ってお話なんですが、『ドキュメントルート』とはサーバーがブラウザからアクセスがあったときに外部に公開するよう設定しているフォルダ(ディレクトリ)の最上位にあたる階層のことです。この公開する場所はウェブサーバー側で自由に設定することができます。

例えばサーバー側でブラウザからアクセスがあったときに『/var/www/html/』(varフォルダの中のwwwフォルダの中のhtmlフォルダ)を公開するように設定してあったとすると、『/var/www/html/test.html』(varフォルダの中のwwwフォルダの中のhtmlフォルダの中にあるtest.html)へ遷移させたい場合は以下のようにパスを記述することができます。

<a href="/test.html">リンクを設定するテキストなど</a>

『href属性』の値に注目してください。文頭に『/』が記述されていますね。この『/』はドキュメントルートを意味します。サーバー側に『/var/www/html/』をドキュメントルートとする、という設定がされていた場合は『/test.html』とパスに記述するだけで『/var/www/html/』の中の『test.html』へとリンクさせたりすることができます。

そしてこちらもサーバー側にファイル名が省略されていた際に『index.html』のデータを送る、という設定がされていた場合は『index.html』を省略できます。以下のサンプルソースをみてみましょう。

<a href="/">リンクを設定するテキストなど</a>

上記のhref属性の値に記述してあるのは『/』だけですね。この記述でもちゃんとサーバー側の設定をしておけば『ドキュメントルート』の『index.html』を送り返してくれます。

以下に『/』のサンプルを用意しました。弊社サーバーで運営している当サイトでは『/』と記述するとトップページである『index.php』へと遷移させるよう設定してあります。以下をクリックしてみてください。

トップページへ移動するよ！

トップページへ移動できましたでしょうか。これはよく使われる記述方法なので覚えておきましょう。

『/』で始まるパスの記述方法をWebの制作現場では『スラ切り』と呼ばれたりします。もしくは「ドキュメントルートからのパスでお願い」とかいう感じで先輩から指示されるかもしれません。そしたら上記の『/』で始まるパスで記述すればOKです。

(´-`).｡oO（『スラ切り』は私がいた現場で使っていた言葉なのであんまり一般的じゃないかもしれません...)

ちなみに『/』で始まるパスのことを『フルパス』と呼んだりしますが、これは厳密には間違いとなります。『絶対パス』と『フルパス』は同じ意味ですので要注意です。もし先輩から「このリンクはフルパスでお願い！」とお願いされたら『ドキュメントルート』からパスを書く事を指してるのか、それとも『URL』で書く事を指しているのか、どっちなのか確認したほうが良いですね。

では続いて『//』について解説します。これはあまり見ない記述方法となりますが個人情報をやりとりするウェブサイトでは必須の記述方法となります。

『//』は『URL』と同じような記述で指定しますが、ちょっと便利な機能が『//』にはあります。ちょっと前の記事の絶対パスの解説のところで『スキーム』のお話がありましたよね。『http://』ってやつです。これは『暗号化』が全くされていない通信方法となりますので通信する際は生のままのデータがそのままの状態で送られています。ということは今接続しているネットワークの管理者はそのデータを簡単に盗み見ることができます。これ、ちょっと怖いですよね。個人情報を送信する投稿フォームなどが設置されているウェブサイトだったら最悪です。

そんな悩めるエンジニアのために暗号化した状態で通信を行うことができるスキーム『https』が用意されています。『https』は『Hypertext Transfer Protocol Security』の略で、ウェブサーバーに『SSL』という情報を暗号化する仕組みを導入して、もろもろの設定を加えると『https://』でアクセスがあった場合、その通信を全て暗号化した状態でやりとりしてくれます。そうしておけば余程のハッキング技術を持った管理者でもない限り通信している情報を盗み見ることはできません。これで一安心ですね。

『https』のパスは『https://wp-p.info/』といったように『http』の部分を『https』と変更して記述すればOKで、アクセスするサーバーに『https』で通信できる仕組みが組み込まれていれば通信を暗号化した状態でウェブサイトを閲覧することができます。『https』の仕組みがないサーバーに『https://~』とアクセスした場合はサーバー側の設定で多少違いがありますが、「アクセスできないよ！」とブラウザが教えてくれるはずです。

んで、その『https』と『//』に何が関係あるのか、というと『//』と記述されたパスは今現在通信しているプロトコル(通信手順)をそのまま引き継いだ状態で通信させることができます。例えば個人情報を入力してもらったあと、そのまま暗号化した状態を引き継いで確認ページに移動させたいときに『//』を使用すれば暗号化した状態を保ったまま遷移させることができます。

この『//』を使った記述方法は以下のような感じになります。

『//wp-p.info/』

こうすると弊社の『http://wp-p.info』へつながります。『http://』か『https://』を省略して記述する、といったイメージですね。

一部のブラウザが対応していなかったため、この『//』を使ったパスの記述は最近実装できるようになった新しめの技術となります。しかし、大手企業のgoogleさんでもリンクは『//』を使ってね、という社内ルールがあるらしいので今後主流になっていくと思います。

では『/』と『//』のサンプルを以下に用意しましたので試してみてください。『/』と『//』はウェブサーバー上で実行させなくてはならないので今のところはこちらのサンプルで体感してみましょう。ご自身のサーバーをお持ちだったりローカルサーバーを動かしている方はぜひご自身で書いて試してみてください。

まずは『/』ですね。以下のソースになります。

<a href="/html-beginner/samples/15_02.html">/html-beginner/samples/15_02.htmlと指定しているよ！</a>

サンプルをみてみる。

弊社のサーバーの『ドキュメントルート』となる位置からみてhtml-beginnerフォルダの中のsamplesの中の15_02.htmlと指定しています。遷移できるのが確認できましたでしょうか。

続いて『//』ですね。以下がサンプルで、Googleさんのトップページへの遷移となります。

<a href="//www.google.co.jp">//www.google.co.jpと指定しているよ！</a>

サンプルをみてみる。

現在、当サイトは『https』をデフォルトのスキームとしていますので上記をクリックすると『https』の状態でそのままGoogleさんのサイトに遷移する形になりますね。同じ『スキーム』が使用されている、ということがミソです。『//』はこんな感じの挙動になりますね。

この『/』や『//』はちょっと慣れないと難しいかもしれませんが大手企業さんのウェブサイトを作成したりする際は必須の知識となりますのでなんとなーくでも覚えておくと良いです。

続きまして『パス』の使い分けについてご説明していきたいと思います。これまで色々なパスの記述方法を学んできました。

どれもファイルを指定するという目的は同じですが
「どのパスの記述を使えばいいのだろう」
という疑問がわいたのではないでしょうか。その使い分けについて解説していきたいと思います。

まずは『./』、『../』や『/』を使った相対的なパスです。相対的なパスの利点として、ファイル同士の位置関係が変わらなければパスの記述を変更する必要がない、というのがあげられます。

よくある例がサーバーの引っ越しをして『ドメイン』が変更になった場合です。

もし全てのHTMLファイルのパスが『URL』で記述されていた場合は
『http://引越し前のドメイン/』
という部分を
『http://引越し後のドメイン/』
に書き換えしなくてはなりません。何百ページもある大規模サイトだったら大変ですね。

相対的な位置関係で記述しておけばファイル同士の位置関係が変わらなければそのまま何も書き換えせずに使用できます。ということはフォルダを丸ごとコピーしてしまえばサーバーの引っ越しが完了になるのでとっても楽ですね。ファイル同士の位置関係が変わらなければ記述の変更が何も必要ない、というのがミソです。

ファイル同士の位置関係というのはそれほど変化することはありません。ウェブサイトを作成するときは相対的なパスで記述したほうが色々と楽なので何か特別な理由がない限り相対的なパスで記述すると良いかと思います。

昨今のウェブサイトでは『PHP』や『Ruby on Rails』などで動的に構築されていることが多く、『/』を使ったドキュメントルートからのパスで構築されていることが多いです。当サイトもほぼ全て『/』を使ったパスで構築されています。導入の目安にしてやってください。

では続いて絶対パスについて考えてみます。絶対パスの主な使い道としては外部からデータを持ってくる必要がある場合や外部ページへのリンクを設定する場合になりますね。

それと開発用のサーバーと本番用のサーバーが分けられている場合などで、このファイルは本番のサーバーからデータをとっていきたい、といった場合でも『絶対パス』が使用されます。大規模なウェブサイトでよく使用される手法なので覚えておきましょう。

というわけでまとめてると基本的に『./』、『../』、『/』を使った相対的なパスで構築するようにすればOKです。『URL』や『//』を使った『絶対パス』は必要となったときだけ利用する、といった感じですね。

ずいぶん長くなってしまいましたがパスについては大体こんなところですね。『/』を使用する『ドキュメントルート』からのパスはウェブサーバー上にファイルを置かないと実装できないので初心者の方には少し敷居が高いかもしれません。しかし、『/』も『./』も『../』も基準となる場所が変わるだけなのでパスそのものに慣れてしまえばどれも簡単に書けるようになるかと思います。『//』を使ったパスの記述方法も忘れないようにしてください。

ではこのへんで記事を切ります。次の記事では見出しを作ってみたいと思います。

またお会いしましょう。

この記事は桜舞が執筆致しました。