Now Loading...

スタッフブログ

戻る

当社ブログは社員での持ち回りで掲載しております。
ビジネスだけではなく、社内イベント、プライベートなことを書いておりますので予めご承知おきください。

Bracketsを少し触ってみた

お疲れさまです。

4月1日からビットスターにアルバイトとしてお世話になっているI.Sです。
このたび、初めてブログを書かせて頂くことになりました。

 

この記事を書かせていただいている時、ちょうど北海道ではお花見シーズンでしょうか。
自分はまだ今年は見に行っていませんが、地元が北海道ではない自分にとっては、やっと春本番かなぁと考えていたりします。

 

さて、実は先日「SaCCS」というHTML・CSSメインの講習に参加してきたのですが、その中で「Brackets」というエディターがすごく取り上げられていたので、自分でも少し触ってみた雑感を書かせて頂こうかと思います。
まだ深く触っているわけではないので、既に使っている方・詳しい方には今更な内容が多いと思いますが、その点はご容赦を。

 

「Sublime Text」じゃないですが「Brackets」に恋に落ちちゃった方もいるらしいですよ!

 

ということで「Brackets」に触ってみた。

ざっくり言うと、「Brackets」は無料で使える便利エディター!
無料だから、家でもすぐ使えるよ!やったね!

触ってみた感触としては、Dw(ドリームウィーバー)を使ったことある人ならすぐ馴染めそうなエディターという感じですかね。

たぶんどちらかというとフロントエンドに強い作りになっている気がします。

Dw同様「Brackets」もAdobe製なんですが、そのせいかすんなり入っていけました。

タグやコードも色分けされて表示されるので見やすくて良い感じ。

対応言語としても、HTML・CSS・javascript・C系・PHP・Ruby・Python他と幅広く使えるみたいです。

最初からインターフェイスが日本語

インストールした直後からUI(ユーザーインターフェイス)が日本語化されています。自分のようにまだ英語に苦手意識がある人はとっつきやすいのではないでしょうか。

brackets

リアルタイムプレビュー

Brackets上で編集したコードをChromeで開くと、HTMLやCSS、JSのファイルを変更保存した際にリアルタイムでプレビューが更新されるようにすることができます。
自分が試したのはChromeのみですが、もしかすると他のブラウザでも可能かもしれません。
また、 ファイルを保存した段階で開発環境に自動でアップロードする拡張機能等も追加できるようです。

拡張機能の追加が簡単

Bracketsの拡張機能の追加方法は「拡張機能ボタンを押す」>「拡張機能を選ぶ」>「インストールボタンをクリック」で完了です。
インストール直後の「Brackets」はutf-8しか対応していないようなので、自分の場合、まずエンコードを追加しました。

kakutyo

 

encode

クイック編集機能が便利かも!

例えばこの場所のCSSを調整したい!という時。通常CSSファイルを開いて、どこにその記述があるのか探す必要があるかと思います。
そういう時「Brackets」ではクイック編集機能を使うことで、CSSファイルを開かなくてもHTMLファイル上からスタイルを指定している記述を呼び出して編集することができます。

SASS・SCSSの場合でも呼び出せるようです。

画像では「h1」に対して右クリックからクイック編集機能を使っています。

quick

またCSSの呼び出しだけでなく、色指定の部分などでクイック編集機能を使った場合はカラーピッカーを使った色指定が可能です。

quick2

指定した画像がどの画像かエデイターから確認できる。

指定した画像のソースコードの上にマウスカーソルを乗せると、どんな画像を指定したのかがポップアップしてその場で確認可能。

作ってから時間がたってしまったソースや、他の担当者が作ったソースを編集する時等、ファイルの名前だけではどんな画像か確認できない時に特に有効じゃないでしょうか?

IS

ちなみに画像は急遽作った自画像です。

 

今のところ自分が触ってみた特徴としてはこんな感じでした。
他にもAdobeCCソフトとの連携等できるらしいのですが、今回はそこまで試せていません。
自分は今はpythonの学習用に試していますが、もう少し使い込んでみようと思えるエディターだったので、気になった方は良かったらお試しください。
無料だしね!

 

I.S

その他の記事

記事一覧

BitStar流

Contact Us

ご不明な点や、気になったことなど、
お気軽にお問い合わせください。

お問い合わせ

Recruit

新卒採用、中途採用、エンジニア採用、
デザイナー採用を行っています。

採用情報