kondoumh のブログ

- とあるソフトウェアエンジニアのめったに更新されないブログ -

タブ機能付きの Scrapbox クライアントを Electron で作る

今年から会社で Scrapbox が情報共有ツールとして採用されました。社内の情報が集まるようになって効果が出てきていると思います。

scrapbox.io

個人的には去年から Scrapbox を愛用しています。

blog.kondoumh.com

Chrome で2つの Scrapbox アカウントを使うのは、切り替えがちょっと面倒です。今年の春に Twitter Lite を Electron で使うために Electron 化してました。

blog.kondoumh.com

その流れで、Scrapbox も Electron アプリにして使ってました。アプリ側は会社のアカウントでログインしておけば、Chrome 側は個人アカウントで使えます。

その後 Chrome が PWA 対応したので Electron 版 Twitter は使わなくなりましたが、Electron 版 Scrapbox は会社の情報見るのに時々使ってました。

最近、会社の Scrapbox のページがすごく増えてきて、アプリで1画面だけで使っていると不便になり、ブラウザと同様のタブが欲しくなりました。ということで久々に手を入れました。

タブ機能追加には、NPM パッケージの electron-tabs を使いました。

www.npmjs.com

Windows だと Ctrl キー、macOS だと ⌘ キーを押しながらページリンクをクリックすると、別タブでオープンするようにしました。現在のページを別タブに複製したり、URL をクリップボードにコピーする機能も追加しました。ページ内検索もタブ毎に効くようにしました。

f:id:kondoumh:20181209182445g:plain

ツールボタンとか文字だし、アプリアイコンは Electron のままだし、タブと WebView のスクロールバーが二重化したりするし・・・という状況なので、もうちょい調整したら GitHub の Release 機能でバイナリを配布してもいいかなと思っています。

github.com

12.18 追記) macOS と Windows のバイナリを置いておきました。

Release sbe v0.1.0 · kondoumh/sbe · GitHub

Scrapbox も PWA 対応してるので、単にデスクトップアプリとして使いたい場合はそちらを使うとよいと思います。デスクトップでタブも使いたい (かつブラウザとアカウント分けたい) ケースでは使えるかもしれません。