Electronデスクトップアプリのレンダラープロセス設計において、求められるスキルセットはWebアプリ案件とそれほど違うところはない。
静的コンテンツで済むのであれば、HTML&CSSとわずかなJavaScript(jQuery)があればよい。コンテンツ更新が頻発するのなら、SPAを考慮したい。ReactやVue.js、Angularなどが候補になるだろう。
SSRフレームワークで知られるNext.jsやNuxt.jsを得意とするなら、十分に活用できるはずだ。ただしレンダラープロセスのウインドウ生成には、起点となるHTMLファイルを定義する都合があるため静的HTMLにエクスポートする必要がある。
そもそもdevelopment時点ではHTMLファイルがない。pagesフォルダ配下のjsファイルがルーティングと関連付くかたちでページ生成されるためである。ごく単純なSPA構築ライブラリと相違するポイントであって、Electronとともに使うときには、非常に難解な要素といえる。
それでもElectron+Next.jsが候補されているなら、もっとも効率のよい始め方がある。Next.jsを基に開発が進められる「Nextron」を使ってみてはどうだろう。
Nextronとは
Nextronは、デスクトップアプリジェネレーターである。利用者は、Electron+Next.js環境が整った状態で開発を開始することができて、CLIでプロジェクト初期化や開発、ビルドの設定がされているため手間が省ける。
さらにNextronには、さまざまなケースを想定したexampleが用意されていて、要件を満たしてくれる。プロジェクト要件に近いexampleから初期化できるわけだ。大変有り難い仕様になっている。
特徴
- 開発者が日本人
- Electron + Next.js
- CLIでプロジェクト初期化、開発、ビルド
- 豊富なexample
- awesome-nextjsに掲載
- OSS
使い方
Nextronをインストール
Nextronを-gオプションでインストールする。これによりnextronコマンドを使用できるようになる。
$ npm install -g nextron@latestnextronインストールの無事を確認してみよう。
$ nextron -vプロジェクトを初期化
Nextron環境を初期化しよう。下記プロジェクト名は任意で構わない。
$ nextron init <プロジェクト名>Nextronを--globalにインストールしない場合の初期化方法も用意されている。
# with npx
$ npx create-nextron-app <プロジェクト名>
# with yarn
$ yarn create nextron-app <プロジェクト名>依存関係をインストール
Nextron環境に依存関係するパッケージモジュールをインストールしよう。
# with npm
$ npm install
# with yarn
$ yarn install果たして、node_modulesフォルダが生成されていることだろう。
開発モードを実行
# with npm
$ npm run dev
# with yarn
$ yarn dev不測のことがなければ、ウインドウが立ち上がる。開発モードでは簡易Webサーバーが起動している。「http://localhost:8888/home」にアクセスすれば、ブラウザでも確認できるはずだ。
ビルドを実行
# with npm
$ npm run build
# with yarn
$ yarn build「dist」フォルダが生成される。フォルダ配下にインストーラーや実行ファイルがあることを確認しよう。
まとめ
Electron+Next.js 要件が求められるプロジェクトならば、Nextronはよい選択ではないだろうか。環境構築が初めてならなおさらだ。自身で依存関係パッケージモジュールをかき集めるには、とても骨が折れる。
それならNextron環境で、プロジェクトにマッチするexampleを活用するのが賢明と思える。exampleの記述には、Electronたらしめるipc通信に関することがhelpersにまとめられている。Web制作者にとって馴染みないipc通信をサポートするメソッドが使えるのは大変有り難い次第だ。
これほどの作り込まれたNextronは、デスクトップアプリジェネレーターといって申し分ない。ぜひ検討してみてほしい。
