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

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

2015.02.19

ent91_img01.jpg

これまで2回に分けて紹介してきたGitHub製テキストエディタAtomだが、パッケージで機能を拡張できるのが大きな魅力の1つであることはこれまでお伝えしてきた通りだ。Atom紹介の最終回となる今回はパッケージを使うだけでなく、自分で作る方法を解説しよう。
なお、パッケージの公開にはapmコマンドが必要になる。Macの場合はAtomをインストールすると同時に利用可能になるが、Windowsの場合はChcolately(Windows用のパッケージマネージャ)でインストールするか、zip形式の場合はresources/app/apm/node_modules/atom-package-manager/binに環境変数PATHを通すことでapmコマンドが利用可能になる。
竹添 直樹

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

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

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

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

まずは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トークンの取得が求められる。

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

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

ent91_img04.jpg
パッケージが公開された

■ まとめ

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

原稿:竹添直樹
株式会社ビズリーチ所属。Scalaを愛するJVM系プログラマ。業務の傍らOSS開発や執筆活動を行っている。
https://twitter.com/takezoen

※本記事は2014年12月16日にマイナビニュースに掲載された記事からの転載です。

この記事はどうでしたか?

おすすめの記事

キャリアを考える

BACK TO TOP ∧

FOLLOW