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

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

※今回はElectron v1.8を使用し、macOS 10.13 High SierraおよびWindows 10にて動作検証を行いました。

完成デモの紹介

今回のサンプルのテキストエディターのデモをご覧ください。このオリジナルのテキストエディターではテキストの編集ができ、JavaScriptファイルのカラーリングにも対応しています。このテキストエディターを一緒に作っていきましょう!

デモのソースコードはGitHubで公開してます。ダウンロードして読み進めてください。

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

1. ファイル構成

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

Electronのファイル構成

前回の記事から内容に変更・追加があったファイルは、画面構成用のindex.html、実装を記述するeditor.js、デザインを記述するためのmain.cssです。BootstrapとAce.jsはCDNを利用します。

2. 画面構成

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

Electron Text Editorのイメージ

index.html ファイル

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8"/>
  <title>Electron Text Editor</title>

  <link rel="stylesheet"
        href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">
  <link href="main.css" rel="stylesheet"/>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/mode-javascript.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/theme-twilight.js"></script>
  <script src="editor.js"></script>
</head>
<body>
  <div id="header_fixed">
    <button type="button"
            class="btn-sm btn-primary"
            id="btnLoad">
      読み込む
    </button>
    <button type="button"
            class="btn-sm
            btn-primary"
            id="btnSave">
      保存する
    </button>
  </div>
  <div id="footer_fixed"></div>
  <div id="input_area">
    <div id="input_txt"></div>
  </div>
</body>
</html>

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

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

Aceを使用するには以下のコードで読み込みます。ace.jsがメインのファイル、mode-javascript.jsがシンタックス設定用のファイル、theme-twilight.jsがカラーテーマ用のファイルです。公式サイトに記載もありますが、CDNのサービスであるcloudflareで提供されているので、これを利用します。

index.htmlファイルの該当箇所の抜粋

<script defer src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/mode-javascript.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/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」をご参照ください。