メニューを閉じる

テクノデジタルグループ

メニューを開く

2017.12.08

導入編

ライブプレビューができる! Bracketsの導入とおすすめ拡張機能

こんにちは、shiroです。

今回はテキストエディタのBracketsを紹介します。

Bracketsは公式サイトに”A modern, open source text editor that understands web design.”と書いてあるとおり、webデザインに強いエディタとなっています。

インストール

Bracketsはこちらからダウンロードができます。
“Download Brackets x.xx”(x.xxはバージョン)のボタンを押すとダウンロードが開始します。
特定のバージョンにしたい場合は”Other Downloads”からダウンロードします。
今回は執筆現在最新の1.11で説明します。

インストールで選択項目が出てくるのは以下の2つのみです。
2017-10-31_10h48_24
Nextを押すと確認画面なので、インストールします。
シンプルですね。
どちらも任意で選択してください。

えぇ、インストールはこれだけで完了です。

ライブプレビュー

さて、本記事のタイトルに書かれている「ライブプレビューとはなんぞや?」と思っている方もいると信じています。
ですので、こちらに関しても簡単に説明をします。

ライブプレビューは編集をしながらその結果がすぐに反映されるものになります。
「ファイルを保存してリロード、ファイルを保存してリロード、ファイルを保存してリロード……」とする必要がありません。

使い方は簡単。
右側にある稲妻のようなマーク(赤丸箇所)をクリックするだけです。
2017-10-31_13h15_31
するとブラウザ上にプレビュー画面が表示されます。
Brackets上では先ほどの稲妻に色がついています。
2017-10-31_13h15_49
この状態でHTMLやCSSを編集するとリアルタイムに反映されていきます。
demo
ただし、JavaScriptに関しては保存後反映という形になっています。
中途半端な状態で反映してしまいエラーを吐く、ということを防ぐためだと思います。
それでもHTMLとCSSがリアルタイムで確認しながら編集できるので、捗ること間違いなし、となるでしょう。

おすすめ拡張機能

次はおすすめ拡張機能です。
Bracketsはオープンソースなので、有志の方が様々な拡張機能を作成しています。
それらはファイル>拡張機能マネージャーからインストールすることが可能です。
様々な拡張機能の中からいくつか紹介します。

Color Highlighter

rgb(a)、hsl(a)、カラーコード、カラーネームを指定した箇所にその色を表示する機能です。
指定した色を一目で確認できるので、探すときにとても便利です。

Emmet

HTML、CSSの省略記法が可能なプラグインになります。
慣れないうちはその書き方に戸惑いますが、慣れてしまえば今までの比ではない速度で書いていくことができるでしょう。

JavaScript & CSS CDN Suggestions

現在ネット上で公開されているスクリプトは多岐にわたり、さらにバージョンも複数あって入力が面倒くさい……。
そんな時に活躍します。

<script

と書いてからスペースを一つ。スクリプト名の候補が表示されます。
そのままスクリプト名を打っていくと選択肢が出てくるので、適宜適切なものを選択します。
それだけでタグを記述してくれます。

jQuinter

HTML、CSS、JavaScriptで、idやclassなどを入力する際、同プロジェクト内のそれらから候補を表示してくれます。
入力省略形って、すごく重宝しますよね。

Live Preview for Responsive

ライブプレビューはすごい!
……けど、何か足りない。
そう、現代はレスポンシブデザインの時代なのです!
ライブプレビューを拡張し、画面サイズを指定できるようになるものです。
デフォルトでは「320×568」「768×1024」「1280×1024」の3種類が選べ、独自に画面サイズを追加することもできます。
また、2つ表示されるのでスマホ用デザインとPC用デザインを同時に確認、ということも可能です。
ただし、この機能を有効にするにはファイル>試験ライブプレビューを有効にするにチェックを入れる必要があります。

Markdown Preview

今までのものとは毛色が違いますが、マークダウンのプレビュー機能を追加します。
マークダウンファイルを開くと右側のメニューに”M↓”が追加されます。
これをクリックすると下部にプレビューが表示されます。
編集画面をスクロールするとプレビューも動いてくれるのですが、個人的にはこの機能あまり使わないかな、と思っています。
そのような時はプレビュー右上の歯車から”Sync scroll position”のチェックを外せばいいです。

Paste and Indent

最後に紹介するのはペースト時に自動でインデントを修正してくれる機能です。
コードをコピペした際にインデントがずれて手作業で修正……そんな経験ありませんか?
この機能を使えばずれてしまうインデントを自動で適切な位置に修正してくれます。
手動で修正しなくても読みやすさを維持してくれるのがいいですね。

おまけ

私はインデントを半角スペース2つにしているのですが、Bracketsは4つがデフォルトになっています。
その変更方法がわかったので記載しておきます。
デバッグ>環境設定ファイルを開くを押下し、brackets.jsonを表示させます。
それの”spaceUnits”を”2″にすると変更が可能です。
2017-11-09_15h49_28
ですがその後、右下のスペース:nをダブルクリックして編集すればいいことを知りました。
2017-10-31_14h00_56
後者の方が圧倒的に楽です。

快適なフロント開発ライフを!

EOF.


【記事への感想募集中!】

記事への感想・ご意見がありましたら、ぜひフォームからご投稿ください!
  • こんな記事が読んでみたい、こんなことが知りたい、調べてほしい!という意見も募集中!
  • いただいた感想は今後の記事に活かしたいと思います!

感想フォームはこちら


【テクノデジタルではエンジニア/デザイナーを積極採用中です!】

下記項目に1つでも当てはまる方は是非、詳細ページへ!
  • 自分でアプリを作ってみたい
  • ITで世の中にワクワクを生み出したい
  • 使いやすさ、デザインにこだわったWebサイトを開発したい

採用情報の詳細はこちら


Qangaroo(カンガルー)

  • 徹底した見やすさと優れた操作性で、テストの「見える化」を実現。
  • テストの進捗が見える。開発がスマートに進む。
  • クラウド型テスト管理ツール『Qangaroo(カンガルー)』

【テクノデジタルのインフラサービス】

当社では、多数のサービスの開発実績を活かし、
アプリケーションのパフォーマンスを最大限に引き出すインフラ設計・構築を行います。
AWSなどへのクラウド移行、既存インフラの監視・運用保守も承りますので、ぜひご相談ください。
詳細は下記ページをご覧ください。

https://www.tcdigital.jp/infrastructure/

最近の記事