みかづきブログ・カスタム

基本的にはちょちょいのほいです。

Electron

Electronでディベロッパーツールの起動を禁止する 🚫

結論 const { app } = require('electron'); const window = new BrowserWindow({ width: 375, height: 812, webPreferences: { devTools: false } }); と、BrowserWindowのインスタンスを作成する際に渡すオプションでディベロッパーツールを無効化できる。…

Electron + Next.jsの開発で、yarn devを実行した際にエラーが発生する際の対策(Error [ERR_REQUIRE_ESM]: require() of ES Module /node_modules/electron-next/node_modules/electron-is-dev/index.js from /node_modules/electron-next/index.js not supported. 編) 💪

ことの発端 普段、Electronアプリを制作する際は、 Next.jsのElectron + TypeScriptのexample を使っています。github.com yarn create next-app --example with-electron-typescript app-nameで、Electron + Next.jsの雛形が作成できるので非常に便利です。…

Electron + Next.jsの開発で、yarn devを実行した際にエラーが発生する際の対策(UnhandledPromiseRejectionWarning: TypeError: Class extends value undefined is not a constructor or null 編) 💪

ことの発端 普段、Electronアプリを制作する際は、 Next.jsのElectron + TypeScriptのexample を使っています。github.com yarn create next-app --example with-electron-typescript app-nameで、Electron + Next.jsの雛形が作成できるので非常に便利です。…

ElectronでBrowserWindowにlocalhostを表示する 💻

ElectronでBrowserWindowにlocalhostを表示するコードを書きました。 PC内に既にlocalhostが立ち上がっていればそれをそのまま、立ち上がっていなければ起動してからBrowserWindowに表示します。 静的なサーバを起動するだけなので、Expressは必要ないのです…

Azure Kinect DKにElectronからアクセスする 📷

Azure Kinect DKをNode.jsやElectronから使うためのライブラリを見つけたので試してみようと思います。github.com Azure Kinect DKとは azure.microsoft.com Azure Kinect は、洗練されたコンピューター ビジョンと音声モデル、高度な AI センサー、Azure Co…

electron-packagerでWindowsアプリを書き出すときにアイコンを指定する 🖼

かつて、electron-packageでMacアプリを書き出す際の調査結果をまとめました。blog.kimizuka.org今回は、Windowsアプリバージョンです。 試したこと まずは、単純に、 electron-packager . 'アプリ名' --icon=icon.png --platform=win32 --arch=x64 と、png…

Next.js + Electronでアプリを開発する際にpublicディレクトリを使う 📁

最近、Electronアプリを制作する際は、 Next.jsのElectron + TypeScriptのexample を使っています。github.com先日、 yarn dev ではpublicディレクトリの画像が読み込めるのに、yarn dist で書き出したアプリからは読み込めないという事態に出会したので、調…

Yarn Workspacesを使って複数のNext.js + Electronプロジェクトを管理する 📁

これまでは、Yarn Workspacesの基本的な使い方 、Yarn Workspacesで複数のExpoプロジェクトを管理する方法 を記事にしてきました。blog.kimizuka.org blog.kimizuka.org今回は、Yarn Workspacesを使って複数のNext.js + Electronプロジェクトを管理します。 …

Electronで外部ディスプレイ(拡張)を使ったアプリケーションを作る際は、screen.getAllDisplaysで返ってくる配列を座標でソートしてから使うのがおすすめ 🖥

screen.getAllDisplaysを使えば、利用可能なディスプレイを配列で取得することができます。www.electronjs.org const displays = screen.getAllDisplays(); // ディスプレイの配列を取得 この際、配列の順序がよくわからない(認識された順?)ので、僕は座…

Macのメニューバーに常にローカルIPを表示するelectronアプリをつくる 💻

ローカルにウェブサーバを立てて、別のデバイスからアクセスする際、ローカルIPを調べるのが面倒なので、常時表示されておきたくなります。 そんなとき、これまでは IP in menubar というアプリを使って、MacのメニューバーにIPアドレスを表示していたのです…

ElectronでBrowserWindowではなく外部ブラウザを使う 💻

起動した際に、・expressでサーバを立てる(ポートは3000) ・publicディレクトリの中身をホスティングする ・socket.ioでサーバとクライアントの通信を行う(ipc通信の代替) ・Google Chromeを起動しhttp://localhost:3000を開く(Chromeのダウンロードは…

Macでelectronとserialportを組み合わせてアプリを作る ⚡️

4年ぐらいぶりにシリアル通信を行うElectronアプリを作りました。おぼろげながら、 electronとserialportを普通に組み合わせるとエラーが出る rebuildすると使える という4年前の記憶がありまして、まずは、electron + serialportで中身が空っぽのアプリを作…

ElectronでPush通知を送るMacアプリをつくる 👀

非常に目が悪くて2時間に1回ぐらい目薬を刺さないといけないんですが、うっかり忘れてしまう事が多く、2時間おきにPush通知を送ってくれるMacアプリを作ってみました。 サーバPushではなくローカルPushで実装しています。 JavaScript const { app, Notificat…

Electronで背景透過のアプリをつくる 👀

ElectronでBrowserWindowのインスタンスを生成する際にオプションとして、transparent: trueを渡すと背景が透明なアプリを作成できます。 const mainWindow = new BrowserWindow({ transparent: true }); Macだとこれで問題ないのですが、Windowsだと、 cons…

servezをつかってlocalhostを簡単にhttpsにする 💻

最近、WebVRの開発をしているのですが、httpsが必須かつ、確認にはOculus Questを使うので、localhostをhttpsにして、Questをそこに繋がないと面倒すぎてやってられません。 (最初はいちいちサーバにアップして確認していた)自分で証明書を発行したり、mkc…

Error: The module 'hogehoge.node' was compiled against a different Node.js version using NODE_MODULE_VERSION XX. This version of Node.js requires NODE_MODULE_VERSION YY. Please try re-compiling or re-installing の解決を目指してelectron-rebuildを実行する 🔨

electron と mdns を同時に使おうと思ったところ、 App threw an error during load Error: The module '/Users/nanashi/develop/node_modules/mdns/build/Release/dns_sd_bindings.node' was compiled against a different Node.js version using NODE_MODU…

electron-packagerでMacアプリを書き出すときにアイコンを指定する 🖼

ElectronでMacアプリをつくるとき、リリースの予定はないもののアプリアイコンをオリジナルのものにしたいなと思い、Macアプリのアイコンのつくりかたを色々調べました。 アイコンファイル(.icns)のつくりかた 本当に色々調べました。いろんなサイズの画像…