Atomのパッケージを作る(1)

f:id:uraway:20151209203557p:plain

Atomのパッケージ作成チュートリアルを要約しながら理解して、最終的には簡単なパッケージが作れたらいいな的な記事第一回目です。

3.3 Hacking Atom : Package: Word Count

Atom パッケージの作成

Package: Word Count

Package Generator

コマンドパレットでGenerate Packageを叩く。
プロジェクト名を入力してEnter
以下のフォルダ構成で、新規プロジェクトがAtomに立ち上がる。

my-package/
  grammars/
  keymaps/
  lib/
  menus/
  spec/
  snippets/
  styles/
  index.coffee
  package.json

package.json

メインのモジュールへのパスや依存ライブラリなどのパッケージのメタデータが記述される。

  • main:パッケージのエントリーポイント。何も書かれていないならAtomindex.coffeeあるいはindex.jsを探す。
  • activationCommands:パッケージのアクティベーショントリガーのコマンド。
  • language-package-name:grammar-used: (e.g) language-javascript:grammar-used

ソースコード

  • activate(state): パッケージのアクティベート時に呼び出される必須メソッド
  • serialize():ウィンドウが閉じられる時に呼び出されるオプションメソッド。のちのactivateメソッドに渡すデータを返すことができる。
  • deactivate():ウィンドウが閉じられる時に呼び出されるオプションメソッド。ファイルの監視や外部リソースの保持のリリースをここで行う。

スタイルシート

stylesディレクトリ内に置かれ、CSS・Lessで記述される。標準でカラーやUIが定義された一連のコンポーネント記述されている。

キーマップ

keymapsディレクトリに記述される。

'atom-workspace':
  'ctrl-alt-o': 'my-package:toggle'

この例では、my-package:toggleコマンドはatom-workspaceエレメントの中においてのみctrl-alt-oを押すと実行される。

アプリケーションメニュー

menusフォルダに記述

'menu': [
  {
    'label': 'Packages'
    'submenu': [
      'label': 'Word Count'
      'submenu': [
        {
          'label': 'Toggle'
          'command': 'wordcount:toggle'
        }
      ]
    ]
  }
]

この例では、"Packages"メニュー内の"Word Count"メニューグループ下に"Toggle"メニューアイテムを置いている。

コンテクストメニュー

'context-menu':
  'atom-text-editor': [
    {
      'label': 'Toggle Word Count'
      'command': 'wordcount:toggle'
    }
  ]

この例ではエディタのペイン内で右クリックした時にポップアップするメニューに"Toggle Word Count"メニューオプションを加えている。

次回へ続く...