前回の記事「サルでもわかるElectron入門」では、ElectronというHTML/JavaScriptのフレームワークを使って、デスクトップアプリケーションを作成するまでの手順を紹介しました。

今回はElectronとAceというテキストエディターライブラリを使用してテキストエディターを作成します。テキストエディターを作成することで、Node.jsのファイルの読み込み/書き込みや、ダイアログモジュールなどアプリケーション開発で必須となるElectronの技術を習得できます。15分程度で試せる内容になってますので、ぜひご覧ください。

※今回はElectron v1.4.15を使用し、OS X 10.11 El CapitanおよびWindows 10にて動作検証を行いました。

完成デモの紹介

今回のサンプルのテキストエディターのデモをご覧ください。このテキストエディターではテキストの編集ができ、JavaScriptファイルのカラーリングにも対応していることを確認できます。

テキストエディターを作ってみよう!

1. ファイル構成

Electronで必要なファイルやアプリケーション作成手順については記事「Electron入門」にまとめています。本記事では今回追加したファイルについて説明します。

ファイル構成

前回の記事から内容に変更・追加があったファイルは、画面構成用のindex.html、実装を記述するeditor.js、デザインを記述するためのmain.css、libディレクトリに配置したライブラリ用のファイル類です。

2. 画面構成

今回作成したテキストエディターは、[保存]ボタン・[読み込み]ボタン・[テキスト入力領域]・[フッター]と4つの部品で構成されています。

Electron Editor Image

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Electron Text Editor</title>
    <link href="lib/boostrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="main.css" rel="stylesheet">
    <script src="lib/ace/ace.js"></script>
    <script src="lib/ace/mode-javascript.js"></script>
    <script src="lib/ace/theme-twilight.js"></script>
    <script src="editor.js"></script>
</head>

<body onload="onLoad()">
    <div id="header_fixed">
        <button type="button" class="btn-sm btn-primary" onclick="openLoadFile()">読み込み</button>
        <button type="button" class="btn-sm btn-primary" onclick="saveFile()">保存</button>
    </div>
    <div id="footer_fixed"></div>
    <div id="input_area">
        <div id="input_txt"></div>
    </div>
</body>

</html>

3. テキストエディターライブラリを組み込む

テキスト入力部分には、Aceというライブラリを使用しました。AceはJavaScriptライブラリで、テキストのシンタックスハイライト、シンタックスチェック、自動補完、タブインデント、入力文字の「やり直し」や「元に戻す」が行える履歴保持機能、文字列の検索などができます。

Aceを使用するには以下のコードで読み込みます。ace.jsがメインのファイル、mode-javascript.jsがシンタックス設定用のファイル、theme-twilight.jsがカラーテーマ用のファイルです。これらのファイルは「GitHub – ajaxorg/ace-builds」からソースコードをダウンロードしたあとsrcディレクトリ内からコピーして、今回のプロジェクトのsrc/lib/ace/ディレクトリに配置しています。

index.html

<script src="lib/ace/ace.js"></script>
<script src="lib/ace/mode-javascript.js"></script>
<script src="lib/ace/theme-twilight.js"></script>

次に入力エリアを作成します。ace.edit()関数に入力エリアとなるdiv要素のid属性を引数で渡し、戻り値として入力エリアを操作するためのeditor変数を獲得します。editor.getSession().setMode()関数でシンタックスをJavaScriptに変更し、editor.setTheme()関数でカラーテーマを設定しています。

editor.js

    editor = ace.edit("input_txt");
    editor.getSession().setMode("ace/mode/javascript");
    editor.setTheme("ace/theme/twilight");

※Aceで設定できる詳しいパラメータは「Ace – How-To Guid」や「Ace – API Reference」をご参照ください。