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


公式サイトの[これ](https://atom.io/docs/v0.209.0/hacking-atom-package-modifying-text)をやってみた。

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

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

##環境をつくる

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

こんな感じで左側にツリービューがでてくる。
![Screen Shot 2015-06-15 at 17.26.51.png](https://qiita-image-store.s3.amazonaws.com/0/10058/afcb18f0-e56b-71f8-3222-1bbea21516fa.png "Screen Shot 2015-06-15 at 17.26.51.png")

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

 - `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](https://www.npmjs.com/package/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")
```

##動かしてみる

リロードして適当なエディタにアスキーアートに変換したい文字を入力して選択。
![Screen Shot 2015-06-15 at 18.16.35.png](https://qiita-image-store.s3.amazonaws.com/0/10058/7ebfde0f-eb7d-6395-a7ae-389a289906ad.png "Screen Shot 2015-06-15 at 18.16.35.png")

`ctrl-alt-a`。

![Screen Shot 2015-06-15 at 18.16.47.png](https://qiita-image-store.s3.amazonaws.com/0/10058/cf738c21-253f-4b17-4c6b-c3d6f1eec1a9.png "Screen Shot 2015-06-15 at 18.16.47.png")


成功！！

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

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