ElectronでBrowserWindowと通信する(ipc編) - techium
Electronでアプリを開発している際にBrowserWindowを生成している処理部とBrowserWindowのhtml上でと通信したいことが多々あります。 そこでElectronではプロセス間通信を用いて通信し、処理を受け渡すことが可能です。 そのやり方についてご説明いたします。 また、なぜプロセス間通信なのかという部分もこの後ご説明していきます。 プロセス間通信 ElectronではBrowserWindowを生成する側でappの制御を行う処理をメインプロセス(main process)。 BrowserWindowをappが生成して動作するプロセスをレンダラープロセス(renderer process)と呼ばれます。 メインプロセスは一つしかプロセスが存在しないのですが、レンダラープロセスはBrowserWindowが複数生成された際に複数のプロセスを持つことになります。 これ
Electronアプリのクロスプラットフォームなメニュー設計 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Electronでアプリを作っていると、意外なところでネイティブ的な挙動をさせるために工夫しなければいけないポイントがあります。この記事ではマルチウインドウなアプリで自然なメニューを実現するための設計方法について、代表的なElectronアプリであるAtomの実装を例に説明したいと思います。 実際の設計を見て行く前に、考慮すべきElectron特有の仕様や制約について見ていきます。 Electronに関する前提知識 Menuクラスの基本的な使い方 Electronではプラットフォームをまたいでメニュー機能を実現するために、Menuという
nativefier - Webサイトをローカルアプリケーション化 MOONGIFT
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 今やWebサイトであってもローカルアプリケーション並に使えるサイトが増えています。むしろクラウド上にデータが保存できる分、ローカルアプリケーションよりも便利な場合もあります。 そんなWebアプリケーションをローカルアプリケーション風にしてくれるのがnativefierです。 nativefierの使い方 nativefierはnpmでインストールして使います。 nativefier -name "MOONGIFT" http://www.moongift.jp/ そうするとElectronを使ってラッピングし、アプリとなります。 アプリを立ち上げるとWebサイトがそのまま表示されます。 nativefierはWebサイトをそのままラッピングしてアプリ化しているだけです。しかし普段使
Electron: autoUpdaterでアプリを自動アップデートさせる方法 (Mac/Windows) - Qiita
TL; DR ElectronのautoUpdaterモジュールを使うとMac/Windowsでアプリを自動アップデートさせられる Mac/Windowsそれぞれ違うアップデートのリリース方法が必要 Mac: アップデート情報を返すWeb APIを用意する Windows: grunt-electron-installer で作ったファイルをS3とかにアップロードする あとはautoUpdaterのAPIを呼び出すだけ はじめに Electronには autoUpdaterという、アプリの自動アップデート用モジュールが入っている。これを使うとMac/Windowsでアプリを自動アップデートさせることができる。 Wantedlyが開発しているメッセージングアプリのSyncデスクトップ版では、実際にautoUpdaterを使っているが、Mac/Windowsそれぞれで違うセットアップが必要であ
第8羽 トランスペアレントプレイング・プレイヤーストーリー (ごちうさ Advent Calendar 2015) - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 最近鬱病が急速に悪化しているerukitiです、ごきげんよう。アドベントカレンダーに四つも登録してしまって今週は二つ締め切りがあり、戦々恐々としています。今日はごちうさ Advent Calendar 2015の第8羽として、リゼ先輩のために透明な動画プレイヤーの作成解説記事をお送りします。 前振り さて、僕の疲弊しきった脳みそに唯一人間らしい感情が取り戻される時間が毎週土曜日22:30〜23:00です。ごちうさ？？の実況タイムだけ人間らしく生きられるのです。それでは僕は一週間のうち30分だけしか人間らしさを保てないのでしょうか。今日は
Webでいまいちくすぶっている技術をElectronにのせると格段に便利になることがある気がする
Electron Advent Calendar 2015の7日目です。 前日はElectron x WebSpeechAPIで遊んでみた話でした。 JSON Editorというブラウザ向けライブラリをElectronにのせてみました。 経緯を説明すると、 ・ちょっと仕事でエンジニア以外の人がJSONデータをいじりたいということになりまして ・でもテキストそのままメモ帳でいじるのは勘弁なので、なにかエディタが必要だよねと言うながれになり ・既存のWindows用エディタを探してみたけれどいまいち用途に合致したいいものがなく ・ふとWeb系大好きっ子の筆者が「JSON Schema Editor」とかでググるとWeb用のそれっぽいライブラリ「JSON Editor」が出てきたので ・ElectronにのせてWindowsで使えるようにした という話です。 今回いじりたかったJSONデータは
Electron x WebSpeechAPIで遊んでみた話 - Qiita
はじめに ちょっと前のElectronで作る最強のエディタ戦争やってた時に「音声認識できる議事録用エディタとかできないかなー」とか考えたので、ElectronでもWebSpeechAPIが使えるか試してみました。 リポジトリ 今回のサンプルコードはこちら https://github.com/itkrt2y/sample_web_speech_api_in_electron 一部実験的な構成で遊んでたのを流用して書いたので、参考にならないかも・・・ 音声認識：SpeechRecognition 仕様書 公式仕様書はこちら https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html 以下のように書かれており、Web標準ではないらしいです。 "This specification was published by the Spee
electron で webpack とか使ってアプリ作った - Qiita
electron の clipboard API 使ってクリップボードを監視するアプリ作りました クリップボード監視先輩 zaftzaft/cbsnpi 使ったもの ビルドツールには webpack タスクランナーは gulp プリプロセッサ類は CoffeeScript, Jade, Stylus それらに Vue.js を加えてモダンな感じにしました。 ディレクトリ構成 release ディレクトリは、win32-x64.zip など配布物の出力先に使用します 一応バージョンごとに切っておきます 全体の流れ インストール electron の動作環境を作る http://electron.atom.io/docs/v0.31.0/tutorial/quick-start/ の main.js を丸コピペで保存 gulp, webpack, etc を入れる 開発 gulp で watc
Electronでデスクトップウィジェットを作るまで - Qiita
はじめに HTML/CSS/JSを使ってデスクトップアプリケーションが作成できるElectron。 本記事ではデスクトップウィジェット作成するまでの流れを、簡単な時計アプリを題材として解説します。 ※ この時計アプリのソースコードとパッケージは、GitHubにて公開しています。 GitHub: SallyAcolyte/tutorial_clock 対象読者 HTML/CSS/JSで簡単なアプリは作れるが、Electronは初心者な方 Electronで透過ウィンドウ/フレームレスウィンドウを扱う際のポイントが知りたい方 自分好みなデザイン/機能を持つウィジェットを作成したい方 ※ Windows環境を前提としていますが、基本的な流れは他環境でも同様です。 チュートリアル Electronの入手 Electronの本体は、以下からダウンロードできます。 Releases · atom/el
Node/Electronアプリ開発/ビルド用Windows環境セットアップメモ - Qiita
現在、Sync というメッセージングアプリのWindowsデスクトップ版を、Electronを使って開発している。(同じくElectronを使ったMacデスクトップ版はすでに公開済み!) 普段はMacのみでNode/Electronを開発しているのだが、今回WindowsでのElectron開発・ビルド環境構築の知見がいくらか手に入ったので、この記事でまとめてみた。 あらかじめ Kobito for Windows の開発方法について @mizchi さんに詳しく話を聞かせていただいておりそれがとても参考になった (ありがとうございました)。 OS Windows 10 Home 64bit をMac上のVM (VMWare Fusion) にインストールした。 ライセンスはWindows版開発のために新しく購入した。 マルウェア対策 アプリのバイナリの汚染や誤判定を防ぐため、開発環境では
Atom Flight Manual
AI & MLLearn about artificial intelligence and machine learning across the GitHub ecosystem and the wider industry. Generative AILearn how to build with generative AI. GitHub CopilotChange how you work with GitHub Copilot. LLMsEverything developers need to know about LLMs. Machine learningMachine learning tips, tricks, and best practices. How AI code generation worksExplore the capabilities and be
phiary
Electron 入門です. 説明うんぬんよりもとりあえず触ってみたいって方向けの入門エントリー. 最短でインストールから実行, 配布用ファイルの作成までやる方法です. 「これ何やってんの？」 とか 「どういう意図で？？」 などありましたら 気軽に下のコメントや Twitter にて質問してください. Setup ディレクトリを作成 $ mkdir electron-app $ cd electron-app package.json を作る 色々聞かれるので適当に enter 押す $ npm init 出力された package.json の中身 { "name": "electron-app", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error:
Electron を試す 3 - 簡易音楽プレーヤー - アカベコマイリ
これまでのシリーズで Electron の開発環境が固まってきので実際にアプリを作成してみたい。サンプルとしてある程度の複雑さがほしいから以前に nw.js を使ってみる 5 - 簡易音楽プレーヤーで実装したものを移植することにした。 設計方針 移植にあたり単純に動かすだけなら NW.js 版の実装を Renderer プロセス部分へまるごとコピーするだけでよい。 しかし今回は Electron らしく Main/Rendrer を分割、ダイアログ表示や音楽ファイルのメタデータ読み込みは Main プロセスで実行させて Main/Rendrer 間の連携は IPC に限定する。 remote を利用すれば Main プロセス部分の機能を Renderer プロセスから簡単に呼び出せるけれど却下。便利な反面 Main/Renderer が密結合になりやすい。特に双方の Object を参照し
Electronでメディアファイル用のファイルブラウザ「BlackAlbum」を作った - joker1007’s diary
Electronで動作する動画ファイル及びJPG in Zip向けのファイルブラウザを作ってみました。 構成としてはElectron+React+Reduxで、gulpfile以外はbabelを使って書いてます。 そこそこ今風な感じを目指して、一部flowtypeとかも取り入れてますが、割と適当な感じで使ってます。 実は以前Node.jsで同じもの作ってたんだけど、せっかくちゃんとデスクトップアプリとして作れるようになったしReactにも慣れたのでElectronと今の技術で作り直してみたのがこれです。名前も同じだったりする。 https://github.com/joker1007/blackalbum https://github.com/joker1007/blackalbum/releases/download/v0.2.0/BlackAlbum-darwin-x64-0.2.0.
Nylas | Powerful Communication APIs
import Nylas from 'nylas'; const nylas = new Nylas({ apiKey: '<NYLAS_API_KEY>' }); const sentMessage = await nylas.messages.send({ identifier: <USER_GRANT_ID> requestBody: { to: [{ name: '<RECIPIENT_NAME>', email: '<RECIPIENT_EMAIL>' }], subject: '<EMAIL_SUBJECT>', body: '<EMAIL_BODY>' } }); require 'nylas' nylas = Nylas::Client.new(api_key: "<NYLAS_API_KEY>") request_body = { subject: '<EMAIL_SUB
Electron を試す - 開発環境の構築 - アカベコマイリ
これまで NW.js を使ってきたが同じ Chromium + Node 系のフレームワークとして最近は Electron のほうが勢いあるようなので試したくなった。使用感を把握するため、まずは開発環境を構築してみる。 更新履歴 2015/11/5 npm-scripts を babelify 7.2 (Babel 6.x) を採用した内容へ更新。また最新 watchify の Windows 対応について追記した。これらの詳細については babelify v7.2 を試すを参照のこと。 2015/10/19 npm-scripts を最新へ更新、Main プロセスのビルド説明に Browserify の --node オプション解説を追加。 設計方針 package.json と npm だけを使用 AltCSS は Stylus を採用 ユニット テスト対応 コード ドキュメント対応
ElectronでOnsenUIを利用してみよう！
Electronはクロスプラットフォームで稼働するアプリをHTML5、CSS3、Javascriptで構築できるプラットフォームアプリケーションとなっています。しかし、まだデザインフレームワークが確立されておらず、その辺りはスクラッチで作成するか、既存のWEBテンプレートで対応するしかありません。そこで今回はOnsenUIを利用してElectron上で動かしてみたいと思います。 Electronのインストールとプロジェクトの起動方法 執筆時点でのElectronとOnsenUIのバージョンは下記の通りです。 Electron： v0.31.1 OnsenUI： 1.3.8 angular： 1.4.5 インストール まずはベースとなるElectronのインストールからです。Nodeを利用してインストールします。
業務システムに Electron を組み入れるという提案 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 今日は、業務システムにElectronを組み入れるという提案をしたいと思います。 Electron のおさらい Electronは、Chromium + Node で構成された、デスクトップアプリ作成環境です。ビューは Chromium のウェブブラウザとしての機能がそのまま使えます。また、Node を組み込んでいるためにNodeの資産がほぼそのまま流用できます。サーバー機能とブラウザ機能の両方を持った環境とも言えます。 業務システムをウェブベースで作るの無駄じゃないですか？ いろいろな会社で業務システムと呼ばれる社内だけで使われるシス
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Electronのセキュリティその後 Yosuke HASEGAWA
electronでbabel + reactを直接使えるようにするまで - Qiita
