Macのメニューバーに常にローカルIPを表示するelectronアプリをつくる 💻

f:id:kimizuka:20220105110207p:plain

ローカルにウェブサーバを立てて、別のデバイスからアクセスする際、ローカルIPを調べるのが面倒なので、常時表示されておきたくなります。
そんなとき、これまでは IP in menubar というアプリを使って、MacのメニューバーにIPアドレスを表示していたのですが、もろもろ考えた結果、electronを使って自作することにしました。

www.monkeybreadsoftware.de

ソースコード

const { app, Tray, Menu } = require('electron');
const ip = require('ip');
const path = `${ __dirname }/icon.png`;

let tray;

app.on('ready', () => {
  const menu = new Menu.buildFromTemplate([{
    label: 'reload',
    click: render
  },{
    label: 'exit',
    role: 'quit'
  }]);

  app.dock.hide();

  tray = new Tray(path);
  tray.setContextMenu(menu);

  render();
});

function render() {
  tray.setTitle(ip.address());
}

ものすごくシンプルに書けました。

解説

アイコンの指定

const path = `${ __dirname }/icon.png`;

今回は不必要だったので透明なpng画像を指定しました。

const path = './icon.png';

相対パスで指定するとアプリを書き出した際に切れてしまうので、__dirnameを使ってフルパスで指定します。

IPアドレスの表示

tray.setTitle(ip.address());

ローカルIPを取得し、タイトルとして表示します。

メニューの作成

const menu = new Menu.buildFromTemplate([{
  label: 'reload',
  click: render
},{
  label: 'exit',
  role: 'quit'
}]);

f:id:kimizuka:20220105113813p:plain

「リロード」と「終了」を設置しておきます。

Dockに表示しない

app.dock.hide();

Dock上には不必要なので非表示にします。

リポジトリ

github.com

みかづきブログ・カスタム

基本的にはちょちょいのほいです。