eyecatch
Fri, Aug 21, 2015

Atomパッケージを作る - ワード境界を日本語対応させるパッケージ: japanese-word-selection

このブログはAtomというGitHubが開発したテキストエディタを使って書いている。 このエントリは、そのAtomのパッケージを作ってみたというお話。 (adsbygoogle = window.adsbygoogle || []).push({}); Atomとは Atomは、2015/6/25にバージョン1.0がリリースされたばかりの新しいテキストエディタで、そのせいもあってか日本語サポートはあまり充実していない。 例えば、テキストを画面の端で折り返す「Soft Wrap」という機能はマルチバイト文字に対応しておらず、日本語で横に長い文を書いたりすると画面からはみ出てしまって不便。 しかしAtomは、パッケージなる、機能を拡張できるプラグインみたいな仕組みを持っていて、例えば上記Soft Wrapの問題はjapanese-wrapというパッケージをインストールすることで解決できる。 パッケージは誰でも作って配布することができる。 日本語のワード境界 Atomでブログを書いていて不満を感じたのは、日本語のワード境界をちゃんと判定してくれないところ。 以前は(今もたまに)サクラエディタという和製テキストエディタを使っていて、日本語文の中の一語をダブルクリックで選択するという操作をよくやっていた。 例えば、「Atomのパッケージは便利」という文があったら、「パッケージ」の辺りをダブルクリックすると「パッケージ」という単語を選択できる。 Atomでも癖でこの操作をすると、妙に広い範囲が選択されてしまう。 上記例だと「Atomのパッケージは便利」全体が選択されてしまう。不便。 japanese-word-selection この問題を解決してくれそうなパッケージを探したけど見つからなかったので、いい機会と思い自分で作ったのがjapanese-word-selection。ソースはGitHubに。 インストールして有効にすると、日本語のワード境界を判定するようになる。実のところ、とりあえずは文字種の境目を見ているだけ。ひらがな、カタカナ、半角カタカナ、漢字に対応。 特殊文字の全角版の処理どうするとか、あまり深く考えて作ってないけど、使ってて変な挙動を見つけたらおいおい直すということで。 とりあえず、Edit > Text の Delete to Previous Word Boundary と Delete to Next Word Boundary がちゃんと動かないのは見つけた。パッケージで上書きした処理を通っていない気がする。けど、デフォルトでキーバインディングもないし、あまり使われなそうな機能なのでほっておく。 Atomのパッケージの作り方 パッケージの作り方は、Atom Flight Manualのこのあたりを参考に。 Atom Flight ManualにはAtomの使い方からパッケージの作り方まで体系的に纏められているので一度は通して読みたい。 パッケージ開発にあたって、前提として知っておくべきは、AtomはElectronという実行環境の上で動いているということ。 (Atomが先で、そこからElectronがスピンオフした。) ElectronはざっくりNodeとChromium(Google ChromeのOSS版)でできていて、その上で動くアプリケーションは、HTMLとCSSで書いた画面をChromiumで表示して、それをNodeで動かすJavaScriptで制御する、という形で実装される。AtomはJavaScriptの代わりに、より高級なCoffeeScriptを使っているので、パッケージを作る際はCoffeeScriptのコードをがりがり書くことになる。 パッケージはnpmのパッケージっぽく書く。 AtomはMVVMな感じの設計になっていて、コアのViewModelとかをパッケージからいじることでいろんな機能を実現できる。 以下、備忘録として、japanese-word-selectionを作った時にやったことを書いておく。Atomのバージョンは1.0.7。 1. パッケージテンプレート生成 Atomを起動して、Ctrl+Shift+Pでコマンドパレットを開いて、generate packageと入力してEnter。 Package Generatorが起動して、作成するパッケージの名前を聞かれるのでjapanese-word-selectionを入力。(因みに、パッケージ名にatom-というプレフィックスを付けているのをたまに見るが、これは推奨されていない。) するとパッケージのテンプレートが作成され、それを読み込んだAtomウィンドウが開く(下図)。 パッケージ構成については概ね以下の感じ。 keymaps: キーバインディングを定義するcsonファイルをいれる。 lib: パッケージの機能を実装するCoffeeスクリプトを入れる。 デフォルトで「パッケージ名.coffee」がメインスクリプト。 Package Generatorが作る「パッケージ名-view.coffee」というスクリプトは、Atomの画面に新たなペインを追加したいときとかに書くコードのサンプル。 menus: ツールバーとかコンテクストメニューに追加するメニューを定義するcsonファイルを入れる。 spec: パッケージのテストを入れる。テストはJasmineを使って書く。 styles: パッケージが追加するペインとかに独自のスタイルを指定したいときとかにLessかCSSを入れる。 package.json: パッケージの名前とか依存関係とかを定義するファイル。 japanese-word-selectionはメニューもコマンドもペインも追加しないので、keymaps、lib/japanese-word-selection-view.coffee、menus、spec/japanese-word-selection-view-spec.coffee、stylesは消す。 以下、ここで生成したパッケージフォルダを<パッケージルート>と書く。 2.