Takafumi Horiuchi

Practice Log n Share

Septembre 2026

Présentation

Enregistrer sa pratique d'un geste, puis montrer le même écran à son professeur en cours. J'ai conçu cette application iPhone pour ma propre pratique du saxophone et l'ai développée en collaboration avec l'IA.

Écran de suivi. Une grille d'historique surmonte la barre du jour (54 minutes au total) et les cartes de catégories. La pratique de morceaux, en cours depuis plus de 27 minutes, est mise en évidence par une couleur plus claire et un contour blanc. Écran de partage. Du cours du 17 septembre au 24 septembre : 4 heures et 38 minutes, des barres par catégorie et un tableau quotidien présentant toutes les catégories sans défilement horizontal.
Le suivi à gauche, le partage à droite. Toucher une catégorie lance le chronomètre ; en cours, on montre le bilan de la pratique entre les séances. Les écrans utilisent des données fictives à titre d'illustration. Les captures montrent l'interface originale en japonais.
Rôle
Conception, design UX/UI et développement (avec Claude Code et Codex)
Période
Septembre 2026
Technologies
React · TypeScript; Swift (WKWebView, Live Activity, StoreKit, iCloud)

Essayer la démo web (contient mes propres données de pratique au 20 septembre 2026)

Point de départ — « Comment se passe la pratique ? » : je ne savais pas répondre

Lors de mes cours toutes les deux semaines, répondre « surtout des gammes » ne disait ni ce que j'avais travaillé ni combien de temps. Écrire dans un carnet avec le saxophone autour du cou était peu commode, et les applications de suivi du temps essayées servaient à consulter mes données seul.

Entre deux dates de cours se succèdent les barres des jours de pratique et les jours de repos. Regrouper les durées quotidiennes par catégorie dans la barre du bas donne 10 heures et 06 minutes.
Les barres du haut montrent la pratique quotidienne ; les cadres rouges indiquent les cours. En cours, je présente le bilan de l'intervalle. Dates et durées sont fictives ; les barres du haut et du bas totalisent la même durée.

Enregistrer — L'instrument en main, d'un seul geste

Pendant la pratique, je ne touche que les cartes de catégories. Un toucher lance le chronomètre, une autre carte change de catégorie et un second toucher sur la même l'arrête.

Écran de suivi. Une grille d'historique surmonte la barre du jour (54 minutes au total) et les cartes de catégories. La pratique de morceaux, en cours depuis plus de 27 minutes, est mise en évidence par une couleur plus claire et un contour blanc.
1 Historique
La pratique accumulée. La première chose visible à l'ouverture.
2 Aujourd'hui
L'ordre et la répartition de la pratique. Pleine à une heure.
3 En cours
Seule cette carte est claire, avec un contour blanc.
4 Cartes
Toucher pour changer. La durée du jour bien visible.

Une journée — Une fois pleine, la barre le reste

La barre du jour se remplit en une heure. Au-delà, le total du moment devient son extrémité droite, pour qu'aucun vide ne réapparaisse dans une barre déjà pleine.

Pratique du jour — 1 h 05 min

Retenue

Écartée

Comparaison pour 65 minutes de pratique. En haut, la solution retenue place le total à droite, avec une échelle minimale d'une heure. En bas, la solution écartée élargit l'échelle de 60 à 90 puis 120 minutes. Dès qu'une heure est dépassée, le vide revient uniquement dans la barre du bas.

Accumuler — Tout voir, depuis le premier jour

L'intensité du vert indique la pratique et les cadres rouges les cours. Le défilement horizontal remonte au premier jour enregistré. J'ai privilégié la consultation de plusieurs années de pratique plutôt que la légèreté du rendu.

Grille d'historique. L'intensité du vert représente la pratique de juin à septembre ; les cadres rouges marquent les cours toutes les deux semaines.
Cinq niveaux : 0 minute, moins de 30, moins de 60, moins de 90, puis 90 ou plus. Cette accumulation est la première chose visible à l'ouverture de l'application.

Partager — Au début du cours, un écran qui parle de lui-même

Les totaux par catégorie et le détail quotidien résument la période du dernier cours à aujourd'hui, prêts à montrer au professeur. Le tableau quotidien réunit toutes les catégories sur un écran, quitte à réduire le texte, pour supprimer le défilement horizontal.

Évolution — Des cartes devenues le tableau de commande de la pratique

J'ai construit les écrans à partir de spécifications élaborées par dialogue avec l'IA, puis les ai essayés et corrigés à plusieurs reprises. Une première version web m'a permis d'explorer le suivi et le partage avant de développer l'application pour iPhone.

Première version du 9 septembre. Six petites cartes et le total du jour, 40 minutes, occupent des zones distinctes de l'écran de suivi.

9 septembre
Première version

Version web du 21 septembre. Catégorie et durée du jour sont réunies dans de grandes cartes ; les 10 minutes de lecture de partition en cours sont mises en évidence.

21 septembre
Version web

Écran de suivi. Une grille d'historique surmonte la barre du jour (54 minutes au total) et les cartes de catégories. La pratique de morceaux, en cours depuis plus de 27 minutes, est mise en évidence par une couleur plus claire et un contour blanc.

24 septembre
iOS 1.0

La première version et la version web utilisent les mêmes données fictives (six catégories, 40 minutes aujourd'hui). iOS 1.0 en utilise d'autres.
Le nom et la durée, ensemble
J'ai mis la durée du jour en évidence sur chaque carte pour relier le contenu de la pratique au temps consacré.
L'état actuel, d'un coup d'œil
J'ai éclairci uniquement la carte en cours de chronométrage et assombri les autres.
Les commandes dans l'écran
J'ai fait arrêter le défilement à une position où une rangée de cartes tient dans l'écran.

Vers la fin, j'ai répété une quinzaine de fois ce cycle : Claude Code proposait des problèmes possibles, Codex les vérifiait et les corrigeait, puis je décidais des changements à retenir.

Le ressenti — Choisir l'arrêt du défilement en l'essayant

Les mots seuls ne suffisaient pas à obtenir un mouvement fluide suivi d'un arrêt net. J'ai créé avec l'IA un outil permettant de changer méthodes et valeurs à la volée, essayé cinq méthodes sur un appareil réel, puis choisi l'accrochage natif du navigateur.

Modèle en bosse

Cinq gestes sur appareil réel avec Modèle en bosse. Axe horizontal : 0–1200 millisecondes après avoir levé le doigt ; axe vertical : distance au point d'accrochage. Le zéro pointillé indique ce point ; le point final de chaque courbe est la dernière position mesurée.

Arrivée projetée

Cinq gestes sur appareil réel avec Arrivée projetée. Axe horizontal : 0–1200 millisecondes après avoir levé le doigt ; axe vertical : distance au point d'accrochage. Le zéro pointillé indique ce point ; le point final de chaque courbe est la dernière position mesurée.

Natif proximity
Retenue

Cinq gestes sur appareil réel avec Natif proximity. Axe horizontal : 0–1200 millisecondes après avoir levé le doigt ; axe vertical : distance au point d'accrochage. Le zéro pointillé indique ce point ; le point final de chaque courbe est la dernière position mesurée.

Natif mandatory

Cinq gestes sur appareil réel avec Natif mandatory. Axe horizontal : 0–1200 millisecondes après avoir levé le doigt ; axe vertical : distance au point d'accrochage. Le zéro pointillé indique ce point ; le point final de chaque courbe est la dernière position mesurée.

Sans accrochage

Cinq gestes sur appareil réel avec Sans accrochage. Axe horizontal : 0–1200 millisecondes après avoir levé le doigt ; axe vertical : distance au point d'accrochage. Le zéro pointillé indique ce point ; le point final de chaque courbe est la dernière position mesurée.
Positions après avoir levé le doigt, comparées à la même échelle. Le zéro pointillé marque l'accrochage. Dans les journaux de l'appareil, j'ai choisi cinq gestes par méthode dont la vitesse, calculée avec les positions des 60 ms précédentes, était de 0,6–1,8 px/ms, en privilégiant les plus proches de 1,2 px/ms. Réglages, positions initiales et directions diffèrent selon les gestes.
Outil de réglage du défilement. Les commandes des cinq méthodes d'accrochage et leurs paramètres côtoient un écran de téléphone pour essayer l'interaction.
J'ai comparé l'arrêt du défilement sur un appareil réel en enregistrant distance et vitesse. Ouvrez l'image pour l'agrandir.

Un produit — Au-delà de la pratique

L'apparence suit les réglages de l'appareil. Les données sont enregistrées sur celui-ci et sauvegardées automatiquement dans iCloud.

Mode clair. Écran de suivi. Une grille d'historique surmonte la barre du jour (54 minutes au total) et les cartes de catégories. La pratique de morceaux, en cours depuis plus de 27 minutes, est mise en évidence par une couleur plus claire et un contour blanc.Mode sombre. Écran de suivi. Une grille d'historique surmonte la barre du jour (54 minutes au total) et les cartes de catégories. La pratique de morceaux, en cours depuis plus de 27 minutes, est mise en évidence par une couleur plus claire et un contour blanc.
Le même écran de suivi en modes clair et sombre.
109 icônes thématiques adaptées à la pratique, rangées par instruments, sport, apprentissage, peinture, artisanat et expression.
L'icône de l'en-tête se choisit selon la pratique : 47 pour la musique, 15 pour le sport, 15 pour les langues et l'apprentissage, 11 pour l'art, 14 pour la création et le quotidien, et 7 pour l'expression. Le saxophone est dérivé de Qlementine Icons (licence MIT).

À l'usage — La prochaine question : quel niveau de détail enregistrer ?

J'ai utilisé l'application chaque matin et montré l'écran à mon professeur en cours. Selon son retour, le contenu de la pratique était immédiatement lisible, et noter les types de gammes serait encore plus utile (propos reformulés). J'envisage un niveau sous les catégories pour ajouter du détail tout en gardant la saisie simple.

Documents

La démo web permet d'essayer le suivi et le partage. Elle contient mes propres données de pratique au 20 septembre 2026 ; vos modifications restent uniquement dans le navigateur utilisé.

  1. Diapositive 1. Couverture : développement d'une application pour enregistrer la pratique et la partager avec son professeur. Takafumi Horiuchi.
  2. Diapositive 2. Présentation : Log pour enregistrer, Share pour montrer la pratique au professeur. Rôle, période et outils.
  3. Diapositive 3. Contexte : communiquer précisément sa pratique du saxophone au professeur. Difficultés du carnet papier et des applications existantes.
  4. Diapositive 4. Approche : enregistrement d'un geste et visualisation immédiate. Accumulation à deux échelles : une journée, puis les mois et les années.
  5. Diapositive 5. Quatre usages de l'IA : recherche, première implémentation, outil de réglage de l'interaction et optimisation.
  6. Diapositive 6. Collaboration avec l'IA : étude des applications existantes et clarification du concept par le dialogue.
  7. Diapositive 7. Première implémentation : comparaison de V0 générée par l'IA et de V1 révisée par des retours successifs sur la mise en page et les couleurs.
  8. Diapositive 8. Réglage de l'interaction : outil créé avec l'IA pour comparer soi-même vitesse et arrêt du défilement.
  9. Diapositive 9. Optimisation : problèmes possibles proposés par Claude Code, vérifications et corrections par Codex, puis décisions humaines, de façon itérative.
  10. Diapositive 10. Résultats et suite : usage personnel, retours du professeur et réflexion sur des sous-catégories pour plus de détails.
Faites défiler horizontalement les diapositives. Cliquez ou touchez pour agrandir. Les originaux sont en japonais.

Ouvrir les documents en PDF (japonais, 4,4 Mo)