はじめに
Wijmo（ウィジモ）は、グレープシティがHTML/JavaScript環境に向けて提供しているJavaScriptライブラリで、WebサイトやWebアプリケーションで活用できるUI部品を利用者に提供します。
Wijmoは単体での利用に加え、さまざまなJavaScriptフレームワークやライブラリと組み合わせて利用できます。今回はWeb技術デスクトップアプリを開発するフレームワークであるElectronとReactでWijmoを利用する方法を紹介します。また、後編ではTypeScriptを組み合わせます。
なお、本記事のサンプルコードは以下のリポジトリに用意しています。
対象読者
- WebサイトやWebアプリケーションのレベルをワンランク上げたい方
- 高度なUI部品を手軽に使いたいReactユーザーの方
- Web技術でデスクトップアプリを作りたい方
必要な環境
Electronの開発にはNode.jsが必須です。Electronでは、最新のLTSまたは現在のバージョンのいずれかをインストールすることを推奨しています。
Electronとは
Electronとは、Web技術でクロスプラットフォームなデスクトップアプリを開発できるフレームワークです。Electronで作られたアプリとしてはVSCodeやSlackなどが有名どころです。
Web技術で開発できるため、WebサービスやWebアプリケーションと、コードの共通化をしたまま、デスクトップアプリを開発できます。
仕組み
デスクトップアプリケーションのエンジンとして、GoogleのOSSなWebブラウザChromiumを組み込んでいるため、Web技術でウィンドウなどを作成でき、サーバーサイドJavaScriptでも使われるNode.jsを組み込むことでWebブラウザだけではできない処理を実現しています。
2種類のプロセス
起動時にはメインプロセスが走ります。このメインプロセスは実質Node.jsなので、ファイルシステムやローカルデバイスの全てにアクセスが可能ですし、任意のサーバーとして動かすことができます。
メインプロセスからウィンドウを開くことができます。このウィンドウはレンダリングプロセスと呼ばれ、ChromiumによるWebブラウザのフロントエンド部分をアプリケーションっぽくしたものです。
これら、メインプロセスとレンダリングプロセスは分離されているため、わざと緩める設定をしなければ、レンダリングプロセスからは直接ローカルの仕組みにアクセスできないようにすることでセキュリティを担保できます。
メインプロセスとレンダリングプロセスは名前の通り、プロセスとして分離しているため、IPC（プロセス間通信）という仕組みで通信します。ローカルデバイスやファイルにアクセスする場合、メインプロセス側にその仕組みを実装し、レンダリングプロセスからはIPCを使って、メインプロセスにお願いをするのが一般的です。
配布可能形式にパッケージングする
Electronアプリケーションは、パッケージングすることで、Windows、Mac、Linuxなどで動くアプリケーションとして配布可能です。
具体的なパッケージング手順は後編にて紹介いたします。
Reactとは
React自体は過去の連載でも取り扱っているため、詳細は省略します。
この記事と同じくcreate-react-appを使ってプロジェクトを作成します。実際のReactのビルドや開発サーバー機能の提供は、プロジェクト作成時にインストールされるreact-scriptsというパッケージが受け持っています。
