イマドキのIDE事情 第18回
Github製の次世代テキストエディタAtomをチェック!(3)

■ 文字数をカウントするパッケージを作ってみよう

簡単な例として以下のように現在のエディタの文字数をカウントして表示するパッケージを作ってみることにする。

文字数をカウントするパッケージ

○パッケージの雛形を生成

まずはAtomのメニューの「Packages」→「Package Generator」→「Generate Atom Package」でパッケージの雛形を生成する。「ホームディレクトリ/github/入力したパッケージ名」に以下のようなファイル群が出力される。パッケージの開発にはCoffeeScript、LESS、CSONを使う。

/keymap

??character-count.cson

/lib

??character-count-view.coffee

??character-count.coffee

/menus

??character-count.cson

/spec

??character-count-spec.coffee

??character-count-view-spec.coffee

/stylesheets

??character-count.less

.gitignore

CHANGELOG.md

LICENSE.md

package.json

README.md

今回はコンテキストメニューからアクションを呼び出したいだけなので不要なファイルを削除して以下のようにシンプルな構成にする。

/keymap

??character-count.cson

/lib

??character-count.coffee

/menus

??character-count.cson

.gitignore

CHANGELOG.md

LICENSE.md

package.json

README.md

○ソースの編集

まずはpackage.jsonを以下のように編集する。パッケージ名や説明、リポジトリのURLは作成するパッケージにあわせて適切なものに変更すること。

{

??"name": "character-count",

??"main": "./lib/character-count",

??"version": "1.0.0",

??"description": "Show number of characters in the current editor",

??"activationEvents": ["character-count:count"],

??"repository": "https://github.com/atom/character-count",

??"license": "MIT",

??"engines": {

????"atom": ">0.50.0"

??},

??"dependencies": {

??}

}

続いてmenus/character-count.csonを編集してコンテキストメニューからカウント処理を呼び出せるようにする。

'context-menu':

??'.overlayer':

??????'Count Characters': 'character-count:count'

さらにkeymap/character-count.csonを編集してキーボードショートカットもつけておく。

'.workspace':

??'ctrl-alt-c': 'character-count:count'

肝心のパッケージ本体であるlib/character-count.coffeeを以下のように編集する。

module.exports =

??count: ->

????editor = atom.workspace.activePaneItem

????alert('char count: ' + editor.getText().length)

?

??activate: (state) ->

????atom.workspaceView.command "character-count:count", => @count()

なお、パッケージは「ホームディレクトリ/.atom/packages」にコピーすると使えるようになるが、パッケージの雛形生成時にシンボリックリンクが貼られているためコピーしなくても生成されたディレクトリの方を編集するだけでよい。
また、パッケージのファイルを変更した場合は一度Atom自体を起動しなおすか、コマンドパレット(COMMAND+SHIFT+P)から「Window:Reload」(もしくはCTRL+ALT+COMMAND+L)でウィンドウをロードし直すと変更が反映される。

○パッケージの公開

作成したパッケージは前述のように「ホームディレクトリ/.atom/packages」にコピーすれば使えるようになるが、汎用的なものであればAtomのパッケージマネージャからインストールできるよう公開しておくと便利だ。
パッケージを公開するにはまずGitHubリポジトリを作成し、パッケージをpushしタグを打っておく必要がある。筆者は今回以下のリポジトリを作成した。

https://github.com/atom/character-count

続いてターミナル(Windowsの場合はPowerShell)でパッケージのルートディレクトリに移動し、以下のコマンドを実行する(-tオプションにはGitHubリポジトリに打ったタグを指定)。

apm publish -t 1.0.0

初回実行時は以下のようにAPIトークンの取得が求められる。

初回はAPIトークンの取得が求められる

Atomのサイトにアクセスし、GitHubのアカウントでログインするとAPIトークンが発行されるのでこれをコピーしてターミナルに貼り付けよう。
うまくいけばこれでパッケージが公開され、Atomのパッケージマネージャからインストールできるようになるはずだ。

パッケージが公開された

■ まとめ

AtomはChromiumをベースとしており、CoffeeScriptやLESSといったWeb技術を使用して簡単にパッケージを作ることができる。また、Chromeが標準で備えているDeveloper Toolsをデバッグに使うことも可能だ。Webエンジニアにとってはカスタマイズしやすい環境といえるだろう。
もしAtomに不足している機能がある場合は自分でパッケージを作成するという方法も選択肢に加えてみて欲しい。