Electronことはじめ

配布できるアプリ開発をしたいと思ってElectronが良さげだと思った。
自分用の備忘録として話題のZennでメモっていきたい。
とりあえずシンプルにvanillaJsでエレクトロン立ち上げから、アプリ化までのまとめ

Electronの始めるときはだいたいここみればわかる

英語に抵抗がないならyoutubeで1時間の講義のショップリスト開発を見てもいい

注意)以下はnpm startコマンドで動かすためのpackage.jsonだが、大文字で書いている部分やiconの画像パスは適宜変えること

{
  "name": "PROJECT NAME",
  "version": "1.0.0",
  "description": "APP NAME",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "package-mac": "electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds",
    "package-win": "electron-packager . --overwrite --asar=true --platform=win32 --arch=ia32 --icon=ICON_PATH/icon.ico --prune=true --out=release-builds --version-string.ProductName=PROJECT NAME",
    "package-linux" : "electron-packager . --overwrite --platform=linux --arch=x64 --icon=ICON_PATH/icon.png --prune=true --out=release-builds"
  },
  "author": "YOUR NAME",
  "license": ""
}

アプリ化したいソースが直下にあるディレクトリでコマンドを打つ

■Macでアプリを作る場合

# npx electron-packager sample SAMPLE_APP --platform=darwin --arch=x64 --overwrite --icon=ntr/img/icons/icon.icns

■windowsでアプリを作る場合
electron builderが入っているとすごくbuildが楽でこっちを使っている
開発フォルダにdistフォルダがあって、その下にパッケージができる

# npm install electron-builder   --save

# npx electron-builder --win --x64 --dir

■おまけ
iconの作成はMacではImage2iconというアプリで無料範囲で可能
windowsはここでできる