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

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

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

      2016/06/11

広告

 

前回のブログの通り、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”);
}

 
広告

 - Electron