BracketsとXAMPPを連携させて、ライブプレビューできるようになった。でもその時、ブラウザーにアクセスするURL(＝ドキュメントルート)を「https://localhost/」にしてBracketsライブプレビューしたいんだけど、方法がわからない……という人はいませんか？
実はこのブラウザーにアクセスするURL(＝ドキュメントルート)を変更し、https://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行目あたりにあります)。
DocumentRoot "C:/xampp/htdocs"
<Directory "C:/xampp/htdocs">
#
# Possible values for the Options directive are "None", "All",
：
：
見つけたら、以下の2か所(245行目と246行目)を以下のように変更して保存します。
DocumentRoot "C:/xampp/htdocs/プロジェクタフォルダ"
<Directory "C:/xampp/htdocs/プロジェクタフォルダ">
#
# Possible values for the Options directive are "None", "All",
：
：
プロジェクタフォルダは自分のフォルダ名にしてくださいネ。管理人の場合はitalyになります。ので管理人の場合は以下のようになりました。
DocumentRoot "C:/xampp/htdocs/italy"
<Directory "C:/xampp/htdocs/italy">
#
# Possible values for the Options directive are "None", "All",
：
：
『プロジェクトフォルダって？』という人は、ちょっと回り道になりますが、まずはこちらで設定してから、再度このページに戻ってきてください。
以上で、httpd.confファイルの設定変更は終了です。
次にBracketsライブプレビューの設定変更です。
Brackets設定の変更方法
Bracketsライブプレビューのプロジェクト設定を変更します。メニューバーから[ファイル]→[プロジェクト設定]をクリックし、ライブプレビューのベースURLに「https://localhost/」と入力し、[完了]ボタンをクリックします。
以上で、Bracketsライブプレビューの設定変更は終了です。
https://localhost/でBracketsライブプレビューする
ではBracketsでライブプレビューしましょう……っとその前に、もしXAMPPでApacheWebサーバーを起動しておきましょう。すでに起動していた場合は、ApacheWebサーバーを再起動しておきましょう(設定変更を反映するため)。
次にいよいよ、Bracketsライブプレビューしましょう
© 2015 Google Inc, used with permission. Google および Google ロゴは Google Inc. の登録商標であり、同社の許可を得て使用しています。
どうですか？ XAMPPのドキュメントルートを変更し、https://localhost/でBracketsライブプレビューすることはできましたか？
まとめ
今日は、BracketsとXAMPPを連携させて、BracketsライブプレビューでアクセスするURLを「https://localhost/」に変更する設定方法について説明しました。
この設定をすると非常に便利なことが色々できるようなります。超初心者さんにとって、その中でももっとも便利になるのが「ルート相対パス」を使えるようになることです。
『ルート相対パス？』という人もいるかと思いますので、その説明はまた改めてしますね。それでは！
コメント