こんにちは！
唐突ですが、これからWEB作成の仕事をしたいと思っている方！何らかのきっかけでご自身やご自身の会社のホームページを作成したり変更したりしなければならなくなった方！
あなたならどのような道具を使いますか？
私はもちろんWEBサイト作成の専門ですので、会社では毎日WEBサイトを作成、変更するために様々なプロ用のソフトウェアを使用しています。
時には、自分で勉強するために自分の家に帰ってから色々なソフトを駆使してホームページを触ったりすることもあります。その時に感じるのは
効率よく作業するにはどうすればいいのか？
多岐にわたる作業のためにどのような物があればいいのか？
できれば無料である事が望ましいなとも思っています。
会社ではもちろん一番WEB作成でお世話になっているadobe社のソフトウェアは外せません。
例えば
・「Photoshop」(フォトショップ)
写真加工をするならコレってといっても過言ではないソフトですね。他のソフトを使っている方もいるかと思いますが、実際の現場では大体の方が使ってるソフトです。
・「Illustrator」(イラストレーター)
WEBサイトで使用するイラストの作成をしたり、WEBサイトのデザインを作成したりする為には必ずといっていいほど必要になるソフトです。
もちろんWEB作成以外にもデザイナーさんや印刷屋さんなどでも活躍しているプロ御用達のソフトでもあります。
あまり、詳しくない方であってもこの辺りのソフトは有名だろうと思います。そしてWEBサイト作成に欠かせないのが「Dreamweaver」というソフトです。
デザインされたものを、実際のホームページとして組み上げていく作業「コーディング」をするために必要となる、いわゆる「エディタ」と呼ばれているソフトです。
これらのソフトはとても高機能でプロとして必要となる機能が網羅されている素晴らしいソフトです。
ただ、個人で導入するには費用がどうしてもかかります。個人で使用するとして月額4980円(税別)（6/23現在は特別に初年度3980円(税別)）が必要になります。
それぞれ単体で使用するのであれば月額1280円(税別)のプランもありますが、使用する限り毎月支払うことを考えるとそこそこお高い値段が必要です。
これからWEB作成の仕事をしたいと思っている方や、どうしても必要性があってホームページを作成、あるいは更新する必要性が出てきたとき、個人で使用するならなるべく無料で尚且つ使いやすく便利なソフトである方がありがたいと思います。
今回はそんなWEB作成をする際に必要なソフトの中から無料で便利なテキストエディタ「Brackets」をご紹介したいと思います。
Adobe社製なのに無料!? テキストエディタ「Brackets」
今回ご紹介するテキストエディタ「Brackets」は、先ほどお話ししたプロ御用達のソフトを製作・販売しているAdobe社が製作しているオープンソースのソフトです！
しかもオープンソースなので無料で使用する事が出来ます。これを聞いただけでも「使ってみたいな」と思わせてくれますよね。
「Brackets」のインストール方法
「Brackets」ダウンロード
http://brackets.io/
上記サイトは英語ですが、安心してください！自分も英語は読めません。。でも大丈夫です。
- 上記サイトにアクセスして「Download Brackets 1.9」（現時点では1.9が最新）をクリックしてダウンロードします。
ダウンロードしてきたものをダブルクリック- ダブルクリックで表示された画面も英語ですが、安心してください。自分も読めません！（２回目）「NEXT」を押し次に進みます。
- 「Install」ボタンを押すとインストールが始まり下のような画面が出たら完了です
「Brackets」の使い方
インストールが終わったら、早速「Brackets」を立ち上げてみましょう。
最初の画面は結構シンプルです。難しそうなボタンも並んでいませんね。
初めて立ち上げた時には、すでにサンプルのファイルが用意されています。ここからご自身が編集したいファイルを選んで編集していきます。
今回は説明のためにあらかじめ、testspaceというフォルダにサンプルをコピーしてありますので編集を試してみたいと思います。
「ファイル」もしくは「Getting Started」ボタンから、ご自身の編集したいファイルが保存されているフォルダを選択します。
すると、そこに保存されているHTML,CSSなどのファイルが読み込まれます。
この状態から、文章を変更したり、画像を挿入したりと編集していきます。
「Brackets」の便利な機能
その他のテキストエディタをお使いの方からみれば「別に変わり映えしない普通のエディタ」と思われると思います。
でも、この「Brackets」には、色々な便利な機能が備わっています。
対応するタグをハイライトしてくれる
HTMLのタグをご存知の方なら、お分かりですが基本的にHTMLタグは開始タグと終了タグの間に文章や画像を入れていきます。これが、複雑になっていくとどのタグの終了タグなのか分かりにくくなっていきますが、「Brackets」では、タグをクリックすると分かりやすくハイライトしてくれます。
タグの入力補助をしてくれる
タグは覚えるのも大変ですが、このソフトはタグの入力補助もしてくれます。画像の挿入の仕方もとても簡単です。
今回は前回選択したtestspaceフォルダ内にscreenshotフォルダがあり、その中にquick-edit.pngがありますので、それを挿入してみたいと思います。
下の動画をみていただければわかりますが、「i」と打ったと同時に入力補完するように候補を表示してくれますので、それを選択していくだけで画像が挿入できました。
さらに、画像のファイル名にカーソルを合わせると、どんな画像なのかをプレビューまでしてくれます。とっても分かりやすくて便利ですね。
高機能エディタにしか備わっていなかったリアルタイムプレビュー機能がある！！
エディタは、無料から有料まで様々なソフトがあります。例えば「サクラエディタ」、「秀丸エディタ」など探せば色々見つかると思いますが、見た目を瞬時に確認できる機能がなかったりします。そのためいちいち保存してブラウザで確認しての繰り返しの作業が発生します。
でも、この「Brackets」には変更をリアルタイムで確認できる「リアルタイムプレビュー」が備わっています。
画面の右に雷のようなマークがありますので、そこをクリックしてみてください。
chromeが立ち上がって、実際のページが表示されます。（ブラウザはchromeしか対応していませんので予めインストールしておいてください）
今回はH1タグの文字を変更してみました。
実際の操作をしている様子が下の動画です。
もちろん、HTMLだけではなくてCSSを変更しても即座にプレビューしてくれます。
変更した瞬間から、すぐにプレビューされるのは、現場でも時間の短縮になるので非常に便利で助かります。
プラグインを入れるとさらに進化する
プラグインとは、初期段階では導入されていない機能を付け足す事ができるもので、これをインストールすると様々な便利な機能が使えるようになります。
どれを使えばいいかわからないくらいプラグインの数は膨大にあります。紹介しきれませんので割愛しますが、いろいろなサイトで紹介されていますので、興味のある方はご自身にあった機能を導入してみてください。
また、作業画面の見た目（テーマ）を変えたりすることもできます。
まとめ
今回は制作する目線から、無料で高機能で便利なソフト「Bracket」の最低限の機能の紹介をしてみました。
本来高級で高機能なソフトにしかないような機能が、その高級ソフトと遜色がないくらいに便利で無料で使える「Bracket」のようなソフトがあったりしますので、色々探してみるのもいいかもしれません。
また、大事なのはとことん使ってみて、一番自分が効率的に作業を行えるソフトにめぐり合う事ではないかなと思います。その中の選択肢としてこの「Bracket」を候補にしてみるのも一つかもしれません。
コメント