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

Pocket

BracketsとXAMPPを連携させ、ライブプレビューする方法の基本編をお伝えしますね。そうそう、アクセスする際のドキュメントルートを変更する方法は、別途お伝えします。→XAMPPのドキュメントルートを変更し、「http://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に「http://localhost/htdocs内プロジェクトフォルダ名/」と入力し、[完了]ボタンをクリックします。管理人の例でいうと、「http://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のドキュメントルートを変更し、「http://localhost/」でBracketsライブプレビューする方法 それでは。

Pocket