Takafumi Horiuchi

Practice Log n Share

2026年9月

概览

练习时轻点一下就能记录，上课时直接把同一个画面展示给老师。为了自己的萨克斯学习，我策划并设计了这款 iPhone 应用，并与 AI 协作完成开发。

记录页。上方是练习记录网格，下方是今日进度条（共54分钟）和分类卡片。“乐曲练习”已计时超过27分钟，以亮色和白色边框突出显示。 分享页。汇总9月17日上课当天至24日的练习，共4小时38分钟，并展示分类条形图和无需横向滚动即可查看所有分类的每日明细表。
左侧记录，右侧分享。轻点分类开始计时，上课时展示课间练习的汇总。画面使用的是说明用虚构数据。 截图保留原应用的日语界面。
职责
策划、UX/UI 设计、开发（与 Claude Code、Codex 协作）
时间
2026年9月
技术
React · TypeScript; Swift (WKWebView, Live Activity, StoreKit, iCloud)

试用 Web 演示（收录截至2026年9月20日的本人练习记录）

缘起——面对“最近练得怎么样？”，我答不上来

每两周上一次课，即使回答“主要练音阶”，也无法说明具体练了什么、练了多久。萨克斯挂在脖子上时很难写纸质日志，而试过的计时应用都是供自己回顾记录的工具。

两次上课日期之间，排列着练习日的条形和休息日。将每天各分类的时长汇总成下方的一根条形，总计10小时06分钟。
上方条形表示每日练习，红框标记上课日期。上课时展示这段时间的练习汇总。日期与时长均为说明用虚构数据，上下条形的总时长相同。

记录——手持乐器，轻点一下

练习时只需操作分类卡片。轻点开始计时，点另一张切换，再点同一张停止。

记录页。上方是练习记录网格，下方是今日进度条（共54分钟）和分类卡片。“乐曲练习”已计时超过27分钟，以亮色和白色边框突出显示。
1 积累
至今的练习。打开应用最先看到的内容。
2 今日
练习顺序与时间分配。满一小时填满。
3 计时中
仅此卡片变亮，并以白色边框标示。
4 卡片
轻点切换。突出显示今日时长。

一天——填满的进度条，始终保持填满

今日进度条在一小时处填满。超过一小时后，以当前总时长作为右端，避免已经填满的条形再次出现空白。

今日练习 — 1小时05分钟

采用

弃用

练习65分钟时的比较。上方为采用方案，以总时长作为右端（最少一小时）；下方为弃用方案，将刻度从60扩展到90、120分钟。超过一小时的瞬间，只有下方条形重新出现空白。

积累——从第一天起，全部看得见

以绿色深浅表示练习日，以红框标记上课日期，横向滚动可追溯到开始记录的那一天。相比减轻渲染负担，我更看重能够查看多年的练习。

练习记录网格。绿色深浅表示6月至9月的练习量，红框标记每两周一次的上课日期。
分为五档：0分钟、不满30分钟、不满60分钟、不满90分钟、90分钟及以上。打开应用时，最先看到的就是这些积累。

分享——课程开始时，一屏便能说明

把上次上课至今的练习汇总为各分类总时长和每日明细，直接展示给老师。每日表格即使缩小文字，也要在一屏内放下所有分类，免去横向滚动。

演变——让卡片成为练习的操作面板

根据与 AI 对话整理出的规格文档搭建界面，反复亲自操作并修改。先在早期 Web 版中探索记录与分享的形式，再实现为 iPhone 应用。

9月9日的初版。六张小型分类卡片与今日总计40分钟分别放在记录页的不同区域。

9月9日
初版

9月21日的 Web 版。分类与今日时长整合为大卡片，正在计时的视谱练习10分钟以亮色显示。

9月21日
Web 版

记录页。上方是练习记录网格，下方是今日进度条（共54分钟）和分类卡片。“乐曲练习”已计时超过27分钟，以亮色和白色边框突出显示。

9月24日
iOS 1.0

初版与 Web 版使用相同的虚构数据（六个分类，今日共40分钟）。iOS 1.0 使用另一组虚构数据。
名称与时长放在一起
在卡片上突出显示今日时长，将练了什么与练了多久关联起来。
当前状态，一目了然
只让计时中的卡片变亮，其余卡片调暗。
操作范围留在屏幕内
让滚动停在整排卡片能完整显示于屏幕内的位置。

开发后期，反复进行了约15轮流程：Claude Code 提出潜在问题，Codex 验证并修复，由我决定是否采纳。

手感——如何停下来，亲手试过再选

仅靠文字要求，无法做出“流畅移动、利落停稳”的手感。我与 AI 开发了可即时切换方式和数值的调节工具，在真机上比较五种方式后，选择了浏览器原生的滚动吸附。

隆起曲线型

隆起曲线型的五次真机操作。横轴为手指松开后0–1200毫秒，纵轴为距吸附位置的距离。虚线0为吸附位置，每条线末端的点为最后测得的位置。

落点预测型

落点预测型的五次真机操作。横轴为手指松开后0–1200毫秒，纵轴为距吸附位置的距离。虚线0为吸附位置，每条线末端的点为最后测得的位置。

浏览器原生 proximity
采用

浏览器原生 proximity的五次真机操作。横轴为手指松开后0–1200毫秒，纵轴为距吸附位置的距离。虚线0为吸附位置，每条线末端的点为最后测得的位置。

浏览器原生 mandatory

浏览器原生 mandatory的五次真机操作。横轴为手指松开后0–1200毫秒，纵轴为距吸附位置的距离。虚线0为吸附位置，每条线末端的点为最后测得的位置。

无吸附

无吸附的五次真机操作。横轴为手指松开后0–1200毫秒，纵轴为距吸附位置的距离。虚线0为吸附位置，每条线末端的点为最后测得的位置。
以相同比例比较松手后的位置，虚线0为吸附位置。根据真机日志中松手前60毫秒的位置计算速度，在0.6–1.8 px/ms范围内，按接近1.2 px/ms的顺序为每种方式选取五次操作。各次操作的设置、起点与方向不同。
滚动调节工具。切换五种吸附方式的选项与参数，旁边是用于体验操作手感的手机界面。
记录滚动距离与速度，在真机上比较停止方式。打开图片可放大。

作为产品——练习之外

外观随设备设置切换。练习记录保存在设备本地，并自动备份至 iCloud。

浅色模式。记录页。上方是练习记录网格，下方是今日进度条（共54分钟）和分类卡片。“乐曲练习”已计时超过27分钟，以亮色和白色边框突出显示。深色模式。记录页。上方是练习记录网格，下方是今日进度条（共54分钟）和分类卡片。“乐曲练习”已计时超过27分钟，以亮色和白色边框突出显示。
同一记录页的浅色与深色模式。
可按练习内容选择的109个主题图标，依次为乐器、运动、学习、绘画、手工和表达活动。
可根据练习内容选择应用页眉图标：音乐47个、运动15个、语言与学习15个、美术11个、制作与生活14个、表达7个。萨克斯图标基于 Qlementine Icons（MIT License）。

实际使用——下一个问题是，记录要细到什么程度

每天早晨练习时使用，并在课上向老师展示画面后，得到的反馈是练习内容一目了然，如果连音阶种类也能记录就更有帮助（大意）。我正在考虑在分类下再加一层，在保持便捷的同时记录更多细节。

资料

Web 演示可体验记录与分享功能。收录截至2026年9月20日的本人练习记录，操作结果仅保存在当前浏览器中。

  1. 第1页。封面：开发一款向授课老师分享练习情况的记录应用。堀内贵文。
  2. 第2页。概览：用于记录练习的 Log 与向老师分享情况的 Share。职责、制作时间与工具。
  3. 第3页。背景：希望准确地向老师说明萨克斯练习情况。纸质日志与现有应用的问题。
  4. 第4页。方法：一键记录与即时传达信息的可视化。在一天和月、年两种时间尺度上展示练习积累。
  5. 第5页。使用 AI 的四个环节：调研、基础开发、操作手感调节工具开发、实现优化。
  6. 第6页。与 AI 协作：调研现有应用，通过对话细化概念。
  7. 第7页。基础开发：比较 AI 生成的初版 V0 与反复反馈布局、配色后调整的 V1。
  8. 第8页。调整操作手感：与 AI 开发辅助工具，亲自比较滚动速度和停止方式。
  9. 第9页。实现优化：反复由 Claude Code 提出潜在问题、Codex 验证修复，再由人做出判断。
  10. 第10页。成果与后续：用于自己的练习、老师的反馈，以及为更细致的记录考虑子分类。
横向滚动翻页，点击或轻点放大。原幻灯片为日语。

以 PDF 打开项目资料（日语，4.4 MB）