【nodeschool】elementary-electronをやってみる

# はじめに

コマンドラインベースでNode.jsを学習できるNodeSchoolという素晴らしいサービスがあります。
https://nodeschool.io/

すでにメイン？の`learnyounode`コースは終了したのですが、ほかにも面白そうなコースがあるので今回は`elementary-electron`をやってみます。

Electronでデスクトップアプリを作る方法を学べるようです。

# やってみる

適当な場所で

```Bash
npm install -g elementary-electron
```

として、学習用のライブラリをインストールします。

またまた適当な場所で

```Bash
mkdir elementary-electron
cd elementary-electron
```

として、ここを作業ディレクトリにすることにします。

学習をする際は

```Bash
elementary-electron
```

と叩けば、コースの選択画面を表示することが出来ます。
今回のコースには以下の5つの章があるようです。早速やっていきましょう。

* Installing
* Hello World
* Cat Picture
* Cat Annotation
* Save PDF

## Installing

インストールするだけですね。既にインストール済みの人であれば何もしなくてもクリアです。

```Bash
npm install -g electron
elementary-electron verify
```

## Hello World

いつものHello Worldを出すだけのアプリを作ります。

### index.html

```html
<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <h1>Hello World</h1>
</body>

</html>
```

### app.js

```JavaScript
const electron = require('electron')

electron.app.on('ready', () => {
  const mainWindow = new electron.BrowserWindow({ width: 600, height: 800 })
  mainWindow.loadURL(`file://${__dirname}/index.html`)
})
```

実行してみます。

```Bash
electron app.js
```

![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/269717/995a26e8-20cc-7c07-255c-c05b957642d0.png)

アプリが表示されました！

## Cat Picture

猫の写真を表示するアプリを作るようですね。
まずは

```Bash
npm init
```

で`package.json`を生成しつつ、`cat-picture`モジュールをインストールします。

```Bash
npm install --save cat-picture
```

`cat-picture`を読み込む`index.js`を作りつつ、それを`index.html`で読み込むように設定します。

### index.html

```html
<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <h1>Hello World</h1>
  <script type="text/javascript" src="index.js"></script>
</body>

</html>
```

### index.js

```javascript
require('cat-picture')
```

![キャプチャ2.PNG](https://qiita-image-store.s3.amazonaws.com/0/269717/140ae1f0-b860-7c22-c239-e35e5b171bbd.png)

猫の画像がちゃんと出ました。

## Cat Annotation

先ほどのアプリをさらに改造していきます。
まずは必要なモジュールを追加でインストールしつつ

```bash
npm install --save lightning-image-poly
```

### index.html

```html
<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <h1>Hello World</h1>
  <div id="visualization"></div>
  <script type="text/javascript" src="index.js"></script>
</body>

</html>
```

### index.js

```javascript
const picture = require('cat-picture')
const image = require('lightning-image-poly')

const src = picture.src
picture.remove()

const viz = new image('#visualization', null, [src], { hullAlgorithm: 'convex' })
```

謎にポリゴンが描けますね（動画を撮っていたのですが消えてしまいました）。
とりあえずこれでクリアです。

## Save PDF

先ほどのポリゴンをPDFに保存できるようにするそうです。

### index.js

```javascript
const picture = require('cat-picture')
const image = require('lightning-image-poly')
const { remote } = require('electron')
const fs = require('fs')

const src = picture.src
picture.remove()

const viz = new image('#visualization', null, [src], { hullAlgorithm: 'convex' })

const save = () => {
  remote.getCurrentWebContents().printToPDF({
    portrait: true
  }, (err, data) => {
    fs.writeFile('annotation.pdf', data, err => {
      if (err) alert(`error generating pdf! ${err.message}`)
      else alert('pdf saved!')
    })
  })
}

window.addEventListener('keydown', e => {
  if (e.keyCode == 80) save()
})
```

アプリを開いてPキーを押すと`elementary-electron`のディレクトリに`annotation.pdf`がちゃんと保存されました。
これでコースは修了です。

# おわりに

`learnyounode`コースはお題とヒントだけが与えられて、自分で考えて試行錯誤しながら解いていく形式だったので結構やりがいがあったのですが、今回のコースは説明文に書いてある内容ですべてクリアできてしまいました。

コースをこなしながら同時に本記事を書いていたのですが、20分そこらでElectronの導入を触れるのは良い感じですね。次回はもう少し難易度の高いコースをやってみたいと思います。