taskbar.fm の紹介 - Electron-Vite、そしてSwift
taskbar.fmというアプリを開発しています。
これは、現在起動しているアプリケーションをウィンドウごとに「タスク」として画面の下、左、右のいずれかに表示する作業効率化のためのアプリケーションです。
このtaskbarはWindowsのタスクバーにインスパイアされて作られており、タスクをクリックしてウィンドウを切り替えることができます。
縦タブにすることも可能です。
これは便利なのではないかと思った方はぜひダウンロードしてみてください。
使ってみたよ！からこうだったらいいなあまでフィードバックをお待ちしております。
さて、今回はこのtaskbar.fmを構成している技術について解説します。
中核になっているのは Electron-viteです。
Electronはご存知の通りデスクトップアプリケーションを実行するNodeと、その上のHTML, CSS, JSで構成されたWebっぽいものの組み合わせで動きます。
ただ、このHTML, CSS, JSの組み合わせを作るところがちょっと厄介でした。
Electon-viteでは、その辺りをViteというツールを使って色々便利にしてくれています。
詳細は省きますが、ビルド周りに苦労しなくても、import文やTypeScriptが使えたり ファイルを編集したら再起動せずに即時反映など色々な恩恵が受けられます。
さて、taskbar.fm の実装の話に移ります。
NodejsとElectronはかなりネイティブなAPIを操作するためのAPIが提供されているので、ディスプレイのサイズ等は取得できます。
ですが、ElectronはSandboxモデルに従って他のプロセスの状態を取得することができません。
そこで、いくつかの方法を検討したところ、Macのネイティブなシステムコールを叩く必要があるという結論に至りました。つまり、Swiftのコードを書くということになります。
まず、xcodeを立ち上げて、新規プロジェクトをコマンドラインアプリケーションとして作成、最初のビルドをします。
それから色々試行錯誤して、これ必要なのは.swiftファイルだけなのでは？となって swiftc というコンパイラでビルドすればいいじゃんみたいなことになりました。
そして出来上がったソースコードはこちら。
このソースコードはほとんどすべてChatGPTによって生成したものに少し手を加えた程度のものです。
最終的に、実行中のプロセスを取得して、JSONで返すというものになっています。
これを、NodeJS側から定期的に実行し、レスポンスをNodeJSの中で組み立てて活用しています。
その他の細かなVue的やElectron的なテクニックのようなものは我流で存在しますが、taskbar.fmの一番面白い技術的要素はここでしょう。
やったらできるものですね。
Any ask or question？
Discussion