AtomのPackageを作るチュートリアルをやってみた #JavaScript

公式サイトのこれをやってみた。

AtomではCommandを呼び出すことで色々な拡張機能を使うことができる。というわけでこれを作ってみようというチュートリアル。選択した文字列をアスキーアートにしてくれるというだけのやつ。

ちなみにコマンドはcmd-shift-Pでコマンドパレットを開いて入力or選択して実行できる。

環境をつくる

コマンドパレットを開いてPackage Generator: Generate Packageを実行する。
パッケージを作成するパスが表示されるので、my-packageの部分をascii-artに変更してreturn。

こんな感じで左側にツリービューがでてくる。

今回は使わないので以下を削除する

lib/ascii-art-view.coffee
spec/ascii-art-view-spec.coffee
styles/

コマンドを作る

lib/ascii-art.coffeeを開いて次のように書き換える。何も考えずに一旦置き換える。

{CompositeDisposable} = require 'atom'

module.exports =
  subscriptions: null

  activate: ->
    @subscriptions = new CompositeDisposable
    @subscriptions.add atom.commands.add 'atom-workspace',
      'ascii-art:convert': => @convert()

  deactivate: ->
    @subscriptions.dispose()

  convert: ->
    if editor = atom.workspace.getActiveTextEditor()
      editor.insertText('Hello, World!')

コードを見てなんとなく想像する。
activateでコマンドを登録して呼び出すメソッドを関連付けてるっぽい。ascii-art:convertというコマンドが実行されるとconvertメソッドが呼び出される。
atom-workspaceの部分はスコープ的概念なのかな？deactivateではふむふむ。disposeね。
ま。このへんは追々調べよう。

convertメソッドではアクティブなテキストエディタを取得してそいつに"Hello, World"という文字列を追加している。

ひとまず動かしてみる

パッケージを動かすにはリロードをしなくてはならないらしい。
コマンドパレット->Window: Reloadでリロード。ctrl-alt-cmd-lでもいける。

リロードしたら、コマンドパレット->ascii-art:convertを・・・。出てこない。

package.jsonを編集

どうやらpackage.jsonのactivationCommandsに登録しないとでてこないらしい。

"activationCommands": {
  "atom-workspace": "ascii-art:convert"
}

リロードしてコマンドパレット->ascii-art:convertを実行！！アクティブなテキストエディタに"Hello, World"が挿入された。成功。

キーバインドを追加する

いちいちコマンドパレットを起動して・・・だと面倒なのでショートカットを登録する。やり方はとても簡単。keymaps/ascii-art.csonを編集するだけ。

'atom-text-editor':
  'ctrl-alt-a': 'ascii-art:convert'

リロードしてctrl-alt-a。"Hello, World"が挿入された。成功。

依存モジュールを追加する

アスキーアートへの変換にはfigletというnode moduleを使うのでpackage.jsonを編集する。

"dependencies": {
  "figlet": "1.0.8"
}

Atomが依存しているモジュール以外を使う場合Update Package Dependencies: Updateを実行しなくてはいけないらしい。
コマンドパレット->Update Package Dependencies: Updateを実行。

選択した文字をアスキーアートに変換する処理を書く

lib/ascii-art.coffeeを編集する。

convert: ->
  if editor = atom.workspace.getActiveTextEditor()
    selection = editor.getSelectedText()

    figlet = require 'figlet'
    font = "o8"
    figlet selection, {font: font}, (error, art) ->
      if error
        console.error(error)
      else
        editor.insertText("\n#{art}\n")

動かしてみる

リロードして適当なエディタにアスキーアートに変換したい文字を入力して選択。

ctrl-alt-a。

成功！！

感想

今回はたいしたことしてないけど比較的簡単に色々機能拡張できそう。あとはcoffeeScriptで書けるのは個人的にステキ。

調べること

もっとちゃんと理解する
配布の方法問題
適用範囲(例えば拡張子が.unkoの場合だけとか)の指定問題
keyBindが簡単にかぶりそう問題