Electron

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

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

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

2024.08.15 2024.08.19

Macとりあえずのメモプログラミング作業効率化

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

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

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

2024.05.13 2024.08.19

とりあえずのメモプログラミング

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プログラムを作ろうと、np...

2024.05.13 2024.05.15

とりあえずのメモプログラミングホームページ運用

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

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

ブラウザに（Safariではなく）Chromeを利用しているなら、「その他のツール」にある「ショートカット作成」から、Macアプリのように扱うことができます。

インターネット小話パソコン基礎知識

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

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

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

2021.12.28 2021.12.29

ニッチな話題プログラミング

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

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

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

2021.12.19 2024.08.19

ニッチな話題プログラミング

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

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

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

ニッチな話題プログラミング

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

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

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

ニッチな話題プログラミング

久しぶりに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は、「HTML5やJa...

2021.12.18 2021.12.19

ニッチな話題パソコン基礎知識プログラミング

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

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

2020.06.18 2022.05.18

とりあえずのメモプログラミング