[B! Electron] satoshieのブックマーク

【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の時の

satoshie 2023/03/08

Electron

リンク

Electronで設定ファイルの読み込み/書き込みを行う - Qiita

背景 Windowsでデスクトップアプリ開発って言うとどうしてもVisual Studioになってしまうのですが、開発メンバーにあまりVisual Studio(.NET C#)使える人もいないし、普段のWeb開発しているメンバーに新たにC#の習得も学習コストもかかってしまうので普段行っているVue.jsの知識でデスクトップ開発を行いたいというのが目的です。そんな中で、業務用のアプリとして必要になりそうないくつかの機能を実装していきます。まずは、vue + electron の開発のセットアップと設定ファイルの読み込み/書き込みをこの記事で解説したいと思います。前提 vue.jsでの開発を行ったことがある人 nodejs,yarn(npmでも)を使用したことのある人すでに node,(yarn,npm)がインストールされていること node と yarn は入っている前提です。 n

satoshie 2023/03/08

リンク

Electron + React + TypeScript の開発環境構築

% tree -a -I 'node_modules' . ├── dist ├── package-lock.json ├── package.json ├── src │ ├── main.ts │ ├── preload.ts │ └── web │ ├── App.css │ ├── App.tsx │ ├── index.html │ └── index.tsx ├── tsconfig.json ├── tsconfig.node.json └── webpack.config.ts 3 directories, 11 files dist/: webpack の出力先フォルダ src/main.ts: メインプロセスのエントリファイル src/preload.ts: プリロードスクリプト src/web/: レンダラープロセス (= React アプリケーション) ソースコー

satoshie 2023/02/24

リンク

Electron + Reactでデスクトップアプリを作ろう！ - Qiita

Electronとは？ Electronは、HTML、CSS、JavaScriptを使って、MacとWindowsの両方で動くデスクトップアプリを作ることができるフレームワークです。ElectronはChromiumとNode.jsがベースとなっており、Chromeで動くページであればそのままデスクトップアプリ化させることも可能です。作成したデスクトップアプリは、MacのAppStoreやMicrosoftのストアで公開することも可能です。 ■前回の記事 Electronを使ってMacとWindowsで動くアプリを作ってみる https://qiita.com/udayaan/it ems/dfb324bc6cadeb9a8f6f Reactとは？ Reactは、UIを作るためのJavaScriptのライブラリーです。Vue.jsと同じく、要素をコンポーネント化してUIを作れるため、メンテ

satoshie 2023/02/18

リンク

Hello from Electron React Boilerplate | Electron React Boilerplate

Electron React BoilerplateA Foundation for Scala ble Cross-Platform Apps Faster Iteration: Hot ReloadingMake changes to your app and preview the changes without having to refresh your app. Changes are made so that the state of your app is not lost. Scala ble: Incremental TypingBulding scala ble apps without types can only go so far. Get type errors while developing your app. Errors are thrown during

satoshie 2023/02/18

リンク

Electron での TypeScript サポートを発表 | Electron

Electron npm パッケージに、Electron API 全体の詳細なアノテーションを提供する TypeScript 定義ファイルが含まれるようになりました。これらのアノテーションは、たとえ純粋なJavaScriptを書いていていても、Electron の開発エクスペリエンスを向上させることができます。ただnpm install electron を実行して、あなたのプロジェクトに最新の Electron の入力を取得できます。 TypeScript は、Microsoft が作成したオープンソースのプログラミング言語です。これは、静的型をサポート追加することで言語を拡張する JavaScript のスーパーセットです。 TypeScript のコミュニティは近年急速に成長しています。そしてTypeScriptは、最近のStack Overflow開発者調査で最も愛されてい

satoshie 2023/02/18

リンク

【入門】ElectronをTypeScriptで手軽に試したい

この記事はClassi developers Advent Calendar 2022の8日目の記事です。はじめに Electronとは、Windows、macOS、Linuxで動作するアプリが作れるソフトウェアフレームワークです。読者対象者は以下の様な方です。 Electronの概要は知っているが、触ったことが無い方 TypeScriptで実装し学習したい方 Vue.jsやReactなどのライブラリは考慮しないで、Electronが動く環境を試したい方今回紹介する実装は、出来るだけシンプルな構成を目指しました。一旦依存関係を出来るだけ省きElectronの機能に集中する事を目的としています。実は、Electron Forgeという簡単にテンプレートが作成できるツールもあります。ある程度Electronに慣れてきたら、こちらを利用してみても良いでしょう。作ったもの開発環境 ma

satoshie 2023/02/18

リンク

処方せんの自動印刷アプリを Electron でつくった話 - メドピア開発者ブログ

フロントエンドエンジニアの小林和弘です。 kakari という薬局向けに提供しているサービスで Electron を使って Windows アプリケーションを作成したので、そのことについてお話しようかと思います。事の発端これまで、「kakari」では、患者さまから薬局へ処方せんが送信されたときに薬剤師さまが処方せんの受信に気づけるように FAX で処方せんを送信していました。しかし、FAX 送信に利用していた Twilio Programmable Fax サービスが 2021 年 12 月 17 日をもってサービス終了になってしまいました。このサービス終了に対応すべく、薬局向けに処方せんが送信されたらプリンターで処方せん印刷ができる Windows アプリケーションを Electron で作成することになりました。そもそもElectronとは HTML, CSS, JS のフロ

satoshie 2022/08/21

リンク

Electron + TypeScript + React の環境構築(Early 2021） - Qiita

Help us understand the probl em. What is going on with this article?

satoshie 2021/09/25

リンク

Electronで組み込み端末向けアプリケーションを開発し3年間運用してみて

組み込み端末のアプリケーションに Electron を採用し開発・運用を行っています。継続的な機能追加やトラブルサポートを行いながら 3 年が経過したので、Electron を採用した経緯や結果を経験を交えながら共有したいと思います。組み込み案件自体が初めてでしたのでその話も入っています。約 700 台ほど導入されており、なかなか大きな案件での採用と思いますので参考になれば幸いです。 ※Electron の基本的な説明は割愛します。システムについて一般的に「受付精算機」などと呼ばれ、店頭に何台か並べて設置して自動で受付・精算を行うシステムです。ホテルの受付端末のイメージです。ハード的にはセルフレジにも近いです。筐体自体は他社が用意し、弊社はその上に載せる GUI アプリケーションのみを担当しました。機能主な機能として来店受付・整理券発行予約チェックインチェックアウト

satoshie 2021/06/07

リンク

Electronでアプリケーションを作ってみよう - Qiita

はじめに Electronをご存知でしょうか. Electron(旧称: Atom-Shell)は, Atomエディタを開発するために生まれたクロスプラットフォームデスクトップアプリケーションエンジンです. Node.js + Chromiumをランタイムとしており, Atomだけでなく, Slackや先日のBuildで発表されて話題となったVisualStudio CodeもElectronで実装されています. いわゆるWeb系の技術, Node.js + HTML + CSSでアプリケーションを作成できるのが特徴です. 類似した思想のフレームワークとして, node-webkit(NW.js)もありますが, アプリケーションのエントリポイントの考え方等が異なります. このエントリでは, Electronの使い方をサンプルアプリを実装しながら説明していきます. お題このエントリのお題と

satoshie 2019/07/10

リンク

Electron アプリをつくる時に便利なパッケージ - はやくプログラムになりたい

この記事は Electron アドベントカレンダー2016 の13日目の記事です．本記事では，僕が Electron アプリをつくる上で便利だったり，ほしかったのでつくったりしたパッケージを7つほど紹介します． electron-about-window electron-dl electron-in-page-search electron-window-state menubar node-auto-launch electron-mocha electron-about-window electron-about-window は 'このアプリについて' ウィンドウを簡単にクロスプラットフォームにつくるためのパッケージです．下記のように関数を1つインポートして呼び出すだけで「このアプリについて」ウィンドウを生成することができます．（example） import openAbout

satoshie 2016/12/13

リンク

ElectronでYoruFukurou風のTwitterクライアントを作った - k0kubun's blog

最強のTwitterクライアント戦争なんか戦争をやってる人たちがいたので乱入することにした。日記書いた / 最強のTwitterクライアント作り始めた - 9mのブログ http://t.co/ecq7nT40qp— 友緒利奈 (@9m) August 22, 2015 最強のTwitterクライアント戦争参戦したい— 戦車 (@r7kamura) August 22, 2015 戦争だ…！ / “最強のTwitterクライアント戦争に参戦 - ✘╹◡╹✘” http://t.co/iJ3BAgPvFI— 友緒利奈 (@9m) August 22, 2015 YoruFukurou風のTwitterクライアント最近デスクトップでLinuxを使い始めたんだけど、YoruFukurouみたいな感じで使えるTwitterクライアントがなくて困っていた。なので、YoruFukurouを再実