スレッド形式で雑にメモを書き散らすためのサービス「Thredot」をリリースしました
Thredot はスレッド形式でメモを書けるサービスです。
Google アカウントがあればログインできます。
こういうの
Playground ページを用意しているので、気軽に使い心地を試してみてください。
Thredot のコンセプト
Thredot はアイデアや情報をメモに書き出すハードルを限界まで下げることを目指しており、そのために様々な工夫をしています。
メモを整理させない
Thredot では徹底的にメモを整理させない方針を取っています。
僕は「整理するための機能が用意されていると整理をしたくなってしまう」人間です。
でも整理するのって超面倒くさいです。 ( 支離滅裂 )
結局中途半端に整理しようとして余計にゴチャゴチャになり、最終的にメモを書くこと自体が億劫になってしまいます。
Thredot ではメモを整理するための機能を用意していませんし、今後もする予定はありません。
例えば他サービスによくあるタグ付け機能は Thredot にはありません。
どんなタグをつけるのかを考えるのは面倒くさいし、タグのつけ忘れに気をつけたり、後々タグ付けのルールを変えたいときに過去のメモのタグを変更したりするのも面倒くさいです。
記事ならともかく、ただのメモにいちいちそんな運用はやってられません。
ステータス ( Open / Close / Archive など ) を設定する機能もありません。
これもタグ付け機能と同様に考えることが多すぎます。
このように、整理するための機能をそもそも用意しないことで、開き直ってメモを書くことに集中できるようにしています。
逆にタグ付けやステータス設定等でメモをきっちり整理したいという人には Thredot は向いていません。
爆速な検索機能
とはいえ過去に書いたメモを素早く探せなくては意味が無いので、 Thredot ではスレッド名による爆速な検索機能を用意しています。
以下は実際にスレッドを検索しているときの様子ですが、読み込み始めてから検索結果が出てくるまでがめちゃくちゃ早いのが分かります。
( 爆速検索の実現方法については「技術的な話」の「爆速検索」で説明します。 )
スレッドを検索している様子
せっかくかわいいスピナーを用意したのに、一瞬で消えてしまっています。
さすがに早すぎるのでわざと少し遅延させようかなと真面目に検討しました。
この、メモが整理されていないことを前提にした爆速な検索機能が Thredot の強みです。
公開範囲を設定できる
Thredot では スレッドの公開範囲も設定できるため、人に見られたくないメモは非公開にしておくこともできます。
これにより、他人に見られることを気にせずに雑にメモを書くことができます。
設定できる公開範囲は以下になります。
- 公開 : 誰でもスレッドを閲覧できる
- 非公開 : 自分のみがスレッドを閲覧できる
- リンクを知っている人全員 : リンクを知っている人は誰でもスレッドを閲覧できる
WYSIWYG エディタを採用
Thredot では WYSIWYG エディタを採用しています。
メモを取るときに毎回「マークダウンを書く → プレビューする」という重労働を行う体力は僕にはありません。
WYSIWYG エディタ
サポートしている書式やキーボードショートカットの一覧は Playground ページで確認できます。
このように Thredot はメモを雑に書き散らすことに特化したサービスです。
もしご興味を持っていただけたら是非ログインして試してみてもらえるととても喜びます。
技術的な話
ここからは Thredot で利用している技術等について簡単に紹介していきます。
構成
全体の構成はこんな感じです。
構成図
- Next.js アプリケーションを Vercel でホスティング
- DB / ストレージ / 認証には Firebase を使用
これといって特筆するようなことは無いので詳しい説明は割愛します。
UI フレームワーク
UI フレームワークには Mantine を使用しています。
元々お気に入りなのと、後述する Rich text editor が最高なので採用しました。
WYSIWYG エディタ
WYSIWYG エディタには Mantine の Rich text editor を使用しています。
Rich text editor は内部的に Tiptap を使用しています。
Tiptap は Headless な WYSIWYG エディタで、 React 以外にも Vue.js や Svelte など様々なフレームワークで使用することができます。
よくあるリッチテキストエディタ用のライブラリはデフォルトのスタイルが用意されており、カスタマイズできる範囲が限られていることが多いのですが、
Tiptap ではデフォルトのスタイルは一切用意されていないので自分の好きなように見た目をカスタマイズすることができます。
とはいえ、 0 から全てのスタイルを設定するのはそれはそれで大変です。
そこで、 Mantine の Rich text editor は Tiptap をベースにした上でいい感じのスタイルを提供してくれています。
尚且つ Tiptap のカスタマイズ性は損なわれていないので、見た目も機能も自由にカスタマイズできます。
ちなみに Tiptap は ProseMirror のラッパーです。
Tiptap の類似のライブラリとしては Facebook が開発している Lexical ( Draft.js の後継 ) などがあります。
爆速検索
Thredot ではスレッド名による爆速な検索機能を提供しています。
スレッドを検索している様子
Thredot はデータを Firestore に保存していますが、 Firestore は全文検索をサポートしていません。
なので Firestore で全文検索をしたい場合は基本的に Algolia などの外部サービスと組み合わせて使う必要があります。
しかし、 N-gram という手法を使うことで Firestore のみでも全文検索を実現することができます。
詳しくは下記の記事がとてもわかりやすいのでご参照ください。
さすがに Algolia などの外部サービスに比べると検索精度は劣りますし多少の制約はありますが、十分使えます。
何よりクライアントから直接 Firestore に繋いで検索できるのでとにかく爆速です。
今後やりたいこと
ファイル添付機能やエクスポート機能とかは作りたいなと思っています。
あとは自分がほしいなと思った機能を気ままに追加していく予定です。
まとめ
たくさんメモっていきたい。
Appendix
開発の動機
元々は Slack のスレッドをメモ代わりに使ってたのですが、以下のような理由から代替サービスを探していました。
- 会社の Slack だと退職したときに過去のメモが見れなくなる
- 個人の Slack ( 無料プラン ) だと 90 日以上前のメモが見れなくなる
Zenn のスクラップ機能も最高なのですが、より雑にメモを書けるサービスがほしいと思ったので Thredot を作りました。 ( 公開範囲絞りたい & WYSIWYG エディタほしい )
Scrapbox もとても良かったのですが、独自の記法を覚えるには僕の脳内記憶容量 ( 2bit ) は少なすぎるので…。
あと hashtag などの整理機能が充実しているのも使うのが億劫となる要因でした。 ( 理由は上述した通り。 )
サービス名の由来
Thread ( スレッド ) + Jot ( 手早く書く ) からきています。
ChatGPT に考えてもらいました。便利〜〜〜〜〜。
なぜスレッドの部分は「Thread」じゃなくて「Thred」なのかというと ↓ こういうことみたいです。
はぇ〜
Discussion
チェックボックス付きのリストがあると嬉しいです。
こんな感じに書いて
こんな感じに表示するやつ
数式 KaTeX などで数式表示することは難しいでしょうか？
一応 Tiptap 公式の Extension ( Mathematics extension | Tiptap Editor Docs ) はあるのですが Pro license が必要なので諦めてました、が、よく見たら Free プランがあるから大丈夫そうという気がしてきた
検討してみます！！