Electron+Reactでアプリを開発する

・debian 12.6
・vscode 1.89.1
・node 20.13.1
・typescript 5.4.5
・vite 5.2.12
・react 18.3.3
・electron 30.0.9

viteでプロジェクトを作成する。

$ npm create vite sample-app -- --template react-ts

electronをインストールする。

$ cd sample-app
$ npm install --save-dev electron electron-builder

electron用のディレクトリを作成する。

$ mkdir electron/

electronに必要なファイルを作成する。

プロジェクトルートにあるtsconfig.jsonに作成したディレクトリを追加する。

    …
    "include": ["src", "electron"],
    …

preload.tsに定義されたAPIの動作確認のため、App.tsxの適当な場所に下記を追記する。

    …
    <button onClick={() => { alert(window.counterAPI.count()) }}>
        counting via API
    </button>
    …

vite.config.tsに相対パスを使用する定義と、Reactのビルド出力先の定義を追記する。

…
export default defineConfig({
  plugins: [react()],
  base: "./",
  build: {
    outDir: "build/"
  }
})

package.jsonにtypeとmainを定義する。typeはデフォルトでcjsなので削除してしまっても良い。

    …
    "type": "commonjs",
    "main": "build/electron/main.js",
    …

package.jsonに開発用とビルド用のスクリプトを追記する。

    …
    "scripts": {
        …
        "electron:dev": "tsc -p electron/ && electron . & vite",
        "electron:build": "tsc && vite build && tsc -p electron/ && electron-builder --dir"
    },
    …

package.jsonにビルドに必要な情報を追記する。

    …
    "build": {
        "appId": "com.example.sample-app",
        "productName": "SampleApp",
        "files": [
            "build/**/*"
        ]
    },
    …

reactのホットリロードを利用して開発用にアプリを起動する。

$ npm run electron:dev

アプリをビルドする。

$ npm run electron:build

Windowsのbatファイルでウィンドウの存在を確認する

tasklistコマンドを利用して設定ウィンドウが存在するか判定する。

@echo off
set windowtitle=設定
tasklist /FI "WINDOWTITLE eq %windowtitle%" | find "実行されていません" > nul
if %ERRORLEVEL% == 1 (
    echo %windowtitle%が存在します。
)
pause

batファイルで自身の多重起動を防止したい場合は下記のようにするとそれなりに防止できる。

@echo off
set windowtitle=test
tasklist /FI "WINDOWTITLE eq %windowtitle%" | find "実行されていません" > nul
if %ERRORLEVEL% == 1 (
    exit
)
title %windowtitle%
pause

Bashシェルスクリプトの忘れがちな書き方

よくcronで数秒ごとに処理したい場合に使用する。非同期での実行になる。

for i in `seq 0 5 59`; do 
    (
        sleep $i
        echo "$i Running"
    ) &
done;

こちらもcronで多用する。実行時のコマンドライン引数も含めたプロセスを確認して、実行中のプロセスがなければ新しいプロセスを起動するような場合に使用する。

#!/bin/bash
sec="123"
test=$(ps xa 2>/dev/null | grep $sec 2>/dev/null)
if [[ ! $test = *"top -d $sec"* ]]; then
    top -d $sec
fi

Gitの簡単な使い方

「git clone」してから開発する上で、困らないようにするための最低限の備忘録です。

Debian 12.5
Git 2.39.2

設定

ユーザー名とE-mailアドレスを設定する。
設定は~/.gitconfigに保存される。--globalを付けない場合はリポジトリのローカル設定ファイルに保存される。

$ git config --global user.name "username"
$ git config --global user.email "user@hirohiro716.com"

認証情報を平文で記憶させる。
--globalを付けない場合、credential.helperという設定値のみがリポジトリのローカル設定に保存され、認証情報は~/.git-credentialsに平文で保存される。

$ git config --global credential.helper store

基本的な操作

ワークツリーの状態を確認する。

$ git status

リモートも含めてブランチ一覧を表示する。
※-aに省略可能

$ git branch --all

リモートの別のブランチに変更する。

$ git switch branch2

ローカルに現在のブランチの派生ブランチを作成する。

$ git branch branch3

作成したローカルのブランチに切り替える。

$ git checkout branch3

作成したローカルのブランチをリモートにpushする。
※-uに省略可能

$ git push --set-upstream origin branch3

コミット関連の操作

変更したファイルをステージングエリアに追加する。

$ git add test.txt

変更したファイルをすべてステージングエリアに追加する。

$ git add .

commitを作成する。
※-mに省略可能

$ git commit --message "Commit message"

作成したcommitをリモートにpushする。

$ git push

commitのログを表示する。

$ git log

特定ファイルのcommitのログを表示する。

$ git log *.txt

特定のコミットを取り消すコミットを作成

取り消す対象commitを指定する。複数人で開発している場合や、履歴を残したい場合はこちらを使用する。

$ git revert HEAD
$ git push

HEADを前の状態に戻して履歴からも削除

戻したい状態(commit)を指定する。すべてなかったことになるので、個人開発で誤ってpushした場合はこちらを使用する場面が多い。
※HEAD^はHEADの1つ前のcommitを指す
--softで変更ファイルをステージングエリアに残す
--mixedで変更ファイルをステージングエリアから取り除いて残す
--hardですべての変更を破棄してHEAD^の状態に戻す

$ git reset --mixed HEAD^
$ git push --force

LibreOfficeで文字列をテキストファイルへ書き出す

Dim saveFilePath As String
saveFilePath = "/tmp/test.txt"
Dim lines as Object
lines = New Collection
lines.Add("test1")
lines.Add("test2")
Dim simpleFileAccess As Object
simpleFileAccess = CreateUnoService("com.sun.star.ucb.SimpleFileAccess")
If simpleFileAccess.exists(saveFilePath) Then
    simpleFileAccess.kill(saveFilePath)
End If
Dim textOutputStream As Object
textOutputStream = CreateUnoService("com.sun.star.io.TextOutputStream")
Dim outputStream As Object
outputStream = simpleFileAccess.openFileWrite(saveFilePath)
textOutputStream.setOutputStream(outputStream)
textOutputStream.setEncoding("UTF-8")
For Each line In lines
    textOutputStream.writeString(line)
    textOutputStream.writeString(Chr(10))
Next line
textOutputStream.closeOutput()

Debian12.5でアプリケーションのソースコードをダウンロードしてdebを作成する

事前に「Software & Updates」でソースコードのチェックがONになっていることを確認の上、下記コマンドでソースコードをダウンロードする。
※カレントディレクトリにダウンロードされるので作業用ディレクトリで実行したほうが良い

$ apt source gnome-calculator

ビルドに必要なパッケージを自動でインストールしてもらう。

# apt build-dep gnome-calculator

ビルドしてdebファイルを作成する。
※-bオプションはバイナリのみをビルドする指定
※-ucオプションは署名をスキップするために指定

$ cd gnome-calculator-43.0.1/
$ dpkg-buildpackage -b -uc

vscodeでJavaのアプリケーションを開発する

OS: Debian GNU/Linux 12 (bookworm)
vscode: 1.88.1

Java11で簡単なGUIアプリケーションを開発する目的。vscodeに拡張機能をインストールし、mavenを使用してプロジェクトを作成する。

mavenをインストールしてmvnを実行できるようにしておく
Microsoftの拡張機能「Extension Pack for Java」をインストール
コマンドパレットからArchetypeを使用せずプロジェクト作成

下記を参考にpom.xmlを編集後、vscodeのプライマリサイドバーのMAVENから「mvn package」コマンドを実行すると実行可能jarファイルをビルドできる。

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.hirohiro716</groupId>
    <artifactId>example</artifactId>
    <version>latest</version>
    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.source>11</maven.compiler.source>
        <maven.compiler.target>11</maven.compiler.target>
    </properties>
    <build>
        <finalName>${project.name}</finalName>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-jar-plugin</artifactId>
                <version>3.2.2</version>
                <configuration>
                    <archive>
                        <manifest>
                            <addClasspath>true</addClasspath>
                            <mainClass>com.hirohiro716.Example</mainClass>
                        </manifest>
                    </archive>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

Debian12.4でumaskのデフォルト値を変更する

/etc/profileを変更する方法は動作しなかった。調べてみるとsystemdで設定する手段があるらしい。

# vi /usr/lib/systemd/system/user\@.service.d/99-umask.conf

指定する3桁は減算する値を指定する。
例)027の場合はファイルが640(666-027)になりディレクトリが750(777-027)のパーミッションになる

[Service]
UMask=027

ただしこれを実施すると正常に動作しないアプリケーションが出てくる。例えば「gdm-settings」が正常に動作しなくなる。理由はアプリケーション側がumaskを変更している環境を考慮していないため、アクセスできないファイルが生成されるからだと思われる。なので、そのファイルを下記コマンドで見つけ出し適切なパーミッションを設定すれば解決する。
※分数は実施した時刻に合わせて適当に
※おそらく/usr/とか/etc/とかだと思う

# find /etc/ -mmin -10
# find /usr/ -mmin -10