🖥️

2秒で既存のWebアプリをデスクトップアプリにする方法

2022/03/26に公開

Electron

Next.js

デスクトップ

tech

想定する読者

もうアプリはあるんじゃ
デスクトップアプリ化はめんどくさいんじゃ
クリックするだけでインストールできるあれを作りたいんじゃ

本編（2秒で既存のWebアプリをデスクトップアプリにする方法）

STEP1 雛形作成

$ yarn create next-app --example with-electron-typescript <あなたのアプリ名>

/rendererは1から作るようなので無視します

STEP2 アプリ用のアイコンを設置

<あなたのアプリ名>/publicの配下にアイコン画像を設置

あなたのアプリ名
- public
  - ＜あなたのアプリのアイコン.png＞

STEP3 Package.jsonの編集

{
+ "name": "あなたのアプリ名",
  "private": true,
  "main": "main/index.js",
+ "productName": "あなたのアプリ名",
+ "version": "0.0.1",
  "scripts": {
    "clean": "rimraf dist main renderer/out renderer/.next",
    "dev": "npm run build-electron && electron .",
    "build-renderer": "next build renderer && next export renderer",
    "build-electron": "tsc -p electron-src",
    "build": "npm run build-renderer && npm run build-electron",
    "pack-app": "npm run build && electron-builder --dir",
    "dist": "npm run build && electron-builder",
+   "dist-win": "npm run build && electron-builder --win --x64",
    "type-check": "tsc"
  },
  "dependencies": {
    "electron-is-dev": "^1.1.0",
    "electron-next": "^3.1.5",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@types/node": "^14.14.6",
    "@types/react": "^16.9.9",
    "@types/react-dom": "^16.9.9",
    "electron": "^13",
    "electron-builder": "^22.9.1",
    "next": "latest",
    "rimraf": "^3.0.0",
    "typescript": "^4.0.5"
  },
  "build": {
    "asar": true,
    "files": [
      "main",
      "renderer/out",
+     "public/*"
    ],
+   "mac": {
+     "icon": "./public/＜あなたのアプリのアイコン.png＞",
+     "target": [
+       "dmg"
+     ]
+   },
+   "win": {
+     "icon": "./public/＜あなたのアプリのアイコン.png＞"
+   }
+ }
}

STEP4 index.tsを編集

electron-src/index.tsを編集

// Native
import { join } from 'path'
- import { format } from 'url'

// Packages
import { BrowserWindow, app, ipcMain, IpcMainEvent } from 'electron'
- import isDev from 'electron-is-dev'
import prepareNext from 'electron-next'

// Prepare the renderer once the app is ready
app.on('ready', async () => {
  await prepareNext('./renderer')

  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    icon: "./public/＜あなたのアプリのアイコン.png>",
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: false,
      preload: join(__dirname, 'preload.js'),
    },
  })

- const url = isDev
-   ? 'http://localhost:8000/'
-   : format({
-       pathname: join(__dirname, '../renderer/out/index.html'),
-       protocol: 'file:',
-       slashes: true,
-    })
-
+  mainWindow.loadURL(＜あなたのアプリのURL＞)
})

// Quit the app once all windows are closed
app.on('window-all-closed', app.quit)

// listen the channel `message` and resend the received message to the renderer process
ipcMain.on('message', (event: IpcMainEvent, message: any) => {
  console.log(message)
  setTimeout(() => event.sender.send('message', 'hi from electron'), 500)
})

STEP5 ビルド！

WindowsOSのデスクトップアプリを作りたい
windows環境上で

$ yarn dist-win

=> dist/＜あなたのアプリ名＞＜バージョン＞.exe

MacOSのデスクトップアプリを作りたい
mac環境上で

$ yarn dist

=> dist/＜あなたのアプリ名＞＜バージョン＞.dmg

LinuxOSのデスクトップアプリを作りたい
linux環境上で

$ yarn dist

=> dist/＜あなたのアプリ名＞＜バージョン＞.AppImage

はい！おわりー！

番外編（S3でビルドファイルを公開）

STEP1 バケットを作成

S3へ移動しCreate bucketをクリック
Bucket nameに＜あなたのアプリ名＞を入力
一番上のチェックを外して、一番下にチェック
ほかはそのままでCreate bucket

STEP2 権限の登録

作ったバケットを選択
権限のタブに移動
バケットポリシーを編集
以下を入力して登録

{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Sid": "AddPerm",
			"Effect": "Allow",
			"Principal": "*",
			"Action": "s3:GetObject",
			"Resource": "arn:aws:s3:::<バケットの名前>/*"
		}
	]
}

STE3 アップロード

オブジェクトのタブからexe、dmg、AppImageをアップロード
※全世界公開にしているのでアクセスされたらやばいファイルはアップロードしないでね
Objectのリストから詳細に移動してObject URLからをクリック

インストーラーがダウンロードされて
はい！おわりー！