Github製のテキストエディタ Atom [応用編]

/

導入

この記事はGithub製のテキストエディタ Atom [導入編] – Koltattの続きです。

前回Atomのインストールとメニューの日本語化をおこなったので、今回はその他の設定やパッケージの追加を試していきます。

テーマの変更

Atomではパッケージを追加する事によりテキストエディタの機能を拡張させる事が出来ましたが、同様にテーマを追加するとエディタのデザインを変更することが出来ます。

テーマを追加するにはメニューバーの Setting(環境設定)から Install を選択します。
Installのページから検索フォームにワードを入れ、右横のタブのテーマを選択するとワードに関連するテーマが表示されるので、目的のテーマのInstallを選択してAtomにテーマを追加します。

ダウンロード出来るテーマはインストールのページにおすすめが表示されますが、利用出来るテーマの数が多いですしサンプルや詳しい情報を見ることが出来るので、テーマを探したい時にはAtomのサイトを見る方が便利です。

ダウンロードしたテーマはSetting(環境設定)のテーマの項目から変更することが出来ますが、その際に選択出来るテーマがインタフェーステーマとシンタックステーマに分かれていてます。インターフェーステーマの方はAtomの外観を、シンタックステーマはエディタ内のコードを書く部分のデザインをそれぞれ変更してくれます。

テーマの領域が分かれているため両方を同じテーマで揃えて全体のデザインを統一したり、エディタの部分だけは実用を重視して見やすいデザインのものに変えるなど柔軟にカスタマイズする事が出来ますが、同じ名前のテーマでもインタフェースとシンタックスが別に用意されている場合もあるのでダウンロードの際にはそれぞれをダウンロードする必要があります。

スニペット

Atomは標準でスニペットの機能が使えるので頻繁に使うコードはあらかじめ登録しておくと便利になります。
スニペットはメニューバーの ファイル(Windows) or 編集(ubuntu) > スニペット から登録出来ます。

スニペットを登録するための snippets.cson にもサンプルが書いてありますが、登録する際の文法はは以下のようになります。

'.source.coffee':
   'Console log':
     'prefix': 'log'
     'body': 'console.log $1'

上から順番に見ていくと

  1. スニペットを利用する言語を指定するセレクタ
  2. 登録するスニペットの名前
  3. スニペットを呼び出す prefix の登録
  4. 出力させたい値の登録

という形になります。
スニペットの名前は任意のものをつける事が出来ますが、セレクタの先頭には” . “が必要で、また2段落目と3段落目にはインデントが入力されていないとエラーが発生するので注意が必要です。

実際に使ってみたほうが解りやすいので、試しにJavaでSystem.out.println();を呼び出すためのスニペットを登録してみました。

'.source.java':
  'System.out.println':
    'prefix':'sop'
    'body':'System.out.println();'

この内容を登録するとJavaのファイルを編集する際に sop と打ち込めば System.out.println(); と入力してくれる System.out.println という名前のスニペットが自動的に表示されるようになります。

スニペットの表示

セレクタの調べ方

スニペットの登録に必要なセレクタはSetting(環境設定)から調べる事が出来ます。
Setting(環境設定) > Package > インストール済みのパッケージから‘language’ を検索。
Core Packages の項目から各言語の詳しい文法が ‘langugae-** ’の形で表示されます。そこから自分の調べたい言語を選択すると Scopeと言う項目があるのでこの値を セレクタとして使う事が出来ます。

例えば language-java を選択するとJava Grammar から Scope: source.java を確認する事が出来ます。

セレクタの確認

参照
How to Use Code Snippets in Atom/sitepoint

ショートカットキーの登録

Atomや追加したパッケージのショートカットキーを利用したい時には Setting(環境設定) > キーバインドを見るとショートカットキーの一覧を見ることが出来ます。しかしパッケージを追加していくとパッケージ同士でショートカットキーが被ってしまい目的の動作をさせる事が出来なくなってしまう場合があります。
そのためショートカットキーの衝突を回避するためにキーマップを利用して自分の実行させたいショートカットキーの登録をしておきます。

キーマップはメニューバーの ファイル(Windows) or 編集(ubuntu)> キーマップを選択すると、登録するための keymap.cson を呼びだす事が出来ます。
keymap.csonには

# syntax
[セレクタ]:
[key]: [action]

# 記入例
'body':
'alt-1': 'pane:show-item-1'

という形式でショートカットを登録しますが、キーバインドの各項目の左側にあるアイコンをクリックするとキーマップに登録出来る形式でショートカットキーとコマンドの値がクリップボードにコピーされるので、そのままkeymap.csonに貼り付ければ設定を簡単に上書きする事が出来ます。

スタイルシートの編集

AtomはChromeブラウザの開発版であるChromiumをベースに作られているので、Less形式のスタイルシートを編集することでメニューのフォントのサイズなどを細かく設定する事が出来ます。

Styles.lessは ファイル(Windows) or 編集(ubuntu) > スタイルシート から開くことが出来るので、そこに設定したいスタイルシートを書いていきます。またChromiumがベースとなっているので Ctrl-Alt-I でAtomからもChromeと同様にデベロッパーツールを使う事も出来ます。
動作は通常のものと同じなのでスタイルシートを設定したい項目のセレクタが解らない場合でもデベロッパーツールから調べる事が可能です。

パッケージ

普段僕が使っているパッケージもいくつか簡単に解説してみます。
各パッケージは前回やったようにAtomのインストールのページから名前を検索して追加する事が出来ます。

Emmet

EmmetはHTMLとCSSの入力サポートしてくれるツールです。
省略形で入力したコードを特定のキー(デフォルトではtab)を押す事によって、通常の形式で展開してくれるのでタイピングの回数を減らす事が出来ます。

<!-- 省略記法 -->
div>ul>li
<!-- tabで展開 -->
<div>
    <ul>
        <li></li>
    </ul>
</div>
fz10
/* tabで展開 */
font-size: 10px;

bd+
/* tabで展開 */
border: 1px solid #000;

省略記法の数が相当多いので詳しくはEmmetのサイトのチートシートなどが参照するのに便利です。
Emmetはあまり派手なツールではないですが、エディタの機能なのでSassやgulpのようにコンパルやスクリプトを書く必要がなく導入に開発の環境を選ばないというメリットがあります。
Adobe BracketsSublime Textなど利用できるエディタも多いので一度慣れてしまえば活用する機会の多いツールだと思います。

参照
emmet.io
emmet – Atom.io

color-picker

color-pickerはCSSなどで色の指定をする時にパレットから選択できる用にしてくれるプラグインです。
使い方は Ctrl-Alt-C でパレットが起動するので色を選ぶとカーソルの位置に値が入力されます。
またパレットのタブで色の指定の形式を切り替えられる事が出来るのでRGBや16進数(HEX)と好きなものを選ぶことが出来ます。
シンプルな機能ですがWEBデザインをする時には良く使うプラグインです。

color-picker

Project Maneger

Project Manegerはプロジェクト毎に登録したディレクトリを管理してくれるプラグインです。

メニューバーのパッケージの項目から Project Maneger > Save Project を選び、Enter name of the project に任意のプロジェクト名を入力するとツリービューに表示されていたファルダがプロジェクト名でまとめられて登録されます。

登録したプロジェクトは Project Manager > list Project もしくはAlt-Shift-P で登録したプロジェクトの一覧が表示されるので、目的のプロジェクト名を選ぶと登録したフォルダがツリービューに表示されます。

登録するフォルダは File > プロジェクトフォルダの追加 などであらかじめツリービューに登録しておいて Save Project で登録してもいいですが、Project Manager > Edit Project からフォルダのPathを指定する事で登録・編集する事も出来ます。

あとがき

前回に続いてAtomに色々と設定を加えてみました。あれこれ調べ直したついでに自分の環境も変えてみて、スニペットの登録に関しては微妙に書きづらいと感じる部分もあったりしましたが、それでもカスタマイズ性の高いエディタだと思います。

あとAtomとは直接関係はないですがサイトのテーマのページにランキングが無かったのが気になりました(トレンドに関しては最大一ヶ月まで)。
一見不便のようですがテーマなどの場合ランキングを作ってしまうと上位に人気が集中し過ぎてしてしまうため、それを防ぐために意図的にこういったデザインにしているのかもしれません。

実際のところは解りませんが影響がありそう部分なので、パッケージ管理のようなページを作る機会があったらランキングは付けるかどうかは検討する価値のあるところだと思います。