ATOMにショートカットキーを追加する 

# 初めに
- ATOMに自身がよく使うショートカットキー機能を追加しよう！という学習を兼ねたメモとなります。
- 追加するショートカットキーは、「Ctrl + ;」で本日日付、「Ctrl + : 」で現在時間というう、エクエルで重宝する2つの機能となります。

# 環境
- OS : Windows 10 home (64bit)
- ATOM : 1.45.0(2020.04.13時点で最新)

# 参考にしたページ
- [10分で学ぶ！Atomパッケージ自作入門](https://qiita.com/akisame338/items/034476debbd0ae251c0f)

# 準備
- ATOMのインストール　→　`Package Generator: Generate Package` の実行までは割愛。
- package名は「atom-package」としてます。これは作成対象にって適切に。

# 実装 lib\atom-package.js
- まずはtoggleの内容を修正することで、現在日付を追加する機能を実現します。
- 下記の実装が終わったら、`Ctrl + Shift + F5` を実行し、Atomの再起動を実施する。
- テキストファイル上で 'Ctrl + Alt + o` を実行すると、現在日時がyyyy/MM/dd (aaa)の形式で挿入することができた。

```javascript:atom-package.js
 toggle() {
   // 現在日付を取得する
   var date = new Date();
   var year = date.getFullYear();
   var month = ("0" + (date.getMonth() + 1)).slice(-2);
   var day = ("0" + (date.getDate())).slice(-2);
   var dayOfWeekJp = ["日", "月", "火", "水", "木", "金", "土"][date.getDay()];

   // atomのエディタに値を反映
   var editor = atom.workspace.getActiveTextEditor();
   editor.insertText(year + "/" + month + "/" + day + " (" + dayOfWeekJp + ")");
 },
```

# ショートカットキーを変更する。
- `Package Generator: Generate Package`の初期状態の場合では、`Ctrl + Alt + o`にショートカットキーが割り当てられている。
- これを、`Ctrl + ;`にキーの割り当てを変更する
- 修正後は、`Ctrl + Shift + F5` を実行し、Atomの再起動。

```diff:keymaps\atom-package.json（変更前）
{
 "atom-workspace": {
-    "ctrl-alt-o": "atom-package:toggle"
+    "ctrl-;": "atom-package:toggle"
 }
}
```

# toggleから別のメソッドに変更する
- toggleだと機能と意味が異なるので、新たに`insertCurrentDate`とうメソッドを作成する。内容は前述のtoggle()と同一。

```javascript:atom-package.js
toggle() {
// 割愛
 },

 insertCurrentDate() {
   // 現在日付を取得する
   var date = new Date();
   var year = date.getFullYear();
   var month = ("0" + (date.getMonth() + 1)).slice(-2);
   var day = ("0" + (date.getDate())).slice(-2);

   var dayOfWeekJp = ["日", "月", "火", "水", "木", "金", "土"][date.getDay()];

   // atomのエディタに値を反映
   var editor = atom.workspace.getActiveTextEditor();
   editor.insertText(year + "/" + month + "/" + day + " (" + dayOfWeekJp + ")");
 }
```

- 設定ファイルの書き換えも必要です。

```diff:keymaps\atom-package.json
{
 "atom-workspace": {
-    "ctrl-;": "atom-package:toggle"
+    "ctrl-;": "atom-package:CurrentDate"
 }
}
```

- atom-package.jsでatom-package.jsonの変更との紐づけを実施します。

```diff:atom-package.js
 activate(state) {
   this.atomPackageView = new AtomPackageView(state.atomPackageViewState);
   this.modalPanel = atom.workspace.addModalPanel({
     item: this.atomPackageView.getElement(),
     visible: false
   });

   // Events subscribed to in atom's system can be easily cleaned up with a CompositeDisposable
   this.subscriptions = new CompositeDisposable();
-   // Register command that toggles this view
-   this.subscriptions.add(atom.commands.add('atom-workspace', {
-     'atom-package:toggle': () => this.toggle()
-   }));
+   // Register command that CurrentDate this view
+   this.subscriptions.add(atom.commands.add('atom-workspace', {
+     'atom-package:CurrentDate': () => this.insertCurrentDate()
+   }));
 },
```

- ATOM起動時にパッケージが有効になるように修正

```diff:package.json
{
 "name": "atom-package",
 "main": "./lib/atom-package",
 "version": "0.0.0",
 "description": "A short description of your package",
 "keywords": [
 ],
-  "activationCommands": {
-    "atom-workspace": "custom-short-cut:toggle"
-  },
 "repository": "https://xxxxxxxxxxxx",
 "license": "MIT",
 "engines": {
   "atom": ">=1.0.0 <2.0.0"
 },
 "dependencies": {
 }
}
```

# 最終的なソースコード

- 修正したソースコードは下記となります。
   - Ctrl + : で現在時刻を追加する機能も追加済み。
   - メニューについても変更済み（menus\atom-package.json）

```json:keymaps\atom-package.json
{
 "atom-workspace": {
   "ctrl-;": "atom-package:CurrentDate",
   "ctrl-:": "atom-package:CurrentTime"
 }
}
```

```javascript:lib\atom-package.js
'use babel';

import AtomPackageView from './atom-package-view';
import { CompositeDisposable } from 'atom';

export default {

 atomPackageView: null,
 modalPanel: null,
 subscriptions: null,

 activate(state) {
   this.atomPackageView = new AtomPackageView(state.atomPackageViewState);
   this.modalPanel = atom.workspace.addModalPanel({
     item: this.atomPackageView.getElement(),
     visible: false
   });

   // Events subscribed to in atom's system can be easily cleaned up with a CompositeDisposable
   this.subscriptions = new CompositeDisposable();

   // Register command that CurrentDate this view
   this.subscriptions.add(atom.commands.add('atom-workspace', {
     'atom-package:CurrentDate': () => this.insertCurrentDate()
   }));

   this.subscriptions.add(atom.commands.add('atom-workspace', {
     'atom-package:CurrentTime': () => this.insertCurrentTime()
   }));
 },

 deactivate() {
   this.modalPanel.destroy();
   this.subscriptions.dispose();
   this.atomPackageView.destroy();

 },

 serialize() {
   return {
     atomPackageViewState: this.atomPackageView.serialize()
   };
 },

 // エディタのフォーカス位置に現在日付を追加する。
 insertCurrentDate() {
   // 現在日付を取得する
   var date = new Date();
   var year = date.getFullYear();
   var month = ("0" + (date.getMonth() + 1)).slice(-2);
   var day = ("0" + (date.getDate())).slice(-2);

   var dayOfWeekJp = ["日", "月", "火", "水", "木", "金", "土"][date.getDay()];

   // atomのエディタに値を反映
   var editor = atom.workspace.getActiveTextEditor();
   editor.insertText(year + "/" + month + "/" + day + " (" + dayOfWeekJp + ")");
 },

 // エディタのフォーカス位置に現在時刻を追加する。
 insertCurrentTime() {
   var date = new Date();
   var hours = ("0" + (date.getHours())).slice(-2);
   var minutes = ("0" + (date.getMinutes())).slice(-2);
   var seconds = ("0" + (date.getSeconds())).slice(-2);

   // atomのエディタに値を反映
   var editor = atom.workspace.getActiveTextEditor();
   editor.insertText(hours + ":" + minutes + ":" + seconds);
 }

};

```

```json:menus\atom-package.json
{
 "menu": [
   {
     "label": "Packages",
     "submenu": [
       {
         "label": "atom-package",
         "submenu": [
           {
             "label": "CurrentDate",
             "command": "atom-package:CurrentDate"
           },
           {
             "label": "CurrentTime",
             "command": "atom-package:CurrentTime"
           }
         ]
       }
     ]
   }
 ]
}
```
# 感想
- 思ったより簡単にできた。
- 仕事で頻出する単語であったり作業を自作して効率化ができることが多そうだね。