Evernoteを簡単に開いて編集するElectronアプリ

普段はMacで開発をしているのですが、MacBookPro13インチの画面が小さく、自宅ではもっと大きな画面で作業したいと思い、 49インチ4Kモニターに繋がっているゲーム専用のWindows10で初歩の開発環境としてElectronの開発環境構築と、簡単なハイブリッドアプリを作ってみました。

まず、WindowsでElectronの開発環境を構築する手順です。 Windows10には、PythonもNode.jsもプリインストールされていないので、何はなくともそこからです。

１．WindowsStoreからPython3.9をインストール

Windows10の「Microsoft Storeアプリ」から「Python3.9」を検索し、インストールします。インストールオプションは無いのですが、pipのインストールや、インストールしたpythonに環境変数のパスを通すぐらいはやってくれます。

Macの場合、PyEnvで複数バージョンのPythonを切り替えたりすると思いますが、Windowsではどうすればいいのか調べていません。

f:id:kawapon2nd:20210123151803p:plain

２．「Node.js」を「Windows Installer(*.msi)」でインストール

続いて、「Node.js」を公式サイトからインストールしていきます。

「Node.js」公式サイト https://nodejs.org/ja/

f:id:kawapon2nd:20210123151743p:plain

「Windows Installer(*.msi)」を選択してインストールします。バージョンは最新LTSの14.15.4です。

ここでもコマンドプロンプト（ターミナル）は使っていません。

インストールを進めると、環境変数のパスや、npmのインストールも行ってくれます。

f:id:kawapon2nd:20210123151834p:plain

インストールの終盤に画面がPowerShellに代わり、パッケージ管理ツールのchocolateyが足りないものをインストールしてくれました。たしかに、ゲームにしか使っていないPCなのでビルドに必要なものは入っていませんでした。

f:id:kawapon2nd:20210123151851p:plain

そして、再起動をするように促されるので再起動します。 Windowsって、やたらと再起動するイメージがあるのですが、シェルの再起動とかではダメなんでしょうか。

再起動したら、またコマンドプロンプトに戻って、インストールしたPython、Node.js、npmが使えるか、確認してみます。

f:id:kawapon2nd:20210123151859p:plain

いい感じです。

３．Electronでのビルド

適当な場所にフォルダ（evernote-tiny-desktop-app）を作成する

mkdir evernote-tiny-desktop-app
cd evernote-tiny-desktop-app

以下の構成でファイルを配置

evernote-tiny-desktop-app
  + node_modules（最初は不要）
  + src
    + main.js
  .gitignore（不要）
  package.json（最初は不要）
  package-lock.json（最初は不要）
  README.md（不要）

node_modules と package-lock.json は、これから生成するので無くていいです。

src/main.jsの中身

const { app, BrowserWindow } = require('electron')

let mainWindow

var URL = "https://www.evernote.com/client/web"

app.on("ready", function () {
    mainWindow = new BrowserWindow({
        width: 800, height: 800
    });
    mainWindow.loadURL(URL)
});

app.on('window-all-closed', () => {
    app.quit()
})

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

app.on('activate', () => {
    if (win === null) {
        createWindow()
    }
})

node_modules、package.json を作るために npm init を行います

npm init -y

node_modulesフォルダが作成されます。 package.jsonファイルが作成されます。

package.jsonファイルを以下のように編集します。

package.json

{
  "name": "evernote-tiny-desktop-app",
  "version": "0.1.0",
  "description": "Evernote tiny desktop app",
  "main": "src/main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "kawaponuZ",
  "license": "MIT",
  "devDependencies": {
    "electron": "^11.2.1"
  }
}

npm install を行います

npm install

package-lock.json ファイルが作成されます。

Windows用にビルドします。

npx electron-packager . tinyevernote --platform=win32  --arch=x64 --overwrite

MacOS用にビルドします。（MacOSでしか出来ない？）

npx electron-packager . tinyevernote --platform=darwin --arch=x64 --overwrite

Linux用にビルドします。

npx electron-packager . tinyevernote --platform=linux  --arch=x64 --overwrite

４．動作確認

４．(1) Evernoteの初期画面

f:id:kawapon2nd:20210123151908p:plain

４．(2) GMailでのEvernoteへのログイン

f:id:kawapon2nd:20210123151916p:plain

４．(3) Evernoteのデータ処理中

f:id:kawapon2nd:20210123151928p:plain

４．(4) Evernoteの閲覧と編集

f:id:kawapon2nd:20210123151939p:plain

ElectronはJavaScriptエンジンがGoogle V8ということもあって、快適に動作します。機能面で言うと、付け足したいものもあるのですが、ひとまずここまで動けば後で都度いじればいいと思っています。

そしてこれから

と、ここまでやって、やっぱりLinuxのコマンドラインで作業しないと効率が悪いので

Mac、Linuxの作業が捗る別な方法を考えています（今は言えませんが）。

ぽぬメモ！

ただのゲーム好きオヤジ