CodeZine(コードジン)

特集ページ一覧

「Wijmo(ウィジモ)」とElectron、Reactに、TypeScriptを組み合わせてスムーズなアプリ開発を実現

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

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

目次

パッケージングする

 開発モードで動かしているだけではわからないこともありますし、配布するためには配布可能な状態にパッケージングする必要があります。

 electron-builderというツールを使えば、とても簡単に配布可能なファイルが生成できます。

package.jsonに設定を追加する

 electron-builderでElectronアプリをパッケージングする際は、package.jsonにいくつもの情報を入れる必要がありますが、作者名や説明文などは省略しようと思えば可能です。どうしても設定しなければいけないものは"homepage": "."だけです。パッケージング時に必要になる情報なため、これがないとelectron-builderの動作が完了してもパッケージングされたアプリが正しく動作しません。

  "homepage": ".",
  "main": "public/electron.js",
  "scripts": {
    "dev": "electron .",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "pack-app": "npm run build && electron-builder --dir",
    "dist": "npm run build && electron-builder"
  },

 homepageと、scriptspack-appおよびdistを追加しています。

 pack-appおよびdistでは、electron-builderを実行する前に、npm run buildを実行してReactのビルド(バンドル)を行っています。いわゆる普通のWebアプリを作成した上で、Electron用にパッケージングを行うのです。

 このときbuild/ディレクトリには、Reactのビルド時に生成したファイルが出力され、dist/ディレクトリには、electron-builderが生成したファイルが出力されます。もし、パッケージングで困ったときは、build/dist/を消してからやり直すとうまくいくこともあります。

 その後、npm run pack-appを実行すると、dist/<OS>/<アプリ名>でアプリがパッケージングされます。macOSで実行した場合は、dist/mac/wijmo-example1.appになり、Windowsならdist/win-unpacked/wijmo-example1.exeとなります。

npm run pack-app
# Macの場合
# open コマンドで実行可能
open dist/mac/wijmo-example1.app
# Windowsの場合
.\dist\win-unpacked\wijmo-example1.exe

 パッケージングが正しくできているか、動作確認をしておくといいでしょう。以下はWindowsでnpm run pack-appしたときのログです。

> wijmo-example1@0.1.0 build ...\wijmo-example1
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  222.14 KB  build\static\js\2.4c3d1fdd.chunk.js
  12.18 KB   build\static\css\2.42521bd4.chunk.css
  1.4 KB     build\static\js\3.433c6905.chunk.js
  1.18 KB    build\static\js\nuntime-main.6198875f.js
  834 B      build\static\js\main.ca9ed471.chunk.js
  278 B      build\static\css\main.6dea0f05.chunk.css

The project was built assuming it is hosted at ./.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Find out more about deployment here:

  https://cra.link/deployment

  • electron-builder  version=22.9.1 os=10.0.19041
  • loaded parent configuration  preset=react-cra
  • description is missed in the package.json  appPackageFile=...\wijmo-example1\package.json
  • author is missed in the package.json  appPackageFile=...\wijmo-example1\package.json
  • writing effective config  file=dist\builder-effective-config.yaml
  • packaging       platform=win32 arch=x64 electron=11.1.0 appOutDir=dist\win-unpacked
  • downloading     url=https://github.com/electron/electron/releases/download/v11.1.0/electron-v11.1.0-win32-x64.zip size=78 MB parts=8
  • downloaded      url=https://github.com/electron/electron/releases/download/v11.1.0/electron-v11.1.0-win32-x64.zip duration=40.874s
  • default Electron icon is used  reason=application icon is not set

 pack-appではなくdistの場合は、配布用のパッケージ(インストーラやZipファイル)が作成されます。

npm run dist

 macOSならdist/wijmo-exampe1-0.1.0-mac.zipdist/wijmo-example1-0.1.0.dmg、Windowsならdist\wijmo-example1 Setup 0.1.0.exeなどが作成されます。

実際に配布する際には

 Electronはクロスプラットフォームなフレームワークであり、electron-builderもがんばればmacOS、Windows、Linuxアプリを1つの環境でパッケージング可能です。しかし、そのためにはいろいろとインストールしなければいけないものや、指定しなければいけないコマンドラインオプションがあります。

 実際に配布するときにはpackage.jsonにauthordescriptionなどの情報、開発者署名、アイコンなどを指定する必要があるでしょう。

 紙面の限りもあり、それらすべてを説明することはできませんが、Electron公式とelectron-builder公式を一通り読めば、必要な情報は得られるはずです。

まとめ

 冒頭でお伝えした通り、年々JavaScript開発は大規模・高度化しているため、静的型が使えるTypeScriptが人気です。Electron+Wijmoの開発においてもTypeScriptを活用すれば、より安全に開発ができるでしょう。

 IPCを使えば、レンダラープロセス(Webブラウザ)ではできないことをメインプロセスに任せることができます。また、electron-builderを使えば、配布可能なパッケージを作成可能です。ぜひチャレンジしてみてください。

関連リンク



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

あなたにオススメ

著者プロフィール

  • erukiti(エルキチ)

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

バックナンバー

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

もっと読む

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