BdashというBIツールをリリースしました - hokaccha memo
BdashというアプリケーションをElectronで作りました。 bdash-app/bdash: A simple business intelligence application. 以下からダウンロードしてインストールできます（現状まだMac版だけ）。 https://github.com/bdash-app/bdash/releases ざっくりとこんな感じのことができる。 SQLを書いて保存＆実行できる 結果を元にグラフを書ける gistで共有できる 現状で対応しているデータソースはMySQL、PostgreSQL（Redshift含む）、BigQuery 仕事でRedshiftを使って分析SQLを書くことが増えて、手元ではJupyter Notebookを使ってたんだけど、SQL書いてグラフを書くだけの用途には若干オーバースペックでもうちょっと簡単にできるといいなと思ったのがき
Electronでページ内検索を行う - Qiita
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
JVN#00324715: Electron における Node モジュール読み込みに関する問題
Electron には、Node モジュール読み込みのパスを適切に制限していない問題が存在します。その結果、任意の JavaScript を実行される可能性があります。 Electron は、HTML、CSS、JavaScript with Chromium や Node.js のようなウェブテクノロジを使ったクロスプラットフォームのデスクトップアプリケーションを開発するためのソフトウエアフレームワークです。Electron は、Atom エディタ、Microsoft Visual Studio Code などのアプリケーションで利用されています。Electron には、Node モジュールを読み込む際の検索パスに問題があります。この問題は、require 関数の処理を行う際、モジュールが存在するディレクトリの親ディレクトリをすべて検索パスに加えてしまうことに起因しています。攻撃者によって
ElectronアプリがGecko上で動く未来 - Mozilla Flux
Mozillaは、Electron APIをGecko上で動作させるためのラッパを開発中で、その開発プロジェクトはElectron（電子）を踏まえてPositron（陽電子）と呼ばれている。今のところまだElectronベースのアプリを走らせることができるまでには至っていない。 ElectronはChromiumとNode.jsを利用しているが、ChromiumのところにGeckoを代入するとして、Node.jsはどうするのか。その回答がSpiderNodeで、こちらはMozilla製JavaScriptエンジンであるSpiderMonkey上でNode.jsを動作させることを目的としたプロジェクトである。 V8以外のJavaScriptエンジンにNode.jsを移植するといえば、MicrosoftのChakraCoreが有名だ。2016年1月に取り組みが発表され、注目を集めた。Spide
Electron, Reactでタブブラウザを作ってみた - Qiita
知人がesaのデスクトップクライアントを使わなくなった理由が、複数タブが開けなくて不便だったと聞いた。 確かに「Electronのアプリでも複数タブが使えるといいな」と思ったのでさくっと作ってみました。 作ったもの タブ周りの処理を中心に書いた。ブラウザというよりただのQiitaリーダ。 環境 MacOS X 10.10.4 Node.js v.4.1.1 electron v.0.34.3 準備 Electron環境の導入が必須。 30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまでがとても参考になります。 今回はReactをES6で書くのでbabel+webpack+gulpの設定を書いておきます。 gulpfile.js webpack.config.js npmで必要なパッケージをインストールし、gulpでビルド用のタスクを起動すると
Electronのwebview要素ではallowpopups属性をつけてはいけない - 葉っぱ日記
Electronを使ってブラウザのようなアプリケーションを作る場合には webviewタグが使用される。例えば、アプリケーション内にexample.jpのサイトを表示するには以下のようにHTMLに記述する。 <webview src="http://example.jp/"></webview> ここで、webviewタグにallowpopups属性を付与すると、example.jpサイト内のコードからwindow.open等を使って新たにウィンドウを開くことができるようになる。このとき、example.jpに悪意があり以下のようなコードが含まれているとする。 if( typeof require === "undefined" ) window.open( 'http://example.jp/', '', 'nodeIntegration=1'); else require( "chi
iframe sandbox は万能ではない - 葉っぱ日記
HTML5で導入されたiframe要素のsandbox属性は、そのiframe内のコンテンツに対しJavaScriptの実行を始め様々な制約を課すことでセキュリティの向上に役立つ機能である。例えば、以下のように指定されたiframeでは、iframe内からformのsubmitなどはできるが、iframe内でのJavaScriptの実行やtarget=_blankなどによってウィンドウを開くことなどは禁止される。 <iframe sandbox="allow-forms" src="..."></iframe> sandbox属性に明示的に allow-scripts という値を指定しない限りはiframe内では直接的にはJavaScriptは実行できないが、かといってiframe内から間接的にJavaScriptを必ずしも実行させることが不可能かというとそうでもない。 sandbox属性
Web Components と Electron でつくる Neovim フロントエンドの未来 - はやくプログラムになりたい
この記事は Vim Advent Calendar 2015 の20日目の記事です． まずはこちらのスクリーンショットをご覧ください． エディタの UI やカーソル移動は Vim っぽいですが，markdown ライブプレビューやカーソル位置での画像ポップアップ，組み込みブラウザなど謎の UI が見て取れます．本記事ではこれについてボトムアップで必要な知識から順を追って紹介します． 長い……三行で Neovim msgpack-rpc API を使って <canvas> と Node.js API で Neovim フロントエンドを作成し Web Component としてラップ して HTML アプリに簡単に組み込めるようにした上で UI プラグインをウェブ技術で構築できる NyaoVim という Neovim GUI エディタを Electron 使ってつくってます． 目次 Web C
Electron アプリを Mac App Store に登録する手順 - Qiita
必要な要件 Mac OS X 最新の Xcode Apple Developer Program（$100 per year） 有用なドキュメント Electron Mac App Store Submission Guide Mac App Store (MAS) Submission Guideline · nwjs/nw.js Wiki Enabling App Sandbox Electron 公式の Submission Guideline はコードサイニングについてしか書いていないので、nw.js の wiki を参考にしてアプリを登録していきます。この２つのドキュメントを読むだけでもゴールには到達できますが、つまずきポイントもなかなかあるので手順を解説していきます。 証明書を作成 iTunes Connect でアプリを作成 アプリを asar にアーカイブ MASディストリ
Electronアプリをプロダクトとして「正しく」リリースするために必要な3つのこと | 株式会社ヌーラボ(Nulab inc.)
Typetalkデスクトップアプリ 先日、弊社チャットサービスTypetalkのデスクトップアプリをリリースしました。おそらくTypetalk.appのパッケージを覗いてElectronの痕跡を見つけ出した方もいらっしゃると思いますが、その通りElectronをベースに実装しています。 ElectronはHTML、JavaScript、CSSなどWebの技術を使用してデスクトップアプリを開発できます。GitHub社のAtomエディタをはじめとして、今では非常に多くのアプリがElectronベースで公開されており、実装方法についても既に多くの記事が書かれています。 ただし、正式にアプリを公開する場合には、コードサイニングなどを行うなど、考慮が必要なポイントがいくつかあります。そこで本記事では正式にElectronアプリをWindows/Mac向けにリリースするにあたって必要だった3つのことを
Electron入門サイト〜開発経験者が解説する導入手順と魅力 - ICS MEDIA
Electron (エレクトロン)はウェブの技術でデスクトップアプリケーションを開発できる人気のフレームワーク。HTML5とCSS3とJavaScriptで開発できるため、ウェブ開発者であれば手軽に導入できます。それもクロスプラットフォームなので、ワンソースでWindowsとmacOS向けのソフトウェアが作れることが利点です。 GitHub社の「Atom」やMicrosoft社の「Visual Studio Code」もこのElectronを使って開発されているなど、大手企業が採用していることでも人気の高さがうかがえます。この入門サイトでは、開発環境のセットアップからサンプル・アプリケーションの作り方を解説します。 Electron入門編 最新版で学ぶElectron入門 - ウェブ技術でPCアプリを開発しよう Electronの導入手順を解説。ゼロからアプリケーションのビルドまでの手順を
Electronでデスクトップウィジェットを作るまで - Qiita
はじめに HTML/CSS/JSを使ってデスクトップアプリケーションが作成できるElectron。 本記事ではデスクトップウィジェット作成するまでの流れを、簡単な時計アプリを題材として解説します。 ※ この時計アプリのソースコードとパッケージは、GitHubにて公開しています。 GitHub: SallyAcolyte/tutorial_clock 対象読者 - HTML/CSS/JSで簡単なアプリは作れるが、Electronは初心者な方 - Electronで透過ウィンドウ/フレームレスウィンドウを扱う際のポイントが知りたい方 - 自分好みなデザイン/機能を持つウィジェットを作成したい方 ※ Windows環境を前提としていますが、基本的な流れは他環境でも同様です。 チュートリアル Electronの入手 Electronの本体は、以下からダウンロードできます。 Releases · a
phiary
Electron 入門です. 説明うんぬんよりもとりあえず触ってみたいって方向けの入門エントリー. 最短でインストールから実行, 配布用ファイルの作成までやる方法です. 「これ何やってんの？」 とか 「どういう意図で？？」 などありましたら 気軽に下のコメントや Twitter にて質問してください. Setup ディレクトリを作成 $ mkdir electron-app $ cd electron-app package.json を作る 色々聞かれるので適当に enter 押す $ npm init 出力された package.json の中身 { "name": "electron-app", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error:
Electronのremoteでプロセス間通信を高レベルに扱う - Qiita
Electronでipcを使ってプロセス間通信を行うの続き。 概要 Electronではメインプロセスと個別のBrowserWindow上で走るプロセス（レンダラプロセス）の間はプロセス間通信でメッセージのやりとりができ、ipcモジュールとして提供されている。 remoteではプロセス間通信ををラップした高レベルな機能が提供されており、レンダラプロセスからメインプロセスのAPIを、あたかもレンダラプロセスのAPIとして存在しているかのように扱うことができる。 前提 BrowserWindow（レンダラプロセス）を立ち上げてHTMLを表示する部分までは終了しているものとする。 var app = require('app'); var BrowserWindow = require('browser-window'); app.on('ready', function() { var cur
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Electronのセキュリティその後 Yosuke HASEGAWA
GitHub - minbrowser/min: A fast, minimal browser that protects your privacy
DeNA Engineering - DeNAエンジニアのポータルサイト
Learn Web Frontend with Electron
electron/docs/tutorial/mac-app-store-submission-guide.md at main · electron/electron
