media archive

Bracketsをインストールしてみよう!(Mac)インストール方法と最低限追加したい拡張機能

注意点

2021年9月1日に、Bracketsのサポートが終了します(Brackets公式サイトご参照)。

それにあわせ、2021年3月1日から公式サイトからインストールデータをダウンロードできなくなっていますので、別のテキストエディタの使用を検討する必要があります。

当メディアでは、Visual Studio Codeをインストールしてみよう!(Mac)インストール方法と最低限追加したい拡張機能の記事で、Visual Studio Codeのインストール方法を解説していますので、ぜひご覧ください。

本記事の内容
非表示

Bracketsとは?

Bracketsとは、テキスト(文字)を編集するアプリケーションであるテキストエディタの一つです。

Brackets
Brackets

Bracketsの特長として、

  • 無料で使える
  • 初期状態で日本語に対応している
  • シンプルなエディタ画面
  • 初期状態でライブプレビュー機能(編集結果がリアルタイムに反映される機能)が付いている

などが挙げられ、初学者にやさしいテキストエディタと言えます。

インストール方法

注意点

2021年9月1日に、Bracketsのサポートが終了します(Brackets公式サイトご参照)。

それにあわせ、2021年3月1日から公式サイトからインストールデータをダウンロードできなくなっていますので、別のテキストエディタの使用を検討する必要があります。

当メディアでは、Visual Studio Codeをインストールしてみよう!(Mac)インストール方法と最低限追加したい拡張機能の記事で、Visual Studio Codeのインストール方法を解説していますので、ぜひご覧ください。

以下はダウンロードできていたときの流れです。

①インストールデータをダウンロードする

まず最初に、Bracketsの公式サイトにアクセスします。

Brackets公式サイト
http://brackets.io/

Bracketsの公式サイト
Brackets公式サイト

次に、「Bracketsをダウンロード」のボタンをクリックします。

Bracketsダウンロードボタン

するとダウンロードが開始されます。ダウンロードが終わるまで少し時間がかかります。
ダウンロードしたデータは、ダウンロードフォルダに入っています。

ダウンロードされたファイル

補足

ダウンロードフォルダの場所については、Macのダウンロードフォルダはどこ?をご覧ください。

②MacにBracketsをインストールする

ダウンロードができたら、そのデータをダブルクリックして開きます。
すると下記のダイアログが現れますので、しばらく待ちます。

Bracketsのインストールデータの展開

データが正常に開けると、次に下記の画面が現れます。

ダウンロードデータの展開後の画面

またこのとき同時に、デスクトップに下記のアイコンが現れますが、この時点では特に操作は必要ありません。

デスクトップに現れるアイコン
デスクトップに現れるアイコン

ここで、先ほど現れた画面で、Brackets.appのアイコンをフォルダのアイコンの方へドラッグアンドドロップします。

Bracketsのアイコンをドラッグアンドドロップ

すると、コピー中のダイアログがでますので、コピーが終わるまで待ちます。

Bracketsをアプリケーションフォルダにコピー

コピーが終わればインストール完了です。
インストールが完了後は、下記の画面を[閉じる]ボタン(×)で閉じて、

閉じるボタン

デスクトップに現れたアイコンをゴミ箱へドラッグアンドドロップして取り出します。

デスクトップに現れたアイコンを取り出す

ダウンロードしたインストール用データはもう不要なので削除して構いません。

ダウンロードされたファイル
ダウンロードしたインストール用データ

起動方法

インストールしたBracketsは、アプリケーションフォルダの中に入っています。

アプリケーションフォルダの中のBrackets

補足

アプリケーションフォルダの場所については、Macのアプリケーションフォルダはどこ?ご覧ください。

アプリケーションフォルダの中にあるBracketsのアイコンをダブルクリックすると、下記のダイアログが出てきますので、[開く]を選択します。

ダウンロードしたファイルを開くときの確認

これでBracketsが起動し、下記の画面が立ち上がります。

Bracketsの画面
Bracketsの画面

補足

アプリケーションの起動をLaunchpadから行っている方は、Launchpadからも起動できます。

BracketsをDockに追加しよう

起動するたびにアプリケーションフォルダやLaunchpadから起動するのは手間なので、楽に起動できるようにBracketsをDockに追加しましょう。
Dockへの追加は、アプリケーションフォルダやLaunchpadにあるBracketsのアイコンをDockの追加したい場所にドラッグアンドドロップするだけです。

アプリケーションのDockへの追加

これで、Dockにあるアイコンをクリックするだけで起動できます。

拡張機能でBracketsをもっと使いやすくしよう

これだけは入れておきたい拡張機能

Bracketsには初期状態で多くの便利な機能がありますが、より使いやすくするために、拡張機能を追加してさらに機能を追加することができます。
拡張機能は非常に多くの種類があるので、ここでは初学者におすすめの最低限入れておきたい4つの拡張機能

  • Emmet
  • Beautify
  • Custom Work
  • Highlight Multibyte Symbols

をご紹介します。詳しくは下記をご覧ください。

Emmet

Emmet(エメット)を追加することで、HTMLやCSSを省略記法で書くことができるようになり、

  • コーディングのスピードアップ
  • タイプミスの軽減

に大きく貢献してくれます。

Beautify

Beautifyを追加することで、HTMLやCSSの改行、インデントなどを自動的に綺麗に整えることができます。そのため、人が見て分かりやすいコードの状態を保つことができます。
Beautifyを追加すると下記のように、ライブプレビューや拡張機能マネージャーのアイコンの並びに、Beautifyのアイコンが追加されます。

Beautifyのアイコン

Custom Work

Custom Workを追加することで、複数ファイルのタブ表示ができるようになったり、サイドバーの開閉ボタンの表示、各種ファイルのアイコン表示など、Bracketsの操作画面をより使いやすくすることができます。
Custom Workを追加したあと、Bracketsを一度終了し再度起動すると、Custom Workが適用されて下記のようにBracketsの画面レイアウトが少し変わります(設定で変更可能)。

Custom Workを追加したBracketsの画面

Highlight Multibyte Symbols

Highlight Multibyte Symbolsを追加すると、全角の文字を強調表示してくれます。コードは、半角の英数字や半角の記号、半角スペースでの記述が基本のため、全角の文字が入っているとエラーの原因になります。
そのため、全角の文字を強調表示すると、その混入を発見しやすくなり、全角の文字によるエラー防止に役立ちます。

拡張機能の追加方法

拡張機能を追加するには、まず拡張機能マネージャーのアイコンをクリックします。

拡張機能マネージャーのアイコン

すると、下記のような拡張機能を管理する画面になるので

拡張機能の管理画面

[入手可能]のタブになっていることを確認し、

拡張機能の管理画面の入手可能タブ

検索窓に追加したい拡張機能の名前を入力します。

拡張機能の管理画面の検索窓

すると、入力した名前に該当する拡張機能が表示されるので、

拡張機能の検索結果

追加したい拡張機能の[インストール]をクリックします。

拡張機能のインストールボタン

インストールが完了すると下記の画面になるので、[閉じる]をクリックしてください。

拡張機能のインストールの完了画面

続けて拡張機能を追加したい場合は、上記の手順を繰り返します。

追加したい拡張機能を追加できたら、拡張機能の管理画面を[閉じる]で閉じてください。

拡張機能の管理画面を閉じる

これで拡張機能を追加できました。

補足

Custom Workの追加について

Custom Workを追加した際、下記の設定画面が出てきた場合は、そのまま[Save]をクリックして設定を保存してください。

Custom Workの設定画面
Custom Workの設定画面

上記の設定は、後から[ナビゲート]メニュー→[Custom Work Settings]から変更することができます。

ナビゲートメニューのCustom Work Settings
ナビゲートメニューのCustom Work Settings

追加した拡張機能を確認したいときは

どの拡張機能を追加したのか確認したいときは、拡張機能の管理画面で[インストール済み]を選択すると、

拡張機能の管理画面

追加した拡張機能が表示されます。

拡張機能の管理画面のインストールタブ

最後に

Bracketsは初学者にやさしいテキストエディタでしたが、残念ながらサポート終了のため、別のテキストエディタの使用を検討する必要があります。

当メディアでは、Visual Studio Codeをインストールしてみよう!(Mac)インストール方法と最低限追加したい拡張機能の記事で、Visual Studio Codeのインストール方法を解説していますので、ぜひご覧ください。

ホームページの制作、Webデザインから、
パンフレットやチラシなど紙媒体の制作、グラフィックデザインまで、
制作のご相談やお見積もりなど、まずはお気軽にお問い合わせください。

制作のご依頼・ご相談はこちら
TOP
ホームページ(Webサイト)制作、パンフレット・チラシ等制作の
ご依頼、ご相談はこちら