CodeZine(コードジン)

特集ページ一覧

「Wijmo(ウィジモ)」とElectron、Reactを組み合わせて、Web技術でデスクトップアプリをつくろう

ECMAScript 5に準拠した高速・軽量なJavaScript UIライブラリ「Wijmo 5」の活用 第16回

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2021/01/05 12:00

目次

セットアップ(2)

プリロードスクリプトを作成する

 Electronはセキュリティ改善のため、バージョンアップのたびにセキュリティ要件が厳しくなっています。

 Electronバージョン5より前では、nodeIntegraionという、レンダラープロセスにそのままNode.jsを統合する機能がデフォルトで有効でした。

 レンダラープロセスはWebブラウザの技術で作られており、元々利便性のためにNode.jsも一緒に組み込んでいましたが、動作するマシンの全てのリソースに簡単にアクセスできセキュリティリスクが高かったため、バージョン5ではデフォルトで無効化されました。

 ところがElectronの機能を初期化するときに不都合があるため、プリロードという、レンダラープロセスでありながらNode.jsの機能も使える特権的なスクリプトが登場しました。

 プリロードが使われ始めたころはwindowグローバル変数を書き換えていましたが、これもセキュリティリスクが高いため、contextIsolationというオプションが追加されました。contextIsolationが有効になると、プリロードスクリプトと、レンダラープロセスのアプリケーションはwindowなどを共有しません。

 それらを踏まえて、プリロードスクリプトを見てみましょう。

// public/preload.js
const { contextBridge, ipcRenderer } = require("electron");

//(1)contextBridgeを使って、メインプロセスの機能をレンダリングプロセスに提供する
contextBridge.exposeInMainWorld("ipc", {
  test: (message) => {
    ipcRenderer.invoke("test", message); //(2)IPC通信を送信する
  },
});

 (1)で使っているcontextBridgecontextIsolationが有効な場合でも、安全に処理をやりとりするためのオブジェクトです。

 contextBridge.exposeInMainWorldの第1引数は、レンダラープロセスのwindowの下に新たに生やすオブジェクトの名前です。第2引数はオブジェクトで実際の機能を定義します。

 (2)で使われているipcRenderer.invokeはIPC通信を行うものです。古い資料にはipcRenderer.sendが使われる事例がありますが、現在ではipcRenderer.invokeが推奨されています。

 このプリロードスクリプトにより、レンダラープロセスはwindow.ipc.test('message')によって、メインプロセスにテストメッセージを送信できるようになります。

TypeScriptでIPC通信をできるようにする

 TypeScriptに関しての詳細は後編で書きますが、IPC通信のためにwindowを拡張する場合、専用の定義が必要です。

 まずsrc/@types/global.d.tsに定義します。

// src/@types/global.d.ts
interface Window {
  //(1)対象はWindowというインターフェース
  ipc: {
    test: (message: string) => void; //(2)test関数の型定義
  };
}

 (1)の Windowというインターフェースは、Webブラウザのwindowオブジェクトの型を定義するものです。ここに追加で、IPCの為のオブジェクトを追加します。

 (2)のtest: (message: string) => voidは、ipcオブジェクトの中にtestという関数を定義しています。引数にstring型を受け取り、戻り値がないを意味するvoidを指定しています。

 これにより、window.ipc.testが使えるようになりました。

Electronアプリを開発モードで起動する

 ここまでの工程によって、npm run devでElectronアプリとして起動できるようになりました。

# npmの場合
npm run dev
起動画面
起動画面

IPC送信を試す

 起動したままソースコードを書き換えることもできます。さっそくApp.tsxを書き換えてみましょう。

// src/App.tsx
import React from "react";

function App() {
  return (
    <button onClick={() => window.ipc.test("Hello, Electron Main World.")}>
      テストメッセージ送信
    </button>
  );
}

export default App;
テストメッセージ送信ボタン
テストメッセージ送信ボタン

 こちらはボタンを押すと、window.ipc.testでメッセージを送信するコードです。

Starting the development server...

Compiled successfully!

You can now view wijmo-example in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.7:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

test message: Hello, Electron Main World.

Compiling...
Files successfully emitted, waiting for typecheck results...
Compiled successfully!
test message: Hello, Electron Main World.

 メインプロセスの管轄である、コンソールにテストメッセージが表示されました。


関連リンク

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

あなたにオススメ

著者プロフィール

  • erukiti(エルキチ)

     TypeScrip+React(とくに React Hooks)をこよなく愛するウェブエンジニア。技術書典に東京ラビットハウスという個人サークルで参加して、JavaScriptなどの技術同人誌を出している。大体いつも締め切りに追い立てられている。

バックナンバー

連載:最先端テクノロジーに対応した高速・軽量なJavaScript UIライブラリ「Wijmo」の活用

もっと読む

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5