掲載済み (2026-01-20号)
#021 421文字 • 3分

## スマホ1タップで作業時間を記録!Notion × Vercel × Claude Code で作った時間管理システム

日本語

掲載情報

2026年1月20日火曜日号 メインジャーナル掲載

概要

https://zenn.dev/hiroto0126/articles/f19adaf776aa16

詳細内容

## スマホ1タップで作業時間を記録!Notion × Vercel × Claude Code で作った時間管理システム https://zenn.dev/hiroto0126/articles/f19adaf776aa16 Claude Codeを活用し、スマホのウィジェットから1タップでNotionに作業時間を記録・可視化するカスタムシステムをわずか1.5時間で構築した事例を報告する。 **Content Type**: 📖 Tutorial & Guide **Language**: ja **Scores**: Signal:5/5 | Depth:3/5 | Unique:3/5 | Practical:5/5 | Anti-Hype:4/5 **Main Journal**: 83/100 | **Annex Potential**: 78/100 | **Overall**: 80/100 **Topics**: [[Claude Code, Notion API, Vercel, 時間管理, TypeScript]] 本記事は、研究と仕事の時間配分を適正化したいという個人的な課題を、最新のAIコーディングツール「Claude Code」を用いて解決した開発記録である。著者は、既存の時間管理ツール(Toggl Trackなど)が持つ「ブラウザを開く手間」や「入力項目の多さ」といった運用負荷が継続の妨げになると分析し、スマホのウィジェットから1タップで完結する極めてシンプルな仕組みを自作した。 システムの構成要素は、HTTPリクエストを送信できるスマホアプリ「WristOff」、バックエンドとしての「Vercel(TypeScript)」、そしてデータ基盤の「Notion API」である。特筆すべきは開発プロセスにおけるClaude Codeの活用だ。著者は詳細な要件定義書をAIに渡し、実装とデバッグのほぼ全てをClaude Codeに委ねることで、不慣れな技術スタック(TypeScript)を使いながらもわずか1.5時間でシステムを完成させている。著者はこの経験から、個人開発においては「何を作りたいか」を言語化できれば、実装自体はAIが担う時代になったと強調している。 技術的な工夫として、Notion DB上での「Last Event Time」を用いた累積計算ロジックが挙げられる。これにより、一日のうちに複数回の休憩を挟んでも、正味の作業時間を正確に算出できる設計となっている。また、状態遷移(開始→休憩→終了など)のバリデーションをAPI側に持たせることで、スマホ操作特有の誤タップによるデータ汚染を防いでいる。 著者は、単なる記録ツールの作成に留まらず、Notionのチャート機能を活用した「目標ライン」と「死守ライン」の可視化まで踏み込んでおり、エンジニアが自身の生活や生産性をエンジニアリングによって向上させることの楽しさと実益を示している。AIツールによる開発速度の劇的な向上が、個人のQOL(Quality of Life)改善に直結することを証明する好例である。