よくある悩み

プログラマとコラボレーションするデザイナやマークアップエンジニアはデザインやコーディングのツールには詳しいもののサーバ関係のソフトウェアはさっぱりという場合がよくあります。

もっとも多いのがDreamWeaverを利用したコーディングの際に行われるリソースの相対パス指定です。

<img alt="" src="../../shared/images/btn_input.jpg" />

こういった記述は、そのページのURLが変わるとパスの指定が無効になってしまいます。動的なページを作成する場合、実際のURLはプログラマが変更したり、さまざまなURLで同一のソースを使う場合があります。その為、デザイナやマークアップエンジニアにはサイトのルート「/」からの絶対パスで指定するようにと依頼するようにしています。

絶対パスによる指定は、コーディングする側からはプレビューが使えないと不便だという意見をよく耳にします。そんなデザイナ、マークアップエンジニアにはXAMPPをおすすめしています。

XAMPP とは

XAMPPとはWindows + Apache + MySQL + PHP + 便利なツール類がセットになったパッケージです。XAMPPを利用すると絶対パスで記述したページもブラウザから直接確認することができます。

下記のURLからダウンロードします。

http://www.apachefriends.org/jp/xampp-windows.html#2671

個人的にはzipパッケージを推奨しています。インストールの手順は下記の通りです。

• ダウンロードして保存します
• Cドライブの直下に解凍します
• xamppディレクトリ内のsetup_xampp.batを実行します
• xampp-portcheck.exeを実行し80がfreeになっていることを確認します。（Skypeなどで80が使用されている場合は、Skypeの設定から80を使用しないように設定します）
• xampp-control.exeを実行し、コントロールパネルのapacheのStartボタンを押します
• 任意のブラウザで http://localhost/ にアクセスしてXAMPPの初期画面が表示されるかを確認します

表示が確認できればひとまず、XAMPPのインストールは完了です。ここからはもっとも使用するApacheソフトウェアの設定を説明します。

Apache の設定

ApacheはオープンソースのWEBサーバで、WEBブラウザのリクエストに基づいてページを送信するサーバソフトウェアです。Apacheを自分のパソコンにインストールしていれば、あたかもインターネット越しにサイトを見ているかのようにコーディングしたHTMLをブラウザで閲覧する事ができます。

その為にはコーディングしている作業ディレクトリをサイトとしてApacheに設定する必要があります。Apacheではその設定をDocumentRootと呼びます。設定の手順は以下の通りです。

• xamppディレクトリ内のapache\conf\httpd.confをエディタで開きます

• エディタの検索機能を利用して「DocumentRoot」を検索します（176行目付近）

  DocumentRoot "C:/xampp/htdocs"
  

• DocumentRoot "C:/xampp/htdocs" の 「C:/xampp/htdocs」の部分を置換機能を利用して作業ディレクトリのパスに変更します

  <Directory "C:/xampp/htdocs">
  

• 203行目付近に同様のパスの記述がありますが、置換機能でこちらも変更します

• XAMPPのコントロールパネルから　apache の Startボタンを押し、Apacheを起動します（既に起動済みの場合は一旦Stopを押して停止してください）
• ブラウザで「http://localhost/」を開き、自分のコーディングしているページが正しく表示されているかどうか確認します

これでXAMPPを使用してあたかもサイトにアクセスしているかのようにコーディングデータを確認できるようになります。非常に便利なので一度試してみてはいかがでしょうか。