Electron 入門.md 最新版はこちら（Qiita） http://qiita.com/umamichi/items/6ce4f46c1458e89c4cfc Electron 入門 Electronって？ ・クロスプラットフォーム型の実行フレームワーク 👉 Mac、Windows、Linux上で動く ・Webの技術（HTML5やJavaScript）で作ったものをデスクトップアプリケーション化できる ・オープンソース、商用利用可能 ・開発元はGitHub社 （もともとはAtomエディタのために作られた） 実用例 ・Slack ・Atom ・Kobito ・Docker GUI ・Visual Studio Code (Microsoft) 使い方 $ npm i electron -g $ electron とすると、Electronの初期画面が表示される↓ このウィンドウに以下

知人が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でビルド用のタスクを起動すると

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ストリーミング配信が増え、iTunesやAmazon Musicなどのクラウドベースの音楽販売サービスが流行っていくと、MP3で楽曲ファイルを持っているのは貴重になるかも知れません。しかしCDからリッピングして楽曲を持っている方も多いことでしょう。 そうした方に使ってみて欲しいのがGokottaです。Electron製の、マルチプラットフォームで動作する音楽プレイヤーです。 Gokottaの使い方 すっきりしたUIです。メタデータが含まれる場合にはアートワークも表示されます（筆者がもうMP3を持っていないため、Unknownばかりになっています）。 Gokottaはシンプルな音楽プレイヤーで、フォルダを登録して、その中にあるMP3やAAC、WAVファイルを再生できます。技術的にはE

コンソール上で簡易的なデータベース管理UIを提供するSQLECTRONですが、設定が残せるので様々なデータベースに繋ぐ際に便利です。SQLの実行インタフェースとしては最低限ですが、接続をまとめてくれるだけでも便利でしょう。 そんなSQLECTRONにGUIを追加するのがSQLECTRON GUIです。設定ファイルが共有できるのが利点です。 SQLECTRON GUIの使い方 データベース接続画面です。CUIで設定した情報がそのまま使えます。 左側にデータベース一覧。右側がSQL実行インタフェースになります。 テーブル構造も確認できます。 SQLを生成してくれる機能があり、結果も一覧表で確認できます。 SELECT/CREATE/UPDATE/DELETE文の生成ができます。 SQLECTRON GUIはCUI版のSQLECTRONをラッピングしているだけなので機能も変わりません。しかしデー

今時スクリーンセーバーは不要という考えがあります。確かに液晶ディスプレイでは焼き付けはほぼ起こりません。しかしプラズマTVでは起こりえます（もちろん対処されているでしょうが）。また、なんとなくスクリーンセーバーは見ていて面白いものです。 そんなスクリーンセーバーをHTML標準の技術で作れるのがphoto-screen-saverです。 photo-screen-saverの使い方 一例です。写真が定期的に差し替わります。 photo-screen-saverは写真をスライドショーで切り替えながら表示するスクリーンセーバーで、なんとElectronを使っている点が注目です。Electronであれば、HTML5で作れるのでSVGやCanvasを使ったグラフィカルなスクリーンセーバーも作れることでしょう。 photo-screen-saverはElectron/JavaScript製のオープンソ

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プレゼンテーションのためのスライドを作成するソフトウェアと言えばPowerPointやKeynoteが多いでしょう。最近ではMarkdownベースで作成することも増えていますが、もっと便利なソフトウェアを欲しがる声もあります。 そこで使ってみたいのがDevDecksです。その名の通り、開発者（Dev）向けのスライド作成ソフトウェアです。 DevDecksの使い方 メイン画面です。 テキストを追加してスライドを作ります。 スライドの背景を変更できます。 写真の貼り付けもできます。 コードを貼り付けることもできます。 Electronなので開発者ツールを使ったデバッグ、自動処理もできます。 DevDecksはプラグインもサポートしているので、自分で拡張することもできます。コンバーターを

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 今時の開発者でパスワード管理を使っていないという人はほぼいないでしょう。むしろ対象サービスやソフトウェアが多くて選定に困るかも知れません。選定の要素になり得るのがマルチプラットフォーム対応ではないでしょうか。 WindowsやmacOSでも動き、さらに部署や権限毎にファイルを分けて管理できると便利です。ということで今回はButtercupを紹介します。 Buttercupの使い方 メイン画面です。複数のファイルに分けて使えるのが便利そうです。 新しく作る場合にはマスターパスワードを設定します。 こちらがメイン画面です。フォルダに分けて管理できます。 パスワードの強度も表示されます。 エントリーに登録されました。 ButtercupはElectron製なので、Windows/macO

作っていました。 khsk/electron-gif-loop: Gifyからgifを取得し、最低1ループはアニメを見せるgifビューワー 備忘録。 特徴 最低1ループはアニメーションを見せる、スライドショー的gifビューワーです。 GIPHY からgifを取得しつづけます。 任意のタグを複数登録することで、好きなジャンルのgifを表示できます。(精度はGIPHYAPIに依存します) 可能な限り、ループの終了直後に次の画像を表示します。 画面のリサイズと移動が可能です。 常に前面表示の切り替えが可能です。 デモ 動機 昔からgifアニメの扱いに難儀していた。 静止画ほど気楽に流し見できないし、ループしてから次の画像へ移るのも最初の部分を2回見ることになってもやもやする。 スライドショーにまじると途中までしかアニメがみれないor短いアニメが繰り返しすぎてもやもやする。 最低1回はアニメーショ

この記事は 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

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近のランチャーは事前にアプリケーションを登録するものではなく、アプリケーションが自動で情報を収集してくれるタイプのものが主流になっています。 今回紹介するHainも同じく自動収集型のランチャーです。特徴的なのはElectron製ということです。 Hainの使い方 メイン画面です。Alt+スペースで呼出せます。 パスに入っているものであれば問題なく表示できる模様。 文字を入力してプログラムを特定します。 ElectronということはWeb技術で作られているということです。Windows向けに作られていますが、Electronであれば他のプラットフォーム向けにも提供できそうですね。 HainはElectron/JavaScript製のオープンソース・ソフトウェア（MIT Licens

JavaScript/HTML5でデスクトップアプリを作ることができるElectronについて基本的な使い方を見ていきます。

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.

コンピュータのリソースは使っている内に徐々になくなっていきます。その結果、動きが悪くなったり、最悪エラーを起こすことになります。そうならないためには定期的なチェックが欠かせないでしょう。 今回はリソースをビジュアル化するElectronアプリ、Space Radar Electronを紹介します。 Space Radar Electronの使い方 ドライブ、フォルダ、メモリの解析に対応しています。まず最初に選択します。 フォルダを選んだ場合の解析結果です。 ドリルダウンして詳細な解析ができます。 メモリの解析です。メモリを消費しているソフトウェアが分かります。 メモリもドリルダウンしてチェックできます。 表示方法としてツリーマップも選択できます。 ツリーマップ上から削除もできます。 Space Radar Electronを使えばストレージやメモリの状態が可視化できます。ファイルの整理やメ

こんにちは，よしむらです． 暑くて暑くて，家にいるのも嫌になる今日このごろです． Quittaでnyanchuさんが書いている下記の記事を見てしったelectronですが． 前回jQueryを使ってみたらあっさりできたので，今回はToDoリストを作ってみました． http://qiita.com/nyanchu/items/15d514d9b9f87e5c0a29 http://qiita.com/nyanchu/items/9a1c910bbca55e9d2f3c electron + WebStorage 最近流行りのelectronをつかって勉強がてらToDoリストを作ってみよう！ っと思ったがToDoリストには，データベースが必要です． xmlファイルなどで管理してもいいけどレスポンスとか考えるとやっぱりデータベースが欲しい！ HTML5で，クッキーの次の技術としてWebStora

はじめに HTML/CSS/JSを使ってデスクトップアプリケーションが作成できるElectron。 本記事ではデスクトップウィジェット作成するまでの流れを、簡単な時計アプリを題材として解説します。 ※ この時計アプリのソースコードとパッケージは、GitHubにて公開しています。 GitHub: SallyAcolyte/tutorial_clock 対象読者 HTML/CSS/JSで簡単なアプリは作れるが、Electronは初心者な方 Electronで透過ウィンドウ/フレームレスウィンドウを扱う際のポイントが知りたい方 自分好みなデザイン/機能を持つウィジェットを作成したい方 ※ Windows環境を前提としていますが、基本的な流れは他環境でも同様です。 チュートリアル Electronの入手 Electronの本体は、以下からダウンロードできます。 Releases · atom/el