Aikの技術日記

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

Bracketsのカスタマイズ

Bracketsの入手

前回に引き続き、ターミナルのカスタマイズをしようとも思いましたが、Webプログラミングしたい欲求に負け…。

まずは環境構築をしようと言うことで、Bracketsのインストールから着手することにしました。

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

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

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

Bracketsのカスタマイズ

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

と言うわけで、まずは拡張機能の方から色々導入していきましょう。

拡張機能

先にも申した通り、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

こちらは「任意の文字を入力し次へ進むと、アクセスした端末内部のフォントでその文字を一覧表示」してくれる優れ物です。
※説明下手ですみません…。

今回の用途以外にも使わせてもらってます…ホンマに良いですWordmark.itさん!

一先ず完了

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

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

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

(まぁ…PHP一切知らんので、もしかしたらBracketsの出番は無いのかもしれません…。)

おまけ-Bracketsに関して小話

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

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

これ凄くないですか?
おまけにココからスライスも出来るってありましたよ…。

…と思ったのも束の間、Adobeさんはこの機能を別のAPPに統合するらしいっすね。
Extract for CC Assets および Brackets 生産終了プラン

うーんこれさえあれば…と思ったんですけどねぇ。
試しに「Extract For Brackets」で拡張機能マネージャーを検索しても、出てきませんでした。悲しい…。

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

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