twicli を Rambox で使う

はじめに

Twitter クライアントの twicli を統合メッセージングアプリ Rambox で使えるようにしてみました。

単に使えるようにするだけでは普通ですので、@ ツイートやダイレクトメッセージを受信したら Rambox のタブにバッジが付くようにしてみました。

Rambox とは

ウェブベースの 100 近いチャット、メッセージング、メールサービスを一元管理する Electron ベースのクライアントです。

• Rambox : Free, Open Source and Cross Platform app for Slack, WhatsApp, Messenger, Skype and much more...

twicli とは

殆どの主要機能が Web ブラウザの JavaScript で動作する Twitter クライアントです。豊富な機能とプラグインやユーザー CSS による高いカスタマイズ性が魅力。

• twicli - A Web Browser-Based Lightweight Twitter Client

Rambox に twicli を追加する

Rambox が標準で対応しているサービスに twicli はありませんので、Custom Service として追加します。

1. 一番左の Rambox のタブの一番下にある _Custom Service をクリックします。
2. Add _Custom Service のダイアログに以下を入力します。
   • Name: twicli
   • URL: http://twicli.neocat.jp/twicli.html
   • Logo: http://twicli.neocat.jp/favicon.ico
   • (他の項目はお好みで)
3. [Add _Custom Service] ボタンをクリックしします (ダイアログが閉じます)。

あとは普通に使えるようになります。

注意点は、初回の twicli 起動時の認証に Authenticate in browser は使えないことです。こちらを選択すると手順の途中でデフォルトのブラウザが起動してしまい、うまく認証できませんので、　Authenticate via server を選んで下さい (間違えたらタブを右クリックして Reload でやり直しましょう)。

@ ツイートやダイレクトメッセージを受信したらバッジを付ける

1. 一番左の Rambox のタブの一番下にある _Custom Service をクリックします。

2. 右側に表示されている Enabled Service の下の twicli にマウスカーソルを重ね、 をクリックします。

3. Edit twicli のダイアログの Advanced をクリックし、Custom Code に以下を入力します。

   custom_code.js

   const ramboxOriginalTitle = document.title;
   function ramboxUpdateTitle() {
     document.title = `${
       document.querySelectorAll('#reply.new, #direct.new').length > 0
         ? '(\u2022) '
         : ''
     }${ramboxOriginalTitle}`;
   }
   registerPlugin({
     newMessageElement: ramboxUpdateTitle,
     newDM: ramboxUpdateTitle,
     switchTo: ramboxUpdateTitle
   });
   

4. [Edit twicli] ボタンをクリックしします (ダイアログが閉じます)。

5. twicli のタブを右クリックし、Reload をクリックします。

@ ツイートを受信するとバッジが付くようになりました。

簡単な解説

Rambox では document.title が (•) twicli のように、先頭に丸括弧付きの中黒 (\u2022) が付いているとバッジを表示します。

また、 今回は対応していませんが、 document.title が (1) twicli のように、先頭に丸括弧付きの数字になっていると、数字付きのバッジを表示します。

twicli にはプラグイン用にフックがありますので、 newMessageElement (新着ツイートの表示) と newDM (新着ダイレクトメッセージの受信) のフックを使って document.title を書き換えています。また、バッジを消すために switchTo (タブの切り替え) のフックにも同じ関数を登録しています。

感想

twicli を Rambox で使う前は Vivaldi のウェブパネルを使っていましたが、ウェブパネルは JavaScript の確認ダイアログ (confirm()) が表示されなくて少し不便でした。

Rambox なら確認ダイアログも表示されるし、上記の Custom Code で未読のバッジも付けられるので、なかなか使えそうです。

参考

• Add a Custom Service · saenzramiro/rambox Wiki