Electronでエディタを作る　～まずはACEを導入～

2016/02/14 2019/06/01

前回のブログの通り、Electronでプログラミング用のテキストエディターを作成することにしました。今回はエディタ部分のライブラリACEを導入してみたいと思います。

[ad#top-1]

まずは、ACEを導入しなければなりません。GitHubで公開されているのでそこからダウンロードします。

GitHub: ajaxorg/ace-builds
https://github.com/ajaxorg/ace-builds/tree/master/src

この中から、

ace.js
theme-chrome.js
mode-csharp.js

を選びました。テーマ (theme-chrome.js)についてはいろいろ選択できましたが、ここで各テーマの外観を確認したうえで決めた次第です。ダーク系よりブライト系の方が好きなので。ファイルはプロジェクトフォルダ内の、/libフォルダに保存しました。

これがACEを導入して作ったエディタです。あくまでエディタ部分だけ。

このレベルをJavaやC#とかで作るとめちゃくちゃ大変です。過去にトライしたことがありましたが何度も挫折しています。なんたって、タイピングしながらキーワードを検知して色付けするわけですから。ここまでは何とかできるとして、問題は「タイピングしながら」なので一瞬でできなきゃいけないんです。少しでも遅いとタイピングがうまくいかなくなるので、だいたいここで躓くんですね。

ところが、Electronの場合、ACEを使うと超簡単にできます。JavaScriptでindex.htmlがロードされるときに、以下の3行書けばOKです。

var editor = ace.edit(“input_txt”);
editor.getSession().setMode(“ace/mode/csharp”);
editor.setTheme(“ace/theme/chrome”);

ちなみに、Electronは実態はHTML5+CSS+JavaScriptなのでインタプリタ言語です。使ってみてインタプリタでこの速度は正直驚きました。これは速度的に最適化されたライブラリが存在するからで、JavaもC#も誰かが作ったライブラリ（コントロール）はなくはないのですが、ACEのように広く認知されたものではありません。

ソースコードはこちら。主要なファイル(index.html, main.css, editor.js)のみです。ソースコードはこちらにアップしているのでご希望あればダウンロードしてください。

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf–8">
<title>Electron Editor</title>
<link href="main.css" rel="stylesheet">
<script src="lib/ace.js"></script>
<script src="lib/mode–csharp.js"></script>
<script src="lib/theme–chrome.js"></script>
<script src="editor.js"></script>
</head>

<body onload="onLoad()">
<div id="input_area">
<div id="input_txt"></div>
</div>
</body>
</html>

main.css

*{
  margin:0px;
  padding:0px;
}

html,body{
  width:100%;
  height:100%;
  background–color:#fafafa;
  overflow: hidden;
}

/** ヘッダーが34px、フッターが20px */
#input_area{
  padding:0px 0px 0px 0px;
  height:100%;
}

#input_txt{
  width:100%;
  height:100%;
  font–size: 11pt;
}

editor.js

var fs = require('fs');
var remote = require('remote');
var browserWindow = remote.require('browser–window');

function onLoad() {
  var editor = ace.edit("input_txt");
  editor.getSession().setMode("ace/mode/csharp");
  editor.setTheme("ace/theme/chrome");
}

[ad#ad-1]

Electronでエディタを作る ～まずはACEを導入～

共有:

関連

Electronでエディタを作る　～まずはACEを導入～