atom.ioのcoreを弄ってPRするまでのワークフロー

# （atomってキーリピートしたり素早く入力するとすぐ固まらないっすか・・！？）

という素朴な疑問から、実際に何が原因で重くなってるのか突き止めて改善までやってみました。
atomのcoreを書き換えるワークフローは珍しい気もするのでまとめてみます。

# とりあえずDeveloper Toolsを開く

atomはCoffeeScriptで書かれているだけでなく、Chromiumブラウザ＋io.js (alt node.js)で作られたGUIアプリフレームワーク([atom-shell](https://github.com/atom/atom-shell))上に構築されています。
つまり、実はいつものChromeの開発ツールでデバッグすることができます。
メニューのView→Developer→Toggle Developer Toolsを押すと、お馴染みのデバッグ画面が出てきます。

![スクリーンショット 2015-03-22 18.19.09.png](https://qiita-image-store.s3.amazonaws.com/0/4153/7008f429-2742-8ceb-1016-11ecef9df820.png)

## Timeline

お馴染みのデバッグ機能です。なんの処理がボトルネックになっているのかさっくりわかります。
JavaScriptで動いているのもあり、今回はkeydownのeventの処理で一杯一杯になり、描画がずっと遅延されていることがわかりました。

![スクリーンショット 2015-03-22 18.21.00.png](https://qiita-image-store.s3.amazonaws.com/0/4153/e6cf0883-0703-a44f-1ad6-18ae768bec9c.png)

# atomのソースコードを改変してみる

## ソースコードを落とす

Github製のOSSなのでもちろんGithubから落としてきます。
https://github.com/atom/atom

```bash
git clone https://github.com/atom/atom
```

## 初回ビルドし、起動する

ビルドにはnode.jsとpythonがが必要です。[ndenv](https://github.com/riywo/ndenv)と[pyenv](https://github.com/yyuu/pyenv)（お好みに応じて[anyenv](https://github.com/riywo/anyenv)）を使用してインストールします。
使用するnode、pythonのバージョンは `.node_version` `.python-version` ファイルで固定されているので、内容に合わせたバージョンをインストールしてください。

```bash
# anyenv install ndenv; anyenv install pyenv
ndenv install `cat .node-version`
pyenv install `cat .python-version`
```

ビルド中にC言語系のソースコードもコンパイルします。
Macの場合はXcodeがインストールされていればおｋですが、他のプラットフォームでは事前準備が必要かもしれません。
詳しくは、build-instructionsを参照してください。
https://github.com/atom/atom/tree/master/docs/build-instructions

atomのビルドは `script/build` を通して行います。
このスクリプトは `build/Gruntfile.coffee` のラッパーになっています。
引数無しで実行すると、Macだと/Applications/Atom.appにビルドされたAtomがインストールされます。
各プラットフォームのデフォルトのインストール先は、先ほどのbuild-instructionsや`Gruntfile.coffee`にかかれています。

今回は（きっとAtomでAtomのコードを改編すると思うので）下記のようにオプションをつけることでインストール先を変更します。

```bash
script/build --install-dir /Applications/Atom-Dev.app
```

初回のビルドは依存関係のnodeモジュールを用意するなどで時間がかかります。
インストールができたら、Applicationsからいつも通り起動します。
なお、インストール先が違えば別々のインスタンスとして起動することができるようです。

（少なくともMacでは）設定やプラグインなどは全てホームディレクトリ以下に入っているので、新しくインストールしたAtomでも引き継がれます。

## ソースコードを書き換えて実行する

**追記：~/github/atomまたはATOM_DEV_RESOURCE_PATH環境変数で指定されたパスの上にatomのrepoをおいていればビルドしなくても反映されるようですm(_ _)m**
http://qiita.com/t9md/items/c02da839621a1050bc34#atom-%E8%87%AA%E4%BD%93%E3%81%AE-hack


今回は `src/window-event-handler.coffee` を書き換えました（onKeydownの中に_.deferを書いただけｗ）。
~~CoffeeScriptは書き換えたらビルドしないといけないので、~~script/buildでcoffeeタスクを実行します。
また、buildしたらinstallタスクでアプリを書き換えます。
なお、その他のタスクは`script/build --help`や`Gruntfile.coffee`で確認できます。cssなどを書き換える場合は別のタスクを実行するべきでしょう。

```
script/build --install-dir /Applications/Atom-Dev.app coffee install
```

この実行が終わったら、開発中のAtomを再起動します。

# Pull Request

## ガイドライン

PRを送る際にはCONTRIBUTING.mdに合わせてコードやコミットを作る必要があります。
https://github.com/atom/atom/blob/master/CONTRIBUTING.md

CoffeeScriptのスタイル・ガイドラインや、コミットメッセージに使ってほしい絵文字とかが書かれているので必ず参照してください。

## アニメGIF

ガイドラインにはスクリーンキャプチャを添付することが望ましいとも書かれています。
使えそうなツールを紹介しておきます。

- [LICEcap](http://www.cockos.com/licecap/):
  最初からGIFとして録画するツールのようです。
- [CloudApp](http://qiita.com/kazuuu/items/230f7d1912b8d2f907b0):
  アプリと共有用のウェブサービスがセットのようです
- [keycastr](https://github.com/keycastr/keycastr): キー操作を画面に表示するツールです。
- QuickTime Player (Mac)
  - 実はQuickTime Playerには画面キャプチャ機能があります。メニューの ファイル→新規画面収録 で使えます。
    また 編集→トリム で動画の一部を切り出すことができます。
    最後に ファイル→書き出す で小さいサイズのmp4動画を作れます。
- [screengif](https://github.com/dergachev/screengif):
  mp4をGIFにします。ffmpegとか入れるのでセットアップにちょっと時間がかかります。

自分はQuickTime＋screengif＋keycastrでやりましたが、LICEcap＋keycastrかCloudAppが便利そうに見えました。

## いざsubmit

完成したPRがこちらです・・！
https://github.com/atom/atom/pull/6062

atomはcoreすら簡単に編集できるので、皆さんもぜひhackしてください！！