👏

Webアプリ一括管理ツール『Rambox』なら、CustomCode機能で何のWebでも好き勝手にカスタムできる（但しプログラマに限る）

2021/09/23に公開

Webアプリ一括管理ツールといえば、Station・Stack・Biscuit等を思い浮かべる方が多いだろう（他にも沢山ある）。私はもともとStationユーザだったのだが、先日いくつか同様のWebアプリ管理ツールを触ってみたところ、デフォルトでJavaScriptのコードを仕込める機能がある、プログラマと相性が抜群のRamboxに感動したので布教することにした。

本記事では、任意のWebサービスでも定期実行等を仕込んで、Badge表示・Push通知がカスタムできる事例をコード含め紹介する。

本記事の対象

対象としては、以下を想定している。JSが全然読めない人、コピペでしかプログラミングできない方は、他のツール使ったほうが幸せかもしれない…

プログラマの人（JS書きなら尚良し）
Webアプリ一括管理ツール使ってるけど、いまいちシックリきてない人

Ramboxとは

https://rambox.app/

ツールバーは、横にも縦にもできる。私は左縦に並べるのが好き。グルーピングとかは今の所なさそうなので、そのあたりを求める人には微妙かもしれない。

CustomCode機能は、JS書ける人なら最高

JavaScriptのコードを仕込む事ができるのが、かなり有り難い。大体この手のツールで公式未対応のWebサービスとかを導入すると大体悲しくなるのだが、コレがあれば何でもできてしまう…

やれること

rambox.setUnreadCountで未読数バッジ更新
setIntervalで定期監視
Notification APIを使って、通知を出す
- ※ 仕組みとして、Web側で通知がされると、Rambox側で受け取ってアプリとして通知してくれる
もちろんJS系の記述querySelectorとか使える
- ※ Ramboxの裏側では、Chromiumが走っているようなので（2021年9月現在：Chrome87）、割とモダンなJS仕様で書けるので有り難い

公式でもやり方を解説しているが、公式はtitle変更をしてバッジを更新している模様。 window.rambox で直に色々触れるので、私はそちらで実装した（ただし仕様変更には要注意）。

※補足：開発者ツールも使える

「Toggle Developer Tools」で、開発者ツール出せるのも、痒いところに手が届く感じが本当に有り難い。CustomCode書くときとかに使えるやつ。

CustomCodeで好き勝手にカスタムしてみる

やったこと
- Badgeや通知未対応の「ZohoMail」のWebアプリで、定期実行を仕込んで「Badge表示」「Push通知」を実装する
内容
- 「受信トレイ」な内容を見て、window.ramboxでバッジ周りの表示を変更させる
- NotificationAPI使って、擬似的にPush通知を発生させる
  - 結構適当だけど動いた。 new Notification して通知発火させる
やり方
- 個別設定のAdvanced -> Custom Codeに貼ればOK

// =====================
// ====== 共通処理 ======
// =====================

/**
 * NotificationAPIで疑似Push通知を発生させる
 */
function pushNotification({ title, body }) {
  Notification.requestPermission().then(function () {
    const notification = new Notification(title, { body });
  });
}

//

// =====================
// ====== 個別処理 ======
// =====================

let currentCount = 0;

function updateBadge(num) {
  num >= 1
    ? window.rambox.setUnreadCount(num)
    : window.rambox.clearUnreadCount();
}

function updateNotification(num) {
  if (num >= 1 && num > currentCount) {
    pushNotification({
      title: `新着メールが${num}件あります`,
      body: "Zoho Mail",
    });
  }
}

function check() {
  const unreadNum = Number(
    document.querySelector('.zmTreeNode[title="受信トレイ"] > .zmTreeCount')
      .innerText
  );
  updateBadge(unreadNum);
  updateNotification(unreadNum);
  currentCount = unreadNum;
}

//

// =====================
// ====== 実行周り ======
// =====================

// 起動時実行
setTimeout(check, 5 * 1000);

// 定期実行
setInterval(check, 60 * 1000);

// Click検知（画面更新→すぐにバッジを更新させたいので暫定で）
document.addEventListener("click", function (e) {
  setTimeout(check, 1 * 1000);
});

ちなみに、マウスボタンの「進む」「戻る」の挙動も、本来ならば効いていないのだが、CustomCodeで対応できるので有り難い。（今現在、結構対応していない管理ツールが多い。）

おわりに

他にも楽しい使い方ありそう。GitHubの残レビュー数表示、Twitterリプ検知とか、Amazon在庫監視とかできるかな…？

とりあえず暫くはRamboxで良いかなと思っているのですが、Ramboxを超える良き一括管理ツールを知ってたら or 他のツールでもカスタムコードに対応したら、@y_kawase まで教えていただけると大変嬉しいです！