【Electron+Next.js】デスクトップアプリジェネレーターNextronで簡単にElectronアプリ開発をしよう

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@latest

nextronインストールの無事を確認してみよう。

$ 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は、デスクトップアプリジェネレーターといって申し分ない。ぜひ検討してみてほしい。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です