Electronで公開中のWEBアプリをデスクトップアプリにする!

electron-webview
LINEで送る
Pocket

今回は、Electronというソフトを使い、CSS等のWEB技術のみでWindowsMacデスクトップアプリが作れるというお話です。
以前からそういった技術はあったようですが、知らなかったのは私だけ?
中でも特に今回紹介したいのは、既に公開しているWEBサイトWebViewという技術を利用してデスクトップアプリにしてしまいます。

アプリ作成の準備

Electronデスクトップアプリを作るためには、Node.jsが必須です。
今回は、Windowsで開発をしますので、以下の公式サイトからWindows Installerをダウンロードしましょう。
ちなみに、LTS(長期サポート)版と最新版が選べますが、安定しているLTS版をお勧めします。

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

インストールが完了したら、念のためコマンドプロンプトを起動してバージョン情報の確認をしておきましょう。

node -v
npm  -v

バージョンが表示されたらOKです!
また、次の章でElectron公式のクイックスタートガイドパッケージングする際に、も必要らしいのですが、面倒なので後ほど別の方法でご紹介します。


Electronの基本的な使い方

基本的には、Electron公式のクイックスタートガイドに従って構築していけば問題ないです。

Please install Node.js using pre-built installers for your platform.You may encounter incompatibility issues with different development tools otherwise.

まず、アプリフォルダを作って、Electronをインストールします。

mkdir my-electron-app
cd my-electron-app
npm init -y
npm i --save-dev electron

そこに、メインスクリプトファイルmain.js)とWEBページファイルindex.html)を作成してください。
ここまでの手順が完了すると、以下のようなフォルダ構成になります。

my-electron-app/
├── index.html
├── package.json
├── main.js
・・・

main.js中身は以下の通りです。

main.js

const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      webviewTag: true ←追記
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

基本的に中身はガイドと同じですが、冒頭で述べたWebViewタグはデフォルトでは使用できませんので、上記の「←追記」部分の通り、WebView有効化するための1行追記してください。

・・・
    webPreferences: {
      ・・・
      webviewTag: true ←追記
    },
・・・

以上でmain.jsの設定は完了です。
どのような動作をするのか知りたい場合は、ガイドを参考にしてください。

index.html

次は、main.jsが読み込むindex.htmlを作成します。
ガイドで紹介しているのはお馴染みの「Hello World」ですが、ここでは既存のホームページWebViewで表示するだけなので、1行記載するだけで済みます。

<webview src="https://minory.org" style="display: flex; width: 100%; height: 100%; border: none;"></webview>

srcに表示したいWEBサイトURLを書いてください。
styleフルサイズになるよう指定しています。
ですので、レスポンシブWEBサイトでないと、見た目的に厳しいかもしれませんね…。

package.json

それでは、いよいよアプリを起動したり、パッケージするための準備をしましょう!
基本的にはガイドの内容をコピペするだけで、何も問題ないです。

{
    "name": "my-electron-app",
    "version": "0.1.0",
    "author": "your name",
    "description": "My Electron app",
    "main": "main.js",
    "scripts": {
        "start": "electron ."
    }
}

この設定を一部入れ忘れたりすると、アプリを起動できなかったり、エラーが出てパッケージできなかったりしたので、ガイドに書かれている「注意」をよく読んでくださいね!
設定が完了したら、以下のコマンドアプリを実行します。

npm start

WebViewタグのsrcで指定したWEBサイトが表示されればOKです!

Hello Worldの例
Hello Worldの例

アプリのパッケージ

ここからはガイドと異なります。
著者は当初、ガイドに忠実に従って作業していたのですが、パッケージだけできずに引っかかっていました。
どこにもgitが必要なんて書いてないじゃん!
当たり前なのかな??
愚痴はここまでにして、パッケージするツールは他にもあります。

  • electron-forge
  • electron-builder
  • electron-packager

electron-forgegitが必要なので、その他のelectron-builderelectron-packagerから選択します。
色々調べてみると、現在ではelectron-builderが主流らしいので、今回はこれを使ってパッケージします。

electron-builderでパッケージ

まずは、electron-builderをインストールします。

npm install -D electron-builder

次に、package.jsondevDependenciesElectronバージョン情報を追記してください。

・・・
    },
    "devDependencies": {
        "electron": "11.2.2", ←追記
        "electron-builder": "22.9.1"
    }
}

インストール時に--save-dev指定したせいか、これがないとパッケージできませんでした。
そして、いよいよ次のコマンドアプリが完成します!

npx electron-builder --win --x64

アプリフォルダ内に「dist」というフォルダが作られ、その中に完成したアプリが入ってます!
ついでにMac版も作ろうと、以下のコマンドを叩いたのですが…。

npx electron-builder --mac --x64

Mac用のアプリはMacOS上で実行しないとダメなようです。
また、Windowメニューアプリアイコン出力形式も指定できる方法が複数あるようなので、後程ご紹介したいと思います。

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket


コメントを残す

Scroll Up