Edited at

AtomでPackageを作成してみる。

More than 3 years have passed since last update.


概要

最近巷ではAtomと言うGithub製のエディタが流行っているようだ。Sublime Textをそこそこ使用していたのだが、基本有償なので、無償で評判の良いAtomに乗り換えてみた。

https://atom.io/

バージョン1.0より前のバージョンは起動が結構遅かったが、バージョン1.0になってから結構実用的になったように思える。

とは言え、個人的に慣れるには使い込む必要があった。

前置きはどうであれ、最近はAtomのマークダウンが気に入っており、ドキュメント作成にAtomMarkdownを利用するようになった。そこでちょっとした作業をPackageとして作成できないかなと思ったのといつもの興味でPackage作成の手順を記述しようと思う。


ディレクトリ構成

まずはインストールディレクトリを把握しておく。デフォルトでは下記にインストールされているようだ。


MacのAtomインストールディレクトリ

/Users/ユーザ名/.atom


Atomのプロジェクトディレクトリ

/Users/ユーザ名/github

スクリーンショット 2015-08-03 21.15.33.png


パッケージ雛形の作成

Atomのメニューから[Packages]-[Package Generator]-[Generate Atom Package]を選択する。

スクリーンショット 2015-08-03 21.09.07.png

するとパッケージを生成する先を聞かれる

スクリーンショット 2015-08-03 21.09.59.png

すると指定したディレクトリ内にパッケージの雛形が生成される。

スクリーンショット 2015-08-03 21.12.38.png


デバッグ

ちなみに、[command]+[option]+[i]によって、Atomの開発ツールのインスペクタ画面が開くようだ。この画面でconsole.logデバッグできる。

スクリーンショット 2015-08-03 21.38.27.png


主なファイル構成

ここからは生成されたファイルの主要なものを説明していく。

基本的に、CoffeeScriptというJavaScript言語のコードに変換される言語で記述されている。


メニューの変更

まずは簡単なところで、メニューを変更してみる。


menus/my-package.cson

# See https://atom.io/docs/latest/hacking-atom-package-word-count#menus for more details

'context-menu':
'atom-text-editor': [
{
'label': 'Toggle my-package'
'command': 'my-package:toggle'
}
]
'menu': [
{
'label': 'Packages'
'submenu': [
'label': 'こんにちは。'
'submenu': [
{
'label': '私のパッケージ'
'command': 'my-package:toggle'
}
]
]
}
]

Atomを再起動すると下記のようなメニューができる。

スクリーンショット 2015-08-03 21.48.37.png


パッケージの定義ファイル

このファイルでは、パッケージの名前等が定義されているが、重要な部分で言うと、"main": 部分で初期に呼ばれるCoffeeScriptクラスをしてするようだ。

例えば、この部分を"./lib/main" にすることで、main.coffeeが呼ばれる。


package.json

{

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


次に、メッセージ内容を変更してみる。


lib/my-package-view.coffee

#

module.exports =
class MyPackageView
#コンストラクタ
constructor: (serializedState) ->
#ドキュメントで<div></div>タグを作成する。
@element = document.createElement('div')

#class属性を追加する。<div class='my-package'></div>にする。
@element.classList.add('my-package')

#こんな感じのタグを作成している。
#<div class='my-package'>
# <div class='message'>こんにちは。たぢさん。</div>
#</div>
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


表示されるメッセージが変わった。

スクリーンショット 2015-08-03 22.00.29.png

わかりやすくメイン処理のクラスコメント化してみた。

内容があっているかどうかは今後も調査予定。


lib/mypackage.coffee

#Viewであるmy-package-viewを読み込む。

MyPackageView = require './my-package-view'
{CompositeDisposable} = require 'atom'

#パッケージの初期化処理
module.exports = MyPackage =
myPackageView: null
modalPanel: null
subscriptions: null

#パッケージがアクティベートされる時に呼ばれる処理
activate: (state) ->
@myPackageView = new MyPackageView(state.myPackageViewState)

#モーダルパネルをmy-package-viewで作成する。
@modalPanel = atom.workspace.addModalPanel(item: @myPackageView.getElement(), visible: false)

#イベントを入れる管理してくれる箱のようなもの?
@subscriptions = new CompositeDisposable

#コマンドを登録する。下記のtoggleメソッドと'my-package:toggle'を紐付け定義する。
@subscriptions.add atom.commands.add 'atom-workspace', 'my-package:toggle': => @toggle()

#破棄処理
deactivate: ->
@modalPanel.destroy()
@subscriptions.dispose()
@myPackageView.destroy()

#不明なので後日調査
serialize: ->
myPackageViewState: @myPackageView.serialize()

#実装したいコマンド処理
toggle: ->
console.log 'MyPackage was toggled!'

if @modalPanel.isVisible()
@modalPanel.hide()
else
@modalPanel.show()


今回は長くなりそうなので、ここまで。

今後も、これらのCoffeeScriptファイルを読み解いて行こうと思う。