1. /
  2. Node.js

Node.js

[Electron] リンクをクリックすると標準Webブラウザで開く

Eletronでアプリを開発していると、ユーザーをWebブラウザに飛ばしたなるときがあります。

これ実装は非常にかんたんなのですが、最近はセキュリティの関係で描画以外の処理はメインプロセスで行う流れになってきていることもあり、今回はメインプロセスでイベントを補足して標準ブラウザで開くところまでをまとめます。
続きを読む

[Electron] contextBridge経由でIPC通信を行う

Electron v12で破壊的な変更がいくつか行われました。FLASH関係の廃止、レンダープロセスでremoteが非推奨になるあたりが話題になりますが、IPC通信時に一工夫する必要が生じたのが地味に面倒ですｗ

これまではレンダラープロセスからメインプロセスを呼び出す際にはipcRenderer.invoke()を実行するだけでしたが、これがそのままでは使えなくなりました。

const {ipcRenderer} = require('electron')

(async () => {
  const value = await ipcRenderer.invoke('MyAPI')
})()

上記を実行すると次のようなエラーとなります。これはrequire()でもimportに限らずエラーメッセージが表示されます。

# requireでのエラーメッセージ
Uncaught (in promise) ReferenceError: require is not defined

# importでのエラーメッセージ
Uncaught TypeError: Failed to resolve module specifier "electron". Relative references must start with either "/", "./", or "../".

今回はElectron v12でもIPC通信が行えるコードを書いていきます。
続きを読む

[Electron] 第三者が作ったアプリのソースコードをのぞき見る

Electron製のアプリは非常に簡単に内部のソースコードが閲覧出来てしまいます。これを認識していないと簡単にコピーアプリを作られたり脆弱性を調べられます。

今回はどれくらい手軽に行えるか実際にやってみます。ハリーポッターで言う「闇の魔術に対する防衛術」のコーナーですね。悪い人がどのような手段でアプリを解析するか知り、防衛方法を模索するというわけです。くれぐれも悪用しないでくださいｗ

知らない方にとってはちょっとした恐怖体験ですねｗ
続きを読む

[Electron] 多言語対応する – i18n

WindowsもmacOSも世界中で利用されていますし、日本国内にも外国語が母国語な方も大勢いらっしゃいます。そこで今回はElectronをユーザーの言語環境に合わせる国際化(i18n)を行ってみます。

Electron自体にはそのための専用の機能は用意されていないようなので、Node.jsで利用されているモジュールを利用するか、自分で用意する必要があります。今回は後者で行います。
続きを読む

[Electron] アプリ起動時にスプラッシュ画面を表示する

アプリの本体のウィンドウが起動する前に、会社やアプリのロゴが表示される画面を見たことがある方も多いと思います。いわゆる「スプラッシュ」と呼ばれる画面です。今回はこちらの実装を行ってみます。

スプラッシュはブランディングなどが目的の場合もありますが、裏側でこっそり通信を行っている場合もありますね。またはここでファイルをメモリ上にロードする場合もあります。
続きを読む

[Electron] 設定情報をローカルファイルに簡単保存 – electron-store

設定情報やちょっとしたデータの管理にレンダラープロセスの場合はWebStorageやIndexedDBが利用できますが、メインプロセスでは自力でファイルに保存する処理が必要でちょっと面倒。そんな時に利用するのがelectron-storeです。手軽にデータの永続化ができます。

今回はこのelectron-storeを利用しウィンドウの位置とサイズを記録、次回起動する際に復元するサンプルを作成します。

続きを読む

自分のグローバルIPを確認するコマンド「showip」

手前味噌ですが、自分のグローバルIPをコマンド一発で確認できる「showip」をついカッとなって作成しました。VPNやプロキシ経由で接続中に自分のIPがほんとに変わったか確認したかったのです。

$ showip
203.0.113.1

内部の処理的にはIPアドレスを表示してくれるWebサービスにリクエストを投げその結果を表示しているという非常にシンプルな物です。

対応しているサービスは以下の通り（デフォルトはAWS）。

service_cddefaultURL
aws✔https://checkip.amazonaws.com
googlehttps://domains.google.com/checkip
ifconfigiohttps://ifconfig.io/ip
ifconfigmehttps://ifconfig.me/ip
ipaddrshowhttp://ipaddr.show/

続きを読む

[Electron] 自動アップデートに対応する – electron-builder + AWS S3

アプリを起動すると自動的に最新版があるか確認し、もし更新されていれば自動的にバージョンアップしてくれる機能を実装します。

いくつか方法はあるのですが今回は

  1. electron-builderの機能を使う
  2. ビルドしたアプリはAWS S3へアップ
  3. 更新があるとユーザーの確認無しでダウンロードしちゃう

という方向でまとめていきます。
続きを読む

[Electron] ログをファイルに記録する – electron-log

開発中はconsole.logで見れば良いのですが、ファイルにも情報を記録しておきたい場合にelectron-logを利用すると非常に簡単にログを記録することができます。

const log = require('electron-log');

log.info('Hello, log');
log.warn('Some problem appears');

以上です。めっちゃシンプルじゃないですかw？あとはOSによってログを保存するのによく利用されるディレクトリへ自動で保存されます。

今回はelectron-logのもう少し詳しい使い方を見ていきます。
続きを読む

[Electron] ダイアログで指定したファイルに保存する

前回はファイルダイアログで読み込みを行いましたが、今回は保存を行います。

今回もOSの機能を利用するダイアログの表示とファイルを読み込む部分はメインプロセスが担当し、それ以外の部分をレンダラープロセス(Chromium上で動いている箇所)が行うことにします。レンダラーでもOSの機能を利用できますがメインプロセスに任せた方が役割分担がはっきりして個人的に気持ち良いためです。

※「読み込み」が行いたい方はこちらの記事を参照ください。
続きを読む

[Electron] ダイアログで指定したファイルを読み込む

今回はファイルダイアログでファイルを指定しその内容を読み込んでみます。

Electronで実装するにはいくつかのパターンがありますが、ここではOSの機能を利用するダイアログの表示とファイルを読み込む部分はメインプロセスが担当し、それ以外の部分をレンダラープロセス(要はChromium)が行うことにします。レンダラーでもOSの機能を利用できますがメインプロセスに任せた方が役割分担がはっきりして個人的に気持ち良いためです。

※「保存」が行いたい方はこちらの記事を参照ください。
続きを読む