Ubuntu20.04でElectronでRepl.itで作成済のWEBアプリのガワアプリ作って動かしてみた

０．初めに

この記事は以下の方を対象に書いています。

• 初心者
• Ubuntu20.04をデスクトップOSとして利用している
• PHPなどで簡単なWEBアプリがコピペ、修正できる
• オンラインIDEのRepl.itを知っている
• Node.jsやElectronが分かっているようで分かっていない

要するにレアな人向けです…(^^;)

１．きっかけ

以下の記事を見たのがきっかけです。

最新版で学ぶElectron入門 - ウェブ技術でPCアプリを開発しよう - ICS MEDIA
https://ics.media/entry/7298/

過去記事をちゃんと最新にメンテナンスされていて素晴らしい記事だと思います。

ただ以下の点が私には不十分でした。

• macOSとWindows向けでUbuntu無し
• ローカルのindex.htmlを利用するサンプルでガワアプリではない

この記事ではICS MEDIA様の記事をもとに違うところを書こうと思います。

なお、ガワアプリの元になるWEBアプリは以下の記事で過去に書いていますので
こちらも参考程度にご覧ください。

オンラインIDEのRepl.itでGoogleニュース検索を作りました - Qiita
https://qiita.com/basictomonokai/items/503ed556be2f6642c66c

２．Node.jsのインストール

Ubuntu20.04ではmacOSとWindowsとインストールは大きく異なります。

参考にさせていただいた記事は以下です。

Ubuntu で Node の最新版/推奨版を使う (n コマンド編) - Qiita
https://qiita.com/cointoss1973/items/c000c4f84ae4b0c166b5

Node.jsのバージョンアップに備えてバージョン管理ツールを使ったほうが良さそうな気がしたので「n」を利用しました

• nコマンド導入

Ubuntu20.04のホームディレクトリで実行しました。

sudo apt install nodejs npm
sudo npm install n -g

• 推奨版(lts) のインストール

sudo n lts

• バージョンを確認

npm -v
node -v
n --version

３．Electronの設定など

基本的は、きっかけの記事の通りです。

• プロジェクトフォルダの作成

ホーム直下にreplappフォルダを作成。

• Electronのインストール

replappフォルダに移動してインストール。

npm i -D electron

以下のようなフォルダが生成されました。

home
└── replapp
    ├── node_modules
    │   └── ...(Electronのモジュール)
    ├── package-lock.json
    └── package.json

• srcフォルダ作成

replappフォルダに直下にsrcフォルダ作成してmain.jsとpackage.jsonファイルを作成

home
└── replapp
    ├── node_modules
    │   └── ...(Electronのモジュール)
    ├── src
    │   ├── main.js
    │   └── package.json
    ├── package-lock.json
    └── package.json

main.jsは、Repl.itのWEBアプリ（PHP）を表示するのみです。

main.js

// アプリケーション作成用のモジュールを読み込み
const {app, BrowserWindow} = require('electron');

// メインウィンドウ
let mainWindow;

function createWindow() {
  // メインウィンドウを作成します
  mainWindow = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    },
    width: 800, height: 600,
  });

  // メインウィンドウに表示するURLを指定します
  // （今回はrepl.itのWEB PHPアプリ）
  mainWindow.loadURL('https://Google-News-Search.basictomonokai1.repl.co');

  // デベロッパーツールの起動　→起動していない
  // mainWindow.webContents.openDevTools();

  // メインウィンドウが閉じられたときの処理
  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

//  初期化が完了した時の処理
app.on('ready', createWindow);

// 全てのウィンドウが閉じたときの処理
app.on('window-all-closed', () => {
  // macOSのとき以外はアプリケーションを終了させます
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
// アプリケーションがアクティブになった時の処理(Macだと、Dockがクリックされた時）
app.on('activate', () => {
  // メインウィンドウが消えている場合は再度メインウィンドウを作成する
  if (mainWindow === null) {
    createWindow();
  }
});

package.jsonは元記事のままです。

package.json

{
  "main": "main.js"
}

４．アプリケーションの実行

cd replapp
npx electron ./src

５．パッケージング

electron-packagerをインストール。

cd replapp
npm i -D electron-packager

Linux用のパッケージングを実行。

npx electron-packager src replapp --platform=linux --arch=x64 --overwrite

Linux用のパッケージ(replapp-linux-x64)が生成されるのでこれをZIPにして別のUbuntu機で確認

home
└── replapp
    ├── replapp-linux-x64
    │   └── ...(Electronのパッケージのファイル群)
    ├── node_modules
    │   └── ...(Electronのモジュール)
    ├── src
    │   ├── main.js
    │   └── package.json
    ├── package-lock.json
    └── package.json

６．別のUbuntu機で動作確認

ZIPを解凍した後に動作確認

cd replapp-linux-x64
./replapp

７．動作確認の結果

８．終わりに

この方法ならPHPでWEBアプリ作って簡単にガワアプリ化できそうです。

では楽しいガワアプリ　ライフを…

以　上