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-forgeを使ってmacOSからwindows向けにmakeを実行
electron-forgeでmacOSからwindows向けのビルド（クロスコンパイル）を行う。 要約 electron-forgeのデフォルトコマンドでは、makeやpackageは使用している端末依存。 コマンド末尾で--archや--platformを指定して、変更することができる。 指定できるアーキテクチャとプラットフォームは、最下部の参考を参照のこと。 デフォルトのyarn packageやyarn makeでは無理 electron-forgeで作るとデフォルトで、yarn packageやyarn makeが準備されているが、これを実行しても使用している環境のファイルしか出来上がらない。 せっかく作ったなら、windowsくらい対応したいものだ。 そこで色々試してみて、とりあえず出来たのでメモを残しておく。 まずは、packageから makeすればpackageも行われる
【入門】Electron完全に理解した
Electronとは Electronとは、GitHubが開発したオープンソースのフレームワークです。macOS、Windows、Linuxといったクロスプラットフォームに対応したデスクトップアプリを開発することができます。 ChromiumとNode.jsを使用しているため、HTML、CSS、JavaScriptなどのWeb技術を駆使してデスクトップアプリをつくれるのが大きな特徴のひとつです。 エンジニアにはお馴染みのVSCodeやSlackをはじめ、FigmaやTwich、Microsoft TeamsなどのデスクトップアプリにもElectronが採用されています。 そんなElectronを完全に理解するために、お約束のHello Worldから入門してみました。 WindowsでHello Worldしてみる 本記事ではWindowsでの環境構築とアプリのインストーラー作成までの流れ
npmでpermission deniedになった時の対処法[mac] - Qiita
この記事について npmを利用してinstallしたりupgradeしたりする際にpermission deniedと表示されてしまった時に助けになるかもしれない記事です。 現象 npmコマンドを実行すると "EACCES: permission denied, access '/usr/local/lib/node_modules/npm/node_modules/<パッケージ名>'" というエラーが表示されてしまう。 npm ERR! Darwin 15.5.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "update" "-g" npm ERR! node v5.6.0 npm ERR! npm v3.7.1 npm ERR! path /usr/local/lib/node_modules/npm/node_m
![npmでpermission deniedになった時の対処法[mac] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/02a98747c5cd1360aee7ac0c2ec8f99eea50040c/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9bnBtJUUzJTgxJUE3cGVybWlzc2lvbiUyMGRlbmllZCVFMyU4MSVBQiVFMyU4MSVBQSVFMyU4MSVBMyVFMyU4MSU5RiVFNiU5OSU4MiVFMyU4MSVBRSVFNSVBRiVCRSVFNSU4NyVBNiVFNiVCMyU5NSU1Qm1hYyU1RCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MTY2MTFiNDM1YzBlZjA4NzBiNDlkYjU1OGIwYmExMDU%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwb2tvaHMmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTc5MWJkYjVlOGU3YTIxNGQ2YTMwZGExYjNjNjdkYjA1%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D3a40b0441eda5911e1f70e72facdf8b6)
ブータブルSD/USB作成ツール「balenaEtcher」がApple Siliconに対応。
ブータブルSD/USB作成ツール「balenaEtcher」がApple Siliconに対応しています。詳細は以下から。 balenaEtcher(旧Etcher)はRaspberry PiやIoTデバイスの管理プラットフォームを提供する英Balena Ltd(旧Resin.io)が2016年頃からオープンソースで開発しているブータブル(起動可能な)USB/CD作成ツールで、Electronを採用しWindowsやMacだけでなくLinuxでも利用できますが、このbalenaEtcherのMac版が最新のv1.5.117でApple Siliconに対応したそうです。 balenaEtcher for MacはIntelとApple SiliconのUniversal 2 Binaryとなったことでファイル(アプリケーション)サイズも倍程度になっていますが、これまで同様、ISOファイルを
Node.jsとElectronを使った WebAPIで画像を取得して一定時間ごとに画像が切り替わるデスクトップアプリ - Qiita
デスクトップアプリを作りたかった Node.jsとElectronを使ってデスクトップアプリを作成しました。 そして、今回はデスクトップアプリ上にWebAPIを使って犬の画像を取得して一定時間ごとに切り替わって表示するようにしました。 環境 Node.js : v10.16.0 Electron : v11.2.1 ソースコード ソースコード自体は以下のリンクに載せています。 https://github.com/r-kuno-zer0/DogClock 環境構築方法 今回作成するにあたり以下のサイトの構築方法を参考にさせて頂きました。 環境構築方法（Electronのインストール方法等）についても参考にさせて頂きました。 そのため今回の環境構築については割愛させていただきます。 https://qiita.com/y-tsutsu/items/179717ecbdcc27509e5a ソ
OpenCV をビジュアルプログラミングできるアプリを Electron + Vue.js で作成 - Qiita
要約 Electron + Vue.js で、OpenCVをビジュアルプログラミング的に実行できるアプリ(仮称: OpenCVFlow)を自分の勉強がてら作ってみました。 上の動画のように、画像処理を定義したブロックを並べ、それをリンクでつなげることで、処理を順次実行して結果を確認、保存することができます。機能としてはそれほど多くなく、実用まではいかないかもしれませんが、なにか参考になれば幸いです。(個人的には、ElectronやVue.jsを本格的に使用するのは初めてでしたが、それなりに動くものが作れて満足しています。) 採用技術 アプリケーションエンジン: Electron フロントエンドフレームワーク: Vue.js UIフレームワーク: Photon OpenCVライブラリ: opencv4nodejs デザインパターン: アトミックデザイン アトミックデザインについて 今回は、U
クロスプラットフォームに対応しElectron内で動く「Windows 95」エミュレーターがサウンドをサポートし、FrontPageやDoomを同梱。
クロスプラットフォームに対応しElectron内で動く「Windows 95」エミュレーターがv2.0へアップデートしています。詳細は以下から。 Windows 95 in Electron(以下、windows95)は元Microsoftのエンジニアで、現在はSlackHQでSlack for macOSなどを開発しているFelix Riesebergさんが昨年末に公開したWindows 95エミュレーター(v86ラッパー)で、Electron内で動作するためmacOS/Windows/Linuxのクロスプラットフォームに対応していますが、このwindows95がv2.0へアップデートし、サウンドといくつかのゲームやアプリをサポートしています。 ✨ windows95 v2 ✨ Windows 95, running as an app, has tons of new features
Electronの画面にHTML落とすと、画面が切り替わっちゃうよね - サイト更新停滞ちうっ
Electronで立ち上げたBrowserWindowの画面に、 HTMLファイルを落とすと、 そのHTMLがウィンドウ内に表示されてしまう。 格好悪い！！！ これをふせぐには ドロップした時に、画面が差し替わる問題を防ぐには、次のようなコードを入れておくと良い。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> document.ondragover = document.ondrop = function(e) { e.preventDefault(); return false; }; </script> </head> ドロップされたHTML上では、nodeとElectronの機能を使える この挙動はアプリとして格好悪いが、 それだけはなく、 落としたHTMLでは
Electron入門 開発環境の構築と最初のプログラム作成｜スズシンラボ オフィシャルブログ
最近気になっているHTML5関連の技術。 特に、「Electron」にずっと関心があったのですが…。 今まで手を付けていませんでした。 今日は、何となくElectronの事が特に気になりましたので…。 せっかくの機会なので、Electron入門をしてみようと思い立ちました。 そこで、私はElectron開発のための環境を揃えて、最初のプログラムを作成するところまでをやってみました。 実際やってみると、そこまで難しいということはありませんでしたよ。 大体30分くらいで動作するところまでいけましたね。 今回の記事は、Electronの開発環境の構築方法と、最初のプログラムを書いて動作させる方法をまとめます。 Electronとは？ Electronというのは、GitHub社が開発したオープンソースのソフトウェアフレームワークです。 主な特徴としては、「Windows/Mac/Linuxのクロス
動画切り出しアプリをElectronで作った - console.lealog();
in 弊社の開発合宿。 発表資料こちら。 動画切り出しアプリをElectronで作った ここに載せてない細かいことを、忘れないようにメモっておきます。 作ったもの GitHub - leader22/movie-slicer: Slice your favorite scenes from movie file. 動画ファイルから、任意の秒数を切り出して、新たに動画ファイルを作成するアプリです。 別途インストールされてる前提の`ffmpeg`をElectronから呼び出してるので、いわば豪華な`ffmpeg`ラッパーです。 完全に自分用で作ったので、用途としてはいわゆる`mp4`を`mp4`に切り出すだけに限定してます。 他のフォーマットも`ffmpeg`が対応してれば対応できると思うけど、手元に素材もなかったのでやってません。 Electronを使っててパッケージングもちゃんとやったので
Electron＆Vue.js製でクロスプラットフォームに対応し、Gistsとも同期可能なコード用スニペットアプリ「Code Notes」がリリース。
Electron＆Vue.js製でクロスプラットフォームに対応し、Gistsとも同期可能なコード用スニペットアプリ「Code Notes」がリリースされています。詳細は以下から。 Code Notesはフランスのアウトドア用品メーカーDecathlonのエンジニアLaurent Thiebaultさんが2018年01月にリリースしたコード用スニペットアプリで、ElectronとVue.jsを利用し、クロスプラットフォームに対応しています。 Today is a special day… I have just published my first open-source app : Code Notes, the snippet manager for developers built with @electronjs & @vuejs : https://t.co/LdxwFlJp9X
020501301
米マイクロソフトの「Skype for Windows」や米スラックの「Slack」といった多くのアプリに深刻な脆弱性が見つかった。2018年1月18日に報告された「CVE-2018-1000006」だ。この脆弱性を悪用すると、ユーザーが特定のURLにアクセスするだけで、攻撃者が指定した任意のプログラムが実行されてしまう。 なぜ、多くのアプリに同時に脆弱性が発生したのか。理由は、これらのアプリが共通して「Electron」というフレームワークを利用していたためだ。Electronに脆弱性があり、Electronを利用している複数のアプリにも脆弱性が発生した。 Electronは、米ギットハブが開発したオープンソースのアプリ開発用フレームワーク。同社がテキストエディタ「Atom」を開発する過程で生まれたものだ。Electronを利用すると、HTMLやCSS、JavaScriptといったWeb
Electronアプリをリリースするまでにあった知見 - Qiita
はじめに こんにちは、@tsuwatchです。普段はRubyを書くのですが、仕事の幅も広がりつつあり、フロントエンドも本格的にやっていこうということで、 Kaizokuというニコニコ生放送のデスクトップアプリをリリースしました。 人生の大半の時間がニコ生に溶けているわけですが、かねてからコメントビューワを作ろうと思っていたので、この機会に作ってみました。 しかし、Mac版のコメントビューワにはHakumaiという大変素晴らしいコメントビューワが存在するので、少し違う方向を向いた生放送ビューワをかねたアプリにしました。 Hakumaiはコメントビューワとしては数少ないオープンソースなので、実装やコメントサーバの仕様など大変参考にさせて頂きました。この場をお借りして、お礼を申し上げます。 アプリの機能や今後についての紹介はまた別途ブログで書くと思います。 ご興味がありましたら、ぜひ使ってみてい
Vue.js + Electron でマークダウンエディタをサクッとつくってみた - dev.kokushin
最近話題の軽量フレームワーク「Vue.js」と簡単にアプリ化できる「Electron」を組み合わせて、練習がてらマークダウンエディタをつくってみました。 Vue.js + marked.js でマークダウンエディタ本体を作る 公式サイトのサンプルをそのまま引用します。 アプリ名は「MarkDown Visual Editor」にします。 jp.vuejs.org せっかくなので webpack を使ってみる せっかく覚えたので積極的に使っていくスタイル。 以下、現時点でのディレクトリ構造です。 mdve/ ├ app/ │ ├ app.js │ └ index.html ├ package.json └ webpack.config.js app.jsに「Vue.js」の処理を書きます。 Vue.js インストール $ npm install vue --save marked.js イン
ブラウザアプリケーション以外のプラットフォームでのReduxはtoo muchか？ - 猫型の蓄音機は 1 分間に 45 回にゃあと鳴く
@Nkznとかが最近よく言ってるReactNativeではReduxじゃなくていいんじゃない？って話。Electronでも同じような議論が可能だと思うので、さらに一般化して「ブラウザアプリケーション以外のプラットフォームでJSで動くGUIアプリケーションでReduxは必要なのか？」という話をします。 結論から先に言うと、わたしも「ブラウザで動くわけじゃないなら、Reduxである強みってそんなになくなるよね」という立場です。 まず、前提として、Fluxは「状態管理パターン」で、Reduxは数あるそのパターンの実装のひとつである。ということを確認しておきましょう。 その上でReduxの特殊性は Stateがピュアなオブジェクトで表されている Stateの更新はイベントを契機に常に同期的に行われる 以上2点により いつでも状態のスナップショットをシリアライズ/デシリアライズ可能な形で取得できる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「Electron」と「WebView2」はどう違う？ ～「Electron」の開発チームが解説／Windowsならば「WebView2」は魅力だが、「Electron」にまだ一日の長。使い分けも重要に【やじうまの杜】
Full Path to .py script fails · Issue #38 · extrabacon/python-shell
GitHubが開発したGUIフレームワーク「Electron」の最新版v11.0.0が公開／「Rosetta 2」ではパフォーマンスが大幅低下。「Electron」アプリのネイティブ対応が待たれる
請求書を作成できるオープンソースのデスクトップアプリ・「Manta」
