非IT企業に勤める中年サラリーマンのIT日記

非IT企業でしかもITとは全く関係ない部署にいる中年エンジニア。唯一の趣味がプログラミングという”自称”プログラマー。

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

      2019/06/01

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

広告

まずは、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を導入して作ったエディタです。あくまでエディタ部分だけ。

a

 

このレベルを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");
}
 

 

ガジェット系ブログもよろしく

すまたすログ

ガジェット系ブログです。主にChromebookの情報やMyマシンのASUS Flip C434TAのレビューなどを書いています。その他IT機器のアプリのレビュー、たまに100円ショップなど。


スポンサーリンク

 - Electron