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

electron-webview
  • URLをコピーしました!

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

目次

アプリ作成の準備

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

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

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

Electronの基本的な使い方

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

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

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

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

main.js

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

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

index.html

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

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

package.json

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

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

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をインストールします。

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

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

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

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

C&R研究所
¥3,223 (2024/10/14 21:39時点 | Amazon調べ)
\楽天ポイント4倍セール!/
楽天市場
\ポイント5%還元!/
Yahooショッピング
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次