atom packageを開発して結局あきらめた話と簡単な入門

はじめに

もともとatomで作りたいものがあって、それを作ろうと1日格闘した結果絶望したので挫折した。

しかしいろいろ調べてわかったこともあるのでせっかくなのでメモる

Atom拡張について

GitHubのテキストエディタAtomは拡張機能?パッケージを開発することができて、Atom自体がElectronでてきてるのもあってnode.jsで開発できる。

しかしWeb上にサンプルは少なく、英語で頑張ってググってもなかなかいいドキュメントやサンプルがない。

もしこれからググる人は「atom api hogehoge」でググるといいかもしれない。atom packageとかでググると開発の方ではなくpackageの利用側のヒットがほとんど

公式がちょろっとサンプルを出してはいるがcoffe scriptで書かれているため私には難解だった。(coffe scriptに詳しい人なら問題ないかもしれない)

Webにはほとんどサンプルはないため実際に開発するときはAPIリファレンスを見て、Atomのデバッガーを動かしながら使えそうなメソッドを手探りで探していくしかなさそう

実際に簡単な拡張機能を作ってみる

実際に拡張機能を作ってみるけどmarkdown-previewみたいなプレビューウインドウはいろいろ思考した結果できなかった「atom.workspace.open」あたりをあさるとできるかも

なので今回は単純にテキストをプログラムで自動編集する拡張機能を作る

環境はArch Linux

Atomでテンプレートコードを生成する

拡張機能を作り始めるときはまず、Atomでテンプレートを生成する

Atomで「Ctrol+Shift+P」を押して「generator」とコマンドを打つ

Package Generatorが候補に出てくるのでそれを押して保存先のパスを指定する

このとき指定したフォルダ名が直接パッケージ名となる(変更もできる)

新しくatomが開いて作成したテンプレートのファイル群を開いている状態になる。

実際に拡張機能をインストールして動かすにはツールバーの「View > Developer > Reload Window」を押してリロードして、「Ctrol+Shift+P」を押し、自分の指定したパッケージ名をコマンドとして打ち込む

ちなみにコードを変更するたびにリロードをしないと反映されない

するとこんな感じでモーダルウインドウがでてくる

テンプレートコードを理解する

node.jsをしている人はおなじみのpackage.jsを見るとmainに指定してあるのは./lib/[パッケージ名]

なので./lib/[パッケージ名].jsがエントリポイントとなる

そのファイルを開くと

  • activate
  • deactivate
  • serialize
  • toggle

という4つの関数がexportされている。activateとdeactivateは文字通り、パッケージがアクティブになったときとアクティブでなくなったとき。serializeはよくわからん。toggleはtoggleコマンドを入力したときに呼び出される

Atomのデバッガーを使う

Atomのメニューバー > View > Developer > Toggle Developer Toolsを押すとブラウザのデバッガーみたいなのがでる

これでちゃんとブレークポイントも貼れるし、ステップ実行もできる

ちょうどToggle関数内にconsole.logで出力している部分があるので本当に処理が走っているのかをデバッガーでみてみる。

デバッガーのConsoleタブを開いて同じように「Ctrol+Shift+P」でパッケージ名を入力するとちゃんとコードが走っていることがわかる

AtomのAPIを使う

ここからはAtomのAPIを使って実際にテキストファイルに干渉してみる

基本的にはatomオブジェクトをルートに、子要素を辿っていくことになる。

例えば現在アクティブなテキストエディターのテキストを取得して編集、テキストエディターに再反映するにはこんな感じのコードになる

//現在アクティブなエディターを取得
var editor = atom.workspace.getActiveTextEditor();
//テキストを取得
var text = editor.getText();
//テキストに何かしら操作をする
var newText = text.replace('hoge','moge');
//エディタに反映する
editor.setText(newText);

editorだとか、getTextメソッドとかはどこに書いてあるんだってのはAPIドキュメントに書いてある

テキストエディタの見た目(View)に干渉するにはgetView関数を使ってatomのDOMを取得してDOM階層をたどるしかない

一応以下のコードでテキストコードの要素は取得できたがいろいろ不安定なのであんまりおすすめできない

var view = atom.views.getView(atom.workspace);
  var activePane = view.querySelectorAll('atom-pane.pane.active')[0]
  var viewEditor = activePane.querySelectorAll('.editor')[0];
  var viewLines = viewEditor.shadowRoot.querySelectorAll('.lines')[0];
  var codeLines = viewLines.querySelectorAll('div.line');

設定項目を作る

設定項目(Config)を追加するにはexport default以下にconfig要素を追加していけばいい

型を指定しなければならないがそういうのはここらへんに書いてある

config要素が正しく指定されていればAtomのpackageの設定から見ると設定項目が表示できるようになっている

設定項目の値を取得するにはこんな感じ

新しくコマンドを定義する

現在初期設定であるコマンドは「toggle」

これ以上コマンドを増やすにはpackage.jsonのactivationCommandsにこんな感じでコマンドを追加する。

以下の場合はformatコマンドを追加している

さらにパッケージ名.jsのactivate関数内にこんな感じのコードも書く

同じところにtoggleのコマンドが書いてあるのでなんとなくわかると思う

this.subscriptions.add(atom.commands.add('atom-workspace', {
      'color-pos-tagger:format': () => function(){
//コマンド実行
}
    }));

これで「Ctrol+Shift+P」を押すとコマンド候補の中に指定のコマンドが出てくるはず

パッケージをGitHubのリポジトリと紐付ける

パッケージを公開する場合、GitHubのリモートリポジトリと紐付いていないといけない(他のリモートリポジトリでもいいかもしれないけどGitHubにしといたほうがいいと思う)

まず、GitHubで新しくリモートリポジトリを作成する

リモートリポジトリのURLをpackage.jsonのrepositoryに記載する

カレントディレクトリをパッケージのルートまで移動させ、gitの初期化を行う

cd {パッケージのルート}
git init
git remote add origin {githubに作ったリポジトリのURL}
git add .
git commit -m 'initialize'
git push --set-upstream origin master

これでリモートリポジトリとローカルリポジトリは同じ状態になったと思う

Atomにパッケージを公開する

atom.ioにアクセスして右上のSign inを押す

GitHubアカウントと連携できればOK

できたら以下のコマンドをうつ

apm publish minor

コンソールがカラフルになればOK

これでAtomから検索するとパッケージがインストールできる状態になっている

パッケージを消したいときは

apm unpublish [パッケージの名前]

でよかったはず

おわりに

今回作ったコードはGitHubに公開してるのでご自由に使ってください

公開したAtomパッケージ「sentence-splitter」も使えるのでatomに入れてみてもいいかも。

用途としてはクソ長い英論をAtomにコピペして“`en    “` で囲んでコマンドを打つと

「.」の部分で改行と空白行が入るので英論精読に役立つはず

 

今回1日Atom拡張と戦ってみて、あまりにドキュメントがすくないのですごく大変だった

coffee scriptに強いひとはもしかしたらAtom拡張いろいろできるかもしれない。僕は無理でした

とわいえまだ理想のエディタが実現できてないので次はvscode拡張かなぁ

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください