JavaScript製のコードエディタ「Ace」がブラウザ上で使えて便利

Webサイトの改善でブラウザ上で使えるテキストエディタがないものかと調べてみたら、JavaScript製の「Ace」というコードエディタがあったので、試しに使ってみました。

Aceについて

所詮はブラウザ上で動作するものなので、そこまで期待していなかったのですが、この「Ace」というコードエディタを触ってみると、かなり作り込まれていることに驚かされます。

Ace - The High Performance Code Editor for the Web

また、初回のリリースはだいぶ前になりますが、GitHubのプロジェクトを確認すると、未だに更新されていて、改善やバグの対応がされています。

最小構成

Aceを試しに使ってみる場合の最小構成は以下の通り。


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Aceサンプル</title>
</head>
<body>
  <div id="editor" style="height: 600px"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.11/ace.js"></script>
  <script>
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/html");
  </script>
</body>
</html>

これだけで高機能なコードエディタが利用できるようになります（ライブラリはCDNを利用）。

Ace Kitchen Sinkというサイトで、設定項目の変更やエディタ操作の動作確認を行うことができるので、触ってみるとイメージが掴みやすいと思います。

以下、よく利用しそうな設定項目のメモになります。

テーマ

サンプルのコードでよく見かけるテーマは「Monokai」ですが、個人的には「Tomorrow Night」が良かったので、そちらを使っています。

◆Monokai


editor.setTheme("ace/theme/monokai");

◆Tomorrow Night


editor.setTheme("ace/theme/tomorrow_night");

モード

HTMLやJavaScriptといったものから、C#やGO、TypeScriptなど、豊富なモードが用意されています。

◆HTML


editor.getSession().setMode("ace/mode/html");

◆JavaScript


editor.getSession().setMode("ace/mode/javascript");

モードを指定すると、形式に沿っていない文字が入力された際、行番号の横にエラーのアイコンが表示されて、カーソルを当てるとメッセージが表示されます。

タブサイズ、タブのスペース変換

コードエディタを使う際にはタブのサイズや、タブを半角スペースで置き換えるかどうか、個人によって好みの設定が異なると思います。

◆タブサイズの設定（TabSize）


editor.getSession().setTabSize(2);

◆タブの半角スペース表示（UseSoftTabs、NavigateWithinSoftTabs）


editor.getSession().setUseSoftTabs(true);
editor.getSession().setNavigateWithinSoftTabs(true);

「UseSoftTabs」の設定と合わせて「NavigateWithinSoftTabs」も設定しないと、自動インデントの際にタブと半角スペースが混在した状態で表示されます。

行の折り返し

デフォルトでは1行の文字列がエリアを超える場合、折り返しされて表示されます。

折り返ししたくない場合は「UseWrapMode」を「false」に設定します。


editor.getSession().setUseWrapMode(false);

フォントサイズ

フォントサイズの設定（FontSize）


editor.setFontSize(14);

印刷エリア

デフォルトでは印刷エリア（80文字）の線が表示されます。

不要であれば「ShowPrintMargin」を「false」に設定します。


editor.setShowPrintMargin(false);

選択した単語のハイライトの背景色を変更

デフォルトでは選択した単語の背景色の変化が分かり難いので、CSSを追加して、背景色を変更します。

◆選択中の単語のハイライト


.ace-tomorrow-night .ace_marker-layer .ace_selection{
  background:#666;
}

◆選択した単語と同じ文字のハイライト


.ace-tomorrow-night .ace_marker-layer .ace_selected-word{
  background:#444;
}

選択したテーマによってちょうどいい背景色が異なると思うので、適宜、変更してください。

入力内容の取得と設定

◆取得（getValue）


editor.getValue()

◆設定（setValue）


editor.setValue("aaa\nbbb\n\nccc");

入力した履歴が不要であれば（Ctrl + zで戻らない）、以下のようにします。


editor.getSession().setValue("aaa\nbbb\n\nccc");

参考リンク

ブラウザ上で使えるJavaScript製テキストエディタAce入門 - Qiita