BracketsとXAMPPを連携させ、ライブプレビューする方法の基本編をお伝えしますね。そうそう、アクセスする際のドキュメントルートを変更する方法は、別途お伝えします。→XAMPPのドキュメントルートを変更し、「https://localhost/」でBracketsライブプレビューする方法
© 2015 Google Inc, used with permission. Google および Google ロゴは Google Inc. の登録商標であり、同社の許可を得て使用しています。
ちなみに、BracketsとXAMPPとを連携させると一部ライブプレビューが動作しなくなります。具体的にいうとhtmlファイルの場合、保存しないとライブプレビューが動作しなくなります。
ただ、それ以外(cssファイル)は、通常のライブプレビューができます。
またなんといっても便利になるのが「ルート相対パス」を使えるようになることです(ただしドキュメントルートの変更が必要になります)。『ルート相対パス？』っていう人もいるかと思いますので、こちらについてはまた改めてお伝えしますね。
前置きが長くなりました。はじめますね。
htdocsフォルダへプロジェクトフォルダコピー
すでに開発しているindex.html等がある場合
すでに開発しているindex.html等がある場合は、XAMPPインストールフォルダにあるhtdocsフォルダへ、(Bracketsで開発している)プロジェクトフォルダをコピーしましょう。
管理人の場合は、XAMPPインストールフォルダにあるhtdocsフォルダ「C:\xampp\htdocs」へ、プロジェクトフォルダー「italy」をコピーしました。
コピー先のフォルダ(管理人の場合は、C:\xampp\htdocs\italy)を、以降の説明で、「htdocs内プロジェクトフォルダ」と呼ぶことにしますね。
まだ何も開発していない場合
まだ何も開発していない場合は、XAMPPインストールフォルダにあるhtdocsフォルダ内に、1つフォルダ(＝プロジェクトフォルダ)を作成し、index.htmlを作成して下さい。
管理人の場合は、XAMPPインストールフォルダにあるhtdocsフォルダ「C:\xampp\htdocs」内に、italyフォルダ(＝プロジェクトフォルダ)を作成し、index.htmlを作成することにします。
作成したフォルダ(管理人の場合は、C:\xampp\htdocs\italy)を、以降の説明で、「htdocs内プロジェクトフォルダ」と呼ぶことにしますね。
Bracketsプロジェクトフォルダを再設定
Bracketsのプロジェクトフォルダを、上でコピーした(あるいは作成した)「htdocs内プロジェクトフォルダ」に再設定します。
ファイル→プロジェクト設定
Bracketsのメニューバーから[ファイル]→[プロジェクト設定]をクリックし、ライブプレビューのベースURLに「https://localhost/htdocs内プロジェクトフォルダ名/」と入力し、[完了]ボタンをクリックします。管理人の例でいうと、「https://localhost/italy/」になります。
以上で、BracketsとXAMPPを連携は完了です。次にブラウザーからアクセスしてみましょう。
Bracketsでライブプレビューする
それでは、XAMPPのApacheを起動して、Bracketsからライブプレビューを実施して下さい。BracketsとXAMPPを連携させたライブプレビューができます。
© 2015 Google Inc, used with permission. Google および Google ロゴは Google Inc. の登録商標であり、同社の許可を得て使用しています。
BracketsとXAMPPとの連携ライブプレビュー時の注意点
BracketsとXAMPPとを連携させたライブプレビュー時の注意点として、1つだけ……。htmlの場合、保存してからでないとライブプレビューに反映されなくなります。cssの場合は、保存とリロードせずにライブプレビューができます(つまり通常のライブプレビューと同じ動き)。
まとめ
今日はBracketsとXAMPPを連携させ、ライブプレビューする方法の基本編をお伝えしました。ただ今日お伝えした内容だけでは『ぶっちゃけ、何が便利になったのかよくわからない！』という人も多いかと思います。
実はもう1ステップ進めて、「ルート相対パス」を使えるようにドキュメントルートを変更すると、『す、す、すっげー便利！！！』となります。こちらについては、また改めてお伝えしますのでしばらくおまちください。
追加しました→XAMPPのドキュメントルートを変更し、「https://localhost/」でBracketsライブプレビューする方法
それでは。
コメント