BLOGHOMECATEGORY
作業時間管理のためにNotionと連携するアプリを作ってみよう【開発中】

2026/03/22 11:19

updateIcon

2026/03/22 11:24

きっかけ

前に使っていた作業管理アプリ

もともと作業時間を記録するために「集中」というiOSアプリを使用していました。

シンプルで気に入っていたので数年間使用していたのですが、端末ごとにデータが管理される仕様のため、iPhoneとMacで記録が別々になってしまうのが悩みでした。

最初はPCでの作業でもiPhoneで記録をとるようにしていたのですが、最近はPCで作業することが増えてきたこともあり、デバイスをまたいで一元管理できるものに変えたいと思い始めました。

また単に時間を記録するだけでなく、一日の行動を視覚的に振り返れるようにしたいという悩みもありました。

休みの期間は生活リズムが崩れがちで、「なんか最近だらけてるな」と気づいたときにはすでに手遅れになっていることが多く、生活習慣を視覚的に把握できるものが欲しいと思っていました。

そこで試したのが、NotionのデータベースとNotion Calendarを連携させて、連携させた作業が記録されているデータベースをNotion Calendar上に表示するというものです。

Notion Calendarでは、月・週・日のviewが用意されており、日表示にすると1日の作業時間やその他の予定がどのくらいの割合なのかがぱっと見でわかります。

これを、普段作業に使用しているNotionとNotion Calendarが画面分割で並べて使うことで、スケジュールや作業時間を把握しながら取り組めるようになりました。

これでやりたいことは実現できたのですが、時刻を全角文字を入力するとエラーになる、時間を修正しようとすると終了時間まで連動して変わってしまうなど、細かいストレスがありました。

ちょうどNext.jsやAPIの勉強をしていたこともあり、だったら自分で作ってしまおうと思い立ったのが開発を始めた動機です。

こんな感じ

やりたいこと

  • Notionを直接操作することなく、NotionのDBに作業時間を入力できるもの
  • 「集中」アプリについていた、タイマーを作業開始時に設定し、終了時に作業時間が入力されるもの
  • Notionを使用することで、複数端末で同じデータを扱えるようにする

    など

使用する技術

現時点(2026/03/22)での使用しているものです

  • Next.js(App Router)
  • Notion API
  • shadcn/ui
  • React hook forms

github

https://github.com/monarizzz/link-to-notion-db

github