非公式 Scrapbox アプリを開発している話

| 2 min read
Author: masahiro-kondo masahiro-kondoの画像

これは、Scrapbox Advent Calendar 2021 - Adventar 15日目の記事です。

2017年の終わり頃から個人で Scrapbox を使い始めました。それまでは Tumblr にサブアカウントを作って個人用 Wiki 的に使っていたのですが、テキスト(Markdown)編集が使いづらいと感じていました[1]。Scrapbox をちょっと使ってその書きやすさやリンクの機能に感動したので Tumblr から全てのエントリーを移行しました。

2018年5月頃から社内で Scrapbox の利用が始まりました。個人と会社用でアカウントを使い分けたい[2]のと、ブラウザ外で利用したい[3]というモチベーションで Electron でアプリ化しました。

ブラウザ外で使いたい理由として、ウィンドウの切り替えがしやすいことと、ブラウザのショートカットが優先されて Scrapbox の Emacs キーバインド設定で C-f や C-e が効かないということがありました。

この野良 Scrapbox アプリ、Scrapbox in Electron ということで sbe と名付けました[4]

GitHub - kondoumh/sbe: An unofficial Scrapbox desktop app

単純にデスクトップ化しただけだとブラウザのようにタブが使えないのが逆に不便に感じて WebView をタブに埋め込むような画面構成にしました。

社内で宣伝したらけっこう使ってくれる人いました。

「Scrapbox のプロジェクトページはタイル表示なので、リストの画面が欲しい」という要望があったので、ページ一覧画面を追加し、独立したタブで一覧画面を開くようにしました。プロジェクトのページ情報を取得するために Scrapbox API を利用しました。

その後も、要望や自分の欲求により機能を順次追加していきました。その履歴は私の個人 Scrapbox に書いています。

Scrapbox in Electron (sbe) - kondoumh

  • URL を Scrapbox 記法の [url title] 形式で貼り付ける
  • 文字サイズを4段階で切り替えて見出し的に使う
  • Scrapbox のページを Markdown 形式に変換する

といった、入力支援機能、

  • プロジェクトの全ページのビューや被リンク数を集計する
  • 任意ページのプレビュー
  • 任意ページのリンクページのプレビューページャー

などの機能が主だったところです。

Scrapbox は個人的にも会社的にもなくてはならないサービスになっており、sbe も便利に使っているため、今後も当面メンテナンスを続けると思います。Electron のリリース速度が早まり、古いバージョンのサポート切れが容赦なくて追従するのが大変[5]ではありますが・・。


  1. Tumblr は引用に最適化したサービスのため用途とも合っていなかったという話もあります。 ↩︎

  2. 当時は会社用と個人用アカウントを使い分けていましたが、結局は個人プロジェクトも会社用のアカウントを編集メンバーにして会社用アカウントで使うようになりました。 ↩︎

  3. 2018年の終わり頃には Scrapbox 本家も PWA に対応してブラウザ外で使えるようになりました。 ↩︎

  4. アイコンは draw.io で作りました。センスがないのは自覚しています。 ↩︎

  5. sbe が依存している NPM パッケージが動かなくなるとデバッグしてプルリクを送ったりしています。 ↩︎

豆蔵デベロッパーサイト - 先週のアクセスランキング
  1. 基本から理解するJWTとJWT認証の仕組み (2022-12-08)
  2. AWS認定資格を12個すべて取得したので勉強したことなどをまとめます (2022-12-12)
  3. Nuxt3入門(第4回) - Nuxtのルーティングを理解する (2022-10-09)
  4. Viteベースの高速テスティングフレームワークVitestを使ってみる (2022-12-28)
  5. Nuxt3入門(第8回) - Nuxt3のuseStateでコンポーネント間で状態を共有する (2022-10-28)
  6. ORマッパーのTypeORMをTypeScriptで使う (2022-07-27)
  7. Nuxt3入門(第1回) - Nuxtがサポートするレンダリングモードを理解する (2022-09-25)
  8. Jest再入門 - 関数・モジュールモック編 (2022-07-03)
  9. GitHub Actions - 構成変数(環境変数)が外部設定できるようになったので用途を整理する (2023-01-16)
  10. Nuxt3入門(第7回) - Nuxt3のプラグイン・ミドルウェアを使う (2022-10-23)