Workflowyにすばやくメモを書き入れるためのアプリをPWAで作った
Workflowy というアウトライナー（階層型メモアプリ）を長らく愛用しているものの、メモを書き入れるときのスピードと柔軟性に欠けるなあ、という気持ちが常々あり、非公式APIを利用した send-to-workflowy を使ったりしていたのだが、昨年（2025年）から 公式でもAPIが登場した ので、Jotflowyという自分のためだけのアプリを作ってみた。
実装としては Hono とCloudflare Workersを使っている。Worker側では、ほぼWorkflowy APIとの中継部分だけを担当しており、データの保存などは特に行っておらず、ほぼフロント側に寄せている。APIキーは初回セットアップの際にWorker側で暗号化を施し、その後はCookieを通じて暗号化されたキーをやり取りするようにしている。こういった仕組みなので、誰にでもオープンな形で使ってもらうことは想定しておらず、使いたい場合にはセルフホストを推奨としている。変な使い方をしなければ、Cloudflareの無料枠範囲内で動かせるようになっている。
機能について
基本的にはsend-to-workflowyを始めとしたこの手のツールでよくあるような、メモを送信すると、ある階層（Node）の配下に新たなNodeを作成する、という挙動をするが、もろもろ自分好みの機能を詰め込んでいる。
送信先のNodeはインタラクティブに選択できる
APIでメモを送る（Nodeを作る）ときには、どのNodeの配下に送るか、送信先NodeのIDが必要になるのだが、このアプリではNodeの一覧をUI上で表示して、どこを送信先として指定するかインタラクティブに選べるようにした。類似のツールだと、ソースコードを覗いたりしてIDを自ら調べて持ってこなければならないものが多く、それはちょっと面倒だったのと、せっかく List Nodes APIがあるので使うことにした。
送信先Nodeは複数の場所をJotflowy上に保存しておいて、メモを送信するときにどのNodeへ送信するか都度選べるようにもしている。
デイリーノートの自動作成
送信先Nodeを保存する際、デイリーノートとして扱うかどうかを選べるようにしている。この機能をonにすると、当該Node配下にその日の日付のNodeを作り（すでに存在する場合はそれを使う）、その下にメモを送信するようになる。
送信先Node
└ New node # <-- 普通はここに送られるが
送信先Node
└ 2026-02-15
└ New node # <-- デイリーノート機能をonにすると、ここに送られる
なお、Workflowyには Calendar という、デイリーノート機能がすでに備わっており、アプリで「Today」ボタンを押すと指定したNode配下に自動でその日の日付が作られるようになっている。一応、これと連動を取るように実装していて、Calendarとして使っているNodeを送信先として指定すると、アプリ側で作る日付Nodeとバッティングせず共存ができるようになっている。ただし、Calendar配下に日付Nodeを直接作成するよう設定されている場合に限る（Calendarでは年月日の階層を作ることも可能だが、階層がある場合には非対応）、Jotflowyから新しい日付Nodeを作成した際は、Calendarに取り込むにあたってWorkflowy上で一手間必要（Calendar - Workflowy support）、といった制約はある。
PWAとWeb Share Target APIへの対応
PWAとしてインストールし、スタンドアローンなアプリとして使える。
PWA化した大きな理由に Web Share Target API に対応させたかった点がある。これに対応することで、いわゆる他のアプリから「共有」する操作の対象になることができる。ブラウザでウェブページを読んでいるときに、そのページについてメモしたい、といった場面が結構多いので、これは個人的にmustだった。
送信したメモの「履歴」が見られる
「履歴」が見られる……と書いたが正確には履歴ではなくて、送信先として選んでいるNodeに対して List Nodes APIを実行して、直下にあるNodeの一覧を取得、表示できるようになっている。その時点でのWorkflowy上の最新状態を取得するから、送信後に別途削除、変更したNodeは見られないわけで、正確には「履歴」ではない。
デイリーノート機能を有効にしている送信先の場合は、日付ごとに区切った形でメモが表示されるようにもなっている。深く考えずに作ったが、このUIがわりとTwitterのような感じがあって見やすくて良いな、と思ったりしている。
その他の機能
他にも細々とした機能を備えている。
- URLを送信した際はtitleの自動取得が行われ、リンク形式で記述される
- template機能を使って特定文字列を常に付与できる
- 例えば現在時刻を埋め込むようなtemplateを設定して、「起床」と送るとWorkflowyには「07:02 - 起床」と書き込まれる、みたいな感じ
- 空行を間に挟んだメモを送ると、空行以降はWorkflowyのNoteとして扱われる
コーディングにはClaude Codeをかなり活用しており、こういう自分のための開発をやりやすくなったなぁ、と実感する良い機会だった。実は昨年の夏ぐらいに一度何日かかけて作ったことがあったのだが、当時はなかなか思い通りにいかない部分があり、頓挫していた。やり直したい気持ちはずっとあったので、軽い気持ちでOpus 4.6を使ってゼロから作り直したところ、粗削りではあるものの、1日でそれなりに動くものが出来てちょっと驚いている。AIの進歩もあると思うし、最初の構築を通じて要件が固められたのもあると思う。
余談：Workflowyと自分がメモに求めること
ここからはWorkflowyとメモというものに関して、自分がどういった考え方をしていてこのアプリを作るに至ったかを書く、完全なる蛇足。
send-to-workflowyのほかにも MemoFlowy など、「Workflowyに手早くメモを送る」という需要は自分だけが持っていたものではなく、従来から結構広く存在していると認識しているのだが、だいたい以下の2点が理由だと思っている。
- Workflowyのモバイルアプリは起動に数秒かかる
- 起動した後で、メモしたいNodeへ移動するのにもちょっと手間がある
近年このあたりは解消しつつあって、起動時間については1秒以下に収まるようになってきた。また「手早くメモを送る」という用途に対しても、そのための Quick Add という機能がAndroid版に搭載された（iOS版は把握していないが、おそらく未リリース）。
そういった状況ではあるのだが、今回のアプリに搭載したような細かなカスタマイズをやりたかったのと、メモをしたためるときには、ある程度の没入感を持てるUIが欲しいのもあり、自分で独自に作るに至った。
メモを書くことと読むことを切り離したいという欲求が自分にはある。Workflowyの画面で過去に書いたメモがたくさん並んでいるところに、追記するように新たなメモを書くよりも、まっさらな画面で没入して書いて投げ込みたいという気持ちが強い。書くときに、まったく関係ない別の言葉が並んでいるとどうにも気が削がれてしまうところがある。なので集中して何かを書きたいときは、ポメラで新しいファイルを作ったり、macOSでは stone という、集中して書くことに特化したアプリを立ち上げることが多い。これはもう完全に自分の性分だと思う。ただ、一度書いたあとのメモを過去のメモと組み合わせながら考えを進めるのは好きなので、Workflowyというアプリ自体は性に合っている。思いついたときに付箋を1枚剥がしてメモを書いておいて、あとで書いた付箋を集めて全部机の上に並べてこね繰り回すような、そういう感覚に近いものを求めているのだと思う。
そういった個人の、言うなればどうでもいいようなこだわりをスッと形にできるのは非常に体験がいい。AIによるCodingが全盛となっていくタイミングで、Workflowyが十数年来初めてAPIの公開に踏み切った、というのもとても良いタイミングでありがたかった。