EmacsでCloudFormationテンプレート(JSON)を編集する

2016.02.24

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

清水です。CloudFromationのテンプレート(つまりJSONファイル)を Emacsで見やすく、編集しやすい環境を整えたのでまとめておきたいと思います。

何もしていないデフォルト状態ではシンタックスハイライトがなく味気ない状態ですが(Before)、環境を整えることでシンタックスハイライトが効いた見やすい、またリアルタイム文法チェックやインデントの効いた編集しやすい環境(After)になりました。

emacsjson-001-2

emacsの環境

今回試した環境は以下になります。

編集用のメジャーモード

javascript-mode

JSONまわりの設定を何もしない状態でも、javascript-modeが入っていました。 M-x javascript-modeでモードを切り替えてみます。

emacsjson-002

括弧やコンマなどの記号はシンタックスハイライトされますが、 "キー"と"値"は色で区別されなく、物足りない感じです。

json-mode

調べてみたところ、GitHubでjson-modeというものが公開されていました。

インストール方法は下記の方法が紹介されていますが、 marmalade repositoryを導入してていないかったで手動で設定しました。

emacsjson-006

(手動)インストール

GitHubからjson-mode.elを取得して、load-pathが通っている場所に配置します。 またjson-mode.elの冒頭を見るとわかるのですが、これだけでは動作しません。 json-snatcher.elとjson-reformat.elが必要になります。 こちらもGitHubから取得してパスの通っているところに配置します。

設定

json-modeを有効にするため、以下を.emacsファイル *1に追記します。 またCloudFromationのテンプレートファイルは拡張子が.templateですので、 これを開いた時にjson-modeが適用されるようにしておきます。

(require 'json-mode)
(add-to-list 'auto-mode-alist '("\\.json$" . json-mode))
(add-to-list 'auto-mode-alist '("\\.template$" . json-mode))

メジャーモード適用

これでCloudFormationテンプレートファイルを開いてみます。 "キー"と"値"、それぞれを色分けして表示してくれるようになりました。 編集時のインデントも設定してくれます。javascript-modeよりいい感じです。

emacsjson-003

cloudformation-mode

さらに調べてみたところ、cloudformation-modeというものもあるようです。

インストール

json-modeのときと同様、cloudformation-mode.elをGitHubからダウンロードして load-pathが通っているところに配置します。

設定方法

こちらもjson-modeのときと同様、.emacsに以下のように設定を行います。

(require 'cloudformation-mode)
(add-to-list 'auto-mode-alist '("\\.json$" . cloudformation-mode))
(add-to-list 'auto-mode-alist '("\\.template$" . cloudformation-mode))

メジャーモード適用

こちらは例えば、"Type"キーに対応する値の箇所を色分けする機能が増えており、より一段とCloudFromation向けになっています。

emacsjson-004

flymake-jsonを使って文法チェック

Emacsでコードを書きながらリアルタイムに文法チェックを行ってくれるflymakeというものがあります。(統合開発環境などで行ってくれるアレを、Emacs上で行ってくれるシロモノです)

これをJSONに対応させたflymake-jsonというものがあります。こちらも設定してみました。

準備

flymake-jsonの実行には、JSONの文法チェックを行なうJSON Lintが必要になるので、これをインストールします。JSON Lintのインストールのためにnode.jsのパッケージ管理ツールであるnpmが必要になるので、先にこれをインストールします。

npmのインストール

$ brew install npmコマンドでnpmをインストールします。

 $ brew install npm
==> Downloading https://homebrew.bintray.com/bottles/node-5.0.0.yosemite.bottle.
######################################################################## 100.0%
==> Pouring node-5.0.0.yosemite.bottle.tar.gz
==> Caveats
Bash completion has been installed to:
  /usr/local/etc/bash_completion.d
==> Summary
?  /usr/local/Cellar/node/5.0.0: 2824 files, 36M

JSON Lintのインストール

$ sudo npm install -g jsonlint でインストールします。

 $ sudo npm install -g jsonlint
Password:
/usr/local/bin/jsonlint -> /usr/local/lib/node_modules/jsonlint/lib/cli.js
/usr/local/lib
└─┬ jsonlint@1.6.2
  ├── JSV@4.0.2
  └─┬ nomnom@1.8.1
    ├─┬ chalk@0.4.0
    │ ├── ansi-styles@1.0.0
    │ ├── has-color@0.1.7
    │ └── strip-ansi@0.1.1
    └── underscore@1.6.0

flymake-jsonのインストール

flymake-json.elをGitHubからダンロードして、load-pathの通ったところに配置します。 またflymake-easy.elも必要になるのでこちらもダウンロードして、配置します。

flymake-jsonの設定

.emacsに以下の設定を追記します。

(require 'flymake-json)
(add-hook 'json-mode-hook 'flymake-json-load)
(add-hook 'cloudformation-mode-hook 'flymake-json-load)

また、jsonlintのインストールされているパスを確認して、パス情報を追加します。

 $ which jsonlint
/usr/local/bin/jsonlint

私の環境では/usr/local/binにjsonlintがありましたので以下を追加しました。

(setq exec-path (append exec-path '("/usr/local/bin")))
(setenv "PATH" (concat (getenv "PATH") ":/usr/local/bin"))

flymake-jsonの動作

この状態でJSONファイルやCluodFormationテンプレートファイルを編集してみます。 下記の例は行の最後のカンマ「,」を忘れてしまった状態です。問題のある箇所に色を付け、強調表示して教えてくれます。

emacsjson-005

JSONのフォーマット

メジャーモードを設定することで、インデントについても自動で行われるようになりました。既存のJSON/templateファイルをフォーマットする際には、各メジャーモードで M-x indent-regionすることでも実施できます。 さらにjson-modeのインストールの際にjson-reformatもインストールしてあるので、 リージョンを選択してM-x json-reformat-regionすることでもフォーマットが可能です。

さらにはJSONパーサーである「jq」を使ってフォーマットを行なうこともできます。 こちらは、jqへのパスが通っていれば、以下のようになります。

  1. リージョンを選択してC-u M-|
  2. ミニバッファの「Shell command on region: 」に対してjq .と入力します

これで選択しているリージョンの内容が標準入力としてコマンドであるjqに渡され、さらにjqの結果でリージョンが置換されます。ここで注意したいのは、jqに渡される部分がJSONとして不正であるとjqからのエラーメッセージが返ってきて、その内容でリージョンが置換されます。例えば数十行、数百行がたった1行、、、

parse error: Expected string key before ':' at line 2, column 24

こんな感じに置き換えられてしまいます。こんな時は慌てず落ち着いてundoしましょう。

最終的な.emacsファイル

最終的には以下を.emacsに追加した状態になりました。 とりあえず、拡張子jsonファイルはjson-modeで、拡張子templateファイルはcloudformation-modeで 開くようにして、メジャーモードを切り替えたいときはM-x json-modeなどとしています。 まだものすごく使い込んだわけではなく、使用感を試している段階ですが、とりあえずはとてもいい感じです。

(setq exec-path (append exec-path '("/usr/local/bin")))
(setenv "PATH" (concat (getenv "PATH") ":/usr/local/bin"))

(require 'json-mode)
(add-to-list 'auto-mode-alist '("\\.json$" . json-mode))

(require 'cloudformation-mode)
(add-to-list 'auto-mode-alist '("\\.template$" . cloudformation-mode))

(require 'flymake-json)
(add-hook 'json-mode-hook 'flymake-json-load)
(add-hook 'cloudformation-mode-hook 'flymake-json-load)

まとめ

ということで愛用しているEmacsでCloudFomationテンプレートファイルをバリバリ閲覧・編集できる環境が整いました。 これからバリバリCloudFormationを書いていきたいと思います。Happy Hacking with Emacs!

脚注

  1. 具体的には~/.emacs.d/init.elから読み込まれるファイル。環境に合わせて読み替えてください