フロントエンド開発Blog

オレには鈍器がある

Atom , JavaScript , git , nodejs

Atomエディタはnode.jsベースということもあって、メイン機がwindowsの自分には扱いにくいのかなーと思って食わず嫌いしてたんですが、JavaScriptで機能拡張ができて、しかもクロスプラットフォーム、そしてなんと無料というおいしい匂いに負けてついにAtomユーザになりました。

マシン環境

なにはなくともマシン環境をまずはさらしますね。

ここらへんはAtomを導入する以前からインストールされてました。事前に入れとくとスムーズかも?

Atomインストール

ダウンロードしてzipを解凍すると生身のままexeがありました。どうやらインストール不要なようです。D:ドライブ直下において使うことにしました。

よし、いきなりパッケージ作ってみよう

こういう場合、とにかくやってみるという良いのか悪いのかそういう癖があるのでもうさっさと作り始めてみます。軽く調べると、パッケージ作成時にテンプレートとなるファイル群を用意してくれるコマンドがあるようです。

パッケージは何でもよかったんですが、ひとまず選択範囲内の全角と半角の変換をする機能を作ってみます。

  1. ctrl + shift + p コマンドパレットを表示させる
  2. generate package を起動
  3. japanese-zen-han-convert と入力し、Enter

するとなにやらエディタが再起動し、新規ディレクトリがOpenされたようです。

左側のTreeViewを右クリックして「Show in Explorer」をクリックすると C:\Users\[Windowsユーザ名]\github\japanese-zen-han-convert が開かれました。むむ。開発中のパッケージはここに入るのかな?というか、Atom自体のパッケージはどこにインストールされてるんだろう?と疑問に思って探してみることに。

ディレクトリ構成がなんとなくつかめた

遅まきですが、なんとなくディレクトリ構成がつかめました。


C:\Users\[Windowsユーザ名]\github\ ・・・開発中のパッケージがここに入る
C:\Users\[Windowsユーザ名]\.Atom  ・・・Atomエディタの個人設定ファイル/インストール済みパッケージ
D:\Atom  ・・・Atom本体のインストールディレクトリ

Atom本体は使用に際して変化しないようです。基本、パッケージをインストールしたり、エディタの設定を変えた場合は C:\Users\[Windowsユーザ名]\.Atom の中のファイルが変更されると思ってよさそう。

つまり、パッケージや設定の同期はこの.AtomフォルダをDropboxなどで複数マシンで共有できるということですね。

横道にそれましたがパッケージ制作に戻ります。

よし、いきなりパッケージ作ってみよう

Atomを開発者モードで立ち上げなおしてみます。「View > Developer > Open Dev Mode」するとPackagesメニューに「japanese-zen-han-convert」が現れた。右クリックコンテクストメニューにも。この状態で作ればいいんだろうと解釈。

Chrome的な開発者ツールも立ち上げる。「ctrl + alt + I」でOKです。

よーしここからつくりはじめるぞー

ファイル構成ざっくりと

いじったファイルに★マークつけときますね。

./
├─keymaps
│      【★】japanese-zen-han-convert.cson  ・・・キーバインドと、実行するメソッドの割り当て
│      
├─lib
│      【★】japanese-zen-han-convert-view.coffee ・・・処理はここにかく
│      japanese-zen-han-convert.coffee
│      
├─menus
│      【★】japanese-zen-han-convert.cson  ・・・メニュー項目のテキストと、実行するメソッドの割り当て
│      
├─spec
│      japanese-zen-han-convert-spec.coffee
│      japanese-zen-han-convert-view-spec.coffee
│      
└─stylesheets
        japanese-zen-han-convert.less  ・・・createElementとかしてGUIを作るならこれもいじるけど今回は不要
【★】package.json ・・・パッケージの設定をここに書く
【★】README.md  ・・・公開するならここに書いたことがAtom公式ページに表示される

※これ以外のファイルは開きもしなかったので割愛

japanese-zen-han-convert.cson まずはメニュー

menus\japanese-zen-han-convert.cson を開いてメニューGUIを作ります。なんとなーく書き方は察することができたのでここは躓きませんでした

# See https://atom.io/docs/latest/creating-a-package#menus for more details
'context-menu':
  'atom-text-editor': [
    {
      'label': 'Japanese Zen Han Convert'
      'submenu': [
        {
          'label': '全角=>半角'
          'command': 'japanese-zen-han-convert:toHan'
        }
        {
          'label': '半角=>全角'
          'command': 'japanese-zen-han-convert:toZen'
        }
      ]
    }
  ]
'menu': [
  {
    'label': 'Packages'
    'submenu': [
      'label': 'Japanese Zen Han Convert'
      'submenu': [
        {
          'label': '全角=>半角'
          'command': 'japanese-zen-han-convert:toHan'
        }
        {
          'label': '半角=>全角'
          'command': 'japanese-zen-han-convert:toZen'
        }
      ]
    ]
  }
]

submenuの中は配列で複数項目が格納できるっぽいので、メニューもコンテキストメニューもそのようにしてしまいました。commandの部分にはクラス名:メソッド名 みたいな感じで実行処理を記述するっぽいです。

japanese-zen-han-convert-view.coffee 処理の中身

処理自体はcoffeescriptで書くようです。APIが分からないので公式で調べながら作ります。

keymaps\japanese-zen-han-convert.cson キーバインド設定

もう見たまま適当に割り振ります。

'.workspace':
  'ctrl-alt-j': 'japanese-zen-han-convert:toHan'
  'ctrl-alt-shift-j': 'japanese-zen-han-convert:toZen'

テスト実行

何か足りないのか、このままじゃダメでした。Packageメニューからの起動でもダメ。コンテキストメニューもだめ。ctrl + shift + pでコマンド「tohan」も「tozen」もだめ。うーんうーん。そういえばデフォルトメソッドにtoggleって書いてあったけど、勝手にtoHanとtoZenにしちゃったな。。。ということを思い出してプロジェクト内をctrl + shift + fでGrepしてみたところ、package.jsonにそれらしき記述が。

package.json

activationCommandsというところがtoggleのみになってます。これかな?toHanとtoZen二つ登録したい場合はどうするのか・・・とりあえず配列にしちまえ!!

{
~割愛~
  "activationCommands": {
    "atom-workspace": [
      "japanese-zen-han-convert:toHan",
      "japanese-zen-han-convert:toZen"
    ]
  },
~割愛~
}

リロードしたら今度は動きました。やった!複数指定したいときはとりあえず配列みたいな感じでいけば大抵大丈夫っぽいです(ぇ

最後にREADME.mdをいじっておしまい。


パッケージ公開作業

まずはググった結果通り、コマンドプロンプトを開いて

cd C:\Users\[ユーザ名]\github\japanese-zen-han-convert
apm publish minor

すると「gitはいってねーぞ」と怒られる。そうですか・・・ということで大急ぎでgitHubに空の新規repositoryを作ってpushする

git init
git add .
git commit -m "init"
git remote add origin [gitHub repositoryのURL]
git push origin master

エラーもなくさくっと完了。gitはhttpsでやっちゃいました。もう一回publish

apm publish minor

・・・今度はrepositoryにアクセスできねえぞと怒られた。package.jsonの「repository」を先ほどの作ったgitHubのURLに差し替え(https://github.com/oredon/japanese-zen-han-convert.git)今度はうまくいったようです。

途中、「githubとAtomを連携するからtoken入れろ、用意で来たらEnter押せ」と言われます。Enter押したらブラウザが立ち上がって謎のtokenが表示されました。それをコピーしてプロンプトに張り付けたらOKでした。

更にpublish tag...で止まってしまいました。何回もココで謎のエラー。ヤマ勘でgithubのアカウントIDとパスワードを入れてEnterしたら成功。あとで知ったんですが、どうやらリモートリポジトリにアクセスしてバージョン番号のtagをつけようとして、認証でこけてたみたいです。

簡単に回避したいなら、C:\Users\[windowsユーザディレクトリ] に_netrcという拡張子なしのファイルを作って

machine github.com
login [ユーザID]
password [パスワード]

を入力してhttpsアクセス時の認証を自動解除するようにしておくとスムーズかもしれません。ただ、この_netrcが外部に漏れるとパスワードが平文なので危ないです。運用には気を付けてください。正直いっちゃうとあんまおすすめできませんので自己責任で。あくまで「こういう抜け道もあるよ」的な感じで聞き流してください。

パッケージ童貞をすてた!

一回やっておぼえちゃえばなんてことないかなと思います。ただ、オンラインには「躓いたらこうでこうしてこう!」みたいな解決策を提示しているサイトが国内外であまり見つけられないのである程度問題解決能力が必要かも?もっとAtomが普及したらここらへんももっと便利になるのかなと思います。

ただ、エディタを使い始めて間もない僕でもすぐさまパッケージ童貞を捨てられるくらいなので、これは「仕事道具(エディタ)は自分で作る」というカッコイイ人たちに愛されて広まっていくんじゃないかなと。sublime?brackets?あーまーそうですねー(何

まぁAtomの良さは「設定確認はGUIでできる点」と「パッケージの検索と導入がGUIでOK」と、sublimeより少し敷居が低いのがいいなぁと。長くなりましたが、皆さんもパッケージ作ってみませんか?以上Atomでパッケージ童貞を捨てたお話でした。

ページトップへ

関連ページ

ページトップへ