Electron | IPCによるプロセス間通信(ipcMain, ipcRenderer, 設定) - わくわくBank
main.js wakuwaku:xxx という Channel でメッセージを受信できるようにしています。 メッセージを受信したら、3秒待機後、wakuwaku:yyy という Channel にメッセージを送信しています。 ( 後述しますが、 nodeIntegration: true, の箇所は後で修正します。 ) const { app, BrowserWindow, ipcMain } = require('electron') let window const sleep = (second) => new Promise(resolve => setTimeout(resolve, second * 1000)) app.on('ready', () => { window = new BrowserWindow({ width: 800, height: 600, webP
Electron アプリのテンプレート 2021
作ったので公開しておくが、こういうテンプレートはメンテしないとすぐ腐ってしまうけどメンテするモチベーションも特にないのでスナップショットという意味合いも込めて2021をつけている。 electron-next ベースに electron-next というのを使っていて、これがけっこうよくできていた。やっていることはシンプルで、レンダラプロセスに Next.js を使っていて、開発時は Next.js のサーバーを起動し、production build では next export した HTML をいい感じにナビゲーショできるようになっている。これにより Next.js のいい感じのビルドシステムを使えて、開発時には hot reload も可能になっているし、production build は静的な HTML と bundle されたアセットが利用可能になる。賢い。 Next.js
Electronで組み込み端末向けアプリケーションを開発し3年間運用してみて
組み込み端末のアプリケーションに Electron を採用し開発・運用を行っています。 継続的な機能追加やトラブルサポートを行いながら 3 年が経過したので、Electron を採用した経緯や結果を経験を交えながら共有したいと思います。 組み込み案件自体が初めてでしたのでその話も入っています。 約 700 台ほど導入されており、なかなか大きな案件での採用と思いますので参考になれば幸いです。 ※Electron の基本的な説明は割愛します。 システムについて 一般的に「受付精算機」などと呼ばれ、店頭に何台か並べて設置して自動で受付・精算を行うシステムです。 ホテルの受付端末のイメージです。ハード的にはセルフレジにも近いです。 筐体自体は他社が用意し、弊社はその上に載せる GUI アプリケーションのみを担当しました。 機能 主な機能として 来店受付・整理券発行 予約チェックイン チェックアウト
electron 製アプリを DesktopBridge で Microsoft ストアに出せるようにしてみよう - かずきのBlog@hatena
詳細は、こちらのブログ記事にあります。 Convert your Electron app using the Desktop Bridge – App Consult Team この手順に沿ってやってみます。 Node.js のインストール これが無いと始まりませんね。 Node.js electron のクイックスタートプロジェクトを取ってくる 雛形があるというのは素晴らしいですね。ということでクローンします。 git clone https://github.com/electron/electron-quick-start 初期設定 では以下のコマンドを打って各種 npm パッケージを取ってきます。 cd electron-quick-start npm install 動作確認 以下のコマンドで動作確認が出来ます。 npm start exe を作成して appx にパッケージン
Electron 2.0.0 | Electron
After more than four months of development, eight beta releases, and worldwide testing from many apps' staged rollouts, the release of Electron 2.0.0 is now available from electronjs.org. Release ProcessStarting with 2.0.0, Electron's releases will follow semantic versioning. This means the major version will bump more often and will usually be a major update to Chromium. Patch releases should be
electronでリリース用パッケージを作る - PartyIX
先日書いたとおり，electronでMastodonクライアントを作ったのだが，パッケージ化に関してかなり迷走したので，最近のelectron事情を書いておく． electronに関しては，「ほら，こうしたら簡単に作れるでしょ？」といういわゆるHello World系の記事が非常に多く，細かい困りごとやリリースに必要な情報はあまり出てこない． また，2015年くらいの，electronが流行り始めた時期の記事は結構あるものの，最近はそこまで記事が多くないこともあり，最近のリリース事情がよくわからなかった． アイコンを作る アイコンは，どのようなビルド手段を使うにしてもおそらく同じセットが必要になる． これに関してはあまり変更されておらず，古い記事でもかなり役に立った． とりあえず大本となるpng画像かなにかを手元に用意しておく． Mac icnsファイルを用意し，それをelectron-b
動画切り出しアプリをElectronで作った - console.lealog();
in 弊社の開発合宿。 発表資料こちら。 動画切り出しアプリをElectronで作った ここに載せてない細かいことを、忘れないようにメモっておきます。 作ったもの GitHub - leader22/movie-slicer: Slice your favorite scenes from movie file. 動画ファイルから、任意の秒数を切り出して、新たに動画ファイルを作成するアプリです。 別途インストールされてる前提の`ffmpeg`をElectronから呼び出してるので、いわば豪華な`ffmpeg`ラッパーです。 完全に自分用で作ったので、用途としてはいわゆる`mp4`を`mp4`に切り出すだけに限定してます。 他のフォーマットも`ffmpeg`が対応してれば対応できると思うけど、手元に素材もなかったのでやってません。 Electronを使っててパッケージングもちゃんとやったので
ElectronのBrowserWindowのライフサイクル - techium
Electronアプリを作る際はBrowserWindowを使うことが多いと思います。 BrowserWindowは簡単にWebページをWindow内で表示することができるコンポーネントです。 そのためウィンドウアプリを作る際に必ず使う登竜門のような機能です。 このBrowserWindowの各種イベントがどのタイミング発生するかをまとめました。 また、BrowserWindowのライフサイクルはElectronのライフサイクルと密接な関係がありますので、Electronのライフサイクルを含めた形で紹介します。 Electronのライフサイクルについてはこちらを参照してください。 ライフサイクル platform依存のイベントを除いたライフサイクルは次のようになります。 青色：BrowserWindowのイベント オレンジ色：appイベント イベントの詳細 各イベントの詳細は次の表のように
Announcing TypeScript support in Electron | Electron Blog
The electron npm package now includes a TypeScript definition file that provides detailed annotations of the entire Electron API. These annotations can improve your Electron development experience even if you're writing vanilla JavaScript. Just npm install electron to get up-to-date Electron typings in your project. TypeScript is an open-source programming language created by Microsoft. It's a sup
Electron で手動GCを行う - まるまるこふこふ
さいです。 JavaScript と Electron でPC向けの弾幕シューティングゲームを作っています。 C++ と違って JavaScript はGarbage Collection (以降GCと呼称)がある言語なので、 ゲームプレイ中に不定期にGCが発生して、ゲームのパフォーマンスが悪化することがあります。 Object pooling を使って、GCの回数は減らす努力はしているのですが、 それでも(恐らく)GCの発生によって、古いPC等では露骨に画面が止まることが あるので、Electron上で GCのタイミングを調整したいなぁと思いました。 Electron は Chromium ベースのプラットフォームであり、 Chromium は v8 エンジンを使用しています。 v8 エンジンのGCは Mark-Sweep 方式でのGCです。 v8 エンジンが自分で判断して行うGCを止め
Electronアプリをプロダクトとして「正しく」リリースするために必要な3つのこと | 株式会社ヌーラボ(Nulab inc.)
Typetalkデスクトップアプリ 先日、弊社チャットサービスTypetalkのデスクトップアプリをリリースしました。おそらくTypetalk.appのパッケージを覗いてElectronの痕跡を見つけ出した方もいらっしゃると思いますが、その通りElectronをベースに実装しています。 ElectronはHTML、JavaScript、CSSなどWebの技術を使用してデスクトップアプリを開発できます。GitHub社のAtomエディタをはじめとして、今では非常に多くのアプリがElectronベースで公開されており、実装方法についても既に多くの記事が書かれています。 ただし、正式にアプリを公開する場合には、コードサイニングなどを行うなど、考慮が必要なポイントがいくつかあります。そこで本記事では正式にElectronアプリをWindows/Mac向けにリリースするにあたって必要だった3つのことを
Creating screenshots of your app or the screen in Electron framework
Creating screenshots of your app or the screen in Electron framework Although to require the creation of a screenshot in your app is not so usual, know how to do it won't hurt you. This feature is really useful for every application that want, for example, a detailed error report! a console error message may not help in a lot of cases, however, an image could save the day. In this article, you'll
GitHub用のIssue Reader「Jasper」の開発を振り返ってみる - maru source
この記事はElectron Advent Calendar 2016の11日目の記事です。 この記事では僕がプライベートで開発しているJasperというGitHub用のIssue Readerについて書きました。 JasperはElectronで作られており、どういうものかを一行で説明すると「任意の条件にマッチしたIssueが流れてくるIssue Reader」です。 https://jasperapp.io/ https://github.com/jasperapp/jasper 今回はそのJasperの開発初期、リリース期、運用期での出来事を時系列でまとめました。 なので、技術的な話はあまり多くありません。 どちらかというと僕自身の備忘録としてJasperの開発史をまとめたものになっており、すごく長い記事になっています。 ご注意ください。 目次 開発初期 コンセプト 初期実装 フィード
Essential Electron : Electronの簡潔・平易な概要 | POSTD
Electronとは？ Electronは JavaScript、HTML、CSS を使ってデスクトップアプリケーションを作ることができる ライブラリ です。作ったアプリケーションはMac、Windows、Linuxで動かせます。 次は： なぜ重要？ 定義： JavaScript、HTML、CSS はWeb用の言語で、Webサイトの基本的な構成要素です。Chromeなどのブラウザは、コードをふだん目にするグラフィックに変えて表示します。 Electronはライブラリです Electronはコードですが、再利用でき、自分で書き起こす必要がありません。ユーザはその上にプロジェクトを構成します。 参考資料 Apps built on Electron Electron API Demos （Electronで何ができるかをみてください） なぜ重要？ 一般に、デスクトップアプリケーションは各オペレ
Evolution of Electron（日本語）
（このトークは @kohei-takata が通訳しました。） 皆さんこんにちは。今日、私は、どのように Electron が生まれ、有名になっていったかについて話したいと思います。 Kohei TAKATAさんにトークの内容を翻訳してもらったので、私は日本語でこのトークを行う（おこなう）ことができます。ありがとうございます。 はじめに、自己紹介をしたいと思います。私は3つの名前を持っています。中国では、 ちょうせい と呼ばれています。アメリカでは、 Cheng Zhao と呼ばれています。これは、英語表記の名前です。しかし、日本では私の名前は ジャオ チェン になります。これは英語名のカタカナ表記になります。このように、私は同じ意味の3つの名前を持っています。 私は Electron の作者（さくしゃ）です。今は GitHub で働いています。今も Electron の開発を続けています
ElectronでBrowserWindowのCookieを設定する - totorajの開発日記
タイトル通りです。 sessionってのを使います。 下記の公式ドキュメントに詳細があります。 electron/session.md at master · electron/electron · GitHub ソースコード 簡単なサンプルです。 "use strict"; const electron = require("electron"); const app = electron.app; const BrowserWindow = electron.BrowserWindow; var mainWindow = null; // アプリの準備ができたらWindowを表示 app.on("ready", function () { // Windowを生成 mainWindow = new BrowserWindow({ width: 600, height: 400, tit
Electron x React x Webpack
3.md Electron x React x Webpack 0. Synopsis 今回は次のような問題を解決してみる。 ES6が使いたい よりアプリらしく作りたい 変更するとRefresh押すのが面倒いい まず、Electronは現状Node v4.1.1を使っているので、ES6で使えないものがまだ多い。今回はこれをWebpackで抑えてみる。ついでに、WebpackのHot module replace(以下、HMR)を利用して、ScriptやCSSの変更をRefreshsせずに反映されるようにしてみる。その上にReactを導入する。 1. 初期設定 Electronを設置する。 npm i -D electron-prebuilt WebpackのLoaderとPluginを設置する。 まずは、WebpackとJSXをコンパイルするためのBabel loader、React tr
Electron + Angular2でMarkdownでスライドを作れるプレゼンテーションツールを作っている - Please Drive Faster
Angular2を学ぶ目的から、最近はElectron + Angular2でプレゼンテーションツールを作っている。 とりあえず一通り動くところまでできたのでpublishした。 github.com 使い方はこんな感じ。 エレベーターの中の30秒でちゃんと相手に伝わるプレゼンをすることを意味するElevator Pitchという言葉があるんだけど、Cafe Pitchという名前はそこからきている。 素早くプレゼンを作るためのツールだけど、現実30秒でプレゼン作れないだろじゃあcafeかな、みたいな感じで、まとめるとそんなに深い意味はないです。 ちゃんと実行できるバイナリを用意しようとは思ってるけど、その辺の準備に必要なことがまだわかっていないのでnpmでglobalにinstallすれば使える、という感じ。 このあたりの記事を見ると分かりそうなので、追って対応していこうかなと思う。 あと
はじめてのElectron - CLOVER🍀
フロントエンド系の勉強を進めるにあたり、どうするのがいいのかなーと思う今日この頃です。 そんな中、ちょっと気になっているElectronを試してみることにしました。 Electron | Build cross platform desktop apps with JavaScript, HTML, and CSS. Electronって何？という話ですが、こちらの記事を見るのがいいかなーと思います。 最新版で学ぶElectron入門 - HTML5でPCアプリを開発する利点と手順 - ICS MEDIA Webの技術（JavaScript、HTML5など）を使って、クロスプラットフォームで動作するデスクトップアプリケーションを作成するためのフレームワークだそうです。Chromiumを内包しているためWebの技術がそのまま使え、作成したアプリケーションを各プラットフォームで実行可能な状態に
マルチプラットフォームで動く「Electron」は本当に使える技術なのか？｜CodeIQ MAGAZINE
2018年4月25日をもちまして、 『CodeIQ』のプログラミング腕試しサービス、年収確約スカウトサービスは、 ITエンジニアのための年収確約スカウトサービス『moffers by CodeIQ』https://moffers.jp/ へ一本化いたしました。 これまで多くのITエンジニアの方に『CodeIQ』をご利用いただきまして、 改めて心より深く御礼申し上げます。 また、エンジニアのためのWebマガジン「CodeIQ MAGAZINE」は、 リクナビNEXTジャーナル( https://next.rikunabi.com/journal/ )に一部の記事の移行を予定しております。 今後は『moffers by CodeIQ』にて、 ITエンジニアの皆様のより良い転職をサポートするために、より一層努めてまいりますので、 引き続きご愛顧のほど何卒よろしくお願い申し上げます。 また、Cod
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
