media archive

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

本記事の内容
非表示

Bracketsとは?

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

Bracketsのアイコン
Bracketsのアイコン

Bracketsの他にも様々なテキストエディタがあります。
わかりやすい例を挙げると、Windowsに最初からインストールされている「メモ帳」や、Macに最初からインストールされている「テキストエディット」もテキストエディタです。

なぜBracketsが必要なの?

Webサイトの制作では、HTMLやCSSと呼ばれるテキストで構成されたファイルを作成するので、テキストを編集するアプリケーションであるテキストエディタが必要になります。

【HTMLの例】

HTMLの例

【CSSの例】

CSSの例

HTMLやCSSは上記の例のように、日本語の他に英数字や記号を入力する必要があり、全て手入力するのは非常に大変です。
そこで、その入力を補助してくれる機能など、便利な機能が備わっている様々なテキストエディタが開発されており、Bracketsもその一つです。Bracketsの他にも、

  • Visual Studio Code
  • Sublime Text
  • Atom …etc

など、多くのテキストエディタがありますが、Bracketsには

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

などの特長があり、初学者にやさしいテキストエディタと言えます。

コラム

ソースコードって何?

ソースコード(Source Code)とは簡単に言うと、プログラムなど、コンピュータへの指示・命令を記述したもののことを言います。略して「コード」とも言われます。
また、コードをテキストエディタに入力すること、つまり、コードを書くことをコーディング(Coding)と言います。

インストール方法

それではBracketsをインストールしてみましょう。

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

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

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

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

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

Bracketsダウンロードボタン

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

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

補足

ダウンロードフォルダはどこ?

ダウンロードフォルダは、Dockの右の方にあります。

Dockのダウンロードフォルダ

もしここにダウンロードフォルダがない場合は、DockのFinderをクリックし、

DockのFinder

メニューバーの[移動]をクリックすると、

Finderの移動メニュー

[移動]メニューの中に[ダウンロード]があるので、

移動メニュー中のダウンロードフォルダ

そこをクリックするとダウンロードフォルダを開けます。

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

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

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

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

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

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

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

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

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

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

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

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

閉じるボタン

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

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

ダウンロードしたデータは

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

もう不要なので削除して構いません。

起動方法

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

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

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

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

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

Bracketsの画面
Bracketsの画面

補足

アプリケーションフォルダはどこ?

アプリケーションフォルダは、DockのFinderをクリックし、

DockのFinder

メニューバーの[移動]をクリックすると、

Finderの移動メニュー

メニューの中に[アプリケーション]があるので、

移動メニュー中のアプリケーションフォルダ

そこをクリックするとアプリケーションフォルダを開けます。

補足

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

BracketsをDockに追加しよう

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

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

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

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

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

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

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の設定画面

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

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

拡張機能の管理画面

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

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

最後に

Bracketsでのコードの記述に慣れてきたら、他の拡張機能を追加してさらに使いやすくしたり、別のテキストエディタを使ってみるなど、より快適にコーディングできるように色々試してみてください!

HTML、CSS初学者にオススメの本

Webデザイン初学者にオススメの本

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

お問い合わせはこちら
TOP