自作言語用に簡単なエディタを作る

いきなりタイトル違うことを書きますが、自作言語の JavaScript への変換もできました。プロパティやインデクサを関数に変換しないといけないなど、いくらか厄介なこともありましたが、とりあえずできました。あんまりデバッグしてないので、バグはあるでしょう。

できたのものは、こちらです。グローバル関数は、グローバルに変換するようにしたのですが、名前がぶつかったりするので、C# でやったときのように、なにかのオブジェクトのメンバにしたほうが良いかもしれません。また、名前空間もないので、真面目にこの方針でやるのであれば、その他の関数名にかぶらないように注意が必要そうですが、とりあえずのところ、事足りそうですので、コード変換や言語の実装は、このあたりで一旦終了します。

簡易エディタをつくる

さて、言語はできたのですが、テキストエディタで書くのは大変ですので、簡単なエディタを作ろうと思います。方針としては、以下の 2 つが考えられます。

CodeMirror を使って、Electron で作る

○ シンタックスハイライトは簡単
○ コード補完も、そこそこ簡単そう
☓ ファイルの読み書き周りや、ウィンドウシステムを最初から作らないといけない

Visual Studio Code の Extension を作る

○ シンタックスハイライトだけなら簡単そう
☓ コード補完をつくるなら、言語サーバーを実装しないといけなさそう
○ ファイル管理やウィンドウシステムは良いものが使える

ちなみに、最終的には Visual Studio Code やりたいです。しかしながら、言語サーバーづくりはなかなか大変そうです。一方の CodeMirror は、Visual Studio Code には快適性で劣るものの、実装は言語サーバーを作るよりは簡単そうです。Electron を覚えたかったこともありますし、CodeMirror + Electron でやってみようかと思います。

CodeMirror のキーマップをいじる

Electron の前に、（自分にとって）若干使いづらい CodeMirror のキーマップを直します。主に以下の機能がほしいです。

Shift+Tab でインデントを戻す
Ctrl+E Ctrl+C でコメント

調べてみたところ、キーマップを sublime にするのが一番近そうでした。そこで、sublime のキーマップを当て、key/sublime.js の keyMap.pcSublime をちょっといじりました。これで、なかなか快適なエディタになりそうです。

SimpleMode でシンタックスハイライトだけ作る

とりあえず、コメントとキーワードだけハイライトしてくれれば良いので、そこだけ Simple Mode を使って作りました。

CodeMirror.defineSimpleMode("sumirescript", {
    start: [
        { regex: /"(?:[^\\]|\\.)*?(?:"|$)/, token: "string" },
        {
            regex: /(?:var|auto|break|continue|return|new|if|for|while|else|do|this|_get|_set|constructor|_index_get|_index_set|int|float|string|void|class)\b/,
            token: "keyword"
        },
        { regex: /true|false|null/, token: "atom" },
        {
            regex: /0x[a-f\d]+|[-+]?(?:\.\d+|\d+\.?\d*)(?:e[-+]?\d+)?/i,
            token: "number"
        },
        { regex: /\/\/.*/, token: "comment" },
        { regex: /\/\*/, token: "comment", next: "comment" },
        { regex: /[-+\/*=<>!]+/, token: "operator" },
        // indent and dedent properties guide autoindentation
        { regex: /[\{\[\(]/, indent: true },
        { regex: /[\}\]\)]/, dedent: true },
        { regex: /[(a-z|A-Z|_)$][\w_$]*/, token: null },

    ],
    // The multi-line comment state.
    comment: [
        { regex: /.*?\*\//, token: "comment", next: "start" },
        { regex: /.*/, token: "comment" }
    ],
    meta: {
        dontIndentStates: ["comment"],
        lineComment: "//"
    }
});

型名は別の色とかにしたいのですが、とりあえずはこのままにしておきます。（多分、regex にグローバル変数か何かを当てれば良さそうです）

このモードを設定すると、コメントのショートカットキーもちゃんと効きました。これで十分そうです。

Electron をやってみる

この辺りは、そのうち記事にまとめようと思いますが、メモとして。色々と記事は見つかりましたが、読みやすかったこちらとこちらの記事を参考にしました。

まずは、Node.js と npm を最新版にしておきます。Windows の場合は、インストーラを落としてくるのが早いようです。そのあと、npm コマンドで npm を最新版にします。

npm update npm

次に、Electron のインストールです。こちらも npm から

npm -g install electron

で、インストール完了です。

テストアプリを作ってみる

ウィンドウを表示して、Hello World を表示するアプリを作ってみます。

適当なフォルダを作って、そこへディレクトリを移動し、以下のコマンドで初期化します。

npm init -y

ディレクトリ下に package.json が作成されますので、エントリポイントとなる "main" を適当に編集し、指定したファイル名のファイルを作成します。

コード1: package.json

{
  "name": "sumire-script-studio",
  "version": "1.0.0",
  "description": "",
  "main": "main.js", // <-エントリポイントのファイル
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

エントリポイント（main.js）には、ウィンドウを作って表示するコードを書きます。表示内容には HTML が指定できます。テストでは、同じディレクトリに test.html を作り、それを指定します。

コード2: main.js

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow = null;

app.on('window-all-closed', function() {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('ready', function() {

  mainWindow = new BrowserWindow({width: 800, height: 600});
  // test.htmlを表示
  mainWindow.loadURL('file://' + __dirname + '/test.html');

  //メインウィンドウを閉じたら終了
  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});

コード3: test.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test App</title>
  </head>
  <body>
    <p>Hello World</p>
  </body>
</html>

あとは、electron コマンドで実行できます。作業ディレクトリに移動して、以下のコマンドで起動します。

electron .

配布の形式を作ってみる

作ったアプリを配布する場合は、asar というツールでアーカイビングし、こちらから Electron を落としてきて、一緒に配布すればよいようです。配布時に起動するアプリ名やアイコンを変更したい場合は、Electron の起動プログラムを編集します（例えば、Windows では、electron.exe の名前を変えて、アイコンはリソースエディタでイジれとのことでした）。

asar のインストールと利用方法は以下のとおりです。

// インストール
npm install -g asar

// アーカイブの作成
asar pack . ../app.asar

出力ファイル名前は app.asar にします。また、出力先はアプリのディレクトリ外になるようにします。

アーカイブした asar ファイルを、落としてきた Electron の resources フォルダ下におき、electron.exe を起動すればアプリが立ち上がります。（ファイル名が app.asar でないと起動しないので注意です。）

そのほか、electron-packager など、パッケージング用のツールもあるようです。そのうち、試してみようと思います。

Visual Studio Code でデバッグ

こちらの記事を参考にしました。メインプロセスのデバッグは node のデバッグ設定で、レンダープロセスは Chrome のデバッグ設定でできます。

メインプロセスのデバッグ設定

デバッグから node.js の構成を選択し、実行プログラムの設定を行います。electron の場所を

where electron

で調べ、その実行パスを runtimeExcutable に設定します。

    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Main Process",
            //実行プログラムを electronに設定
            "runtimeExecutable": "XXXXXXXXXXXXXXXXXXXXXXXXXXXX/electron.cmd",
            "program": "${workspaceFolder}\\main.js"
        }
    ]

この設定で、メインプロセスのブレークポイント設置などが動きます。

レンダープロセスのデバッグ設定

Visual Studio Code に Chrome 用のデバッグエクステンションを導入しておき、デバッグ構成から「Chrome launch」を追加します。そして、runtimeExcutable と引数の設定を行います。

        {
            "type": "chrome",
            "request": "launch",
            "name": "Render Process",
            //"url": "http://localhost:8080", //URLはいらない
            "webRoot": "${workspaceFolder}",
            //実行プログラムを electronに設定し、起動プログラムを設定
            "runtimeExecutable": "XXXXXXXXXXXXXXXXXXXXXXXXXXXX/electron.cmd",
            "runtimeArgs": [
                "${workspaceRoot}/main.js",
                "--remote-debugging-port=9222"
              ],
        },

レンダープロセスでのデバッグでは以下のような注意点があります。

起動直後に走るような箇所のブレークポイントにはヒットしない（Chrome でデバッグする場合と同様）
Visual Studio Code 側でデバッグを停止しても、プログラムのほうは終了しない

まとめ

エディタ作成の下準備を諸々行いました。次は、Electron でのファイル操作などをやってみようと思います。