Electron&React製でWinやLinuxでもMacのSpotlight風検索を行えるオープンソースのランチャーアプリ「Cerebro」がリリース。
Electron&React製でWinやLinuxでもMacのSpotlight風検索を行えるオープンソースのランチャーアプリ「Cerebro」がリリースされています。詳細は以下から。 CerebroはスペインのAlexandr Subbotinさんが昨年末から開発＆公開しているSpotlight風ランチャーアプリで、Electron&React JS製でMacの他にWindowsやLinuxプラットフォームに対応しています。 Cerebro After installation use default shortcut ctrl+space to show an app window. You can customize this shortcut clicking on icon in menu bar → preferences. KELiON/cerebro: Open-sourc
フロントエンドエンジニアが「アプリも作ってよ」と頼まれたときのために知っておきたい、人気JavaScriptフレームワークの特徴と違い。 MeteorとElectronはどちらもJavaScript、Node、HTML、CSSなどのWeb言語や技術を利用してアプリを開発するためのクロスプラットホームです。 これまでMeteorとElectronは同じ作業をするもので、互いに競い合っていると思っていました。なぜなら、この2つのプラットホームの紹介Webサイトで次のように書かれていたからです。Electronは、「JavaScript、HTML、CSSを使ってクロスプラットホームなデスクトップ用アプリを作成します」、一方でMeteorは「MeteorはWeb、モバイル、デスクトップ用のオープンソースプラットホームです」と書かれていました。 どちらの方が「デスクトップ用」アプリを作成するに「適し
GitHub - benogle/curve-app: Vector drawing desktop application
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
<body> <script src="lib/jquery.min.js"></script> <script> jQuery('#hoge'); // jQuery is not defined </script> </body> 原因 electronのissueがあった。 jQuery isn't set globally because "module" is defined · Issue #254 · atom/electron Electronではブラウザ側のJS実行時にmodule.exportsが存在するので、jQueryがcommonJSでロードされたと勘違いして、windowに$とjQueryを定義しないというのが原因。（この辺りにif文が） 解決策 requireでロードする <!--<script src="lib/jquery.js"></script>-->
GitHub - luin/medis: 💻 Medis is a beautiful, easy-to-use Mac database management application for Redis.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - kitze/JSUI: A powerful UI toolkit for managing JavaScript apps
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
https://dripcap.org/
■ code-serverを使ってみている 先日買ったChromebookで開発をするにあたって、sshでVPSに入ってvimで編集……というオールドスタイルを取らざるを得なくなっていたんだけど、先月あたりからちょくちょくcode-serverというVS Codeをリモートで動かすOSSの話が聞こえてきたので、入れてみることにした。 ようするにサーバで動いているcodeをブラウザで表示するものなんだけど、code自体がElectronで書かれているからできる技なわけで、ほとんどがブラウザローカルで動くから動作自体はリモートという感じはしないくらいにキビキビ動く。 設定なんかはcode-serverを動かしているホストの「~/.local/share/code-server/User/settings.json」に保存されるので、従来ローカルで動かしていたものをそこにコピーすればそのまま使え
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
GitHub - brave/muon: [DEPRECATED] Build browsers and browser like applications with HTML, CSS, and JavaScript
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
![GitHub - brave/muon: [DEPRECATED] Build browsers and browser like applications with HTML, CSS, and JavaScript](https://cdn-ak-scissors.b.st-hatena.com/image/square/f35757ccdb27512a426ecca68f0472f93833f20c/height=288;version=1;width=512/https%3A%2F%2Fopengraph.githubassets.com%2Fc6a5a7c737242f8fe0e59fc6ed718c9a86300cc0695bc77c69a5bc64f93cca83%2Fbrave%2Fmuon)
GitHub - gitify-app/gitify: GitHub notifications on your menu bar. Available on macOS, Windows & Linux.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
こんにちは！Webサイトの大穴を調査していてたまに遭遇する遺物にワクワクする、CTOのはせがわです！ 今日は、オンラインでのプレゼンテーションに最適なスライド表示ソフトを自作したのでそれの紹介です。 オンラインでのスライド再生の悩み みなさん、オンラインでセミナーやプレゼンテーションをしようと思ったけど、うまくPowerPointのスライドが再生できず、軽い吐き気や頭痛を感じたことはありませんか？ 例えば… PowerPointでプレゼンテーションの再生を開始したらスライドがウィンドウで最大化表示でモニターを占有してしまいZoomやGoogle MeetなどのWeb会議システムの画面が見えない 仕方ないのでモニターをもう1枚増やしたら今度は発表者ツールが最大化表示されてしまった いやいやそうじゃないと思い発表者ツールなしでスライドを再生したけど、やっぱりちょっと発表者ツールも表示させたい
Azure Storage Explorer – cloud storage management | Microsoft Azure
Products Popular View all products (200+) Azure Virtual Machines Azure Virtual Desktop Azure SQL Microsoft Copilot in Azure PREVIEW Azure AI Services Azure AI Studio Azure Cosmos DB Azure Kubernetes Service (AKS) Azure Arc Azure Migrate AI + machine learning Azure Machine Learning Azure AI Services Microsoft Copilot in Azure PREVIEW Azure OpenAI Service Azure AI Studio Azure AI Vision Azure AI Se
Min - 軽量で高速なWebブラウザ
WebブラウザのレンダリングエンジンとしてはWebKitが最も有力になっている一方、ガワの部分は多彩なブラウザが出てきています。Google ChromeやSafariでは満足しない人たちが多いのでしょう。 今回はその一つ、MinというWebブラウザを紹介します。軽量で高速なWebブラウザです。 Minの使い方 こちらがメイン画面です。もの凄くすっきりした画面です。 アドレスバーすらありません。 デフォルトの検索エンジンはDuckDuckDo。切り替えもできます。 インスペクタの表示もできます。 複数タブ開いたところ。あまり邪魔にはなりません。 設定です。アドブロック機能もあります。 キーボードショートカットです。 レンダリングエンジンはWebKitです。 MinはElectronを使っているので、JavaScript/CSSを使って作られたWebブラウザということになります。タブをグルー
はじめに Reactでは様々なリッチなコンポーネントが使えます。Electronで使いたいので調べてみました。 どんなリッチコンポーネントが提供されているか調べるため、 「react best ui library」などで検索してまとめました。 この記事は、そんなライブラリのまとめです。サンプリングは厳密ではないので参考までに。 下の図は、いくつかのライブラリのデモからピックアップしたものです。 「react best ui library」でヒットしたページのまとめ 以下の５つのサイトで紹介されているものの表を作ってみました。 英語の記事 ① 10 Best ReactJS UI Frameworks for rapid prototyping ② What is the best UI component library for a React based web app. ③ 19
インタラクティブなトイアプリを作る必要があったので electronとFRPが前提のHaskell風味AltJSであるelmを使って作ってみた。 さらにNativeなAPIを使う方法についても調査し、 今回調査した知見をもとに elmtrnというボイラープレートを作った Quickstart git clone git@github.com:yasuyuky/elmtrn.git cd elmtrn npm install elm make -y gulp 上記のようにすれば公式のclockサンプルを 謎の時計ウィジェットにしたものが立ち上がる。 elm + electron elmで書いたものをelectronで動かすのは想像していたより簡単で electronのhello worldに含まれるような 以下のような標準的なapp.jsで指定してるhtmlの部分を elmで生成されるhtm
https://github.com/uu59/atom-twitter-client mikutter使ってたけどどうも複数アカウントだと不安定でしょっちゅう落ちるので作った。以下は日記なので有益なことは書いていません。 ツールとライブラリの選定あるいはyak shavingの軌跡 前に書いたようにnpm run-script用にCoffeeScriptも使ってるけど、アプリのコードはECMAScript6 with Babelに統一した。単にES6書いて知見を得たいというだけの理由でES6にしていて、traceur-compilerじゃなくbabelにしたのも「JSXの面倒も見てくれるしなんとなく」くらいの弱い理由でしかない。 フレームワークはReactとFluxxorを使った。当初はmercuryを参考にしながらMatt-Esch/virtual-domを使おうとしてたけど、babe
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
GitHub - max-mapper/menubar: ➖ high level way to create menubar desktop applications with electron
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - bnb/awesome-hyper: 🖥 Delightful Hyper plugins, themes, and resources
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Electron で Live Dwango Reader（旧 Live Door Reader）クライアントを作ってみる、その二 - Qiita
Electron で Live Dwango Reader（旧 Live Door Reader）クライアントを作ってみる、その二JavaScriptNode.jsReactElectron 思っていたよりたくさんの方たちに見ていただいたようで、とにかく圧倒的にデザインがダサくて恥ずかしかったので、ちょっとだけバージョンアップしました。あと、前回のは Electron 成分が少なめでしたので、今回はちょっぴり増量しています。レポジトリはこちら。 圧倒的にダサかったデザインをなんとかした Slack っぽくしてみました。ちょっとは今風になったかもしれないです。 そもそもデザインセンスもないですし、HTML / CSS は 3〜4 年くらいまともに触っていないので、どなたかやってやるよ！って方がいらっしゃいましたらぜひ...。限界に近いです。 認証をどうにかする アクセストークンをインスペクタ
GitHub - dripcap/dripcap: ☕️ Caffeinated Packet Analyzer
Dismiss Join GitHub today GitHub is home to over 36 million developers working together to host and review code, manage projects, and build software together. Sign up
Over the past weeks, we’ve received several questions about the differences between the new WebView2 and Electron. Both teams have the expressed goal of making web-tech the best it can be on the Desktop, and a shared comprehensive comparison is being discussed. Electron and WebView2 are fast-moving and constantly evolving projects. We have assembled a brief snapshot of similarities and differences
テスト書いてないと愚痴をこぼすと例のライオンのスタンドがデスクトップいっぱいに表示されるelectronアプリをつくった - Qiita
春です。テストの季節です。 そこで、「テスト書いてない」とPCの前でつぶやくと画面いっぱいに例のライオンのスタンドが光臨するelectronアプリケーションを書いてみました。 ぜひ、音声ありで見てみてください。 音声認識について全く伝わりませんが、gifもおいておきます。 ダウンロード 以下のリンクからダウンロードできます。 なお、透明なアプリケーションなので、「テスト書いてない」と発言して動作確認してください。 Release akameco/twada-stand windows版もありますが、動作確認していませんので、もし動かなかったらごめんなさい。 わたしのwin機はwindows10にアップデートしようとしたら失敗して無限に再起動を繰り返すようになってしまったので。 ソースコード: github 音声認識 electronからwebkitSpeechRecognitionを利用し
GitHub - azu/postem: Cross posting client for twitter, hatebu, and own services.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Electronでは楽にアプリを作れるのは良いのですが、日本語についてはいわゆる中華フォントが表示されてしまうという問題がありました。 これを解決する方法を見つけた、という記事を元々書こうとしていたんですが、つい最近リリースされたv0.36.0で内部のChromeのバージョンが47に上がったせいか、きちんと日本語フォントで表示されるようになっていました。(たぶんChrome 47と同じくMS P ゴシック) とはいえ、webViewの中身のフォントを外部から変えるといった用途には使えるので一応書き残しておきます。 ローカルのHTMLファイルをロードするようなElectronアプリの場合、通常通りCSSでfont-familyを指定してやればもちろんフォントを変更できます。一方、webViewタグを使って外部ページをロードする場合、当然ながら元のサイト側でフォントが指定されることになりま
GitHub - Kong/insomnia: The open-source, cross-platform API client for GraphQL, REST, WebSockets, SSE and gRPC. With Cloud, Local and Git storage.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
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
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Webの技術でクロスプラットフォームなデスクトップアプリケーションを開発できるフレームワーク「Electron」。今回は発展的な内容としてElectronを使用した画像加工アプリケーションの開発に挑戦をします。 HTML5で画像加工というとみなさんはどのテクノロジーを思い浮かべるでしょうか？ Canvas、Flash、CSS・・・といくつか手法はあるものの、今回はシェーダーでの高速な画像処理が実現できるWebGLを選定しました。シェーダーによる画像の加工に関しては、記事「WebGLでおさえておきたいシェーダーの定番画像処理8選」で説明しています。本記事ではその時に作成したデモを利用し、わずかなステップでElectronによるアプリケーション化を実現します。 ※ 本アプリケーションはElectron v0.35.2 / Node.js v4.1.1 / Three.js r70 にて制作を行
electron-plugins
electron-plugins Plugin loader for electron applications. Installation npm install electron-plugins --save Usage In your electron render process you can load your plugins like so: var plugins = require('electron-plugins'); document.addEventListener('DOMContentLoaded', function () { var context = { document: document }; plugins.load(context, function (err, loaded) { if(err) return console.error(err
1. This results in a 30% performance hit. It is unclear if it is supported in version 0.13. 2. This is a very weak protection. It’s basically a TAR archive of all the project files. 3. On a MacBook Pro Retina running Mac OS X.5.5 (Yosemite). Higher is better. 4. Unzipped. Depending on platform and architecture. See details in Jared’s comment below. 5. This can be done by using the “node-main” inst
JSer.info #458 - Node.js 12.13.0がリリースされました。 Node v12.13.0 (LTS) | Node.js Node.js 12.xのLTS(Long Term Support)となるバージョンで、Node.js 12.xは2022年4月までメンテナンスされます。 現在のLTSは8.x、10.x、12.xの3つとなり、8.xは2019年の12月でサポート終了となる予定です。 nodejs/Release: Node.js Foundation Release Working Group AWS Lambdaでは、Node.js 8.10の利用を非推奨にして廃止までのスケジュールがアナウンスされています。 Node.js 8.10 is EOL, please migrate your functions to a newer runtime vers
Electron Advent Calendar 2015 - Qiitaの12日目ですが一日遅れでの投稿になります。 さて、Electronの記事なんですが、webviewを使ってgmail clientを書く話にしようかとも思ったのですが、あまりにもまとまらなかったのでフォント選択の話にしようかと思います。 最近はElectron製のアプリも増えてきましたが、僕は一つ不満を持っています。それはElectron自体がフォント選択ダイアログを持っていないためか、どのアプリもフォント選択機能がなく、せいぜいが直接フォント名を設定ファイルに書くという仕組みになっていることです。Atom, VSCodeなんかもそのパターンですね。 さて、システムフォントの一覧及びそのフォントの情報を取得する方法はあるでしょうか？標準ではありませんがfont-managerを使えば可能になります。 このfont-
GitHub - jupyterlab/jupyterlab-desktop: JupyterLab desktop application, based on Electron.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
自己紹介 じゅんじゅんというニックネームで、関西を拠点に活動しているフロントエンドエンジニアです。 HAL大阪の2回生です👍 (2016.9.9現在) よくstart up系イベントに行くので、大阪らへんの方は会いましょう！ 作ったもの 今回は ElectronとReactで作ること しか決まってないので、リアルタイムプレビューの機能だけしかつけていません。 できたもの。 今回作った経緯 今回は、いつもREADMEとかを書くときにsublime textのOmniMarkupPreviewerを使っていたんですが、全然動かない。。 なぜか分からないので、勉強を兼ねて作ることにしました。 今回使う技術は Electron React ぐらいです。 Editor部分はAceを使いました。 Markdownのpreviewには、markedを使いました。 Electronに関しては、ほぼサンプ
![[ Electron + React ] 5分で作るMarkdown Editor - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/3994ded5d5fc401e69bb2ad5d915a5e64bd6dbc2/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCJTIwRWxlY3Ryb24lMjAlMkIlMjBSZWFjdCUyMCU1RCUyMDUlRTUlODglODYlRTMlODElQTclRTQlQkQlOUMlRTMlODIlOEJNYXJrZG93biUyMEVkaXRvciZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MWE5MDgxNDZhYzc5MDZhN2MzZjUwYmUxYTgyOTkzMjA%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwa29ub2p1bnlhJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz04OTI1NGVmZGVmMzBhNDJmODYwOWJkOTY0OWJlYjAxMQ%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dab96b4e71faa491a79bab2ffff5e7a4e)
Electronアプリの自動アップデートサーバーをhazelとnowで作る Trello のデスクトップアプリ 1000ch/whale や esa.io のデスクトップアプリ 1000ch/quail は Electron 製だが、この macOS バージョンに、重い腰を上げて自動アップデート機能を実装した。 Electronの自動アップデート機能 Electron には autoUpdater という自動アップデートを提供するクラスが備わっている。これは Squirrel/Squirrel.Mac というフレームワークの機能で、Electron 側についてはそれをラップした autoUpdater を通して簡単に実装できる。 const { autoUpdater } = require('electron'); autoUpdater.on('checking-for-update'
Electronでアプリを作っていると、新着のお知らせなどがあった場合にアプリアイコンにバッジを付けたくなります。 Electronにはそれを実現するAPIが用意されているので、基本的には簡単なのですがWindowsでは非常に面倒だったのでまとめておきます。 ちなみにバッジには任意の数値を出すことを想定しています。 Linuxはデスクトップ環境を用意したことがないので対象外です。 const electron = require('electron') const app = electron.app const BrowserWindow = electron.BrowserWindow const path = require('path') const url = require('url') let mainWindow function createWindow () { mai
Electronのページ内検索はcontents.findInpageを使う必要がありますが、毎度同じような処理を書くのもなんだかなという感じがしたのでモジュールにして公開しました。 electron-search-text 使い方は👇の通り。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <style> body { height: 100vh; margin: 0; } webview { height: 100%; } .search-box { display: none; } .state-visible { display: block; } </style> <link rel="stylesheet" href="./search.css"> </head> <body> <div class
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ElectronとMeteorの違い JavaScriptでアプリを作るなら何を使えばいい？
ElectronでjQueryがundefinedになる - Qiita
code-serverを使ってみている - ただのにっき(2019-04-04)
リモートでプレゼンテーションするのに最適なツールを作った - セキュアスカイプラス
ReactのUIコンポーネントライブラリの一覧表(2017/5版) - Qiita
elm+electronで気楽に始めるFRP - Qiita
uu59のメモ | React.js/Fluxxorでatom-shellで動くTwitterクライアントを作ってる
Electron 4.0.0 | Electron
http://utf-8.jp/cb2016/cb-hasegawa-ja.pdf
WebView2 and Electron | Electron
Electronの中華フォントを克服したかった | Airwalker's Blog
Electronで画像加工アプリケーションを作ってみた - ICS MEDIA
NW.js & Electron Compared - TangibleJS
2019-10-22のJS: Node v12.13.0 (LTS)、Chrome 79の開発者ツールの変更点、WSL 2でNode.js入門
Electronでフォント選択を実現する - Qiita
https://acrophobic.me/post/2018-09-09-state-of-gui-dev-with-go-2018/
[ Electron + React ] 5分で作るMarkdown Editor - Qiita
Electronアプリの自動アップデートサーバーをhazelとnowで作る
Electron製アプリでアイコンバッジを実装する(Mac,Windows対応版) - Qiita
Electronでページ内検索を行う - Qiita