今回は、Electronというソフトを使い、HTMLやCSS、JavaScript等のWEB技術のみでWindowsやMacのデスクトップアプリが作れるというお話です。
以前からそういった技術はあったようですが、知らなかったのは私だけ？
中でも特に今回紹介したいのは、既に公開しているWEBサイトをWebViewという技術を利用してデスクトップアプリにしてしまいます。
アプリ作成の準備
Electronでデスクトップアプリを作るためには、Node.jsが必須です。
今回は、Windowsで開発をしますので、以下の公式サイトからWindows Installerをダウンロードしましょう。
ちなみに、LTS（長期サポート）版と最新版が選べますが、安定しているLTS版をお勧めします。
インストールが完了したら、念のためコマンドプロンプトを起動してバージョン情報の確認をしておきましょう。
|
1 2 |
node -v npm -v |
バージョンが表示されたらOKです！
また、次の章でElectron公式のクイックスタートガイドで、パッケージングする際にgitも必要らしいのですが、面倒なので後ほど別の方法でご紹介します。
Electronの基本的な使い方
基本的には、Electron公式のクイックスタートガイドに従って構築していけば問題ないです。
まず、アプリフォルダを作って、Electronをインストールします。
|
1 2 3 4 |
mkdir my-electron-app cd my-electron-app npm init -y npm i --save-dev electron |
そこに、メインスクリプトファイルmain.jsとWEBページファイルindex.htmlを作成してください。
ここまでの手順が完了すると、以下のようなフォルダ構成になります。
|
1 2 3 4 5 |
my-electron-app/ ├── index.html ├── package.json ├── main.js ・・・ |
main.js中身は以下の通りです。
main.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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行追記してください。
|
1 2 3 4 5 6 |
・・・ webPreferences: { ・・・ webviewTag: true ←追記 }, ・・・ |
以上でmain.jsの設定は完了です。
どのような動作をするのか知りたい場合は、ガイドを参考にしてください。
index.html
次は、main.jsが読み込むindex.htmlを作成します。
ガイドで紹介しているのはお馴染みの「Hello World」ですが、ここでは既存のホームページをWebViewで表示するだけなので、1行記載するだけで済みます。
|
1 |
<webview src="https://minory.org" style="display: flex; width: 100%; height: 100%; border: none;"></webview> |
srcに表示したいWEBサイトのURLを書いてください。
styleでフルサイズになるよう指定しています。
ですので、レスポンシブなWEBサイトでないと、見た目的に厳しいかもしれませんね…。
package.json
それでは、いよいよアプリを起動したり、パッケージするための準備をしましょう！
基本的にはガイドの内容をコピペするだけで、何も問題ないです。
|
1 2 3 4 5 6 7 8 9 10 |
{ "name": "my-electron-app", "version": "0.1.0", "author": "your name", "description": "My Electron app", "main": "main.js", "scripts": { "start": "electron ." } } |
この設定を一部入れ忘れたりすると、アプリを起動できなかったり、エラーが出てパッケージできなかったりしたので、ガイドに書かれている「注意」をよく読んでくださいね！
設定が完了したら、以下のコマンドでアプリを実行します。
|
1 |
npm start |
WebViewタグのsrcで指定したWEBサイトが表示されればOKです！
アプリのパッケージ
ここからはガイドと異なります。
著者は当初、ガイドに忠実に従って作業していたのですが、パッケージだけできずに引っかかっていました。
どこにもgitが必要なんて書いてないじゃん！
当たり前なのかな？？
愚痴はここまでにして、パッケージするツールは他にもあります。
- electron-forge
- electron-builder
- electron-packager
electron-forgeはgitが必要なので、その他のelectron-builderかelectron-packagerから選択します。
色々調べてみると、現在ではelectron-builderが主流らしいので、今回はこれを使ってパッケージします。
electron-builderでパッケージ
まずは、electron-builderをインストールします。
|
1 |
npm install -D electron-builder |
次に、package.jsonのdevDependenciesにElectronのバージョン情報を追記してください。
|
1 2 3 4 5 6 7 |
・・・ }, "devDependencies": { "electron": "11.2.2", ←追記 "electron-builder": "22.9.1" } } |
インストール時に--save-dev指定したせいか、これがないとパッケージできませんでした。
そして、いよいよ次のコマンドでアプリが完成します！
|
1 |
npx electron-builder --win --x64 |
アプリフォルダ内にdistというフォルダが作られ、その中に完成したアプリが入ってます！
ついでにMac版も作ろうと、以下のコマンドを叩いたのですが…。
|
1 |
npx electron-builder --mac --x64 |
Mac用のアプリはMacOS上で実行しないとダメなようです。
また、Windowメニューやアプリのアイコン、出力形式も指定できる方法が複数あるようなので、後程ご紹介したいと思います。
ポチップ
コメント