Aikの技術的な進捗部屋

技術的な進捗とか成果とかを細々と投稿するブログです。時々雑記も。

Bracketsのカスタマイズ

Bracketsの入手

ターミナルのカスタマイズをしようとも思いましたが、Webプログラミング欲に負け…。
まず環境構築のため、Bracketsのインストールから着手することにしました。

ちなみにBracketsはWeb系のコーディングに特化した、かなりリッチなエディタです。
ライブビューイング機能とかありますしね。本当強いですよこれ…。

インストールに関しては、こちらの記事にお世話になりました。
qiita.com
Bracketsのオススメ拡張機能Bracketsのインストール以外の情報も載っており、大変参考にさせて頂きました。

さてお次はカスタマイズです。

Bracketsのカスタマイズ

Brackets界隈は、他の人気エディタ…AtomとかAtomとかと比べると盛り上がりは薄いですが…。
それでもコミュニティは比較的充実しており、様々な拡張機能やテーマが提供されています。

まずは拡張機能の方からカスタマイズしていきましょう!

拡張機能

Bracketsに限らず、この手のツールで一番楽しい(個人的意見)部分、そう拡張機能のカスタマイズです!

とは言えすっかり有名ツールになったBrackets、まぁ拡張機能の種類も豊富なわけで…。
おまけに説明は英語の場合も多かったので、下記の記事を参考に入れていきました。
qiita.com
入れた拡張機能は以下の通り。
PHPも触ろうと思ってるので、その辺りも少しだけ忍ばせておきました。

ちなみにこの記事で紹介されている"Shizimily Multiencoding for Brackets"、どうやら現バージョン(ver1.12)では相性が悪いらしく…。
「起動したけどBracketsが動かない!ナンデ!」となりました。

下記の記事を参考にその拡張機能を消し、何とか動かせました…いやー良かった。
sideblue.net
お次はテーマとフォントです!

テーマ、フォント

テーマはデフォルトで付いている"Brackets Dark"…ではなく、BracketsテーマからDLした"Quick Dark"を使用することにしました。

とは言えデフォルトの"Brackets Dark"も良かったのでね…。
「黒くていい感じのテーマが欲しい!」ならこれで十分だと思います。

また、フォントは何もいじらないことにしました。
デフォルトのデザインが評判になってるとは聞いてましたが、確かにこれはいい感じですな…。

もしプログラミングに特化したフォントをいじりたいならDLしても良いと思いますし、
手持ちのフォントから選びたいって時は下記のWebサービスを参考にしてみるのもいいかもしれません。
wordmark.it
こちらで任意の文字を入力し次へ進むと、アクセスした端末内部のフォントでその文字を一覧表示してくれる優れ物です。
今回の用途以外にも使わせてもらってます…ホンマに良いですよこのサービス。

一先ず完了

ここまでやるのにはさして時間はかかりませんでした…。以前も使ってましたからね。

"カスタマイズ後のBracketsの画面"
いい感じに出来ました!

せっかくここまで環境整ったので、ターミナルより先にPHPで少しだけ色々とやれたらなと思ってます。

まぁ…PHP一切知らんので、もしかしたらBracketsの出番は無いのかもしれません…。
その時はその時で良いですかね、うん。

おまけ-Bracketsに関して小話

Bracketsに関して改めて色々調べているうちに、凄い機能を見つけてしまいました…。

拡張機能扱いですがなんと!
PSDファイルを直接開き、コーディングに必要な情報を直接引っ張ってこれると言う…!
解説記事もありましたので貼っておきます↓
mfl.revee.jp
これ凄くないですか?
おまけにココからスライスも出来るってありましたよ…。

…と思ったのも束の間、Adobeさんはこの機能を別のAPPに統合するらしいっすね。
Extract for CC Assets および Brackets 生産終了プラン
うーんこれさえあれば…と思ったんですけどねぇ。
試しに「Extract For Brackets」で拡張機能マネージャーを検索しても、出てきませんでした。悲しい…。

証拠画像のBrackets拡張機能マネージャー画面
こちらが証拠画像です

似たような機能あればぜひ使いたいですね…ぐぬぬ