ElectronのautoUpdater update.electronjs.org 対応している環境 更新用のアプリをReleasesに置く Electronアプリへの組み込み（自動的に更新処理） Electronアプリへの組み込み（任意のタイミングで更新） autoUpdaterが間違ったファイルをダウンロードする（1敗） 終わり ElectronのautoUpdater Electronには、アプリの新しいバージョンをダウンロードして 更新する機能が用意されています。 https://www.electronjs.org/docs/api/auto-updater Electronアプリからこの機能を使うには本来、 最新版アプリの情報を返すアップデートサーバーが必要になるのですが、 GitHubのReleasesに最新アプリバイナリを置いているアプリ については、 Electron公

アップル公証(Notarization) Macにはアップル公証という、Macの野良アプリを署名する仕組みがあり、 このアップル公証を通しておかないと、 macOS Catalinaではアプリを起動する際、そのアプリの起動がブロックされます。 (起動する術はある、らしい) 少し前、これに対応して、自前のElectronアプリで アップル公証を通していたのですが、 実は、その時は、公証の条件が少し緩くなっていたらしく･･･ アップル、macOS野良アプリの公証要件を一時的に緩和。Catalinaへのスムーズな移行のため https://japanese.engadget.com/2019/09/05/macos-catalina/ またもや、自家製Electronアプリで、 アップル公証が通らなくなってしまったのでありました。 (´・ω・｀) この記事は、Electron製アプリでアップル公

AppStoreのレビュー通ったって 前回 Electron製アプリが Mac App Storeへの申請で non-public APIの利用で rejectされる問題 https://taku-o.hatenablog.jp/entry/2019/11/03/103422 Electronがnon-publicなAPIを利用していたので、 Electron製のアプリがみんなrejectされている問題があったのだけれど、 最新コードでAppStoreのレビューが通ったそうで、解決のメドがたったみたい。 https://github.com/electron/electron/issues/20027 もうちょっとで修正が利用できるようになるのでしょう。 https://github.com/electron/electron/pull/20965 でも、Electron 5以降が対象なん

Mac App Store Mac App Store Apple rejecting Electron apps from Mac App Store due to private API usage On iOS, all apps must go through the App Store. On macOS, the Mac App Store is just one method of distribution and developers are free to publish their apps independently on their own website. This means app rejection policies on macOS are not as painful as with iPhone or iPad, but they are nevert

Electron製アプリがrejectされている Electronプロジェクトの、このGitHub issueで気づいたのですが、 Mac App Store Private API Rejection: Electron 5.0.10 https://github.com/electron/electron/issues/20027 どうもここ最近、具体的には、10月末から、 Electron製のアプリが、Mac AppStoreでrejectされています。 issueのタイトルは5.0.10となっていますが、 別に5.0.10でなくてもrejectされています。 このあたりのAPIがprivate APIで、 これらをElectronが使用しているから、らしい。 CAContext CALayerHost NSAccessibilityRemoteUIElement NSNextSte

アプリが起動するまでの時間が短いと気持ちいい アプリの起動は最初の一回しか発生しないのに、 その後はアプリは起動しっぱなしなのに、 この最初の起動までの時間が短いと、アプリの使用感が非常に良くなるような気がする。 気がしない？ この記事はElectronアプリの起動速度を速くするために いろいろやったことと、その結果の記録です。 環境はMacのElectronです。 なお計測はしていたが、記録はない。 各仕組みの導入の前後で結構コードが変わってしまって、 計測の仕方も変わってしまって、 あとバイナリは残っているから調査可能だけど、面倒くさいからであります。 初回起動時の記録は捨てとこう ところでElectronのアプリって、 ビルド後初回の起動より、2回目・3回目の方が早く起動しますね。 計測して起動時パフォーマンスチューニングするなら、初回の記録は捨てときましょ。 やったことリスト re

さてさて、このところElectronのプログラムが面白くなってきて個人的にもいろいろと開発する意欲が湧いてきています。 そして、そんな中で自然と試したいことが頭に浮かんできました。 それは・・・・・・ 他の言語とのコラボレーション です。 つまり、ElectronはNodeJS（JavaScript）を使っていますが、これ単体だけではなく、例えば、Pythonやコマンドラインなども実行してみたくなったんですね。 ということで、今回は以前試してみた（といっても移転前のブログですが）Python + dlibの顔認証コードを使ってモザイク処理をするElectronアプリをつくってみます。 ぜひ学習の参考にしてみてくださいね。 ※ 開発環境： Electron 2.0、Python 2.7 やりたいこと せっかくElectronを使うので、単純に検出された全ての顔にモザイクをかけるというアプリで

Electronのページ内検索ダイアログのライブラリを作り替えた。 electron-search-dialog https://www.npmjs.com/package/electron-search-dialog すごいシンプルになった 作り替えたら、renderer processのjavascriptから、 このコードを呼ぶと動くようになった。簡単。 テキトーに作ってたことがバレたなｶﾞﾊﾊ！ var SearchDialog = require('electron-search-dialog').default; // create instance. var mainWindow = require('electron').remote.getCurrentWindow(); var sd = new SearchDialog(mainWindow); // open sea

つくった Electronアプリのページ内を検索するダイアログ。 https://www.npmjs.com/package/electron-search-dialog 使うと、こんな感じに検索ウィンドウが表示されて、 Electronのページのテキストを検索できる。 Excelの検索ダイアログに似せてみた。 npmにpublishしたので、npm installで利用できる npm install --save electron-search-dialog localeの設定が違えば、検索ダイアログの言語も変わる。 アメリカ語と、日本語しかサポートしてないけどね。 使い方 ライブラリをインストールする npm install --save electron-search-dialog 検索するウィンドウを指定して、インスタンス生成。 openDialog()でウィンドウを表示。 var

経緯 音声を操作するWeb Audio APIという、WebブラウザのAPIがあります。 そのAPIの中の、OfflineAudioContextというオブジェクトを、MacのElectron製アプリで利用していたのですが、 アプリを動作させながらアクティビティモニタを確認していたら、何かがおかしい。おかしい。 何故か、 音声を再生するごとに、 アプリが使用しているスレッドの数が増えていったのです。 ↓(何回か再生) ということがあり、これは困ったぞ、と、いろいろ調べてみたのでありました。 Electron 1.8.8 で検証 Electron バージョン 1.8.8。最初に問題を発見した環境。少し古い。 Electronに組み込まれているChromiumのバージョンは >process.versions.chrome "59.0.3071.115" 最小の検証コード(一部) ボタンを押し

Macでヘルプで検索した時に起動するアレ。Help Book。 MacでElectronアプリを作るのであれば、 Help Bookにヘルプ機能を作り込めば、よりMacライクなアプリになるのではないか。 そう考えてトライしたのであった。 作業手順 1. Help Bookを作る 2. ElectronアプリにHelp Bookを組み込む 3. ElectronアプリからHelp Bookを立ち上げる Help Bookを作ろう まず、ヘルプを作る。手順は下のようになる。 面倒くさい。 ヘルプ作成用のアプリを使った方が良いかもしれない。Help Crafter(http://www.putercraft.com) とか 1. ディレクトリ構造を組み立てる 2. ヘルプをHTMLで書く 3. 索引を作る 4. ExactMatch.plistを用意する Help Bookの資料は、このあたりに

Electronのアプリで、ウィンドウ毎に、メニューを切り替えたいとか、 有効無効を切り替えたいことってあると思うんです。 今回はフォーカスが当たっている時だけ、メニューを有効にする方法の話。 メニューアイテムのenabledを切り替える メニューの有効無効を切り替えるには、 メニューのアイテムのenabled属性を切り替えれば良し。 メニューを作るときに、id属性を設定しておいて。 import {Menu} from 'electron'; const menuList = [ { ... (略) ... }, { label: '辞書', submenu: [ { id: 'dict-close', // ←←← idを設定 enabled: false, label: '辞書を閉じる (⌘W)', click() { if (myApp.dictWindow) { my

Finder上のアプリアイコンにファイルをドロップされた時、 Dock上のアプリアイコンにファイルをドロップされた時、 Electron製のアプリで、そのファイルを受け取って処理する機能の実装方法です。 (Macの話だったり、私製アプリのコードの断片が入ってたり、 Typescriptだったり、パラメータが雑だったりするけど、うまく読み替えて欲しい。) アプリのデータの持ち方にもよりますけど、 ・アプリが起動中にファイルをドロップする ・アプリが起動していない時にファイルをドロップする で、処理方法を変える必要があると思う。 Info.plistでアプリがファイルを受け取れるように設定する Mac環境の話 ファイルをアプリアイコンに落とした時に反応するように、アプリのInfo.plistを更新します。 次のようなplistファイルを作って、アプリのInfo.plistに組み込みます。 この

おまえ、セオリー語れるほど、Electronやってないだろう。 globalShortcut https://electronjs.org/docs/api/global-shortcut Electronにはショートカットキーを制御するglobalShortcutという機能があるんですけど、 これは公式ドキュメントにも書いてあるとおり、グローバルに効いてしまう。 アプリにフォーカスが当たって無くても、効いちゃうんですね。 これはこれで便利だけど、効き過ぎちゃう。 こんなCommand+Sを封じるアプリとか作ったら、あらゆるアプリのCommand+Sを封じちゃって大変ですね。 やってはいけませんよ。 'use strict'; const electron = require('electron'); const app = electron.app; const globalShortc

Electronを業務で使っている会社とかあるらしい。 で、自分も活用してみよう。Electronでどんなアプリを作るかって考えたら、 サーバーのデータを参照するElectronアプリも作れるけれど、 でも、それだったら、Webページでも良いわけで、 Electronを使うなら、やっぱりスタンドアローンなアプリにしたいじゃないですか。 しかし、業務で扱うデータって、残念ながら、だいたいサーバー上に置いてある。 そのデータに触れずに業務に役立つアプリを作ることは難しい。 それじゃ、こういう、ローカルとサーバ上、両方にデータがあるElectronアプリにするのが良いのかな、と。 そこで画像キャッシュだ なぜ、画像かはわからないが、今回は画像だ。 毎回データをサーバーに取りに行かずに、(作るのが重い画像とかだ) Electronのアプリ内部でキャッシュしておこう、という話。 実装 まず最初にim

Electronで立ち上げたBrowserWindowの画面に、 HTMLファイルを落とすと、 そのHTMLがウィンドウ内に表示されてしまう。 格好悪い！！！ これをふせぐには ドロップした時に、画面が差し替わる問題を防ぐには、次のようなコードを入れておくと良い。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> document.ondragover = document.ondrop = function(e) { e.preventDefault(); return false; }; </script> </head> ドロップされたHTML上では、nodeとElectronの機能を使える この挙動はアプリとして格好悪いが、 それだけはなく、 落としたHTMLでは

Electronアプリでのエラーの追い方。 アプリが起動もしないで落ちる時 アプリをクリックして起動したら、そのまま落ちる時。 最初に追うのは main processの初期化まわりで問題が起きていないか。 electron-logを入れて、ログ出力するのが良いと思う。 electron-logを入れる (https://github.com/megahertz/electron-log) npm install --save electron-log main processのjavascriptコードの上の方に、エラーを拾うコードを追加する。 便利だから、このコードは入れっぱなしでリリースしても良いと思う。 var log = require('electron-log'); process.on('uncaughtException', function(err) { log.err