Help us understand the problem. What is going on with this article?

Atomで矩形選択ツールを作ったのでプラグインの開発方法を解説する

More than 3 years have passed since last update.

Atom で矩形選択ツールが欲しかったが、自分が期待したキーマップのものがなかったのと、キーマップの設定を変更するのも面倒に感じたので試しに実際に作ってみた。

実際に触ってみると便利なAPIが豊富でドキュメントも丁寧で、かつ手軽にプラグインを実装できるフレームワークになっていて想像以上に簡単だった。

いくつかプラグインのコードを読んでみて、おそらくスタンダードだと思われるエディタ拡張プラグインの開発手法を紹介します。

作ったもの

https://github.com/iguchi1124/rectangular-selection

Shift + Alt + 方向キー(上下) で矩形選択ができるようにするプラグインです。

参考にしたドキュメント

プラグイン開発者は flight manual の chapter-3 をまず読むと良いです。

また、公式のAPIドキュメントを見ればやりたいことはカバーできた。

開発を始める

package generatorのプラグインがデフォルトで導入されているので、それを用いてテンプレートを作成します。

メニューから下記を選択すると作成できる。

  • Packages -> Package Generator -> Generate Atom Package

作成されたテンプレートの package.json にはプラグインの activate コマンドが登録されている。

今回は登録したkeymapsが押下されたときに特定の処理を実行するタイプなので、 "activationCommands" の項は削除する。

知っておくべき apm / atom コマンド

  • atom -d 開発モードで起動する。
    • console を開いてデバッグすることができる。
  • apm develop <plugin name>
    • 公開されているプラグインであっても、開発モードでは手元のコードを参照するようになる

Keymapsの定義

このプラグインでは、次のようなキーマップを利用するように登録しました。

  • Shift + Alt + ↑
  • Shift + Alt + ↓

atomでは、各プラグインで利用する keymap をjson形式で定義できます。

keymaps/<package name>.json に利用する keymap を登録します。

keymaps/rectangular-selection.json
{
  "atom-workspace": {
    "shift-alt-up": "rectangular-selection:move-up",
    "shift-alt-down": "rectangular-selection:move-down"
  }
}

Keymapsにアクションを紐付ける

// 現在開いているeditorを取得
editor = atom.workspace.getActiveTextEditor();

// 適当にハンドラのインスタンスをつくる
this.editorHandler = new EditorHandler(editor);

// 各キーマップに紐づくアクションを登録
atom.commands.add('atom-workspace', {
  'rectangular-selection:move-up': () => this.editorHandler.moveUp(),
  'rectangular-selection:move-down': () => this.editorHandler.moveDown()
});

エディタのイベントハンドラを登録する

atomには、エディタが新しく開かれた時やエディタ上のカーソルの位置が変化した時等、さまざまなイベントハンドラが用意されている。

また、イベントハンドラを登録したい場合は CompositeDisposable を利用して、使い捨てられるように実装します。

たとえば、カーソルの移動に伴いなにかしらの処理を行うように登録してみる。

// Editor handler class

  constructor(editor) {
    this.editor = editor;
    this.subscriptions = new CompositeDisposable(); 
  }

  subscribe() {
    this.subscriptions.add(this.editor.onDidChangeCursorPosition(() => {
      // なにかしらの処理
    }));
  }

エディターを閉じた時等に、各エディタに登録したイベントハンドラを無効化するようにします。

  unsubscribe() {
    this.subscriptions.dispose();
  }

作ったプラグインを公開する

github等にタグ付けしたブランチをプッシュし、 apm publish コマンドで公開できる。

git tag <plugin version>

git push origin tag <plugin version>

apm publish --tag <plugin version>

公開が完了すると、pluginのページが https://atom.io/packages に登録され、apm installコマンドでプラグインをインストールできるようになります。

https://atom.io/packages/rectangular-selection

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away