Zenn
Closed46

2020/11/23 作業ログ

メモ
作業ログ
分報
unsoluble_sugarunsoluble_sugar

Google AnalyticsからData Studioのダッシュボードにデータ自動変換されてた。

よくわからんけど画面開いてるだけで何かすごい分析してる感出る。

unsoluble_sugarunsoluble_sugar

QiitaのAnalytics全然見てなかったけど今月こんな感じだった。

4年前とかバージョン古い記事参考にして大丈夫かよ…と不安になる。

unsoluble_sugarunsoluble_sugar

Electron環境構築

環境

  • Windows 10
  • npm version.6.13.4
  • Node.js v12.14.1

インストール

npmでelectronインストール

> npm i electron -g
> electron

C:\Users\unsol>npm i electron -g
C:\Users\unsol\AppData\Roaming\npm\electron -> C:\Users\unsol\AppData\Roaming\npm\node_modules\electron\cli.js

> core-js@3.7.0 postinstall C:\Users\unsol\AppData\Roaming\npm\node_modules\electron\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock 

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> electron@11.0.2 postinstall C:\Users\unsol\AppData\Roaming\npm\node_modules\electron
> node install.js

+ electron@11.0.2
added 87 packages from 98 contributors in 20.895s

起動確認

C:\Users\unsol>electron


Electron 11.0.2 - Build cross platform desktop apps with JavaScript, HTML, and CSS
Usage: electron [options] [path]

A path to an Electron app may be specified. It must be one of the following:      
  - index.js file.
  - Folder containing a package.json file.
  - Folder containing an index.js file.
  - .html/.htm file.
  - http://, https://, or file:// URL.

Options:
  -i, --interactive     Open a REPL to the main process.
  -r, --require         Module to preload (option can be repeated).
  -v, --version         Print the version.
  -a, --abi             Print the Node ABI version.

electronの初期画面表示。

一瞬で完全に理解した。

unsoluble_sugarunsoluble_sugar

プロジェクトのディレクトリ作ってnpm initする。

> npm init -y

index.htmlとmain.js作成。

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    Hello World!
  </body>
</html>
main.js
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow;

app.on('window-all-closed', function() {
    if (process.platform != 'darwin') {
      app.quit();
    }
  });

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

  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});

実行

D:\electron_app> electron main.js

なるほど。

unsoluble_sugarunsoluble_sugar
  • 基本Node.js + HTML + CSS
  • Developer tool使える
  • Web系の人ならサクッとデスクトップアプリ開発できる
  • Windows, Mac, Linux向けのマルチプラットフォーム展開が可能
  • スマホアプリ開発で言うTitanium MobileやFirefox OSと同じ
  • かんたん、すごい

unsoluble_sugarunsoluble_sugar

起動時にDev tool開きたい時は app.on('ready', () => {});内でopenDevTools()呼ぶ

  // Developer tool開く
  mainWindow.webContents.openDevTools();
unsoluble_sugarunsoluble_sugar

Windowsでのパッケージング（exeの作成）

Electronのバージョンはelectron -vで確認。
--overwriteオプションで上書き。

> electron-packager . --electronVersion=11.0.2 --overwrite

プロジェクト名 + -win32-x64フォルダにexeが生成される。

exe実行でアプリが起動する。

unsoluble_sugarunsoluble_sugar

exe単体だけ別ディレクトリに持ってきて実行するとffmpeg.dll が見つからないとのエラーで起動しない。

パッケージング方法がよろしくないのかな？
dllを内包するやり方があるのかな。

unsoluble_sugarunsoluble_sugar

パッケージング

> npm run make

outフォルダ配下にelectron-hello-world-win32-x64出力

exe実行でアプリ起動。

exe単体切り出しでの実行でffmpeg.dllエラーになるのは変わらず。そういうもんな気がする。

unsoluble_sugarunsoluble_sugar
index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <link rel="stylesheet" href="index.css">
  </head>
  <body>
    <h1>💖 Hello World!</h1>
    <p>Welcome to your Electron application.</p>
  </body>
</html>
index.js
const { app, BrowserWindow } = require('electron');
const path = require('path');

// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) { // eslint-disable-line global-require
  app.quit();
}

const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
  });

  // and load the index.html of the app.
  mainWindow.loadFile(path.join(__dirname, 'index.html'));

  // Open the DevTools.
  mainWindow.webContents.openDevTools();
};

// 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, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // On OS X 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 (BrowserWindow.getAllWindows().length === 0) {
    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 import them here.
index.css
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: auto;
  max-width: 38rem;
  padding: 2rem;
}
.gitignore
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock
.DS_Store

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# TypeScript v1 declaration files
typings/

# TypeScript cache
*.tsbuildinfo

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env
.env.test

# parcel-bundler cache (https://parceljs.org/)
.cache

# next.js build output
.next

# nuxt.js build output
.nuxt

# vuepress build output
.vuepress/dist

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# Webpack
.webpack/

# Electron-Forge
out/
unsoluble_sugarunsoluble_sugar

Macでの動作確認

環境

  • macOS Catalina バージョン 10.15.6
  • シェル：zsh

Windowsで作った既存のHello worldプロジェクトをクローンしてNPMで実行しようとしたらダメだった。

% npx @electron-forge/cli@latest import

✖ Checking your system

An unhandled error has occurred inside Forge:
Error executing command (yarn --version):
spawn yarn ENOENT
Error: Error executing command (yarn --version):
spawn yarn ENOENT
    at ChildProcess.<anonymous> (/Users/unsoluble_sugar/.npm/_npx/50704/lib/node_modules/@electron-forge/cli/node_modules/@malept/cross-spawn-promise/src/index.ts:162:14)
    at ChildProcess.emit (events.js:314:20)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:274:12)
    at onErrorNT (internal/child_process.js:468:16)
    at processTicksAndRejections (internal/process/task_queues.js:80:21)

npm最新バージョンにしても解決しなかったのと、エラーメッセージにyarn云々書かれてたのでyarnでやることにした。

https://www.electronforge.io/import-existing-project

yarn入ってなかったのでインストール。

yarnのインストール

% npm install -g yarn
% yarn -v
1.22.10

electron-forgeのimport

% yarn add --dev @electron-forge/cli
% yarn electron-forge import

これで実行してみる

% npm start

いけた

unsoluble_sugarunsoluble_sugar

Macでパッケージング試してみた。

% npm run make

Windowsと同様にoutディレクトリ配下にappファイルが出力、起動確認もOK。

Macの方はapp単体で起動できるっぽい

unsoluble_sugarunsoluble_sugar

autoHideMenuBar: trueでメニューバー非表示

index.js
const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    autoHideMenuBar: true
  });

unsoluble_sugarunsoluble_sugar

たぶんこの辺のやつを使えばできそうな気配

  • ブレッドボード
  • ジャンパーワイヤー
  • LED
  • 抵抗器
unsoluble_sugarunsoluble_sugar

ブレッドボードのF6に＋、F7に−を接続。
どこまで突っ込んだら良いのかわからない。

unsoluble_sugarunsoluble_sugar

抵抗器をH3，H6に差す。
ブレッドボードの印字がずれててそもそも位置が怪しい

unsoluble_sugarunsoluble_sugar

J3，J7にジャンパーワイヤーを差す。
もはやこれがジャンパーワイヤーかすら分かっていない。マジで何もわからない。

unsoluble_sugarunsoluble_sugar

冷却ファン使いたかったのでPINの位置は変えた。
(6) -> (11) GPIO17

ピン番号まわりの確認

GPIO.setmode(GPIO.BOARD)で物理ピン番号指定。

  • GPIO.BOARD: 物理ピン番号（左上からの連番）
  • GPIO.BCM: 役割ピン番号

ピン番号確認はpinoutで

$ pinout

Lチカプログラム

lchika.py
#!/usr/bin/env python
# -*- coding: utf-8 -*-

import RPi.GPIO as GPIO
import time

COUNT = 3
PIN = 11
SLEEP = 1

GPIO.setmode(GPIO.BOARD)
GPIO.setup(PIN,GPIO.OUT)
for _ in range(COUNT):
    GPIO.output(PIN,True)
    time.sleep(SLEEP)
    GPIO.output(PIN,False)
    time.sleep(SLEEP)
GPIO.cleanup()
このスクラップは2020/11/23にクローズされました