CSSやJSを/(スラッシュ)始まりの絶対パスで指定したままローカルで確認する


最近ではページに読み込むCSSやJavaScript、アンカーのリンク先を<link rel="stylesheet" href="/style.css" type="text/css" />のように/(スラッシュ)始まりの絶対パスで指定するのが一般的になってきています(関連エントリー:[n] 絶対パス2.0)。
これは、リンク先のファイルとの位置関係を気にしたり、テストサーバ・ミラーサーバによってURIを書き換える等という事をしなくても良かったりと、ファイル管理がとても楽になる書き方です。

一方、この指定方法では“実際にテストサーバなり実サーバなりにアップしないと見栄えが確認できない”という人が、特にデザイン系の人に結構いるような気がします。
しかしマシンにApacheが入っていれば、ファイルの修正後アップロード作業をする事無く、その場でCSSやJSを読み込んだ動きを確認できます。
//(少なくとも最新機種の)Macは元からApacheが入っているし
//Windows用にもインストーラがあったりするので難しい話ではありません

向・不向
個人開発, HTML, CSS, JavaScript
不向
共同開発, DBMSを扱うもの

共同開発に向かないというのは、IDEでのローカルの保存先を共有サーバにしている場合等、使えないシチュエーションがあるからです。
いつでも気軽に、自分の判断だけでApacheを再起動できる環境があるならば共同開発だろうが何ら問題ありません。

テスト環境
OS Windows XP(Pro)
Server Apache 2.0.59(Apache Download Page
DocumentRoot C:\Program Files\Apache Group\Apache2\htdocs
Host Name localhost

今回はWindows環境を例に取りますが、MacでもLinuxでもDocumentRootやhttpd.confの場所が違うくらいで、後の手順は殆ど同じです。

手順
  1. (ここではDocumentRoot以下に)任意のフォルダを作成する

    確認対象のファイルをここに入れる。C:\Program Files\Apache Group\Apache2\htdocs\test_site

  2. httpd.confに以下の内容を追記する

    Alias / "C:/Program Files/Apache Group/Apache2/htdocs/test_site/"Alias(エイリアス)という言葉はWindowsユーザには馴染みの薄い言葉かも知れないが、Windowsで言うところの「ショートカット」に限りなく近い。イコールではないけれど。

  3. Apacheを再起動する

これでブラウザからhttp://localhost/にアクセスすれば、test_site直下が表示されるようになります。

備考
  • 「1.任意のフォルダを作成する」ではファイルの管理という点も含めあくまで例としてDocumentRootの下にしたが、実際にはDocumentRoot以下である必要は無い
  • 元に戻すには「2.httpd.confに以下の内容を追記する」で追記した部分を削除orコメントアウトした後、Apacheを再起動。

最近仕事絡みでひとネタあったのですが(Webページ製作をお願いしている業者さんから「ウチでは見栄えまで確認できないのでそっちのテストサーバで確認してくれ」的な事を言われた)知らない人って意外といるのかなぁと思い、ちょっと書いてみました。
長いテキスト書いて頭こんがらがってるので、分かりにくいところとかおかしな表現があったらご指摘下さい

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt="">