皆様、テキストエディターは何をお使いですか?Terapad?サクラエディタ?秀丸エディター?あるいは。一般的なメモ帳をお使いでしょうか。テキストエディターって、ただメモ書きのために使う人が居ればWEBページやプログラムを組むために使う人も居ますよね。
管理人はメモ書きにはEvernoteやAkelpadを使用しています。そして、プログラム(とはいっても、HTMLやCSSです)を記述するのに専用のエディターを使用していました。
そのエディターもすばらしい性能があったので、それはそれでまた改めてご紹介したいと思いますが今回は、Atomエディターについてご紹介します。
Atomって？
AtomはGithub製のテキストエディターです。デフォルトで様々な便利機能がついており、もっと機能が欲しい人は「プラグイン」を追加して機能を拡張することも出来ます。
公式サイト：https://atom.io/
Atomって何がいいの？
開発者たちによる活動が活発なソーシャルネットワーク「Github」から生まれたエディターということで、作る側の視点に立って開発されています。
有志によるプラグインも豊富で、今回は自分のAtomの使い方と、使用しているプラグインについてご紹介します。
管理人はAtomをどう使っているのか？
仕事柄、WEBページをテキストベースで触ることが多いです(つまりhtmlファイルを触るということです)。そして、常に最新のファイルを触らないと古い情報で上書きしてしまう危険があるので「ソースを表示」して展開するエディターとしてAtomを指定しています。
ブラウザはFirefoxです。
Firefox:https://www.mozilla.org/ja/firefox/
※Chromeなどでは現状出来ないので、この使い方はイレギュラーなのかもしれません。
ソース表示時のエディターとしての設定方法
- アドレスバーに「about:config」と記入します。これでFirefoxの詳細設定画面に入れます。
- 細心の注意を払って設定するボタンを押します。
- 設定項目を検索します。まずは「view_source.editor.external」と記入
- ダブルクリックし、真偽値を「false」に設定します。これで、ソース表示時に任意のテキストエディターで開く設定がonになりました。
- 次に設定項目「view_source.editor.path」と記入します。ここで使いたいエディターのパスを記入します。
- エディターのパスを入れます。
エディターのパスの確認方法
- エディターのショートカットを右クリックしてプロパティ→リンク先をコピーします。ただ、Atomは純粋にコピペするだけでは動きませんでした。
- 管理人のAtomの場合、appdataフォルダの中からちゃんと動く実行ファイルを探してエディターの場所を探り当てました。ショートカットを作って再びプロパティを開いて、下記のパスが正解だとわかりました。
「C:\Users\ユーザー名\AppData\Local\atom\app-1.10.1\atom.exe」となりました。app-1.10.1はバージョン番号と思われます。番号は、アップデートの度に都度変わると思います。ちょっとここは試行錯誤しつつ進めるほうがいいなと思います。
これで現在開いているページをAtomで開くことが可能になりました。編集するときは必ず決まった場所に名前をつけて保存(Ctrl+shift+S)しておきましょう。
文字エンコーディングとの苦悩
これも仕事柄なのですが、HTMLファイルのエンコーディングがShift-JISになっているWEBサイトがあります。Atomは基本的にUTF-8で動く(というか多くのプログラムはUTF-8でしょう)ので、普通に開くと文字化けが起きます。
そこで、文字エンコーディングの違いによる文字化けを防ぐためにこちらのプラグインを入れました。
auto-encoding
HTMLファイルのテキスト記述から、自動的に文字エンコーディングを再設定してくれるプラグインです。
ただ、これを入れていてもバグる事があります。妙な文字がHTMLファイル内にあるせいか、特定のファイルが何故かさらに文字エンコーディング機能が動いてしまい「ISO-8859-2」とかになってしまいます。動くタイミングは、タブを切り替えて戻って来た時とかです。
防止策として、設定画面上でAlways auto detectをオフにしました。これで結構安定しました。
他にもこんなプラグインがおすすめです。
Atom Html Preview
画面を分割して編集中のHTMLファイルをプレビューしてくれるというナイスなプラグインです。ただし文字エンコーディングがUTF-8の時はちゃんと表示されますがShift-JISにした途端にCSSも読み込まなくなりますし文字がバグって不安な気持ちにさせられます。
ホットキーはCtrl+Shift+H。これを押すと分割プレビューが開閉されます。
open-in-browsers
こちらは分割プレビューというよりは外部ブラウザへHTMLファイルを渡してプレビューするようなプラグインです。Shift-JIS難民にとっての救世主のような存在です。
color-picker
カラーコードの上で右クリックを押すと、ビジュアル的にカラーピッカーが表示され、選択するとカラーコードが入力されます。
emmet
Zen-cordingをご存知でしょうか。省略形のテキストを「展開」することで、効率的にHTMLが書ける機能です。その他にも強力なhtmlやcssの記述を補助してくれる機能が備わっています。ただし展開のためのホットキー「Ctrl+E」が文字列の検索とダブってしまい、管理人はこれを「TABキー」に再割当てしました。
minimap
Sublime textのように、スクロールバーにミニマップが付きます。ソースコードの長さや山形などがよく分かって、どこに何があるのかが把握しやすくなります。
Japanese Menu
その名の通り日本語化メニューです。まず真っ先に入れたプラグインでした。
覚えておくと便利なショートカットキー
- Ctrl+,(コンマ)：設定画面を開く
- Ctrl+D：単語選択
- Ctrl+Shift+D：行の複製(複数行選択可能)
- Ctrl+↑または↓：行の入れ替え
- Ctrl+Shift+S:名前をつけて保存
- Ctrl+S：上書き保存
- Ctrl+Shift+T：閉じたタブの復元
他にもまだまだ便利な設定や使い方があると思われます。今後この記事は追記していきます！