Bracketsと.xhtmlファイルの編集
BracketsはAdobe製のオープンソースなコードエディタです。
BracketsはHTMLファイルのlive previewができて捗るのですが、残念ながら拡張子が.xhtmlなファイルではできないようになっています。修正方法は簡単で、issuesにも上がっているのですが、どうもガチなX(HT)MLだとCDATAの扱いとかが云々…という理由で取り込まれていないようでした。
が、その辺りは気にせず変なファイルは作らない前提で.xhtmlファイルを編集したい！ という場合には、自力で修正してビルドすることになります。
BracketsをOS Xでビルドする
Bracketsのソースはgithubにあります。本体のbracketsとビルド用のbrackets-shellに分かれています。
ビルド方法はbrackets-shellの方のWikiの Building Brackets Shellの方に書かれています。
まずは両方のプロジェクトのソースを取得します。
$ git clone https://github.com/adobe/brackets.git
$ git clone https://github.com/adobe/brackets-shell.git
ビルドにはgit、python、Xcode4が必要です。その辺りはお好きにご用意下さい。
あとはNode.jsが必要です。私はnodebrewでインストールしました。
$ nodebrew install v0.11.11
$ nodebrew use v0.11.1
brackets-shellのディレクトリに移動して、Gruntをインストールします。
$ cd brackets-shell
$ npm install -g grunt-cli
$ npm install
$ grunt setup
この状態でgrunt --helpを実行すると、いろいろタスクが表示されます。
ここまで来たら、grunt buildでビルドします。
$ grunt build
Running "build" task
Running "build-mac" task
Done, without errors.
こんなふうに表示されればビルドの完了です。
xcodebuild/Release の下に Brackets.app ができているはずです。
Bracketsを起動する
普通にFinderなどからBrackets.appをダブルクリックしてもいいのですが、bracketsプロジェクトからターミナルを使って起動する場合は以下になります。
$ ./xcodebuild/Release/Brackets.app/Contents/MacOS/Brackets
通常のbracketアプリとは異なり、起動直後はファイル選択のダイアログが表示されるので、ここでbracketsプロジェクトの下のsrc/index.htmlを選択します。そうすると、通常配布されているアプリを起動した時と同じ画面になります。
.xhtmlのlive previewのためのhack
本題に戻ると、.xhtmlファイルをlive previewするにはbracketsプロジェクトの方のsrc/file/FileUtils.jsに以下のパッチをあてます。
diff --git a/src/file/FileUtils.js b/src/file/FileUtils.js
index 55c418f..d1fb8ad 100644
--- a/src/file/FileUtils.js
+++ b/src/file/FileUtils.js
@@ -330,7 +330,7 @@ define(function (require, exports, module) {
}
/** @const - hard-coded for now, but may want to make these preferences */
- var _staticHtmlFileExts = ["htm", "html"],
+ var _staticHtmlFileExts = ["htm", "html", "xhtml"],
_serverHtmlFileExts = ["php", "php3", "php4", "php5", "phtm", "phtml", "cfm", "cfml", "asp", "aspx", "jsp", "jspx", "shtm", "shtml"];
/**
この状態で再度grunt buildを実行してバイナリを作り直すと、.xhtmlファイルを開いた場合でもlive previewができるようになっているはずです。