Electronまわりの調べごと

Electron まわりで、必要な API の使い方を調べました。

Electron でファイルの読み書き

レンダープロセスでも、node.js のファイル API が使えるようです。

// fsをrequire
const fs = require('fs');

// ファイルを同期APIで読み込み
var data = fs.readFileSync('test.txt', 'utf8')
console.log(data)

// 書き込み
fs.writeFileSync("test.txt", data);

ファイルダイアログも開けるようです。remote とか、よくわかりませんが、そのうち調べます。

// dialogをrequire
const dialog = require('electron').remote.dialog;

	// 開いている間は、ブロックしてくれる
    var files = dialog.showOpenDialog(null, {
        properties: ['openFile'],
        title: 'スクリプトファイルを開く',
        defaultPath: '.',
        filters: [
            { name: 'sumire script file', extensions: ['ss'] }
        ]
    });
	
	if (files !== undefined) {
        for (let i = 0; i < files.length; i++) {
            let data = fs.readFileSync(files[i], 'utf8');
        	console.log(data);
        }
    }

jQuery の利用

普通に jQuery を使うと、$ が undefined になってしまうようです。とりあえず、

    <script>
        window.jQuery = window.$ = require('./jquery-3.2.0.min.js');  
    </script>

としておけば良いようです。

型定義ファイルに関しては、最近は特別なツールは必要ないようです。Visual Studio Code のターミナルから

npm install --save @types/jquery

とすれば、カレントフォルダの node_modules 下に型定義ファイルがインストールされます。また、この方法でインストールすれば、reference ～と参照する必要もありません。

TypeScript の import とか export とか (Electron の場合 )

1 ファイルから 1 クラスだけ出力する場合は、出力したい方のファイルの最後に

export = SssEditorPanelContainer;

と書き、使いたい側から、

import SssEditorPanelContainer = require("./editor-panel-container");

と書けばインポートできました。ここで指定するファイルの相対パスは、JavaScript ファイルを読み込んでいる HTML ファイルからの相対パスなので注意が必要です。

複数を export する方法はよくわかりません。（module.exports の方法を試しましたが、require した先で、型名が認識されず、TypeScript のコンパイルでエラーが出てしましました。）

ちなみに、

import XXX from YYYY;

の形式を使った場合、export のところでうまくいきませんでした。(exports is not defined となってしまいました。)

AppData パスを取得

Windows なら、

process.env.APPDATA

や

process.env.LOCALAPPDATA

で取得可能のようです。プラットフォームを調べるには、

process.platform == "win32"

でチェック可能です。

メニューの作成

テンプレートを書き、

Menu.buildFromTemplate

で作成、

Menu.setApplicationMenu

で設定します。

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

const menuTemplate = [
  {
    label: "ファイル",
    submenu: [
      {
        label: "開く", click: () => {
        },
        accelerator:"CmdOrCtrl+O"
      },
      {
        label: "保存", click: () => {
          console.log("Save");
        },
        accelerator:"CmdOrCtrl+S"
      },
	  //　セパレーターの設定は type に 'separator' を設定
      { type: 'separator' },
      {
        label: "終了", click: () => {
        }
      },
    ]
  }
];

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

  //メニューの設定
  const menu = Menu.buildFromTemplate(menuTemplate);
  Menu.setApplicationMenu(menu);
  
  // ～～～～～～～～～～～～～～

メインプロセスからレンダープロセスの関数を呼ぶ

メインプロセスからレンダープロセスの関数を呼ぶことはできず、プロセス間通信を使うしか無いようです。レンダープロセスの方で、待受設定をしておき、メインプロセスから BrowerWindow の

webContents.send

を呼び出してメッセージを送ります。

コード1: レンダープロセスの方

import electron = require("electron");
const ipc = electron.ipcRenderer;

//待受設定
ipc.on('renderprocess', function (event, arg) {
	console.log(arg);
});

コード2: メインプロセスの方

//mainWindowにメッセージを送る
mainWindow.webContents.send("renderprocess", "test");

メイン→レンダーの場合は、同期通信は無いようです。

Visual Studio Code で electron のモジュールが無いと言われた

コマンドプロンプトから

npm install --save-dev electron

を実行すると認識されるようになりました。

まとめ

最低限必要なことは調べ終わった感じがします。Electron ベースの IDE を作っていこうと思います。