elec1

Electron でアプリケーション

時計の例

インストール（node.js）
- たとえば scoop パッケージマネージャだと、以下のコマンド（他のパッケージマネージャの場合と、オフィシャルサイトから直接入手する方法はここでは省略する）。
```
scoop install nodejs
```
アプリケーションフォルダ
```
mkdir app1      -- 名前は何でもいい
cd app1
npm init -y
npm i -D electron
```
package.json（initで作られる）をはじめとして沢山のファイルが作られる
起動するか確認
```
node_modules¥.bin¥electron --version
```
外枠のHTMLファイル（必要最小限）
- ここでは名前を index.html としておく（次項のJSから読み込ませる）
- あとでアプリケーションに応じた内容を追記することにしておく
```
<!doctype html>
<div>起動した</div>
```
起動用JSファイル
- ステップ 2. で生成された package.json にデフォルトとして index.js が指定されているのでそれにあわせた名前にしておく。
- electron の準備ができたら窓を生成して、指定されたhtmlファイルを読み込め、という流れ（を追いかけてみて下さい）。
```
const {app, BrowserWindw, BrowserWindow} = require('electron')
function createWindow() {
    const w = new BrowserWindow({
        width: 500,
        height: 150,
        webPreferences: {
            nodeIntegration:false
        }
    })
    w.loadFile('index.html')
}
app.whenReady().then(createWindow)
```
起動スクリプトの準備と、起動
- package.json を（手作業で）編集し、scripts の値として、以下の項目を追加する（ブレースで囲まれた、オブジェクトとして記述してあるので、適切な場所にカンマを入れることを忘れないよう）。
```
"scripts": {
  // ここに他のスクリプトがすでに記入されているかも知れない、それは残しておく
  "start" : "electron ."
},
```
- としておくと、以下のコマンドで起動するだろう
```
npm start
```
  - npm start は npm run start の略記形。npm help で表示される（登録済の）コマンドに限って、run を省略して書ける。
- なお、（授業時の補足として）scripts 項目であるオブジェクト（連想リスト）の最後の要素の末尾にカンマをつけておいて編集時の煩わしさを軽減させる技術（末尾のカンマと呼ばれる）の話をしたが、実際には、例えばマニュアルにも示されるように）JavaScript言語では許容されているが JSON記法では許容されていないのでここでは末尾のコンマは使えないようだ。

時計の動作（とスタイルも設定しておく）

先ほどの index.html を以下にように変えてみる

<!doctype html>
<div id='clk'></div>
<script>
  const clk=document.getElementById('clk')
  setInterval(()=>clk.textContent=new Date().toLocaleTimeString(),1000)
</script>
<style>
body {background-color:#b0c0d0}
div {font-size: 100px}
</style>

配布可能なプログラムにする

いくつかの方法はあるようだが代表的な手順を紹介する

electron-builder をインストール
```
npm i -D electron-builder
```

ビルド用スクリプトを用意する（直接REPLに入れてもいい）

const builder = require('electron-builder');

builder.build({
    config: {
        'appId': 'local.test.app1',
        'win':{
            'target': {
                'target': 'zip',
                'arch': [
                    'x64',
                    'ia32',
                ]
            }
        }
    }
});

（この例は qiita の１記事から借用した）

保存したファイル名を例えば build-win.js とすると、

node build-win

で呼び出せる。

確認：dist フォルダに .exe ファイルが作られている筈