Atomでパッケージを作ってみた その2

###概要

前回からちょっと進めて、右側にパネルを表示するようにしてみた。

メニューから[パネルを開く]-[右パネル]を選択すると、右側にパネルが開くようにする。
もしくは、`Control + Alt + r`で、右側にパネルが開くようにする。

![rightPanelMenu.png](https://qiita-image-store.s3.amazonaws.com/0/3184/dbbdb4d5-fe70-0c6a-c6ca-ff57960d5c32.png)


![rightPanel.png](https://qiita-image-store.s3.amazonaws.com/0/3184/e8e7db38-248f-c127-135b-5267a8c69052.png)

以下、変更部分のソース。

###パッケージの設定

パッケージ名は、`sample01`とし、呼出しするコマンドは`openRightPanel`。

```package.json
{
  "name": "sample01",
  "main": "./lib/sample01",
  "version": "0.0.0",
  "description": "A short description of your package",
  "keywords": [
  ],
  "activationCommands": {
    "atom-workspace": "sample01:openRightPanel"
  },
  "repository": "https://github.com/atom/sample01",
  "license": "MIT",
  "engines": {
    "atom": ">=1.0.0 <2.0.0"
  },
  "dependencies": {
  }
}
```

###メニューの設定

メニューは、見た目の通り[パネルを開く]-[右パネル]

```menus/sample01.cson
more details
'context-menu':
  'atom-text-editor': [
    {
      'label': 'Toggle sample01'
      'command': 'sample01:openRightPanel'
    }
  ]
'menu': [
  {
    'label': 'Packages'
    'submenu': [
      'label': 'パネルを開く'
      'submenu': [
        {
          'label': '右パネル'
          'command': 'sample01:openRightPanel'
        }
      ]
    ]
  }
]
```
###キーマップの設定

`Control + Alt + r`を設定する。

```keymaps/sample01.cson
'atom-workspace':
  'ctrl-alt-r': 'sample01:openRightPanel'
```

###ビューの変更(メッセージの変更)
以下のようなタグが生成されるイメージで。

```
<div class='sample'>
  <div class='message'>右パネルが開きました。</div>
</div>
```

```lib/sample01-view.coffee
module.exports =
class Sample01View
  constructor: (serializedState) ->
    # Create root element
    @element = document.createElement('div')
    @element.classList.add('sample01')

    # Create message element
    message = document.createElement('div')
    message.textContent = "右パネルが開きました。"
    message.classList.add('message')
    @element.appendChild(message)

  # Returns an object that can be retrieved when package is activated
  serialize: ->

  # Tear down any state and detach
  destroy: ->
    @element.remove()

  getElement: ->
    @element
```

###ロジックの変更

addModalPanelをaddRightPanelに変更しただけ。

```lib/sample01.coffee
Sample01View = require './sample01-view'
{CompositeDisposable} = require 'atom'

module.exports = Sample01 =
  sample01View: null
  modalPanel: null
  subscriptions: null

  activate: (state) ->
    @sample01View = new Sample01View(state.sample01ViewState)
    #addModalPanelをaddRightPanelに変えてみた
    @rightPanel = atom.workspace.addRightPanel(item: @sample01View.getElement(), visible: false)
    #@rightPanel = atom.workspace.addModalPanel(item: @sample01View.getElement(), visible: false)

    # Events subscribed to in atom's system can be easily cleaned up with a CompositeDisposable
    @subscriptions = new CompositeDisposable

    # Register command that toggles this view
    @subscriptions.add atom.commands.add 'atom-workspace', 'sample01:openRightPanel': => @openRightPanel()

  deactivate: ->
    @rightPanel.destroy()
    @subscriptions.dispose()
    @sample01View.destroy()

  serialize: ->
    sample01ViewState: @sample01View.serialize()

  openRightPanel: ->
    console.log 'Open Right Panel!'

    if @rightPanel.isVisible()
      @rightPanel.hide()
    else
      @rightPanel.show()
```

なかなか慣れてきた。次回は、色々な![クラス](https://atom.io/docs/api/v1.0.4/Atom)を使ってみようと思う。