星影

昨日やったこと

やること

ZennのGoogle Analyticsチラ見
Qiitaアドベントカレンダー用にElectron触る
ラズパイでLチカする
会社のLT資料作る
お仕事の設計資料作る

星影

機能ZennのGoogle Analytics設定したので計測結果確認。

14時～の計測で238PV

完全に理解した勉強会の記事が人気だったみたい。

ユーザー層的にWeb系の記事が需要あるのかな？
他の記事も出してみないとちょっとわからないけど。体感的にはそんな気がする。

星影

11/26(木)開催の勉強会のLTタイトルが出揃った。楽しみ。

LT1: 複式簿記完全に理解した @k-tky
LT2: Rustの所有権システム完全に理解した @kfurumiya
LT3: 1on1完全に理解した @omokawa_yasu
チャレンジコーナー: DFDをモブプログラミングしてみる3(仮)

星影

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

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

星影

はいかイエスで答えろみたいなやつマジやめーや

星影

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

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

星影

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の初期画面表示。

一瞬で完全に理解した。

星影

Electron v11.0.2
Chromium v87.0.4280.67
Node v12.18.3v8
v8.7.220.25-electron.0

星影

プロジェクトのディレクトリ作って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

なるほど。

星影

あとでMacでも見てみよう

星影

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

星影

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

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

星影

パッケージングツールのインストール

> npm i electron-packager -g

星影

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

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

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

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

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

星影

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

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

星影

Electron、Apple Siliconもサポートしてた

星影

どうやらいまは electron-packager ではなく electron-builder が主流のようなので見てみる。

星影

electron-builderインストール

> npm install -D electron-builder

星影

gitリポジトリ上げるときにnode_modulesのプッシュ不要なのでついでに.gitignore記述した。

星影

Getting Started 見てやるのが正しかったのでやり直し。
https://www.electronforge.io/

インストール

> npx create-electron-app my-app

起動

> cd my-app
> npm start

星影

やはり適当な古いQiita記事はあてにならんな（Zenn集中の呼吸）

星影

パッケージング

> npm run make

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

exe実行でアプリ起動。

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

星影

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/

星影

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でやることにした。

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

いけた

星影

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

% npm run make

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

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

星影

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

index.js

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

星影

久しぶりにラズパイいじるぞ

星影

なにもわからない

星影

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

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

星影

LEDは足の長い方が＋

星影

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

星影

場所ほんとに合ってるのかこれ

星影

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

星影

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

星影

差そうとしてるところに冷却ファンのピンが被ってたので抜く

星影

抵抗器330Ωが良さそうだったので差し替えた。こわい

星影

ここに差した

星影

実　績　解　除

星影

爆発しなくてよかった

星影

あ、動画がアップできない…

星影

GIF画像は1.5MB以下か

星影

これでどや

星影

冷却ファン使いたかったので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()

星影

ラズパイでLチカしてみた記事書いた

星影

LTネタこんなところかなぁ

雑にVTuberの話
10～15分程度で軽く
キズナアイ古参勢アピール
Vの者概要
超簡略歴史
経済圏を広げるV
なれる！Vtuber

星影