サイトアイコン IT NEWS

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

管理者
electron-webview

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

アプリ作成の準備

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

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
ダウンロード | Node.js - Node.js

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

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


Electronの基本的な使い方

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

Please install Node.js using pre-built installers for your platform.You may encounter incompatibility issues with different development tools otherwise.
Quick Start Guide | Electron - www.electronjs.org

まず、アプリフォルダを作って、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 ←追記
    },
    webPreferences: {
    }
  })

  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の例

アプリのパッケージ

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

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

electron-builderでパッケージ

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

npm install -D electron-builder

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

・・・
    },
    "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メニューやアプリのアイコン、出力形式も指定できる方法が複数あるようなので、後程ご紹介したいと思います。

The post Electronで公開中のWEBアプリをデスクトップアプリにする！ first appeared on Minory.

モバイルバージョンを終了