Electronライクな新フレームワーク「Gluon」登場。Chromium内蔵せずWebブラウザを利用、Node.jsだけでなくDenoとBunにも対応
デスクトップアプリケーションの開発を、JavaScriptなどのWebテクノロジーで可能にするフレームワークとして知られるのがElectronフレームワークです。 このElectronのようなフレームワークが新たに登場しました。「Gluon」です。 Electronがアプリケーション基盤としてNode.jsとChromiumをバンドルするのに対して、GluonはOSにインストールされているWebブラウザを用いるのが大きな特長です。 Google ChromeのようなChromiumベースのWebブラウザだけでなく、Firefoxにも対応作業が進められており、最新のバージョン0.11ではFirefoxでの安定度が向上しました。 Node.jsをバンドルする点はElectronと同じですが、Node.jsの代わりにDenoやBunを利用することにも実験的に対応しています。 Gluonは主にCh
TauriがiOS/Androidに対応「Tauri Mobile」アルファ版登場。Electron代替を目指すRust製の軽量フレームワーク
TauriがiOS/Androidに対応「Tauri Mobile」アルファ版登場。Electron代替を目指すRust製の軽量フレームワーク JavaScriptとHTML/CSSを用いてアプリケーションを構築できるElectronの代替を目指し、より軽量なフレームワークとして開発されている「Tauri」のモバイル対応版「Tauri Mobile」の最初のアルファ版公開が発表されました。 Tauriは開発にRust言語を用いて作られており、またUI基盤としてOSが備えているWebViewの機能を用いることで、Electron製のアプリケーションで組み込まれるChromiumのようなレンダラの組み込みを不要にするなど、Electronよりも軽量で高速なアプリケーションを実現するフレームワークであることが特徴です。 今年（2022年）6月には、Windows、Mac、Linuxに対応したバー
Electronの代替を目指す軽量なRust製フレームワーク「Tauri」、リリース候補版に到達
WindowsやmacOS、Linuxなどのクロスプラットフォーム対応のデスクトップアプリ開発を容易にするフレームワークとして高い人気を持つフレームワークが「Electron」です。 ElectronはChromiumとNode.jsを用いることで、HTML/CSS/JavaScriptのWebテクノロジーによってデスクトップアプリケーションを開発できるのが最大の特徴です。 いまやElectronは、Visual Studio CodeやMicrosoft Teams、Slack、GitHub Desktop、そして最近話題のNotionなど、さまざまなアプリケーションに採用されています。 このElectronの優れた特徴を備えつつ、よりメモリ消費量が小さくファイルサイズもコンパクトで、高いセキュリティを備え、柔軟なライセンスを実現しようと開発されたのが「Tauri」です。 Tauriは、
Electron製アプリの起動速度を1,000ミリ秒速くする方法
めっちゃダッシュするイヌさん英語で先に書いてから日本語訳しています ⇒ English version is available here. こんにちは、TAKUYAと申します。InkdropというMarkdownノートアプリを開発しています。このアプリはElectronで作っています。Electronは、NodeJSとChromium(ブラウザ)ベースでクロスプラットフォームなデスクトップアプリが開発できるフレームワークです。このフレームワークは基本的に素晴らしいです。なぜならあなたはネイティブ用のフレームワークを学ぶ必要がなく、JavaScript、HTMLとCSSでアプリが作れるからです。もしあなたがウェブデベロッパーだったら、手軽にアプリが作れるでしょう。一方で、多くの人がElectronの弱い点についても言及しています。それはアプリの起動速度が遅い傾向にある、という点です。僕のア
最高にシンプルなデスクトップ動画キャプチャツールを作った - Qiita
とにかく自分好みの超シンプルなTwitter投稿用デスクトップ動画キャプチャが欲しかったので作りました。 Windows向けのみに zip で配布しています。 他のプラットフォームは手元に環境がないのでビルド出来てませんが、たぶん動くと思います。 デモ 特徴 完全に Electron と JavaScript で動いてるので移植性バツグン 某GyazoとかWindows10標準(Shift+Win+Sで出来るやつ)に近い操作感 ffmpeg 利用による複数形式対応 (webm, mp4, gif) gif, mp4 に関してはTwitterにも投稿出来る(重要) マルチスクリーン対応(地味に大変だった) 使った技術 Electron 選定理由としては、UIが作りやすそうだと思ったからです。(あと、他のOSでも動くと楽しそうだなあと思った。) 今回のアプリのようなUIを作るには「画面上を半透
Electronアプリは、まずelectron-localshortcut入れて、Command+R、Command+Wを潰すのがセオリーだと思う - サイト更新停滞ちうっ
おまえ、セオリー語れるほど、Electronやってないだろう。 globalShortcut https://electronjs.org/docs/api/global-shortcut Electronにはショートカットキーを制御するglobalShortcutという機能があるんですけど、 これは公式ドキュメントにも書いてあるとおり、グローバルに効いてしまう。 アプリにフォーカスが当たって無くても、効いちゃうんですね。 これはこれで便利だけど、効き過ぎちゃう。 こんなCommand+Sを封じるアプリとか作ったら、あらゆるアプリのCommand+Sを封じちゃって大変ですね。 やってはいけませんよ。 'use strict'; const electron = require('electron'); const app = electron.app; const globalShortc
デスクトップに常時表示される時計アプリをElectronで作ってみたら驚くほど簡単だった話 - Qiita
こういうものをつくってみた話です。 最近新しい技術に触れていないなーと思って。ツールづくりをする機会が増えてきそうだったので、Electron を触ってみまして。ただチュートリアルをやるのも退屈なので、なにか作ってみたいなーと。その軌跡です。おっさんずラブを見ながらこれを書いています。 普段は C++ 組み込み系おじさんでして、Webっぽいあれこれは素人です（予防線） セットアップとハローワールド いくつか記事を見た感じでは下のページがわかりやすかった。 最新版で学ぶElectron入門 - HTML5でPCアプリを開発する利点と手順 - ICS MEDIA npm で Electron をインストールして、 npm i -D electron ここでグローバルインストールする派と、グローバル環境汚すな派がいるけど、まあお試しなのでどっちでもいい。自分の体験として困ったことが起きてから考え
Electronアプリをリリースするまでにあった知見 - Qiita
はじめに こんにちは、@tsuwatchです。普段はRubyを書くのですが、仕事の幅も広がりつつあり、フロントエンドも本格的にやっていこうということで、 Kaizokuというニコニコ生放送のデスクトップアプリをリリースしました。 人生の大半の時間がニコ生に溶けているわけですが、かねてからコメントビューワを作ろうと思っていたので、この機会に作ってみました。 しかし、Mac版のコメントビューワにはHakumaiという大変素晴らしいコメントビューワが存在するので、少し違う方向を向いた生放送ビューワをかねたアプリにしました。 Hakumaiはコメントビューワとしては数少ないオープンソースなので、実装やコメントサーバの仕様など大変参考にさせて頂きました。この場をお借りして、お礼を申し上げます。 アプリの機能や今後についての紹介はまた別途ブログで書くと思います。 ご興味がありましたら、ぜひ使ってみてい
Webページをデスクトップアプリ化 - nativefierを使ってみる - Qiita
nativefierとは 1行でシングルページWebアプリケーションをデスクトップアプリ化してくれる優れもの WebアプリをElectronでWrapし、Electron-packagerを使ってネイティブ( .exe .app ... )を出力するみたいです Githubリポジトリ : jiahaog/nativefier - Github 主としてOSX向けに開発したそうですが、Linux・Windowsでも動くそうです インストール npmでパッケージとして公開されています もしnpm入ってない人はbrewなりapt-getなりでNode.js入れて、npmインスコすると幸せになれます 注)アプデが非常に激しいので、本記事も極力最新版の情報に更新しています 既に入っている人はnpm updateしてもらえると整合性が取れるかと思います... 使いかた 試しに とすると、カレントディレ
Nativefierでどんなウェブアプリも一撃Macアプリ化！ブラウザとアプリの用途を分けて仕事を効率化しよう - 株式会社クラフトマンソフトウェア
Nativefierでどんなウェブアプリも一撃Macアプリ化！ブラウザとアプリの用途を分けて仕事を効率化しよう HTML5やJavaScriptでの表現力が非常に高くなった昨今、アプリをウェブだけで提供しているサービスは少なくない。今回はそうしたアプリをあたかもネイティブMacアプリのように変換できるNativefierについて紹介したい。 > アプリとブラウザを分けるメリットアプリとブラウザを分けるメリット 仕事をする上で、昨今のブラウザは2つの目的で使われる。 情報収集 特定業務の遂行 1つ目は、情報収集のツールとしてブラウザを使う。知りたいこと分からないことなどをGoogleなどの検索エンジンで検索し、調べ、業務の課題を解決するために使う。2つ目は、特定業務の遂行を目的に使う。例えばチャットツールのChatWorkやチケット管理のRedmineといったツールを動かすためにブラウザが使
VS CodeがDOMによるターミナル実装のパフォーマンスを改善できなかったためCanvasに変更
Integrated Terminal Performance Improvements Electronという史上まれに見るそびえ立つクソのようなGUIプラットフォーム上で実装されているVS Codeが、ターミナルの実装をDOMによるものからCanvasによるものに変更したそうだ。これは、DOMによる実装ではパフォーマンスの改善が十分にできなかったからだという。 DOMでターミナルを実装する際の問題ごととして、テキスト選択、テキストアライメント、GC、パフォーマンスを上げている。 テキスト選択：ターミナルのテキスト選択を実現するためにDOMのテキスト選択の挙動をだいぶ上書きしなければならない。 テキストアライメント：一部の文字はモノスペースになってくれず、workaroundとして一文字ごとに固定長のspanで包む必要があるが、これはパフォーマンス上よろしくない。 GC：DOMでターミナ
Vue.js + Scala.js + Electron でMac用backlogクライアントを作りました - 猫型の蓄音機は 1 分間に 45 回にゃあと鳴く
backlogというのは一般名詞のほうのbacklogではなく、ヌーラボさんのプロダクトのほうのbacklogです。 www.backlog.jp だいたい土日の2日間でできたのでよかった。 作ったやつどこにおいてあるか アプリ BackLogger-darwin-x64_v0.1.1.zip - Google ドライブ ソースコード github.com スクリーンショット タイトルの通り、Scala.jsとElectronで作られています。 なぜ Scala.js と Electron で作ったのか Scala.js がどれくらい実用的に使えるのかを知りたかった Electoron の得意なこと、苦手なことを触ってみて検証したかった というまっとうな理由と、 来年のScalaMatsuriに応募するためのネタがほしいな〜 「で？なんか偉そうに設計の話してるけど、お前はそれで何作ったの？
【10/2 追記 】MacのSlack.appで日本語入力すると変なスペースが入る問題への対応 - fortkle blog
ちょっと前からSlackを使っていて変なスペースが入るようになってしまってかなり困っていた。 対処法を見つけたので書いておく。 そもそも原因 最初にこの問題に関する情報を見たのはTwitter。 Slackに日本語入力したときに U+0008 が入る問題、Slackにbug reportしたところ既に修正に向けて動いているとのこと。次のアップデートでなおっているといいですね。 pic.twitter.com/bh0LWLCFwB— chezou (@chezou) 2017年5月9日 そのツイートへのリプライから問題の所在が「Slack→Electron→Chromium」にまで飛び火しているのを発見。*1 Slack.appの修正版がリリースされるまではまだ時間がかかりそう・・・とのこと。仕方ないので暫定対応を考える。 @chezou この issue のようですが、Chromium に
Electronで恋愛・婚活サービス「Pairs」をクライアントアプリ化し、機能拡張をしてみた - Qiita
Electronのwebviewを使ってみたかったので「Paris」のクライアントアプリ化して、少し機能拡張したので備忘録です。 やりたいこと Electronを使用し、Pairsをクライアントアプリ化する webviewの機能を使用した機能拡張（コミュニティ内のソート機能の実装、Web版はコミュニティにソート機能がないため） 以下完成形です。ElectronでPairsを表示。 コミュニティの画面内でのみ画面下部に検索バーを表示し、絞り込みたい年齢を選択。絞り込みをクリックすると範囲外の年齢の方が非表示になります。 （下記gifアニでは26〜30歳に該当しない方は非表示。display:noneにしているだけなので、ロードや画面遷移は発生しません。blur処理がめんどくさく、少ない画像でアニメーションさせているのでわかりにくかったらすいません。。） 技術スタック Electron Rea
超簡単にcreate-react-appでReact + Redux + Electronの開発環境をつくる方法 - Qiita
Electronの開発環境を、create-react-appで作りたかったので調べてたら、ドンピシャのやつを発見した。 How to build an Electron app using create-react-app. No webpack configuration or “ejecting” necessary. この通りにやったらできた。create-react-appのreactの部分には一切手を加えず、webpackの設定なども不要で、コードを変えたらすぐにElectronのアプリに反映される。超お手軽で便利です。やり方は下記ですが、electron-with-create-react-appに下記修正後のコードがあります。 やり方 1. アプリ作成、インストール create-react-appでアプリを作って、electronとnode-foremanをインストールす
英語をやっていくためのDuo3.0デスクトップアプリを作った話 - 解せぬ日記
以前、英語をやっていくためのDuo3.0アプリを作り直した話 - 解せぬ日記で書いたとおりReactNativeで作ったモバイルアプリを使ってDuo3.0をやってきたわけだけど、それをやっていると今度はデスクトップアプリが欲しくなってきた。やっぱりタイピングはそっちのほうが早く時間も節約できる。僕は普段、ArchLinuxを使ってて、仕事ではMacOSXを使っているので、気がついたらElectronを使って作ってた。Duo3.0アプリ芸人みたいな様相を呈してきたけど、僕はボキャビルがしたいだけなんだ。 成果 以下、成果になります。 vimeo.com ソースコードも置いとく。小さいのでElectronやってみたい人が雰囲気を眺めるには良いかも知れない。 github.com TL;DR Electronに関してはサンプル程度だが前に書いたこともあり、中身はJavascriptとHTMLで書
Vue.js + ElectronでTwitterクライアントを作った - razokulover publog
Vue.jsとElectronでシンプルなTwitterクライアントを作った。 vue-twitter-client きっかけとしては一言で言うとフロントエンド周りの勉強。 2017年1~3月の振り返りにも書いた通り。 自分はモダンなフロントエンドの開発に疎かったので重い腰を上げてそろそろやるかという気持ちになって3月中頃くらいからはじめた。 Vue.jsについては2,3週間前くらいから触りはじめている。 Vue.jsはちゃんとしたSPAからフォームにちょいと味付けみたいな使い方もできたり小回りがきく。 個人的にはReactでの開発よりやりたいことが直感的に書ける気がしてるので使いやすいという印象。 とりあえず最初はTODOアプリやAPIを叩く小さなフィードを作って、次にNuxt.jsでSSRできるミニサイトを作ったりで大体使い方は覚えてきたというステータス。 ライブラリでいうとvuex,
Electronの入門書を書きました - freee Developers Hub
こんにちは、エンジニアの野口(@joe_re)です。 freeeでは会計の法人向けの機能開発を主に担当しています。 この度Electronの入門書を執筆しましたのでご紹介させていただきます。 Electronを用いたアプリケーションでは、CafePitchというMarkdownで書けるプレゼンテーションツールを個人で作っています。まだまだ発展途上ですが、これからも開発していくつもりですので、もし興味がおありの方はお試しください :) (そしてフィードバックをいただけるととてもありがたいです！) 書いた本は「Electronではじめるアプリ開発 ～JavaScript/HTML/CSSでデスクトップアプリを作ろう」です。 Electronではじめるアプリ開発 ~JavaScript/HTML/CSSでデスクトップアプリを作ろう 作者: 野口将人,倉見洋輔出版社/メーカー: 技術評論社発売日:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「Electron」と「WebView2」はどう違う？ ～「Electron」の開発チームが解説／Windowsならば「WebView2」は魅力だが、「Electron」にまだ一日の長。使い分けも重要に【やじうまの杜】
GitHub - terut/duo-desktop: The desktop app for studying English for Japanese.
