【日本語対応】Adobe製オープンソースのエディタ「Brackets」を試してみた!【HTMLやCSS/JavascriptもこれでOK!】

カテゴリ:Web制作,パソコンタグ:

今回は無料で使えるAdobe製のオープンソースのエディタ「Brackets」を紹介します。
普段PHPなどを使わない方もサイト制作にはHTMLやCSS、Javascriptは不可欠!
そんなファイルをいじる際に使えるエディタです。

この記事のメニュー

  1. ダウンロード・インストールをしよう
  2. オススメの拡張機能

brackets_01
Brackets公式サイトからダウンロードします。
「Download Brackets」というボタンをクリックするとダウンロードが開始されます。

brackets_02
ダウンロードが終わったらファイルをダブルクリックします。

brackets_03
このようなウィンドウが表示される場合もありますが、「実行(R)」ボタンをクリックすれば大丈夫です。

brackets_04
この画面では、インストール先を指定します。
別のインストール先に変更したい時は画面の「Change…」ボタンをクリックして変更しましょう。
選択が終わったら「Next」ボタンをクリックします。

brackets_05
この画面で「Install」ボタンをクリックすればインストールが開始されます。

brackets_06
インストール中・・・・・・・・・

brackets_07
インストール完了!「Finish」ボタンをクリックしてウィンドウを閉じましょう。

インストールが完了すると「スタートメニュー」>「すべてのプログラム」に「Brackets Sprint xx」が追加されていると思います。
※xxはバージョンにより異なる
こちらをクリックすればBracketsが起動します。

導入も「ダウンロード」→「インストール先の選択」→「完了」と、とっても簡単になっていますね!

次に入れておくと便利な拡張機能をご紹介します。

brackets_08
拡張機能のインストールは、「ファイル」>「拡張機能マネージャー」
もしくは
brackets_08_02
エディタ上のアイコンをクリックすることで行うことが出来ます。

brackets_09
一覧から選んでインストールしたり、一覧にないものもGithubのURLを指定するとでインストールが可能です。

以下、私がインストール拡張機能
・Emmet
以前紹介したHTMLやCSSを省略したりして入力しやすくするものです。
インストール:一覧から選択してインストール。

・Minifier
CSSやJavascriptファイルをMinifyした上でファイル名に.minをつけて保存してくれる拡張機能です。
インストール:一覧から選択してインストール。
※インストール後、既存のファイルの場合選択してCtrm+M(または編集メニューからMinifyをクリック)するとMinify化されたファイルが生成されます。
また、「編集」>「Minify on Save」を一度クリックして左側にチェックが入った状態にしておくと保存した時に自動的に.minファイルも変更してくれます。
CSSの編集は通常のファイルで行いWeb上にアップロードするのはMinify化されたファイルが良い時などに使えますね。

・brackets-code-folding
コードの折りたたみが可能になる拡張機能です。
インストール:一覧から選択してインストール。

・LB4B – Laravel’s Blade for Brackets
LaravelのBladeテンプレートエンジンをサポート出来るようにする拡張機能です。
Laravel使ってない方には意味ないですが…
インストール:一覧から選択してインストール。

他にも様々な拡張機能があるので気になるかたはBrackets Extension Registryを参照してみて下さい。
上記レジストリに登録されていない過去の拡張機能も、
Brackets Extensions · adobe/brackets Wiki · GitHub
に載っているみたいなので、併せて確認してみて下さい。

私も使い始めたばかりなので、オススメの拡張機能とかあったら教えていただけると助かります(*´∀`*)
Sprint31からはSCSSのコードヒントにも対応したりと、日々バージョンアップが行われていてどんどん便利になっていっているBrackets。
動作も軽快なので私も使っていきたいと思いました。エディタに迷っている方は試してみてはいかがでしょうか。

リンク:Brackets公式サイト

あとでよむ / みんなにシェアする

このエントリーをはてなブックマークに追加
LINEで送る

コメントをする / みる

コメントを残す

コメントはまだありません。

検索する

カテゴリ一覧

タグ一覧

お知らせ アクセス解析 アプリケーション ゲーム サーバー スニペット プラグイン 動画 日記 Laravelパッケージ Laravel3 Laravel4 Tips Webサービス Webデザイン WordPress

最近投稿された記事

つぶやき

【GIGAZINE読者限定早い者勝ち】無料でDropbox・Googleドライブなどのクラウドを自由自在に同期・一括管理できる「まとめてクラウド」が先着5万人48時間だけゲット可能 - GIGAZINE gigazine.net/news/20151010-…

約2年前

離れていてもコミュニケーションが取りやすい便利なサービス「Remotty」 #remotty remotty.net

約2年前

RT @localdisk: メジャーどころがたくさん / 【セキュリティ ニュース】「WPTouch」など多数のWordPressプラグインに脆弱性(1ページ目 / 全1ページ):Security NEXT security-next.com/057930

約2年前

Javascript フレームワーク「Aurelia」aurelia.io

約2年前

dockerで起動済みのコンテナに対して何かしたい時は、docker exec -it コンテナ名 /bin/bashで入って実行したり、docker exec -it コンテナ名 supervisorctl restart nginxみたいな事も出来て便利。

約2年前

サーバー移転完了に伴いサイトの閲覧も可能な状態になりました。移転作業中にご訪問いただいた方には大変ご迷惑をおかけいたしました。今後このようなことがないよう気をつけて参ります。

約2年前

現在当サイトが閲覧出来ない状態となっております。こちらはサーバーの移転作業に遅れが生じているためとなっております。ご利用いただいている方にはご迷惑をおかけいたします。

約2年前

WordPress4.1.1(日本語版)が利用出来るようになりました wp.me/p4RkJY-Dj

約3年前

RT @keito_jp: Twitterをサマーウォーズ的に表示させるやつを製作中。遊んでみてね。 open.moo.jp http://t.co/gIgp5Gh6qW

約3年前

任天堂、YouTubeの広告収入を動画制作者とシェアする「Creators Program」サービス開始 | Game*Spark - 国内・海外ゲーム情報サイト s.gamespark.jp/article/2015/0…

約3年前

↑上へ戻る