Electronで作成したWindows用アプリをインターネット経由で配布した場合に、悪い人に改ざんされておらず安全であることを証明するためにコード署名を付加します。 ここではelectron-builderを使った例になります。macOS用アプリの場合と比べれば、環境変数を設定するだけで終わるので非常に楽ちんです。 コード署名をするとどうなるの？ 署名なし 署名あり 準備 コード署名証明書 package.jsonに追記 コード署名する Windowsの場合 環境変数の設定 ビルドしてみる macOSの場合 環境変数の設定 ビルドしてみる トラブルシューティング SignTool Error: The file is being used by another process. Defenderを一時的に無効にする Defenderのチェック対象から特定のファイル・フォルダを除外する C
![[Electron] Windows用アプリにコード署名を行う - ねこの足跡R](https://cdn-ak-scissors.b.st-hatena.com/image/square/8bdf9dab735fa83b47b4b33330a1a1c1c76e60d5/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fk%2Fkatsube%2F20231125%2F20231125063327.png)
デバックツールの起動 ChromeブラウザのF12を押して起動するデバックツールを使えるようにします。 IDEのリモートデバック機能で、ステップ実行できるのは、メインプロセスのみとなります。 レンダリングプロセスをデバックするのは、Webページをデバックするのと同じ要領となります。 "use strict"; const electron = require("electron"); const app = electron.app; const BrowserWindow = electron.BrowserWindow; let mainWindow; // 全てのウィンドウが閉じたら終了 app.on('window-all-closed', function() { if (process.platform != 'darwin') { app.quit(); } }); // E
この記事はClassi developers Advent Calendar 2022の8日目の記事です。 はじめに Electronとは、Windows、macOS、Linuxで動作するアプリが作れるソフトウェアフレームワークです。 読者対象者は以下の様な方です。 Electronの概要は知っているが、触ったことが無い方 TypeScriptで実装し学習したい方 Vue.jsやReactなどのライブラリは考慮しないで、Electronが動く環境を試したい方 今回紹介する実装は、出来るだけシンプルな構成を目指しました。一旦依存関係を出来るだけ省きElectronの機能に集中する事を目的としています。 実は、Electron Forgeという簡単にテンプレートが作成できるツールもあります。ある程度Electronに慣れてきたら、こちらを利用してみても良いでしょう。 作ったもの 開発環境 ma
Electron公式ではBrowserViewを<webview>の代わりに使うことを推奨しています。 BrowserViewは可能な操作が<webview>に比べてまだ少なく、またmain process上で管理するため、<webview>とは些か勝手が違ってきます。 ここでは、BrowserViewで<webview>を操作してきた手法を置換するためのTIPSを紹介します。 基本的な操作 Before const webview = document.querySelector('webview'); // 表示するWeb Pageを変更する webview.src = 'https://yahoo.co.jp'; // 戻れるなら戻る if (webview.canGoBack()) { webview.goBack(); } // いけたらいく if (webview.canGoF
Electronのremoteでハマった話！require is not definedが発生する・・・｜もちのき研究所
レンダラープロセスでrequireを呼ぶとrequire is not defined 現在、掌田津耶乃氏の「Electronではじめるデスクトップアプリケーション開発」でElectronについて勉強をしています。 ちゃんと説明されていて、入門としては良い本だと思います。 もともと、僕は業務でC#を使ってWindowアプリケーションを作成していましたが、モダンなWeb技術を使った開発も取り入れてみたいと思って、今更ながらElectronに入門してみました。 この本の中にremoteを使って、レンダラープロセスからメインプロセスの機能を使うという話があるのですが、Electron v12.xを使っているのであれば、この本のコードをそのまま使ってしまうと動きません。 この本はv10.xをベースにしているので最新のものとは少し違う部分があるということには注意しないといけません。 この本では次のよ
【Electron】アプリを全画面モードでも他のデスクトップに移動しても常に最前面に表示する - そこに仁義はあるのか(仮)
Electronでアプリを作りました。 アプリは ワークスペース（デスクトップ）を切り替えても表示される 他のアプリよりも前に表示される 他のアプリを全画面表示した時も前に表示される Keynoteをプレゼンテーションモードにした時も前に表示される としたかったです。 特に4つ目のKeynoteでのプレゼンテーションモードが一筋縄ではいきませんでしたが、最終的にはこんな感じで実現ができました。 package.json の main で定義している main.js にてウィンドウを開くときに設定を追加していきました。 const { app, BrowserWindow } = require("electron"); const is_mac = process.platform==='darwin' // macOSかどうかの判定をする if(is_mac) { // macOSの時の
ユーザーの視点からファイルを開く方法を考えると、3つの方法があると思います。 1.Menu,ショートカットキーでファイル選択ダイアログを開いてファイルを選択する 2.開きたいファイルをWindowにドラッグ&ドロップする 3.ファイルをダブルクリックしてElectronアプリで開く この記事では1の"Menu,ショートカットキーでファイル選択ダイアログを開いてファイルを選択する"機能の実装方法について説明します。 自分の環境はこの記事を参照。UIの作成にReactを使っています。 情報が正しくなかったり、もっとスマートな実装方法があったりするかもしれませんがあしからず。 1.成果物 2実装方法 Menuとdialogは基本的にメインプロセスでしか取扱えないらしいです。なのでメインプロセスでMenuの作成とdialogを表示する処理を行います。そしてdialogを表示したあとにレンダラープロ
Electron + TypeScript + React の環境構築手順のメモ - 盆暗の学習記録
Web開発の知識をそのままデスクトップアプリ開発に使えるということで、Electronが面白そうだな～と思っています。 jsに慣れている方であれば環境構築に悩むことはなさそうですが、筆者はReactもElectronも初心者なので環境構築の手順をメモしておきます 環境 OS: Windows 10 Home / 21H2 / 19044.2604 Node.js: v19.7.0 手順 1. Webpack + Typescriptの環境を作る npm init electron-app@latest my-app -- --template=webpack-typescript この状態でnpm startするとアプリはこんな感じ 2. tsconfig.json のcompilerOptionsに "jsx": "react-jsx"を追加する # tsconfig.json { "c
はじめに LTや社内の勉強会用のスライドを作るときはKeynoteを使っていたのですが、最近はMarkdownスライド作成ツールである『Marp』を使っています。 元々スライドの流れをメモでまとめてから、作成していた自分としてはメモがそのままスライドになるため、とても助かっています。 そんなMarpとちょっとした小技を紹介していきます。 Marpとは Marpは、Markdown記法を用いてスライドが作れるアプリケーションです。 Windows・Mac・Linuxで使えます。 また、作ったスライドはPDFファイルとして出力できます。 もっと詳細が知りたい！という方は作者さまの記事を参照してください。 Electron で Markdownプレゼン作成ツールを作って公開するまで Markdown スライド作成ツール『Marp』の開発経緯裏話 Marpの基本的な使い方は公式サイトに記載されてい
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[Electron] Windows用アプリにコード署名を行う - ねこの足跡R
VSCodeで、Electronをデバックする - Qiita
【入門】ElectronをTypeScriptで手軽に試したい
<webview>からBrowserViewへの移行 - Qiita
すでにアプリが起動しているときに関連付けファイルが開かれた場合 (app 'open-file' event)
Electronで任意のファイルを開く機能を実装する - Qiita
「Electron」のリリースサイクルが8週間ごとに ～Chrome/Edgeに歩調を合わせる／9月の「Electron 15」から
Markdownスライド作成ツール『Marp』のTips - Qiita