---
title: "Electronで手軽にデスクトップアプリを作ってみる"
canonical_url: "https://olein-design.com/blog/try-to-built-app-by-electron"
language: "ja"
date_published: "2020-05-17T11:20:47+09:00"
date_modified: "2020-05-17T11:20:47+09:00"
content_type: "post"
author: "久野晃司"
taxonomies:
category:
- "Web制作豆知識"
post_tag:
- "Electron"
- "JavaScript"
---
# Electronで手軽にデスクトップアプリを作ってみる
Electronとは、クロスプラットフォームなアプリをJavaScriptで作成することができるフレームワーク（？）みたいなものです。
こちらのツイートをタイムラインで拝見して、こういうことがサクッと実行できるのって楽しいだろうな、と思い少し調べてみました。
https://twitter.com/nabettu/status/1261431274717102081?s=20
すると、手軽に試してみることができそうだったので、子供が横で学習している間にサクッと試してみました。参照した記事はこちらになります。
[埋め込みコンテンツ](https://qiita.com/nyanchu/items/15d514d9b9f87e5c0a29)
## まずは作る前に準備
### node.jsを入れる
```
$ brew install node
```
まず、node.jsは入れておきましょう。入っているか確認する場合は、
```
$ node -v
```
とかでバージョン番号が出ていれば入っているということになります。
### Electronを入れる
Electronをインストールします。
```
$ npm -g install electron-prebuilt
```
## Electronでアプリケーションを作る
### プロジェクトの作成
僕はサクッと試しただけだったので、デスクトップに作成しました。
```
$ cd desktop
$ mkdir electron-sample
$ cd electron-sample
$ npm init -y
```
これで`package.json`が作られます。ElectronのQuick Startというのがまずmain.jsを読みにいくそうなので、`package.json`の`"main":`を`index.js`から`main.js`に変更しておきます。
実際、僕はここの変更をするのを忘れていて、エラー内容で検索して、こちらの記事などを参照しながら進めていました。
[埋め込みコンテンツ](https://qiita.com/gekkoukisi/items/169048df54855e75fe77)
### `main.js`の作成
では、JavScript部分を作っていきます。
```
'use strict';
const electron = require( "electron" );
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow;
app.on( 'window-all-close', function(){
if ( process.platform != 'darwin' ) {
app.quit();
}
});
app.on( 'ready', function(){
mainWindow = new BrowserWindow( { width: 800, height: 600 } );
mainWindow.loadURL( 'file://' + __dirname + '/index.html' );
mainWindow.on( 'closed', function(){
mainWindow = null;
});
});
```
### `index.html`を作る
とりあえずテストなので、`Hello World`を表示させるだけのHTMLファイルを作成します。
```
Electron Sample
Hello World
```
## 実行してみる
では、実行してみます。
```
$ cd ../ #desktopに戻る
$ electron electron-sample/
```
と実行します。すると、
こんな感じで出力されます。もうできた！
## アプリケーションをアーカイブ化する
このままでは僕しか使えないので、アーカイブ化します。npmで`asar`というツールを使います。
```
$ npm install -g asar
```
そして、アーカイブ化してみます。
```
$ asar pack ./electron-sample ./electron-sample.asar
```
こうすることで、僕の環境だとデスクトップにアーカイブされたフィルが作成されます。
実行してみましょう。
```
$ electron electron-sample.asar
```
すると、
先ほどと同じようにアプリを起動することができました。
## アプリケーションの形にパッケージ化する
このままでは、Electronをインストールしている人しか使えないアプリになってしまうので、誰でも実行できるようなアプリの形にパッケージングしてあげる必要があります。
```
$ npm i electron-packager -g
```
その後、パッケージングします。
****electron-packagerで404が出た場合**こちらの記事を参照しました。
[https://qiita.com/takepan/items/1012b0b67ef6a81e1612](https://qiita.com/takepan/items/1012b0b67ef6a81e1612)
```
$ electron-packager ./electron-sample electron-sample --platform=darwin --arch=x64 --electron-version=8.2.0
```
これでパッケージ化が完了してアプリとして使えるようになります。
## まとめ
このように簡単にElectronを使ってアプリを作ることができます。しかも、常日頃使っているHTMLやCSS、JavaScriptを使ってアプリを作れるというのが刺激的ですね。今後色々と試してみたいと思います。
[埋め込みコンテンツ](https://www.electronjs.org/)