electronでリリース用パッケージを作る - PartyIX
先日書いたとおり，electronでMastodonクライアントを作ったのだが，パッケージ化に関してかなり迷走したので，最近のelectron事情を書いておく． electronに関しては，「ほら，こうしたら簡単に作れるでしょ？」といういわゆるHello World系の記事が非常に多く，細かい困りごとやリリースに必要な情報はあまり出てこない． また，2015年くらいの，electronが流行り始めた時期の記事は結構あるものの，最近はそこまで記事が多くないこともあり，最近のリリース事情がよくわからなかった． アイコンを作る アイコンは，どのようなビルド手段を使うにしてもおそらく同じセットが必要になる． これに関してはあまり変更されておらず，古い記事でもかなり役に立った． とりあえず大本となるpng画像かなにかを手元に用意しておく． Mac icnsファイルを用意し，それをelectron-b
Building a fast Electron app with Rust
When I built Finda, I wanted it to be fast — specifically, to respond to all user input within 16 milliseconds. Given this goal, you might be surprised to learn that Finda is built with Electron, a framework that’s often decried for being the opposite of fast. In this article, I’ll explain how Finda uses Rust to leverage Electron’s strengths (easy packaging, access to complex OS-specific APIs, the
Electronアプリの自動アップデートサーバーをhazelとnowで作る
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 アドベントカレンダー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 + react + flowtype】TweetDeckライクなpixivクライアントPixivDeckをつくった - Qiita
【Electron + react + flowtype】TweetDeckライクなpixivクライアントPixivDeckをつくったflowpixivReactElectronredux electron + react + flowtype + styled-components + webpackでpixivのデスクトップアプリを書いた。 前半にアプリについて、後半に技術的なことを書くので、どんな技術を使ったかのみ知りたい人は前半飛ばしてください。 GitHub - akameco/PixivDeck: TweetDeck like pixiv client for desktop ダウンロードページ スクリーンショット TweetDeckライクなpixivイラストビューア スクロール(IntersectionObserverで画像の遅延読み込み) カラムの移動(react-sort
Electronの公式テストフレームワークSpectron入門 - ICS MEDIA
Spectron（スペクトロン）はElectronの為のテストフレームワークで、ElectronのAPIを使用したテストが可能になります。テストを取り入れることで、「想定していた動作と違う」「作成していた機能がいつの間にか動作しない」といったことを未然に防げます。 Spectronからは実際にElectronアプリを起動することができ、「ウィンドウのタイトル」「デベロッパーツールの表示状態」といったことをElectronのAPIにアクセスして取得できます。また、「ページの画像キャプチャー」機能でデザイン崩れが発生していないかのチェックや「ページのテキスト保存」でテストに失敗した時のHTMLテキストの取得、「console.log()で書きだした内容の取得」も可能です。これらのテストは手元の開発機だけでなくJenkinsなどCI（継続的インテグレーション）サービス上でも使用できます。 ▲ 本
Electronを勉強していただけなのに... @ Meguro.es #5
Presented in http://meguroes.connpass.com/event/35123/
Electron + WebDriver = Spectron
Introduction to Spectron; a E2E testing framework for Electron apps
Electronハマりメモ[随時更新] - Qiita
最初に ElectronでTwitterクライアントを開発しているときにハマった所をメモしていきます。 と、メモしていたらElectronがついにVer 1に到達しました。 早速アップデートしたので その際に遭遇したエラーもメモしていきます。 追記：Ver1に到達したあと、日替わりでElectron周りのバージョンアップが日替わりリリース状態です。 npm outdated すると古いモジュールを洗い出してくれるので便利です。 環境 Electron 0.37.8 => 1.0.2 Typescript 1.8.0 なので、本文中のコードは全てTypescriptです。 本文 BrowserWindowのクッキーを消したい var loginWindow:Electron.BrowserWindow = new BrowserWindow({width: 800, height: 600}
![Electronハマりメモ[随時更新] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/a7c8e035f72aeb434a6cf7069e4deb83939a5397/height=288;version=1;width=512/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fqiita-fb-fe28c64039d925349e620ba55091e078.png)
ElectronでNotificationを表示する - techium
Electron自体には通知表示するNotificationを持っていません。 そこで表示する方法がレンダラープロセスとメインプロセスでそれぞれあります。 そのやりかたについてご説明します。 レンダラープロセスでNotificationを表示する レンダラープロセスはNotificaitonを表示するのは非常に簡単でHTML5で追加されたWeb Notifications APIを利用することでNotificationを表示することができます。 そのためBrowserWindowで表示するhtmlファイル上でNotificationを利用します。 ボタンを押した時にNotificationを表示する例は以下になります。 ElectronでNotificationを表示する(レンダラープロセス) index.htmlのボタンを押した時に8行目にNotificationを作成し、Hello W
Electron を試す - 開発環境の構築 - アカベコマイリ
これまで NW.js を使ってきたが同じ Chromium + Node 系のフレームワークとして最近は Electron のほうが勢いあるようなので試したくなった。使用感を把握するため、まずは開発環境を構築してみる。 更新履歴 2015/11/5 npm-scripts を babelify 7.2 (Babel 6.x) を採用した内容へ更新。また最新 watchify の Windows 対応について追記した。これらの詳細については babelify v7.2 を試すを参照のこと。 2015/10/19 npm-scripts を最新へ更新、Main プロセスのビルド説明に Browserify の --node オプション解説を追加。 設計方針 package.json と npm だけを使用 AltCSS は Stylus を採用 ユニット テスト対応 コード ドキュメント対応
npm icon-gen v1.0.0 release - アカベコマイリ
Web フロントエンド開発で npm の世界に触れ、いつか自分も作成してみたいと考えてた。 そんな折 Electron アプリ用にプラットフォームごとにアイコンを用意するのが面倒に感じていた。SVG から PNG を生成してそれを個別のツールでアイコン化。それほど頻繁に発生する作業ではないが、ファイル形式さえ満たせればクロス プラットフォームにできそうな処理だ。これは npm の題材としてちょうどよいのでは？ということで、そういう npm を作成してみた。 akabekobeko/npm-icon-gen icon-gen せっかくなので開発の過程に得られた知見を記録しておく。今後、新たに npm 開発するとき役立つかもしれない。 機能と設計方針 はじめに npm が実現する機能と設計方針を明確にしておく。 対象とするアイコン種別は以下 ICO ICNS Favicon 単一の SVG フ
Electronでアプリを書く場合は、気合いと根性でXSSを発生させないようにしなければならない。 - 葉っぱ日記
そのうちもう少しきちんと書きますが、とりあえず時間がないので結論だけ書くと、タイトルが全てでElectronでアプリを書く場合は気合いと根性でXSSを発生させないようにしなければならない。 これまでWebアプリケーション上でXSSが存在したとしても、影響範囲はそのWebアプリケーションの中に留まるので、Webアプリケーションの提供側がそれを許容するのであればXSSの存在に目をつむることもできた。しかし、ElectronアプリでDOM-based XSSが一か所でも発生すると、(おそらく)確実に任意コード実行へとつながり、利用者のPCの(そのユーザー権限での)全機能が攻撃者によって利用できる。 そのため、Electronでアプリケーションを作成する開発者は気合いと根性でXSSを完全につぶさなければならない。 nodeIntegration:falseやContent-Security-Pol
ElectronでSwagger Editorをアプリ化 - プログラマでありたい
大幅に遅れてしまいましたが、Electron Advent Calendarの16日目です。秋過ぎからSwagger,Swaggerと言っていたら、色々なお鉢が回ってきました。ついでに、調べようとググると自分のブログやTwitterの呟きがぶつかってしまうようになっていました。ということで、毒食らわば皿までということで、もう1つ。 Swaggerのダメな所 使いはじめると、いろいろ気になる所があります。その中での最大のものが、Swagger Editorの準備の面倒臭さです。Swagger EditorのGetting Startを見ていると、下記の手順で始められますと書いています。 git clone https://github.com/swagger-api/swagger-editor.git cd swagger-editor npm start 簡単ですね。たった3つのコマンド
Electronでメディアファイル用のファイルブラウザ「BlackAlbum」を作った - joker1007’s diary
Electronで動作する動画ファイル及びJPG in Zip向けのファイルブラウザを作ってみました。 構成としてはElectron+React+Reduxで、gulpfile以外はbabelを使って書いてます。 そこそこ今風な感じを目指して、一部flowtypeとかも取り入れてますが、割と適当な感じで使ってます。 実は以前Node.jsで同じもの作ってたんだけど、せっかくちゃんとデスクトップアプリとして作れるようになったしReactにも慣れたのでElectronと今の技術で作り直してみたのがこれです。名前も同じだったりする。 https://github.com/joker1007/blackalbum https://github.com/joker1007/blackalbum/releases/download/v0.2.0/BlackAlbum-darwin-x64-0.2.0.
メッセージングアプリSync開発の舞台裏(iOS) - Qiita
ビジネスシーンで使えるメッセージングサービスSyncをローンチしました。 その開発の舞台裏をiOSを中心に紹介します。開発のスケジュール、リソース、アプリの規模や進め方など参考になれば幸いです。 サービスについて Syncは社内・社外を問わずプロジェクトやビジネスコミュニケーションがより良い体験なることをゴールに開発しました。以下のURLよりご利用頂けます。 Web版 , Desktop版(OnlyOSX) , iPhone , Andorid アーキテクチャ サーバ 既存のWantedlyサーバに並列して、Syncのサービスをマイクロサービスアーキテクチャ風に構築しています。要素技術や構成はサービスの初期フェイズにおけるスピディーな開発とスモールな運用に適しているものを選定しています。 AccountServerが認証やユーザ情報管理を、APIServerが主要なデータのやり取りをRES
Twitterクライアント進捗 - ✘╹◡╹✘
YAPC 3日目のイベントとしてMicrosoftさんがハッカソン会場を提供してくれて、Ben Ogle氏やmizchi氏などElectronに詳しい人達がElectronの紹介や知見共有をしてくれるということで、我乗此大波と思い、急遽Electronをやりはじめた。初見です。よろしくお願いします。経緯は 最強のTwitterクライアント戦争に参戦 - ✘╹◡╹✘ にも書いたので良ければ。それで、今日のハッカソンにReactとかGulpとかFluxとかいろいろ覚えながらつくったのがr7kamura/retro-twitter-client。 Slackにelectron-jpチームつくったのでよければ https://electron-jp-slackin.herokuapp.com/ ハッカソン中にElectronの日本ユーザがチャットできる場があるといいねという話をしたので、Slack
Building a desktop application with Electron
A detailed guide on building your very own sound machine using JavaScript, Node.js and Electron The how and what of JavaScript desktop applicationsDesktop applications always had a special place in my heart. Ever since browsers and mobile devices got powerful, there’s been a steady decline of desktop applications which are getting replaced by mobile and web applications. Still, there’s are a lot o
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://github.com/electron/electron/blob/master/docs/tutorial/devtools-extension.md
[PDF] Electronの倒し方