Electron

[Electron]連続コピーアプリを作ってみた(monclip) Mac

[Electron]連続コピーアプリを作ってみた(monclip)

Electronを使用してMac用のクリップボード記録アプリを作成しました。 このアプリは、コピーした内容を自動的に記録していき、まとめて編集・利用できるようにします。 ネットショッピングやレポート作成時の情報収集に便利で、簡単な操作で使用できます。 クリップボード記録アプリを作った 自分のMac用に「クリップボード記録ツール(monclip:Monitor Clipboard)」を作りました。パソコンで文字をコピーするたびに、その内容を自動的に記録してくれます。 (ダウンロ...
[Electron]今日の日付カレンダーアプリを作った(Calectron) とりあえずのメモ

[Electron]今日の日付カレンダーアプリを作った(Calectron)

Electronを使用して、Windows 7のガジェットにあったカレンダーのようなアプリケーションを作成しました。 このアプリケーションは、今日の日付と曜日を表示するだけのシンプルなものです。 macOS風にデザインを変更し、タイトルバーを削除して、ウィンドウ全体をドラッグできるようにしました。 Windows 7のカレンダーのようなアプリを作った Electronで Windows 7の「ガジェット」にあったカレンダーのようなものを作りました。 ただ、今日の日付・曜日を表...
Electron, npm, nodeを久々に更新した(nvm) とりあえずのメモ

Electron, npm, nodeを久々に更新した(nvm)

npm、nodeを久々に更新しようとしたところ、ESMモジュールシステムと古いCommonJSモジュールシステムの競合によるエラーが発生しました。 Node.jsとnpmのバージョンに互換性がない可能性があるため、Node.jsのバージョン管理ツールであるnvmをインストールしました。 nvmを使ってNode.jsの最新LTSバージョンをインストールし、npmを10.7.0にアップデートすることで問題を解決しました。 npmの更新通知 久々にElectronプログラムを作ろう...
Google KeepをMacアプリとして使うなら?【Chromeのショートカット作成】 インターネット小話

Google KeepをMacアプリとして使うなら?【Chromeのショートカット作成】

ブラウザに(Safariではなく)Chromeを利用しているなら、「その他のツール」にある「ショートカット作成」から、Macアプリのように扱うことができます。
Electronでレンダラープロセスからメインプロセスに処理を渡して、また戻る【async/await】 ニッチな話題

Electronでレンダラープロセスからメインプロセスに処理を渡して、また戻る【async/await】

レンダラープロセスから、メインプロセスで処理を移した後、レンダラープロセスに処理を戻すには、どうすればよいかハマったのでメモをしておきます。 結果としては、IPC通信とasync, awaitという非同期の関数を利用することで、解決しました。 プロセス間通信と処理の流れ やりたいことは、・UIの実行ボタンが押して、・端末のファイル操作を行い、・終わってからUIに貯めた入力データをクリアする、ということです。 UIに関するデータは、レンダラープロセスにあります。 ただ、node...
Electronで自作したツールを修正できた【Collup】 ニッチな話題

Electronで自作したツールを修正できた【Collup】

Electronで自作したファイル整理ツール「Collup」の機能を改善しました。 ドラッグ&ドロップでファイルをリストに追加し、フォルダ名を入力するだけで効率的にファイルを整理できます。 一つ上のフォルダにサブフォルダを作成する仕様に変更し、より使いやすくなりました。 こんなツール 先日、修正しようと思っていた、自作ツールがなんとか動作するようになりました。 プログラムのドラッグ領域にファイルをドラッグ&ドロップすると、リストに追加されます(複数のファイルをまとめてドラッグ...
Electronでrequireができない?【プロセスとコンテクストとプリロードスクリプト】 ニッチな話題

Electronでrequireができない?【プロセスとコンテクストとプリロードスクリプト】

Electronでスクリプトを書いていたところ、Node.jsのAPIとDOM要素を結びつけるのに迷いました。 main.jsではDOM要素にアクセスできず、HTMLから読み込んだスクリプト(renderer.js)ではNode.jsのAPIにアクセスできないからです。 「プロセスモデル | Electron」をもとに、それぞれの役割の違いを見てみましょう。 ポイント main.jsは、メインプロセスを管理。renderer.jsは、レンダラープロセスを管理。preload....
「Electronクイックスタート」をMacでたどってみた【Electron Forgeのビルド】 ニッチな話題

「Electronクイックスタート」をMacでたどってみた【Electron Forgeのビルド】

前回は、Electronの環境を作ったのですが、既存のソースからのビルドはうまくいきませんでした。 というのも、設定が中途半端で fsやpathのライブラリがうまく読み込めないようです。 そこで、原点に帰って、改めてElectronのひな形をビルドしてみました。 Electronクイックスタート Electronの公式ドキュメント「クイックスタート」に沿って、アプリを作成します。 クイック スタート | Electron MacBookでチュートリアル通りにそのままできるか、...
久しぶりにMacでElectronを使えるようにした【node.jsでアプリ自作】 ニッチな話題

久しぶりにMacでElectronを使えるようにした【node.jsでアプリ自作】

Macで動く自作ツールをJavaScriptでプログラムするために、Electronを使っていました。 久しぶりにプログラムを修正しようとしたら、electronコマンドが通りません。 改めて環境を構築しました。 ポイント electronのインストールで「sudo npm install -g electron --unsafe-perm=true --allow-root」でオプションを付加しないとエラーになった Electronが見つからない Electronは、「HT...
とりあえずのメモ

Javascriptでmac用のツールを作ってみる【Electron】

簡単なファイル整理用のMacツールを作ってみたので、メモをしておきます。 ElectronとAtomとクロスプラットフォーム Electronというアプリ開発環境があります。もともとAtomというエディタソフトを開発するときに生まれました。 ちょうどGIMPを作るときに生まれたGTKみたいですね。 Atomエディタは、WindowsだけでなくMac, Linuxそれぞれで動くエディタです。クロスプラットフォームなわけです。ElectronはAtomエディタを作るときに作ったフ...