Electronアプリでパスワードを安全に保存する方法
Takuya Digital crafts(man|dog). Love photography. Always making otherwise sleeping. born in 1984. Electronはデスクトップアプリであり、Cookieは使えない。 しかし認証情報をファイルに保存するわけにはいかない。 適切な保管場所は、macOSならKeychain、LinuxならKeyring、WindowsならCredential Vaultだろう。 これらプラットフォームに合わせた方法で保存できるモジュールを紹介する。 node-keytar node-keytarは、atom製のキーチェーン管理モジュール。 プラットフォームの違いを意識せずに機密情報を読み書きできる。 import keytar from 'keytar' keytar.addPassword('service',
Electronで認証付きプロキシの認証情報をユーザーに入力してもらう方法 - Qiita
概要 Electron を使った Windows / Mac 向けのデスクトップアプリケーションをお仕事で作ってます。 そのアプリケーションを Basic 認証付きのプロキシ上で動かした際に、ユーザーに認証情報を入力してもらう実装を考えました。せっかくなので、一例として書き留めておこうと思います。参考になれば幸いです。 ※ ざっくりしたアプリケーションの構成はこんな感じです main process main.js renderer process https://○○◯.com (メイン画面) メイン画面の表示には WebView を使用せず、BrowserWindow 内で直接表示しています。 定石 login イベント Electron API の App にはlogin イベントが用意されています。 認証が必要なネットワークへの接続が行われた場合、これをキャッチすることが出来ます。
Electronによるアプリケーション開発事情2018 / builderscon2018 - Speaker Deck
builderscon tokyo 2018『Electronによるアプリケーション開発事情2018』
動画切り出しアプリをElectronで作った - console.lealog();
in 弊社の開発合宿。 発表資料こちら。 動画切り出しアプリをElectronで作った ここに載せてない細かいことを、忘れないようにメモっておきます。 作ったもの GitHub - leader22/movie-slicer: Slice your favorite scenes from movie file. 動画ファイルから、任意の秒数を切り出して、新たに動画ファイルを作成するアプリです。 別途インストールされてる前提の`ffmpeg`をElectronから呼び出してるので、いわば豪華な`ffmpeg`ラッパーです。 完全に自分用で作ったので、用途としてはいわゆる`mp4`を`mp4`に切り出すだけに限定してます。 他のフォーマットも`ffmpeg`が対応してれば対応できると思うけど、手元に素材もなかったのでやってません。 Electronを使っててパッケージングもちゃんとやったので
Electron製のアプリケーションにスタイルシートを埋め込む - Qiita
Hangoutなど、公式のアプリがないWebサービスはnativefierを使ってスタンドアロンのアプリとして使っています。 画面の大きさが狭いとか、標準のCSSをカスタマイズしたくなったので備忘録として記録しておきます。 nativefierについてはこちらの記事が参考になります。 Webページをデスクトップアプリ化 - nativefierを使ってみる [https://qiita.com/taiyoslime/items/98be154455e76710df9d] ※ 今回はMacを対象にしていますが Electron製のアプリケーションの中身 自作したHangout.appを開いてみるとこんな感じの構成になっています。Macの普通のアプリと同じで特に変わったものはありません。 /Contents /Frameworks /MacOS /Resources /app ※ Info.p
`<webview>` Tag | Electron
<webview> Tag Warning Electron's webview tag is based on Chromium's webview, which is undergoing dramatic architectural changes. This impacts the stability of webviews, including rendering, navigation, and event routing. We currently recommend to not use the webview tag and to consider alternatives, like iframe, a WebContentsView, or an architecture that avoids embedded content altogether. Enabli
Electron製Markdownプレビュー＆コンバートツール制作中の続き - arinoth's memo
前回に引き続きツール制作を進め、何とか必要最低限の作業はできるようにしました。 後は実戦でテストしながら仕上げていくつもりです。 github.com ざっくりとした使い方 GitHubリポジトリ内のpackagesディレクトリの中から対応するバージョンのzipファイルをダウンロードします（Mac版はdarwin）。 zipを解凍して、Winならmdpreview.exe、Macならmdpreview.appをダブルクリックして起動します。他のファイルも必須なので、実行ファイルの場所は移動せず、ショートカットなどを適宜作成してください。 vivliostyle.jsをダウンロードして解凍し、中のviewerフォルダを、プレビューしたいMarkdownファイルと同じ場所に配置してください。 template.htmlやpostReplaceList.json、_template.htmlで読
Electronで設定ファイルを扱う - Qiita
使い方 公式のUsageそのままだが、使い方に迷うことないだろう。 面白い点としてdot-notationをサポートしてる。 いちいちオブジェクトを作らずfoo.barと文字列で保存できるのは便利だ。 もちろん、メインとレンダラープロセスの両方で使える。 const Config = require('electron-config'); const config = new Config(); config.set('unicorn', '🦄'); console.log(config.get('unicorn')); //=> '🦄' // use dot-notation to access nested properties config.set('foo.bar', true); console.log(config.get('foo')); //=> {bar: true}
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
Electronアプリをリリースするまでにあった知見 - Qiita
はじめに こんにちは、@tsuwatchです。普段はRubyを書くのですが、仕事の幅も広がりつつあり、フロントエンドも本格的にやっていこうということで、 Kaizokuというニコニコ生放送のデスクトップアプリをリリースしました。 人生の大半の時間がニコ生に溶けているわけですが、かねてからコメントビューワを作ろうと思っていたので、この機会に作ってみました。 しかし、Mac版のコメントビューワにはHakumaiという大変素晴らしいコメントビューワが存在するので、少し違う方向を向いた生放送ビューワをかねたアプリにしました。 Hakumaiはコメントビューワとしては数少ないオープンソースなので、実装やコメントサーバの仕様など大変参考にさせて頂きました。この場をお借りして、お礼を申し上げます。 アプリの機能や今後についての紹介はまた別途ブログで書くと思います。 ご興味がありましたら、ぜひ使ってみてい
ElectronでWebviewの簡易ブラウザをつくってみたメモ - Qiita
Electronの基本的な挙動が知りたかったので、HTML/CSS/JavaScriptを使ってElectronで簡易ブラウザをつくってみました。 1. 制作物 URLを入力するとWebviewでロードしてくれる ただしボタンを押さないとロードしてくれないしょぼい仕様!! Open Dev Toolを押すと、Webview内のDeveloper Toolが開く セットアップ npm installの仕組みとかnpm initしてプロジェクトをつくるができる方であれば セットアップは3分ぐらいで終わると思います。簡単!! 参考 : ElectronとHTML/CSS/JavaScriptでデスクトップアプリを作ろう【入門編】 ファイル構成 Ligさんのサンプルコードを改造する形で3ファイルでつくりました。 var app = require('app'); var BrowserWindow
electronのautoUpdaterをWindows上で試したときのメモ - DJ lemon-Sour's diary (prod.hisasann)
はじめに 今回試したかったのが、 Windows 環境でアプリをどこかに登録などせずに簡単に auto upadte ができるかどうかです。 これは、世の中に公開せずにクローズドな環境で auto update ができるかという検証になります。 Mac 環境だとおそらく code sign が必要そうですが、 Windows だと証明書などなくてもアプリケーションの auto update ができました。 Electron - Signing a Mac Application ただ、これもいろんな記事によってはできるできないと分かれていましたので、そういった記事のリンクも貼りつつぼくが試したのをメモしていきます。 electron に付属している autoUpdater を使う場合 Electronアプリをプロダクトとして「正しく」リリースするために必要な3つのこと - ヌーラボ [Nu
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,
超簡単に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をインストールす
electron 上で vue.js を動かす - Qiita
概要 node.js も vue.js も初心者のプログラマが、electron 上で vue.js を動かす方法を紹介するだけの記事です。 プラットフォームは Windows7、node.js のバージョンは 6.10.2、vue のバージョンは 2.3.2 で書きました。 準備 node.js のインストール 公式サイトからダウンロードとインストールを行います。コマンドプロンプトで と打って、バージョン番号が表示されたら成功です。 パッケージのインストール（グローバル） npm コマンドを使い、electron-prebuilt と webpack をインストールします。 ここでは -g オプションを付けて、グローバルインストールを行っています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[PDF] Electronの倒し方
<webview> タグ · GitBook
How to include a webpack module using file protocol i.e. 'file://' · Issue #239 · SimulatedGREG/electron-vue
https://spyweb.media/2017/10/16/mac-electron-build-windows-installer-and-auto-updater/
electron-builder/docs/multi-platform-build.md at master · electron-userland/electron-builder