[Electron] contextBridge経由でIPC通信を行う - ねこの足跡R
Electron v12で破壊的な変更がいくつか行われました。FLASH関係の廃止、レンダープロセスでremoteが非推奨になるあたりが話題になりますが、IPC通信時に一工夫する必要が生じたのが地味に面倒ですｗ これまではレンダラープロセスからメインプロセスを呼び出す際にはipcRenderer.invoke()を実行するだけでしたが、これがそのままでは使えなくなりました。 const {ipcRenderer} = require('electron') (async () => { const value = await ipcRenderer.invoke('MyAPI') })() 上記を実行すると次のようなエラーとなります。これはrequire()でもimportに限らずエラーメッセージが表示されます。 # requireでのエラーメッセージ Uncaught (in promi
![[Electron] contextBridge経由でIPC通信を行う - ねこの足跡R](https://cdn-ak-scissors.b.st-hatena.com/image/square/384764a2c2d90b08291669dc8c22bb734d92f2c1/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F820878482973262145%2F6801883189061390382%2F1700928656)
最新のNode.jsとElectron環境でkeytarを動かしてみるテスト - 🌴 officeの杜 🥥
社内だけでしか使わないツールであるため、現在の環境のままでも問題ないといえば問題ないのですが、色々新しいAPIが追加されてる最新のNode.jsやElectronを使いたい。けれど、その特定のモジュールのビルドが最新版に対応していないので、アップデートできずにいるものの１つがKeytar。以前も以下のエントリーでとりあえずElectron 5.0.0 + Keytar 4.6.0で動くようになったのですが、今一度、最新環境で動作するのかテストしてみようと思いました。 SQLite3は最新版はElectron対応したので、特にリビルドせずにnpm installで動くようになったのですが、果たして・・・Keytarのgithubのページを見てみると、Electronに関する記述が追加されてたりするので、ちょっと期待はしているのですが。 electron@5.0.0でkeytar@4.6.0を
【エラー対処】Electronでレンダラープロセスrequireができない - Qiita
はじめに Electronでアプリケーションを作ってみよう を参考に、とりあえず書いて真似させていただきながら書き方を勉強していました。 しかし、「アプリっぽく」の 'use strict'; //electronの読み込みができない const electron = require('electron'); const remote = electron.remote; const fileUtil = remote.require('./lib/fileUtil'); //当然ここも動かない fileUtil.fetchReadmeList(function(err, matches) { if(!err) document.write(matches.join()); }); const electron = require('electron'); const app = elec
Electronでテキストファイルの読み書きを行う
const { app, BrowserWindow } = require('electron') function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) win.loadFile('index.html') win.webContents.openDevTools() } app.whenReady().then(createWindow) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { if (Brows
JavaScript、HTML、CSSでデスクトップアプリを作成できるフレームワーク「Electron 12.0.0」がリリース
「Electron 12.0.0」には、Chromium 89、V8 8.9、Node.js 14.16へのアップグレードが含まれている。 おもな変更としては、コンテキストブリッジであるexposeInMainWorldメソッドで非オブジェクトAPIを公開できるようになったほか、Node 12からNode 14へのアップグレード、メインプロセスからWebContentsインスタンスのサブフレームへのアクセスを可能にするwebFrameMain APIの追加、contextIsolationとworldSafeExecuteJavaScriptのデフォルト値のtrueへの変更などが行われた。 重大な変更としては、remoteモジュールの非推奨化、crashReporter.start({ compress })のデフォルト値のfalseからtrueへの変更、Flashサポートの削除、Chro
【Electron】remote moduleがdeprecatedになっている背景 - Simple minds think alike
Electron 10.0.0が先日リリースされて、remote module がデフォルトで無効になりました。 バージョンを上げた時に、一部機能が動かなくなる場合など出てくると思いますので そもそもremote moduleとは なぜ remote module を使うとよくないのか を整理してみたので、共有してみたいと思います。 この内容は2020年02月に開催されたCovalenceConf 2020のセッション(Jeremy Apthorp: Remote Module Considered Harmful )を元にまとめた内容であり、コードは動画内のものを引用しています。 remote module とは remote module を使うことでレンダラプロセス内であたかもメインプロセス内のオブジェクトを直接触れるように見せかけることができます。 例えば、remote modul
【Electron v5.0.2】レンダラープロセス側でexportもrequireも is not definedになるぞちくしょうめ！ - †でおきしブログ†
☆解決方法 メインプロセス側のBrowserWindow作成時にnodeIntegrationをtrueにする レンダラーのhtmlで読み込むjsファイルはrequireを使う ★メインプロセス app.on('ready', () => { mainWindow = new BrowserWindow({ webPreferences: { nodeIntegration: true } }); }); BrowserWindowの初期化時にはwebPreferencesのnodeIntegrationをtrueに設定。 ★レンダラープロセス(html) <script> require('./index.js') </script> requireでjsファイルを読み込む ★参照元 stackoverflow.com ☆nodeIntegrationのデフォルト値はV5で変わったらしい
Electron 4.0.0 | Electron
The Electron team is excited to announce that the stable release of Electron 4 is now available! You can install it from electronjs.org or from npm via npm install electron@latest. The release is packed with upgrades, fixes, and new features, and we can't wait to see what you build with them. Read more for details about this release, and please share any feedback you have as you explore! What's Ne
Electron BrowserViewについてサンプルを読みつつ紹介 - Qiita
本記事では、ElectronのBrowserViewについてサンプルを読みつつ紹介します。 Electronは他のネイティブアプリと比べてWebアプリと連携するアプリが作りやすいので、Node.jsを使っている人はぜひ触ってみてください。 Electronとは ネイティブアプリケーションをWeb技術（HTML/JavaScript/CSS)で作るためのフレームワークです。 ネイティブアプリ特有の処理（ファイルアクセスなど）をNode.jsのメインプロセスが受け持ち、画面表示をHTML/JavaScript/CSSが受け持つという構造になっています。レンダラーにはChromiumが使われているので、JS対応状況に悩むことはほぼないです。 図１ Electronのアーキテクチャ BrowserViewとは アプリウィンドウにWebコンテンツを埋め込むために使うモジュールです。Electronプ
同一アプリをWeb版とElectron版の両方で作る方法 - Taste of Tech Topics
皆さん、こんにちはmiyasakagoです。 この記事はNode.js_2 Advent Calendar 2018 - Qiitaの23日目です。 ０）はじめに ここ2年くらいで私自身、Electronを実案件の中で使う機会が増えているのですが、比較的遭遇するのは、同一アプリでWeb版もElectron版（デスクトップアプリ）も両方ほしい、というようなシチュエーションです。 例えば、Electronベースで開発されているアプリの一つにSlackがありますが、SlackはWebアプリとしてブラウザ上から利用することも、デスクトップアプリとして利用することも可能になっていますよね。 こういうことを実現したいと思ったとき、どういう方法があるのかいくつか選択肢があり、迷いました。 少し探してもあまり情報がなかったため、いろいろ調べ自分なりに整理してみました。 １）Webアプリを先に作り、Elec
<webview>からBrowserViewへの移行 - Qiita
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でアプリビルドまでのフロー - Qiita
久しぶりにWindows向けの簡単なデスクトップアプリ開発する必要が発生したのですが、日常Mac環境の中、今更Windows環境でVisual Studio入れてFormアプリを書くのもなんなのでElectronで書こうと思った際のメモ。 追記 2019年10月30日に、Electron 7.0環境で動くよう一部コード書き換えました。 やりたいこと まあ、HTMLとかCSSとかJSは理解してるつもりなので、HelloWorldアプリをMac用, Win用の単体アプリとしてビルドするまでの流れを確認。 完成版は下記のような感じ。 前提 MacでWindows向けのデスクトップアプリを開発したい。 準備 作業スペースの確保 electronはpackage.jsonが無いと怒られる系のやつ。なので、npm initしてpackage.jsonを作っておく。
electron-builder
Introduction Introduction Command Line Interface (CLI) Programmatic API Donate Configuration Guides Tutorials electron-builder ¶ A complete solution to package and build a ready for distribution Electron app for macOS, Windows and Linux with “auto update” support out of the box. NPM packages management: Native application dependencies compilation (including Yarn support). Development dependencies
electron-builderで詰まったこと - Qiita
はじめに electron-builderの記事古いーーーーー!!!!! ということで自給自足する まあ難しいことはないんだけどこの記事で助けられる人はいる(はず) node_modulesがない そう、無いんですよ(全肯定) 参考になったのはこの記事 ソースコードは読みたくないのでありがたい... 完結にいうと「node_modules」が消されるとのこと そのためsemantic-ui-lessをインストールする必要がある とりあえずnpmで突っ込んで使いましょう これでnode_modulesがapp.asarに入ります あれ?ないやつもあるけども そう、無いんですよ(全肯定) electronでサポートしてないものは消される感じ なので使うモジュールはpackage.jsonのdependenciesに書くべし 自分ならtwitterを使うので
Electronでアプリケーションを一つ作った時のメモ – すきせか
ちょっとお仕事でElectronを触る機会があり、今後も使う事があると思うので、自分のためのTip集というか覚書。WEB系の技術のみでネイティブみたいなアプリケーションが作れるのは感動しましたね。 自分はMacなので、Windowsで開発となると微妙に違う部分があるかもしれません。自分の場合はMacで開発してWindows用のアプリケーション（ポータブルなexe）をビルドしました。また、nodejsのインストールはすでにしてある物とします。 まず必要なファイルの準備 とりあえず、initをします。余談ですが、最近このyオプションを知りました。なぜもっと早くしっておかなかったのか😭 $ npm init -y package.jsonができたので、さっそくelectronをインストールします。 $ npm i electron -D で、次にsrcディレクトリを作って、その中に『main.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Slackデスクトップは3.0でBrowserViewに移行した
GitHub - electron-userland/electron-builder: A complete solution to package and build a ready for distribution Electron app with “auto update” support out of the box
electron-wix-msi-n
How to create a MSI Installer in Windows for an Electron Framework Application
【ace.js】エディタを複数表示させる方法 | つかぽんのボヤキ部屋