XAMPPのドキュメントルートを変更し、「http://localhost/」でBracketsライブプレビューする方法

Pocket

BracketsとXAMPPを連携させて、ライブプレビューできるようになった。でもその時、ブラウザーにアクセスするURL(=ドキュメントルート)を「http://localhost/」にしてBracketsライブプレビューしたいんだけど、方法がわからない……という人はいませんか? 実はこのブラウザーにアクセスするURL(=ドキュメントルート)を変更し、http://localhost/にするには、「XAMPP」と「Brackets」との2つ設定を変更する必要があります。 まず1つ目の設定変更は、XAMPPの一部として組み込まれているApache(Webサーバー)の「httpd.conf」ファイルです。 2つ目の設定変更は、Brakcetsのプロジェクト設定「ライブプレビューのベースURL」です。 ということで今日はその方法をお伝えしますね。

XAMPP設定の変更方法

それでは……と行きたいところですが、まずは、あなたのPC環境で「httpd.conf」ファイルがどのフォルダにあるのかを確認してください。

『どこ?』というあなたは、XAMPPコントロールパネルで[Explore]ボタンを押してください。

エクスプローラが表示されたら、[apache]フォルダ→[conf]フォルダと移動して下さい。

そのフォルダ配下に「httpd.conf」ファイルがあります。

ということで「httpd.conf」ファイルが見つかったところで、変更をはじめます。

1. httpd.confファイルのバックアップ

設定変更は、httpd.confファイルを編集して行います。なので万全の安全を整えるために、まずはhttpd.confのバックアップを取っておきましょう。ファイル名は自由で構いませんが、管理人は「httpd.conf.org」にしました。

2. httpd.confファイルの変更

httpd.confファイル内の「DocumentRoot “C:/xampp/htdocs”」という文字が記述されている行を探します(ちなみに管理人のhttpd.confファイルでは245行目あたりにあります)。 見つけたら、以下の2か所(245行目と246行目)を以下のように変更して保存します。

プロジェクタフォルダは自分のフォルダ名にしてくださいネ。管理人の場合はitalyになります。ので管理人の場合は以下のようになりました。

『プロジェクトフォルダって?』という人は、ちょっと回り道になりますが、まずはこちらで設定してから、再度このページに戻ってきてください。

BracketsとXAMPPを連携させ、ライブプレビューする方法

以上で、httpd.confファイルの設定変更は終了です。

次にBracketsライブプレビューの設定変更です。

Brackets設定の変更方法

Bracketsライブプレビューのプロジェクト設定を変更します。メニューバーから[ファイル]→[プロジェクト設定]をクリックし、ライブプレビューのベースURLに「http://localhost/」と入力し、[完了]ボタンをクリックします。

以上で、Bracketsライブプレビューの設定変更は終了です。

http://localhost/でBracketsライブプレビューする

ではBracketsでライブプレビューしましょう……っとその前に、もしXAMPPでApacheWebサーバーを起動しておきましょう。すでに起動していた場合は、ApacheWebサーバーを再起動しておきましょう(設定変更を反映するため)。

次にいよいよ、Bracketsライブプレビューしましょう © 2015 Google Inc, used with permission. Google および Google ロゴは Google Inc. の登録商標であり、同社の許可を得て使用しています。

どうですか? XAMPPのドキュメントルートを変更し、http://localhost/でBracketsライブプレビューすることはできましたか?

まとめ

今日は、BracketsとXAMPPを連携させて、BracketsライブプレビューでアクセスするURLを「http://localhost/」に変更する設定方法について説明しました。 この設定をすると非常に便利なことが色々できるようなります。超初心者さんにとって、その中でももっとも便利になるのが「ルート相対パス」を使えるようになることです。 『ルート相対パス?』という人もいるかと思いますので、その説明はまた改めてしますね。それでは!

Pocket