現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます！

今回はAngular7 + ELectronで、以下のようなシンプルなデスクトップアプリを作成して誰でも使えるアプリケーションとして配布するまでの道筋を紹介します。

Electronの概要

JavaScript＋HTML＋CSSで、OSx、Windows、Linuxに対応したデスクトップアプリケーションが作成できるオープンソースのソフトウェアフレームワーク。

Slack、skype,Insomnia,postman,,Atom,Boostnote(日本)などがElectronで作られたデスクトップアプリケーションとして有名。

ELECTRON

Electron+Angular7環境構築

アプリの作成とElectronのインストール

ng new electron-app
cd electron-app
npm install --save-dev electron

main.jsファイルの編集

まずはmain.jsファイルを作成します。

touch main.js

main.jsに以下のcodeを貼り付けてください
公式に乗っているcodeで、アプリケーションアイコンをクリックすると開くなど、アプリケーションが遭遇するすべてのシステムイベントを処理するコードです。

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

  // Keep a global reference of the window object, if you don't, the window will
  // be closed automatically when the JavaScript object is garbage collected.
  let win

  function createWindow () {
    // Create the browser window.
    win = new BrowserWindow({ width: 800, height: 600 })

    // and load the index.html of the app.
    win.loadFile('index.html')

    // Open the DevTools.
    win.webContents.openDevTools()

    // Emitted when the window is closed.
    win.on('closed', () => {
      // Dereference the window object, usually you would store windows
      // in an array if your app supports multi windows, this is the time
      // when you should delete the corresponding element.
      win = null
    })
  }

  // This method will be called when Electron has finished
  // initialization and is ready to create browser windows.
  // Some APIs can only be used after this event occurs.
  app.on('ready', createWindow)

  // Quit when all windows are closed.
  app.on('window-all-closed', () => {
    // On macOS it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin') {
      app.quit()
    }
  })

  app.on('activate', () => {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (win === null) {
      createWindow()
    }
  })

  // In this file you can include the rest of your app's specific main process
  // code. You can also put them in separate files and require them here.

次にこのmain.jsのwin.loadFileを以下のように書き換えてください。

win.loadFile('dist/アプリ名/index.html')

index.htmlの編集

　<base href="/">を消して
  <base href="./">を追加

package.jsonの編集

3行目にmainの方を、
scriptsの一番下に以下のコードを追加してください。

"main": "main.js",
"electron": "ng build && electron ."

折角なのでSPAっぽくしていく

AngularMaterial&cdkのインストール&セットアップ

npm install --save @angular/material @angular/cdk
ng add @angular/material

Angular6で追加されたスタートダッシュコンポーネントを作成します。

ng generate @angular/material:material-nav --name=my-nav

最後にapp.component.htmlに移動して、以下のコードを貼り付けてください

<app-my-nav></app-my-nav>

起動

npm run electron

アプリケーションを配布できるように

electron-packagerのインストール

electron-packagerは。誰でもデスクトップアプリを実行できるように、実行環境ごとまとめてくれるツールです。

Electron Packager

npm i electron-packager -g

MacとWindows向けにパッケージング

electron -v

でバージョンを確認することができるので、最後の3.0.6の部分を変更して以下のコードを打ってください。

electron-packager ./desktop-app desktop-app --platform=darwin,win32 --arch=x64 --electronVersion=3.0.6

パッケージングには少し時間がかかります（3、４分かかりました）。
パッケージングが終わるとこのように、Mac用と、Windows用のアプリディレクトリが作成されます。

Macは.app、Windowsは.exeをダブルクリックでアプリケーションを実行できるのが確認できます。

お疲れ様でした＆追記

これで、あとはガツガツ書いていくだけなのではないでしょうか！

MacAppStoreに登録する手順はこちらが参考になりそうだなと感じました。
Electron アプリを Mac App Store に登録する手順 – Qiita

参考リンク
Writing Your First Electron App | Electron
Electronでアプリケーションを作ってみよう – Qiita

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

WINDII

WINDII（ウィンディ）は、フリーランスエンジニアが運営するテックメディアです。 日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします！ また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

最新記事 by WINDII (全て見る)

• Nuxt.js + Contentful。HeadlessCMSでポータルサイトを作る - 2019年12月28日
• IOSアプリをAppStoreに公開する手順書（Ionic） - 2019年9月11日
• IonicAcademyでIonic＆Angularでのアプリ開発を学ぶ - 2019年8月30日