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

Atomパッケージの作り方

これまで2回に分けて紹介してきたGitHub製テキストエディタAtomだが、パッケージで機能を拡張できるのが大きな魅力の1つであることはこれまでお伝えしてきた通りだ。Atom紹介の最終回となる今回はパッケージを使うだけでなく、自分で作る方法を解説しよう。

なお、パッケージの公開にはapmコマンドが必要になる。Macの場合はAtomをインストールすると同時に利用可能になるが、Windowsの場合はChcolately(Windows用のパッケージマネージャ)でインストールするか、zip形式の場合はresources/app/apm/node_modules/atom-package-manager/binに環境変数PATHを通すことでapmコマンドが利用可能になる。

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

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

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

パッケージの雛形を生成

まずは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に不足している機能がある場合は自分でパッケージを作成するという方法も選択肢に加えてみて欲しい。