お疲れさまです。
4月1日からビットスターにアルバイトとしてお世話になっているI.Sです。
このたび、初めてブログを書かせて頂くことになりました。
この記事を書かせていただいている時、ちょうど北海道ではお花見シーズンでしょうか。
自分はまだ今年は見に行っていませんが、地元が北海道ではない自分にとっては、やっと春本番かなぁと考えていたりします。
さて、実は先日「SaCCS」というHTML・CSSメインの講習に参加してきたのですが、その中で「Brackets」というエディターがすごく取り上げられていたので、自分でも少し触ってみた雑感を書かせて頂こうかと思います。
まだ深く触っているわけではないので、既に使っている方・詳しい方には今更な内容が多いと思いますが、その点はご容赦を。
「Sublime Text」じゃないですが「Brackets」に恋に落ちちゃった方もいるらしいですよ！
ざっくり言うと、「Brackets」は無料で使える便利エディター！
無料だから、家でもすぐ使えるよ！やったね！
触ってみた感触としては、Dw(ドリームウィーバー)を使ったことある人ならすぐ馴染めそうなエディターという感じですかね。
たぶんどちらかというとフロントエンドに強い作りになっている気がします。
Dw同様「Brackets」もAdobe製なんですが、そのせいかすんなり入っていけました。
タグやコードも色分けされて表示されるので見やすくて良い感じ。
対応言語としても、HTML・CSS・javascript・C系・PHP・Ruby・Python他と幅広く使えるみたいです。
インストールした直後からUI(ユーザーインターフェイス)が日本語化されています。自分のようにまだ英語に苦手意識がある人はとっつきやすいのではないでしょうか。
Brackets上で編集したコードをChromeで開くと、HTMLやCSS、JSのファイルを変更保存した際にリアルタイムでプレビューが更新されるようにすることができます。
自分が試したのはChromeのみですが、もしかすると他のブラウザでも可能かもしれません。
また、 ファイルを保存した段階で開発環境に自動でアップロードする拡張機能等も追加できるようです。
Bracketsの拡張機能の追加方法は「拡張機能ボタンを押す」＞「拡張機能を選ぶ」＞「インストールボタンをクリック」で完了です。
インストール直後の「Brackets」はutf-8しか対応していないようなので、自分の場合、まずエンコードを追加しました。
例えばこの場所のCSSを調整したい！という時。通常CSSファイルを開いて、どこにその記述があるのか探す必要があるかと思います。
そういう時「Brackets」ではクイック編集機能を使うことで、CSSファイルを開かなくてもHTMLファイル上からスタイルを指定している記述を呼び出して編集することができます。
SASS・SCSSの場合でも呼び出せるようです。
画像では「h1」に対して右クリックからクイック編集機能を使っています。
またCSSの呼び出しだけでなく、色指定の部分などでクイック編集機能を使った場合はカラーピッカーを使った色指定が可能です。
指定した画像のソースコードの上にマウスカーソルを乗せると、どんな画像を指定したのかがポップアップしてその場で確認可能。
作ってから時間がたってしまったソースや、他の担当者が作ったソースを編集する時等、ファイルの名前だけではどんな画像か確認できない時に特に有効じゃないでしょうか？
ちなみに画像は急遽作った自画像です。
今のところ自分が触ってみた特徴としてはこんな感じでした。
他にもAdobeCCソフトとの連携等できるらしいのですが、今回はそこまで試せていません。
自分は今はpythonの学習用に試していますが、もう少し使い込んでみようと思えるエディターだったので、気になった方は良かったらお試しください。
無料だしね！
I.S
