この記事は「Electron入門記事連載」の一部です。

記事「初めてのElectron! HTML5でデスクトップアプリを作成しよう」では、ElectronというHTMLとJavaScriptでデスクトップアプリを作成できるフレームワークを使って、アプリを作成するまでの手順を紹介しました。

今回はElectronとAceというテキストエディターライブラリを使用してテキストエディターを作成します。テキストエディターを作成することで、Node.jsの標準のファイルの入出力や、Electron独自のダイアログモジュールなどElectronでアプリを作成するうえで必須となる部分を習得することができます。ぜひご覧ください。

※今回はElectron v3.0.4を使用し、OS X 10.10 YosemiteおよびWindows 10にて動作検証を行いました。

完成デモ

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

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

1. ファイル構成

Electronで必要なファイルやアプリケーション作成手順については記事「初めてのElectron! HTML5でデスクトップアプリを作成しよう」にまとめています。本記事では今回追加したファイルについて説明します。

ファイル構成 前回の記事から内容に変更・追加があったファイルは、画面構成用の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で使用しているJavaScriptファイルは以下HTMLで読み込んでいる3点です。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」をご参照ください。