Vite を使って作ったものを Electron アプリとしてバイナリ化する

この記事を作った動機 最近以下の組み合わせでフロントエンドを簡易的に書くということをしていた。 Vite React TypeScript Tailwind CSS zustand それでとりあえず機能的な意味では最低限適当にとりあえず動くという意味ではできたので、気軽に使えるようにしたいと思い、HTTPサーバとか一時的に立てずに、すぐに使えるようにしたかったので、一つのバイナリとしてまとまっていると良いと思った。 そこで色々試したところ、プロジェクト内にElectornプロジェクトを新規作成して、作ったコードをその中のRenderというフォルダ内にそのままコピーし、それをelectron-builderを使って各プラットフォーム向けに一つのバイナリとして作れそうだと調べてみて思った。それでいつものようにそれを実際にやって動くまでがめんどくさかったのでその記録を取る。 バイナリ完成までの試した手順 ※ コマンド実行における作業ディレクトリはViteプロジェクトのルートとする。 Vite プロジェクトを用意する プロジェクトの新規作成 npm create vite # Need to install the following packages: # create-vite@8.2.0 # Ok to proceed? (y) y # # # > npx # > "create-vite" # # │ # ◇ Project name: # │ createElectornAppTest # │ # ◇ Package name: # │ createelectornapptest # │ # ◇ Select a framework: # │ React # │ # ◇ Select a variant: # │ TypeScript # │ # ◇ Use rolldown-vite (Experimental)?: # │ No # │ # ◇ Install with npm and start now? # │ No # │ # ◇ Scaffolding project in /home/username/work/createElectornAppTest... # │ # └ Done. Now run: # # cd createElectornAppTest # npm install # npm run dev ライブラリのインストール npm install zustand npm install tailwindcss @tailwindcss/vite npm install # Command not found が出てきたとき Tailwind CSS の設定 以下を参考にして Tailwind CSS を機能するように設定する。 ...

January 4, 2026

React を使った Web アプリを Android アプリにしたい

この記事を作った動機 React で作った Web アプリを Android に移植しようとしたら超絶めんどくさかったので、記録するだけ。 自分の試した構成 Vite React TypeScript Android Studio (with SDK) npm create vite@latest 使った汎用コマンド集 すべての環境変数をリスト (Windows,PowerShell) gci env:* | sort-object name 環境変数を新規作成 (Windows,PowerShell) # 具体例 ANDROID_HOME にパスを設定する $env:ANDROID_HOME = "C:\Users\[userName]\AppData\Local\Android\Sdk" 特定の環境変数に対してパスを追加 (Windows,PowerShell) # 具体例 ANDROID_HOME にパスを追加設定する $env:ANDROID_HOME += ";C:\Users\[userName]\AppData\Local\Android\Sdk" 準備 Capacitor を使えるようにする 必要なパッケージのインストール npm i @capacitor/core npm i @capacitor/android 初期化する npx cap init android 向けに初期化する npx cap add android ANDROID_HOMEを設定する エラー例 Android SDK のパスが、ANDROID_HOMEとして環境変数に設定されていない場合は、以下のようなエラーが出てくる。 npx cap build android # × Running Gradle build - failed! # [error] # > Configure project :app # WARNING: Using flatDir should be avoided because it doesn't support any meta-data formats. # > Configure project :capacitor-cordova-android-plugins # WARNING: Using flatDir should be avoided because it doesn't support any meta-data formats. # FAILURE: Build failed with an exception. # * What went wrong: # Could not determine the dependencies of task ':app:bundleReleaseResources'. # > SDK location not found. Define a valid SDK location with an ANDROID_HOME environment variable or by setting # the sdk.dir path in your project's local properties file at 'C:\Users\userName\work\TODOListApp\TODO # List\android\local.properties'. # * Try: # > Run with --stacktrace option to get the stack trace. # > Run with --info or --debug option to get more log output. # > Run with --scan to get full insights. # > Get more help at https://help.gradle.org. # BUILD FAILED in 1s ...

November 21, 2025

Blender で出力した STL ファイルを Cura でうまくスライスできない

この記事を作った動機 Blender と Cura を使って、なんか印刷しようとしていたところ、つくったモデルが思うようにスライスできないことが分かったので、その対処方法について自分用に記録をする。 調べてみてもすぐにははっきりとしたことはわからず、全部のモデルの整合性に問題があるケースという意味では、全然網羅できてないと思うが、最終的に自分なりに心当たりのある部分を当ってみた感じにはなった。 Cura 上での挙動 問題があるとき モデルに問題があり、正常にスライスできない可能性があると、エラーメッセージが表示され、水色とピンク色であらわされる不適切な部分を示す領域がモデル上に表示される。 問題ながないとき 水色とピンク色であらわされる不適切な部分を示す領域が表示されることなく、エラーメッセージも出てこない。 ポイント 面が反転している 問題点の例 対応例 Blender 面を反転する に記録した。 余計な面が内部に隠れている 問題点の例 対応例 Edit モードで、単純に余計な面を選択して消す。 面が重なってつながっていない部分がある 問題点の例 対応例 重なっているだけでうまくつながっていない面を消し、作り直す。 面を削除する 面の作り直し 必要な辺や点を選択してから、Fキーを押すことで面を新たに作成する。 面を作り直して、全体的に整合性が取れた様子 参考にしたサイトとか Why am I getting “Your model has missing or extraneous surfaces” popups in Ultimaker Cura? https://support.makerbot.com/s/article/1633018228456 (2025年11月7日) Missing or extraneous surfaces warning in Cura : r/3Dprinting https://www.reddit.com/r/3Dprinting/comments/n6ff1w/missing_or_extraneous_surfaces_warning_in_cura/ (2025年11月7日) Flip Normals (inverted faces) – Blender Knowledgebase https://www.katsbits.com/codex/flip-normals/ (2025年11月7日) How do I flip the normal on this polygon? : r/blender https://www.reddit.com/r/blender/comments/1fbcqwc/how_do_i_flip_the_normal_on_this_polygon/ (2025年11月7日)

November 7, 2025

Blender 面を反転する

この記事を作った動機 地味に面を反転する方法がわかりづらかったので自分用に改めて記録する。 やり方 面を反転するオブジェクトを選択する 面の向きを表示する edit モードに入る 反転する面を選択する 面を反転する 面の向きが反転した後 参考にしたサイトとか Flip Normals (inverted faces) – Blender Knowledgebase https://www.katsbits.com/codex/flip-normals/ (2025年11月7日) How do I flip the normal on this polygon? : r/blender https://www.reddit.com/r/blender/comments/1fbcqwc/how_do_i_flip_the_normal_on_this_polygon/ (2025年11月7日)

November 7, 2025

Blender PythonAPI スクリプト集

この記事を作った動機 Blender には、Python APIがあり、スクリプトを自由に書いて実行でき、いろいろ操作できるというのがある。しかし、なんかドキュメント見たりいちいち調べると、なんか同じことばっかり調べたりしていて、そうこうしているうちに、めんどくさくなって使う気がなくなっていくということがあった。 そこで、自分で記録しておきたいと思ったことをここに適当にぶちまけようという発想をしてみた。特定の操作をするために小さなスクリプトについて、だらだら記録をここにためたいと思う。 ちょっとしたスクリプトリスト Lightという名前の光源の明るさを変更したい for a in [target for target in bpy.data.objects.keys() if "Light" in target]: bpy.data.objects[a].data.energy = 20 参考にしたサイトとか API Reference Usage - Blender Python API https://docs.blender.org/api/current/info_api_reference.html (2025年10月28日) How do I select specific elements from an array in python? - Stack Overflow https://stackoverflow.com/questions/66497607/how-do-i-select-specific-elements-from-an-array-in-python (2025年10月28日) python - what is the quickest way to iterate through a numpy array - Stack Overflow https://stackoverflow.com/questions/40593444/what-is-the-quickest-way-to-iterate-through-a-numpy-array (2025年10月28日)

October 28, 2025

named のキャッシュを消す

この記事を作った動機 ある時、ChatGPT を使っていて、うまく設定が読み込めないという時があったときにそれについて調べてみたら、DNS 周りのキャッシュがおかしい説というのがあり、named のキャッシュを消そうとしてやり方がわからなかったので、自分用に記録するだけ。 設定する 少なくとも私の環境では、最初から rndc コマンドは使えるようになっておらず、設定が必要だった。rndc-confgen を使うことで、コンフィグは生成できるので、出てきたものをそれぞれ、named.conf と rndc.conf に貼り付ければとりあえずは動いた。 まだ設定がないときの rndc コマンドの挙動 sudo rndc status # rndc: no server specified and no default rndc status -s localhost # rndc: no server specified and no default rndc-confgen で設定を生成する # sudo rndc-confgen [sudo] share のパスワード: # Start of rndc.conf key "rndc-key" { algorithm hmac-sha256; secret "secretString"; }; options { default-key "rndc-key"; default-server 127.0.0.1; default-port 953; }; # End of rndc.conf # Use with the following in named.conf, adjusting the allow list as needed: # key "rndc-key" { # algorithm hmac-sha256; # secret "secretString"; # }; # # controls { # inet 127.0.0.1 port 953 # allow { 127.0.0.1; } keys { "rndc-key"; }; # }; # End of named.conf 設定を貼り付ける /etc/rndc.conf (なければ作成する) key "rndc-key" { algorithm hmac-sha256; secret "secretString"; }; options { default-key "rndc-key"; default-server 127.0.0.1; default-port 953; }; /etc/named.conf (追記する) key "rndc-key" { algorithm hmac-sha256; secret "secretString"; }; controls { inet 127.0.0.1 port 953 allow { 127.0.0.1; } keys { "rndc-key"; }; }; systemd で named を再起動する sudo systemctl restart named キャッシュを削除する sudo rndc flush 参考にしたサイトとか rndc 鍵 (rndc.key) の作成 - hijiri-0404’s blog https://hijiri0404.hatenablog.com/entry/2015/03/05/000245 (2025年10月2日) domain name system - DNS on Redhat - rdnc: no server specified and no default - Server Fault https://serverfault.com/questions/231749/dns-on-redhat-rdnc-no-server-specified-and-no-default (2025年10月2日) BIND のキャッシュを消去する (CentOS 5.5): Linux の使い方 https://ez-net.jp/article/28/KPrxdINA/6oV8mNixA7et/ (2025年10月2日)

October 2, 2025

cron が動かない

この記事を作った動機 cron を使ってみようと思って重い腰を持ち上げてみたら、意図したとおりにうまく動かせずにつまずいたのでその記録をとるだけ。うまくわかった気がしないし、間違いがあるかもしれないが、ご了承ください。 cron の構造 # 分 時 日(一か月単位) 月 日(一週間単位) * * * * * /path/to/script.sh 確認事項 cron はインストールされているか? yay -Qs cron # pacman -Qs cron # local/cronie 1.7.2-1 # Daemon that runs specified programs at scheduled times and related tools エディターを設定したか? デフォルトだと vi が利用されるようになっており、不便なことがあると思うので設定した方がいいかも。 # neovim -> "nvim" に設定 # visual studio code -> "code" に設定 export EDITOR=nvim echo $EDITOR # nvim cron サービスが実行されているか? 確認 systemctl status cronie # systemctl status crond # ● cronie.service - Command Scheduler # Loaded: loaded (/usr/lib/systemd/system/cronie.service; enabled; preset: disabled) # Active: active (running) since Mon 2025-07-28 21:53:50 JST; 1h 7min ago # Invocation: 748b761f9921445f8a759eb430f3507f # Main PID: 354161 (crond) # Tasks: 2 (limit: 629145) # Memory: 1.3M (peak: 4.5M) # CPU: 1.667s # CGroup: /system.slice/cronie.service # ├─354161 /usr/sbin/crond -n # └─355485 /usr/sbin/anacron -s # # 7月 28 22:58:00 hostName CROND[361012]: (username) CMDEND (/path/to/script.sh) # 7月 28 22:58:00 hostName CROND[361012]: pam_unix(crond:session): session closed for user username # 7月 28 22:59:00 hostName crond[361097]: pam_unix(crond:session): session opened for user username(uid=1000) by username(uid=0) # ... 有効化 systemctl enable --now cronie # systemctl enable --now crond 例(crontab -l の内容) 毎分実行 * * * * * /path/to/script.sh 各時間 5 分目に実行 0時 5分に実行 1時 5分に実行 2時 5分に実行 … ...

July 28, 2025

メッセージボックスを出す

この記事を作った動機 単に簡易的にメッセージボックス的なものを出す方法を記録するだけ。Toast とかいう名前の API で、win32 API とかの MessageBox と比べて、だいぶ非直感的な名前な気がする。まあ多用すれば慣れるってことなんでしょうけど。。。 メッセージを出す 今回は、ボタンを押したらメッセージが出てくるようにする例を置いてみる。 // 呼び出されたアクティビティの onCreate 関数内にて val registerButton = findViewById<Button>(R.id.Register) registerButton.setOnClickListener{ Toast.makeText(this, "test", Toast.LENGTH_SHORT).show() finish() } 参考にしたサイトとか Toasts overview | Android Developers https://developer.android.com/guide/topics/ui/notifiers/toasts (2025年6月24日) MessageBox function (winuser.h) - Win32 apps | Microsoft Learn https://learn.microsoft.com/en-us/windows/win32/api/winuser/nf-winuser-messagebox (2025年6月24日)

June 24, 2025

前のアクティビティに戻る

この記事を作った動機 アクティビティの遷移方法をたんに記録するだけ。今回は二つの実装について書く。一つは単に、前のアクティビティに戻るだけで、もう一つは何か処理をしてから戻る方法について書く。 ただ戻るだけの時 具体的な処理をしない場合については以下のように実装できる。AndroidManifest.xml に親アクティビティ(android:parentActivityName)を設定する。コードは不要な模様。 ... <activity android:name=".loginActivity" android:exported="false" android:label="@string/login_activity" android:parentActivityName=".shareFolderListActivity1"/> ... 何か処理をしてから戻りたいとき 今回の場合でいえば、登録ボタンを押したら、フォームに打たれた情報をもとに何かしら処理を施してから元のアクティビティに戻りたい時は、以下のように finish() を呼び出す。 ... // 呼び出されたアクティビティの onCreate 関数内にて val registerButton = findViewById<Button>(R.id.Register) registerButton.setOnClickListener{ // 何かしらの処理 finish() } ... 参考にしたサイトとか How to Go Back to Previous Activity in Android? - GeeksforGeeks https://www.geeksforgeeks.org/how-to-go-back-to-previous-activity-in-android/ (2025年6月24日) Go Back to Previous Activity in Android https://www.tutorialspoint.com/how-to-go-back-to-previous-activity-in-android (2025年6月24日)

June 24, 2025

アクティビティを呼び出す

この記事を作った動機 ちょっと自分のために、アクティビティの呼び出し方をまとめるだけ。今回はボタンが押されたら、特定のアクティビティを呼び出すという動作について、例を載せておく。 アクティビティの呼び出し方(onCreate 関数内) val loginUIcall = findViewById<FloatingActionButton>(R.id.loginUIcall) loginUIcall.setOnClickListener { val activity = Intent(this,loginActivity::class.java) startActivity(activity) } 参考にしたサイトとか インテントとインテント フィルタ | App architecture | Android Developers https://developer.android.com/guide/components/intents-filters?hl=ja (2025年6月22日)

June 22, 2025