僕は、Wordpressテーマなどのファイルを編集するには、Sublime Textなどを使用したりしてきました。
Sublime Textは、「恋に落ちるエディター」といわれるほどとても使い勝手の良いエディターです。
ただ最近、ネットなどを見ていると、AtomというWEB開発用エディターにも、ものすごいポテンシャルを感じました。なんといっても、こちらは無料です。
ということで、僕は今、Wordpressテーマを編集するくらいしかコード編集をすることはないので、Wordpress用にAtomを初期設定してみました。
今回は、僕がやってみた初期設定をメモがてら紹介です。
Atomとは
Atomとは、GitHub社が開発したWEBプログラマ向けのエディターです。
オープンソースで開発され、Windows、Mac、Linux環境で利用可能。しかも無料で利用することができます。
拡張性が高いのも大きな特徴で、テーマやパッケージをインストールすることで、自分好みの環境にカスタマイズすることができます。
かなり、Sublime Textを意識した作りで、操作性はかなり似ており、見た目や機能などもテーマとパッケージをインストールすることで、かなり近づけることができます。
いろいろな言語に利用できるエディターですけど、僕は現在、Wordpress関係の編集をする時しかコード編集をすることはないので、以下でWordpressをいじる用に初期設定してみたいと思います。
ダウンロード・インストール
ダウンロードは、atom.ioの「Download Windows Installer」から行います。
僕の環境はWindowsなのでWindowsインストーラーのダウンロードボタンが表示されましたが、それぞれの環境に合ったインストーラーがダウンロードできます。（以下はWindows環境での説明です。）
AtomSetup.exeというファイルがダウンロードされるので、起動してインストールします。インストールは特に難しいこともないと思います。
Atomの基本操作
インストール後、起動すると、以下のような画面が表示されます。
ファイルを開く
エディター画面にWordpressテーマのフォルダなどをドラッグ＆ドロップすると、以下のようにツリー表示されます。
このように、編集対象ファイルを一覧で見ることができるので、ファイルへのアクセスも容易です。ツリー表示は、「Ctrl+\」で切り替えることができます。
コマンド操作
Atomの基本機能となるコマンドは、通常のメニューからアクセスすることができます。
ただ、メニューの「View→Toggle Command Pallet」もしくはショートカットキーの「Ctrl+Shift+P」から、欲しいコマンドを、ファジー検索することもできます。
ファイルの検索
フォルダをドラッグ＆ドロップして開けば、一覧になるので、ファイルの場所はそれだけでかなりわかりやすくなるのですが、それでも見つけづらいという場合は、「開いているフォルダの中からファイルを探してくれる機能」もあります。
メインメニューの「Find→Find File(Ctrl＋P)」をすることで、ファイルをいち早く発見できます。
この検索は、曖昧な検索も得意なので、何となく文字列を入力しても、結構見つけることができます。
「Find→Find File(Ctrl＋P)」では、フォルダ内のファイルを検索できましたが、「Find→Find Buffer(Ctrl＋B)」だと、開いているタブの中から検索してくれます。
基本設定
基本設定は、「File→Settings」もしくはショートカットキーの「Ctrl+,（カンマ）」から行うことができます。
ここでは、フォント、フォントサイズ、インデント幅などを手軽に編集することができます。
Sublime Textと違って、GUIで設定ができるので、ここらへんは、初心者にも優しく抵抗なく使えます。
僕は、デフォルトから以下の設定をオンにしました。
- Show Indent Guide（インデントガイドの表示）
- Show Invisible（タブ、半角スペースなどの表示）
インデントガイドと、半角スペースがわかりやすく表示されます。
言語別の設定を行う方法
例えば、「PHPのインデント幅は2がいいけど、Rubyのインデント幅は4がいい」なんて場合は、言語別の設定を行うことができます。
設定は、先程の設定画面のメニュー下にある入力ボックスに設定したい言語を入力すると、設定項目がインクリメンタル検索され表示されます。
言語別の設定項目は「Language 言語名」というような名前になっています。
あとは、通常の設定と同様に設定を行います。
スニペットの設定
その他に、この言語別設定からコードの入力の助けになるスニペットの設定も行うことができます。
スニペットの書式に関しては、それぞれ好みの書き方があると思うので、この設定は結構行うことがあるかと思います。
スニペットの設定は、それぞれの言語設定の「Open in Atom」ボタンから行います。
ボタンをクリックすると、言語の設定フォルダが開かれるので、スニペットのJSONファイルをテキストで編集します。（PHPの場合だとファイルは「language-php/snipetts/language-php.json」になります。）
「functionのスニペットのカッコの位置が気に入らない」といった場合はここで修正します。
キーバインドの設定
キーバインドの設定は、「File→Settings（Ctrl+Comma）」の「Keybindings」からショートカットキーの一覧を見ることができます。
「あれ？あのショートカットなんだったっけ？」なんて時も、検索すればインクリメンタル表示されるのですぐに見つかります。
キーバインドの設定を変更するには、「your keymap file」をクリックします。
キーバインドの設定手順などは以下を参照してください。
参考 Atomで新しくキーバインドを定義する方法 – Qiita
テーマの変更
テーマの変更は、「File→Settings（Ctrl+Comma）」の「Themes」から行うことができます。
Atom公式のThemesなどで外観を見る事ができるので、気に入ったテーマを適用することが簡単にできます。
「Install Themes」の入力ボックスからワード検索すると以下のような結果が表示されます。
あとは、インストールボタンを押せばインストールされます。
僕は、Sublime TextのMonokaiカラースキーマを利用していたので、それに似ているMonokai-setiを利用しています。
パッケージの設定
パッケージの設定は、「File→Settings（Ctrl+Comma）」の「Packages」から行うことができます。
これも、テーマの設定と同様Install packagesの入力ボックスから検索することで、手軽に探すことができます。
Atom公式のPackagesから、スクリーンショットと説明付きで探すこともできます。
僕がインストールしたパッケージは以下です。
Autocomplete package
確かデフォルトで入っていたと思うけど、一応。少ない文字入力でコードを補完して入力してくれます。やたら長いWordpressの関数名などは、これに頼るしかない。
Emmet plugin Atom editor
こちらも少ないコード記述で、HTMLや、CSSコードを気持ちよく生み出してくれます。最初は難しいかもしれないけど、Cheat Sheetを見ながら打てば、特に悩むこともないと思います。慣れると、これがないとWordpressのスタイルコードを書く気になりません。
Minimap package
Sublime Textのようにスクロールバーの部分にミニマップを表示させることができます。
A Color Picker for Atom
エディター上の色などをカラーピッカーで選択することができます。
css-color-highlight package
CSSの色指定部分の背景色をその色で表示してくれます。
まとめ
Atomは基本設定ならGUIで利用できるので、初めて利用する場合でも、結構取っつきやすいと思います。
ただ、Atomの場合、Sublime Textと比較して起動が遅いという一面もあります。
もし、こういったエディターを初めて利用する場合で、「Sublime Textお金がかかるからなぁ」と利用を控えている場合は、Atomから入っておけば間違いないと思います。
しばらく利用してみて、特に問題なければ、そのまま使い続けると、慣れる頃には大きな武器となると思います。
