Bracketsのインストール、コーディング爆速化方法

掲載日: 2017年12月18日
(最終更新日：2017年12月18日）

みなさんは、ウェブサイトをコーディングするときに、テキストエディタは何を使用していますか？

Windowsの方なら定番の秀丸エディタやEmEditor、Macの方ならJeditやmi、最近ではCotEditorなどを使っている方が多いのではないでしょうか？

人気のテキストエディタには、文章書きに強い、プログラマ向けなど、それぞれに特徴があり、どれが一番いいとは言えませんが、ことウェブサイトなどのコーディングを行うのであれば、今話題の「Brackets」がオススメです。

「Brackets」は、Adobeが提供しているオープンソースのコードエディターで、Windows、Macなどに対応、しかも無料で利用できます。

HTMLやCSS、Javascriptといったウェブサイトをコーディングするときに必要な便利な機能はもちろんのこと、CやPHP、Rubyなど、多くのメジャーな言語に対応しており幅広く活用できます。

また、初めから日本語でも使えるようになっているので海外のエディタにありがちなとっつきにくさもありません。

さらに多数公開されているプラグインやテーマを使えば、自分の使い勝手にあったエディタにカスタマイズも可能です。

仕事でコーディングを行っている上級者はもちろん、これからHTMLなどを学んでいこうという初心者にも幅広く対応可能な高機能エディタです。

まずはBracketsのインストールから

参考：Brackets – A modern, open source code editor that understands web design.

何はともあれ、まずはBracketsをインストールしてみましょう。

提供元のサイトから「Brackets」をダウンロードします。Windows版なら解凍したファイルのインストーラーをダブルクリック、英語のインストーラですが、別段困ることはないでしょう。指示に従って30秒ほどでインストールは終わります。

Macならアプリケーションフォルダに解凍されたBracketsをドラッグアンドドロップするだけでインストールは完了です。

起動してみてまず素晴らしいのは、デフォルトの状態ですでにメニューも含めて日本語化されていることです。

海外製のエディタだと日本語パッケージが別途必要な場合もありますが、それを導入する手間もありません。

もちろん日本語入力もインラインで対応しています。

ただし、アプリケーションの環境設定は、JSONファイルを直接編集する形になるので、この点だけは初心者には若干ハードルが高いかもしれません。

「クイック編集」「ライブプレビュー」機能でコーディングを爆速化

Bracketsの特徴は、何と言ってもウェブコーディングに特化しているということです。

コードの編集では見やすさ、編集のしやすさががとても大切ですが、このエディタには、コーダー思いでパワフルな機能が満載されています。

開始タグや終了タグのハイライト表示、コードのヒント、補完入力は当然として、さらにタグを折りたたんだり展開したりできるので、コード全体を俯瞰で見直す時や編集場所以外をたたんでおけたりと、とても便利です。

また画像の通りHTMLやCSSなどで編集する箇所の要素やID、クラスを選択して右クリックすると「クイック編集」ウィンドウが開き、その箇所に合致したコードをダイレクトに修正できます。

例えばCSSでの色の変更では、カラーピッカーがウィンドウ表示され、視覚的に選んだ色の数値もそのまま変更されます。他にもアニメーション定義されている箇所ではスピードなどもベジェ曲線を見ながらでの編集が可能です。

その他、画像がリンクされている場所では、カーソルをホバーするだけでwidth/height値も加味した画像がポップアップ表示されたりといったウェブ制作時に有用な機能が搭載されています。

「ライブプレビュー」では、実際のブラウザー（デフォルトでChrome）でのプレビューができますが、HTMLやCSSの変更をセーブすることなく編集した瞬間からリアルタイムに反映してくれるので、あたかもブラウザーに直接記述をしているような感覚にもなります。

こういったコーダーをサポートしてくれる機能があれば、入力時、編集時のミスも極力抑えることができますし、何より作業効率が格段にアップしますので、これまでよりも作業時間を大幅に時間を短縮することができるでしょう。

プラグインで機能拡張やクラウド連携も可能、PSDファイルにも対応

デフォルトのままでも十分素晴らしいBracketsですが、多数公開されているプラグインを使えばさらに機能を追加することができます。

コードの整形、自動入力といったコーディングの補助ツールから、Bracketsそのものの機能を拡張するもの、見た目を変更するものなども用意されており、自分好みのカスタマイズまで可能です。

さらに驚くべきことに、Adobe Creative Cloudに保存されているPSDをそのまま読み込み、レイヤー情報などをCSSなどに反映させることもできます。まさにHTMLコーダーの夢を実現するかのような機能と言えます。

この他にも、ペイン表示やタブ機能といったテキストエディタとしての基本機能も充実しており、まだまだご紹介できない機能もたくさんあります。

かなり駆け足でBracketの説明をしてしまいましたが、Bracketは、DreamweaverやWebStormといった高機能なIDEはいらないが、テキストエディタでは物足りないといったコーダーにはうってつけのエディタです。

何よりフリーで使えますので、まずは気軽に試してみて「今までのエディタは一体何だったのか」という衝撃をぜひ味わってみてください。

STRA株式会社では随時SES事業のニュースを
FacebookとTwitterでお届けしています。
いいね！とフォローをして、
最新の情報をチェックしてください。

Follow @stra_co_ltd

＜著者情報＞

株式会社グート
- http://gut.co.jp/
代表
山中孝真（監修：石岡章司）
作曲業の傍ら、ラジオ番組作ったり動画編集したり、物書きしたり、WEB制作などなど色々やってます。

STRAが提案するホームページはすべて”本当の価値”を目指したものです。ホームページの"本当の価値"とは何か――STRAは"売れる＋叶う＋喜び"と考えています。

無限の力を秘めたクラウドソーシングを最大限活用し、サイトの大小、規模を問わずさまざまな角度からご要望やお悩みを徹底的にヒアリングしてあらゆるリソースを使って最も"本当の価値"のあるホームページに向けてあくまでお客様本位の側に立って考え提案しています。ホームページのコンセプトはどうするか？　デザインはどうするか？　こういったすべての意思決定をSTRAではすべてオンライン上で完結します。スピーディーなSTRAのご対応にお任せください！

WEBで成功したい方は・・・
こちらよりお問い合わせ！

法人様・個人様を問わずSTRAが全力でお応えします。
どんなことでもお気軽にご相談ください。

お問い合わせ種別必須	WEB制作についてSEO・アクセスアップについてパートナーシップについてご意見・ご提案採用情報についてその他のお問い合わせ
ご担当者名必須
御社名任意
メールアドレス必須
お電話任意
ご住所任意
お問い合わせ内容必須
以下のご利用規約・プライバシーポリシーをご一読、ご同意の上送信してください。
ご利用規約第1条　規約本規約は、STRA株式会社（以下「当社」という。）が運営する公式サイト『http://stra.co.jp』（以下、｢本ウェブサイト｣という。提供される全てのサービスに適用されます。第2条　サービス本サービスとは、本ウェブサイトを通じた求職・求人、及び、それに関連するサービスを利用目的とするサービスとします。ユーザとは、本サービスを利用する個人とします。本サービスを利用する者は、本規約の内容をすべて承認したものとします。当社および当社のサービス利用企業は、本サービスを提供する際に、ユーザに対し、Eメールやダイレクトメール、及び郵便、電話、ファックスによって連絡させていただくことがあります。第3条　禁止行為ユーザは、次の行為をすることはできません。登録に際し、虚偽の情報を提供すること。当社、他のユーザ又は第三者の著作権等知的財産権の侵害に当たる行為。当社、他のユーザ、又第三者の財産権やプライバシーに関する権利、その他の権利又は利益を侵害する行為。本サービスで得た情報を、本サービスの利用目的の範囲を超え第三者に譲渡し、又は営利を目的とした情報提供活動に活用すること。コンピューター・ウィルスや有害なコンピューター・プログラムを含む情報を送信する行為。本サービスの運営の妨げの可能性がある行為。本サービスを利用する他のユーザ又第三者を誹謗中傷していると見られる行為。公序良俗に反すると思われる行為。法令に反する全ての行為。その他、当社が不適切と判断できる全ての行為。第4条　責任ユーザは自らの意思によって本サービスを利用します。ユーザーは、自ら登録した情報に関しては、一切の責任を負うものとします。登録情報は、本サービスを利用するために必要な範囲内で、常にユーザが責任をもって利用目的に沿い、正確、最新に保つものとします。第5条　登録情報の削除ユーザによる情報の送信、提供等の行為が本規約第2条に規定された行為に該当する可能性があると当社が判断した場合には、ユーザ通知することなく、当該情報の全部又は一部について、削除、送信停止その他必要と認める措置を講じることとします。ユーザが本規約の規定に違反した場合には、ユーザに通知することなく、ユーザの登録を抹消できるものとします。第6条　登録情報の利用ユーザは、本サービスにおいて提供した情報のうち、個人を特定する情報を以外の情報を、当社が日本の国内外で無償にて使用する権利を許諾したものとみなします。また、ユーザは著作者人格権を行使しないものとします。第7条（個人情報の取り扱い）本サービスにおける個人情報の取り扱いについては、「個人情報保護方針」をご確認ください。ユーザは、本サービスを利用する場合には、当該個人情報保護方針を承認したものとさせていただきます。第8条　サービスの変更当社は、本サービスの運営を良好に保つため、ユーザに対して事前の通知なく、本サービスの内容を変更することがあり、ユーザはそれに対して異議を申し立てないものとします。第9条　サービスの停止当社は、以下のいずれかに該当する事由が発生した場合、ユーザへの事前の通知及び承諾を要することなく、本サービスの停止または終了を行うことができます。本サービス運営のためのシステム（以下「システム」という。）の保守、更新等を定期的、若しくは緊急に行う必要性がある場合。通常講ずるべきウィルス対策では防止できない不可抗力により、本サービスの提供が困難な場合。突発的なシステムの故障等が発生して、サービスの運営が困難な場合。その他、不測の事態により、本サービスの提供が困難であると当社が判断した場合。第10条　ユーザによる登録の削除ユーザは、自らの意思により本サービスへの登録情報を削除できます。第11条　免責当社は、企業情報等の第三者の情報、広告その他第三者により提供される情報、ユーザ等が本サービスに登録し掲載する情報等に関し、内容の正確性について保証しません。ユーザの本サービスへの登録及び本サービスの利用から生じる一切の損害に関して、当社は責任を負わないものとさせていただきます。当社による本サービスの提供の中断、停止、利用不能又は変更、ユーザ情報の削除又は消失､ユーザの登録の抹消、本サービスの利用によるデータの消失又は機器の故障若しくは損傷、その他本サービスに関連してユーザが被った損害につき、一切の責任を負わないものとします。本ウェブサイトから他のウェブサイトへのリンク又は他のウェブサイトから本ウェブサイトへのリンクが提供されている場合でも、本ウェブサイト以外のウェブサイト及びそこから得られる情報について、当社は一切の責任を負わないものとします。本サービスは、就職・転職活動の成功を保証するものではありません。当社の責任を免責する本規約の条項が消費者契約法等の法令に反することによって無効となる場合や、その他の理由によって当社がユーザに対して損害賠償責任を負うべき場合、当社の賠償責任は、ユーザに生じた直接かつ通常の損害の範囲に限るものとさせていただきます。第12条　規約変更当社は、ユーザの承諾を得ることなく、本規約を随時変更することができます。第13条　規約譲渡ユーザは、当社の書面による事前の承諾なく、本規約に基づく権利又は義務につき、第三者に対し、譲渡、移転、担保設定、その他の処分ができません。当社は本サービスにかかる事業を他社に譲渡した場合、当該事業譲渡に伴い本規約に基づく権利及び義務並びにユーザの登録情報、その他の顧客情報を当該事業譲渡の譲受人に譲渡することができ、ユーザはその譲渡につき予め同意したものとします。また、会社分割やその他事業が移転する状況を含むものとします。第14条　損害賠償義務ユーザが本規約に違反し、当社に対し損害を与えた場合、ユーザは当社に対し、損害賠償義務を負担するものとします。第15条　準拠法及び管轄裁判所本規約の準拠法は日本法とし、本規約に関する紛争については、当社の本社所在地を管轄する地方裁判所または簡易裁判所を第１審の専属的合意管轄裁判所とします。第16条　実施本規約は2013年12月24日から実施するものとします。プライバシーポリシー STRA株式会社は、個人のプライバシーを扱うサービス業の特性を踏まえ、個人情報の取扱いに細心の注意を払っております。自主規制基準を遵守の上、個人情報の取扱いに関する基本方針を以下のように定め、個人情報の漏洩などを防止し、取扱う個人情報の保護に努めます。 STRA株式会社は、個人情報の取扱いに関する自社の規範を遵守します。 STRA株式会社は、事業の内容及び規模を考慮した適切な個人情報の取得、利用及び提供を行います。本サービスをご利用するお客様の個人情報は、STRA株式会社が本サービスを提供するために適切な場合に限り使用されます。それには必要な範囲を超えた個人情報の取扱いを行わないこと及びそのための措置を講じることを含みます。 STRA株式会社は、本人の同意がある場合又は法令に基づく場合を除き、個人情報を第三者に提供することはありません。 STRA株式会社は、個人情報の漏洩、滅失又は紛失の防止及び是正のための措置を講じます。 STRA株式会社では、個人情報保護に関する管理の体制と仕組みについて継続的改善を実施します。 STRA株式会社では、お預かりした個人情報は目的以外には利用しません。