Next.jsのウェブアプリをサーバーサイドAPI部分も含めてデスクトップアプリとしてElectron内で動くようにtRPCで頑張るTypeScriptElectronNext.jsVerceltRPC 最近、Next.js/Vercelでちょっとしたウェブアプリケーションのツールを個人的に作っているのですが、これをデスクトップアプリケーションとしても動かしたいなと思うようになりました。私のようなふだんウェブばかりやってる人間にとっては、デスクトップアプリは憧れなのです。 このアプリケーションは、ブラウザ側で動く部分と、サーバー側(Vercel)上のNode環境で動く部分とに分かれているわけですが、Webの技術でクロスプラットフォームなデスクトップアプリケーションを作れるElectron上でもこれの全体が動くように頑張っていきたいと思います。ここでやりたいのは、ブラウザ部分だけをElect

Next.js + Electron を使えばめちゃくちゃ簡単にデスクトップアプリを作れるという記事です。 デスクトップアプリケーションをWeb技術で作成するElectronを、むちゃくちゃ久々にやってみたら、とても簡単になっていた React のフレームワークである Next.js もバージョン9.xになってから劇的に良くなり続けていて、どんどん触りやすくなっています ちなみに Next.js は非公式な日本語翻訳が進んでいるようです。 9割くらい翻訳が完了しているようですが、気になる方は、このサイトの「翻訳プロジェクトについて」をご覧ください。 セットアップする # npmの場合 $ npx create-next-app --example with-electron-typescript hoge $ cd hoge $ npm run build $ npm run start

ウェブ技術でデスクトップアプリを開発するとなると、一番メジャーなのはやはりelectron/electronでしょう。ところがElectronは割と面倒です。配布ファイルのサイズ、セキュリティなど。 それとバンドラとして有名なWebpackですが、こっちも仰々しいです。 そこで今回はライトウェイトでゼロコンフィグな、carloとparcelの組み合わせについて書きます。 carlo GoogleChromeLabs/carloは先日登場したばかりの headful Node app framework です。headlessならぬheadfulです。 中身はぶっちゃけると puppeteer-core の薄いラッパーです。 普通のPuppeteerはオープンソースのChromiumをダウンロードしてきて動作しますが、puppeteer-coreは既にローカルにインストールされているChro

最近、ElectronでGateというMac用デスクトップアプリケーションを作って、Mac App Storeにリリースしました。Gateは、入力したパスのフォルダを、Finderで開くことができるアプリケーションです。Macのパスだけではなく、Windowsパスも開くことができるので、特にMacユーザとWindowsユーザがいるチームでフォルダパスを共有する際に役立つと思います。 Mac App Storeにリリースするにあたり、具体的な手順がわからず苦労したので、今回はリリースまでの一連の流れをまとめてみようと思います。 前提事項 Mac用デスクトップアプリケーションの手順です。 アイコンや証明書等の事前準備については、既にわかりやすい記事がたくさんあるので詳細手順を省き、リンクを紹介させていただきます。（わかりやすい記事をありがとうございます） 逆にリリース用インストーラパッケージの

こんにちは丸山@h13i32maruです。 2年前からJasperというGitHub用のIssue Readerを開発しており、$12で販売しているのですが、v0.6.0から無料で配布することにしました🎉 これまでに有料でお買上げいただいた方々、本当にありがとうございました！！！すごく開発の支えになりましたし、購入してもらえたことを日々嬉しく思っていました。今後とも是非Jasperをよろしくお願いします！ なぜ無料にするのか？ そもそもどうして有料で販売していたのかというと、「自分の作ったものでお金を直接稼ぐってどれくらい難しいんだろうか？」「たくさん購入してもらうために個人でできることって何があるんだろうか？」というのを知りたかったからです。一攫千金とかサラリーマンを辞める、みたいなのは全然考えていませんでした。有料にしていたのはあくまでも現職（プロダクト開発）に活かすためにという感じ

こんにちは。前置きは抜きにすぐ作ります。 Create Application 01: create-react-app まずはcreate-react-appです。なかったらnpm install -g create-react-appしてください。 うまくいったらyarn startで起動しましょう。しましたか？うまくいってるのを確認したら即刻ジョブ止めましょう。もう二度とyarn startを実行することはありません。 02: install Some Package 以下のパッケージをインストールしてください。最新ので問題はないはずです。すべてインストール時に--dev-dependenciesを付けることを忘れないでください。まあ忘れてもいいです。 electron npm-run-all 03: setting up Electron こちらのgistを参照してください。 次に

NW.jsやElectronの作者である、zcbenz氏が新しいクロスプラットフォームライブラリyueをつくりはじめました。 え、Electronを使ってるんだけどと思った人は落ち着いて大丈夫、フルタイムでElectronの開発を続けているとのこと。 では、今度のyueは何を目指しているのか。 Uses native widgets; Works on all major desktop platforms; Has a modern and clean C++ interface; Has good support for High DPI; Uses windowless controls on Windows; Generates small executable size; Friendly license for closed source apps. ネイティブウィジェットを扱

Electronで作られたアプリが最近増えてきてますが、 インストールに失敗して原因がよくわからなかったときに 色々調べて対処したことを備忘録として書き残します 対象 Electron製アプリを使ってるor使おうと思ってる Electronアプリを作ろうと思ってる ATOM使っててBoostnote使おうとしたらインストール失敗した方 以上に該当する方向けです。 事の発端 Boostnote使おうと思ったらインストールできねえ 最近、巷で地味に話題に上ってきているBoostnoteですが、 ちなみにBoostnoteなんぞやって方はこちらへ わたしもせっかくなので使ってみたいなと思い、 インストールしようとしたところ installation has failed というエラーが出てインストールできませんでした ログを見ても原因不明 長いエラーログを読んでも原因そのものが 特に記載されてな

前書き 前回、ReactのプロジェクトにReduxを導入する記事を作成しました。 今回では、そのプロジェクトをElectronを使ってデスクトップアプリ化する方法を記述します。 正直、前々回でやった「ReactのプロジェクトをElectron化する」で紹介した方法とほとんど似ています。 リポジトリ いつものReactTodoのリポジトリになります。 ブランチで分けていますので、差分等をみても参考になると思います！ react-todo-reduxが前回作成したReactTodoにReduxを導入したブランチ react-redux-electronが上記をElectron化したブランチになります。 ReactTodo 1. ディレクトリ変更 前々回でElectron化した時は、electronフォルダとreactフォルダを作成しました。 今回は、もっと分かりやすくディレクトリを変更します。

JSで書くデスクトップアプリが熱い Electron 熱いです。 Atom を始め、Qiita の Kobito や Slack など、 十分に実用できるアプリケーションが登場しはじめています。 なにかと話題のRPGツクールMVは、NW.js（旧node-webkit）ですが、これもJSで書かれていますね。 NW.js は、その他、女の子といちゃこらする系のゲームでも使われています。 JS でデスクトップアプリを書いて、うん千万売り上げるのも、もはや絵空事ではありません。 今回は、Electron と Redux、React の組み合わせで、 デスクトップアプリを作るまでの、簡単なチュートリアルを書きます。 登場人物紹介 Electron Github が開発してる、JS でデスクトップアプリが書けるすごいやつ NW.js より活発そうですごい React Facebook 製のすごいやつ

console.log(app.getPath('home')); // -> C:\Users\【ユーザー名】 console.log(app.getPath('appData')); // -> C:\Users\【ユーザー名】\AppData\Roaming console.log(app.getPath('userData')); // -> C:\Users\【ユーザー名】\AppData\Roaming\【パッケージ名】 console.log(app.getPath('temp')); // -> C:\Users\【ユーザー名】\AppData\Local\Temp console.log(app.getPath('exe')); // -> 【実行している.exeのパス】 console.log(app.getPath('module')); // -> 【実行している.

はじめに Electron + Riot + Redux でアプリケーションを作って得た知見まとめです。 制作物は Twitter の収録再生プレイヤー。 録画や録音しておいた Twitter 連動番組などを再生する際、放送当時のツイートをリアルタイムっぽく表示させる品です。 midnightSuyama/tweet-rec 実装 electron atom/electron Twitter の収録はウインドウ有無に依存しないよう main プロセスで行い、renderer プロセスでは表示に専念する方針とした。 ウインドウを閉じても常駐するタイプのアプリケーション。 ウインドウの表示 BrowserWindow を使用。 ウインドウサイズについて、大概の場合はコンテンツ領域を基準に考えるはずなので useContentSize は忘れずに。 ウインドウを閉じた際には解放しておきたいので

ぼくはその日を善く生きたかどうかは AdSense の収益で決まると思っているので、以前にも AdSense のレポートを CLI で確認できるツール を書き、この記事にもあるように tmux のステータスバーに収益を表示していつでも確認できるようにカスタマイズしている。これは具合がよくてずっと使っていたのだけど、最近 tmux.conf をいじっていたらだんだん表示領域が手狭に感じられてきて、ターミナルから追い出したくなってしまった。くわえて、人にターミナルを見せると「ほうほう motemen さんの今月の収益は 9 円ですか……」といらぬ情報を人に与えてしまう問題もあり、ここはひとつ最近はやりの Electron を使ってメニューバーに表示してしまおうということしたのだ。 使用イメージはこちら。ここ7日分の収益を、日別に集計してメニューに表示している。アイコンの隣の数字はその合計（数字

おはようございます。こんにちは。こんばんは。お疲れ様です。お世話になっております。 さて今回は、最近流行りの Electron で作ってみたアプリについてご紹介いたします。 作ったもの メニューバーやタスクトレイに常駐して Redmine のチケットの更新を監視し、更新があればデスクトップに通知してくれるアプリです。 Mac OSX と Windows でご利用いただけます。 また、各種 OSS を利用したインストーラ作成のための環境も同梱しています。 使い方 REST API 機能を有効にする Redmine の管理画面にて REST API の機能を有効にします。 ※システム管理者権限が必要です 設定画面を開く Redmine Notifier を起動すると、メニューバーまたはタスクトレイにアイコンが表示されます。 アイコンのコンテキストメニューにて「Preferences」をクリック

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

クラウドで管理出来るマークダウンエディターって中々いいものがないですよね。 Webで作ってもいいんですが、Electronというものを使えばJavaScriptでデスクトップアプリが作れるようなので使ってみようと思います。 ※ React+ReduxとElectronメニューの連携についてだけ知りたいという方は、最初の方は読み飛ばしてください Electronとは テキストエディターである「Atom」を開発するために生まれたデスクトップアプリケーションエンジン HTML+CSS+JavaScriptでクロスプラットフォームなデスクトップアプリケーションを開発出来る 著名なアプリケーションでも採用されている Atom Slack VisualStudio Code 作ったアプリ github https://github.com/DaikiInaba/electron_react_rails

メインの開発者として、備忘録を残しておく。 どんなものか試したい人は、 https://mizchi.github.io/kobito-oss/ で、IndexedDBの許す5MBぐらいまでは試せる。 一応言っておくと、これは僕が退職するんでOSS化ってわけではなく、元々あった計画の前倒しです。時期が早まったのはある。 以下、どのようにコードを読むか。 念頭に置くこと 2年前 の技術選定のスタック Mac版Kobitoと仕様が違う。Kobitoと同期しない、Inboxという仮グループがある。 mizchi/arda electron 以前の atom-shell 時代の互換コードが一部残ってる 細々とバグ対応はしつつ、あんまり依存パッケージのメンテ出来てなかった 公開にあたって、個別のタスクの綺麗さより、ビルドできるの優先した とりあえず yarn で固定して yarn upgrade-i