直したのに「まだできない」と言われた — 長押しした瞬間、画面が何も変わらなかった — 制作日誌 #24
制作日誌

直したのに「まだできない」と言われた — 長押しした瞬間、画面が何も変わらなかった — 制作日誌 #24

部品を1つにまとめ直した夜、カレンダーが約1時間まったく動かなくなった。原因を直して配信しても、返ってきたのは「まだできない」。欠陥は3つ重なっていて、最後の1つは処理ではなく「手応え」の欠落だった。

KIYODO
#個人開発#アプリ開発#UI#失敗談#制作日誌

自作のタスク管理アプリには、日付を選ぶ場面が2か所ある。タスクの期間を決める小さなカレンダーと、下のタブから開く大きなカレンダーだ。

この2か所は、同じ「日付を選ぶ」という動作なのに、中身は別々に書かれていた。触り心地も微妙に違う。そこで作法を1つの部品にまとめ直すことにした。タップならその日1日、長押しして指を滑らせればその期間。どちらの画面でも同じ動きにする。

以下は、そのまとめ直しから始まった一晩の記録だ。時刻の順に書く。

9月20日〜21日:作り直しは順調だった

まず期間選択の小さなカレンダーを作り直した。見た目も触覚も決め直し、途中で「端のつまみを掴んで伸ばす」案を試して2コミット分まるごと切り戻したりもした。この2日間で、アプリを焼き直さずに中身だけ差し替える配信を約25回撃っている。

手触りが固まったところで、その作法を部品として切り出した。あとは大きなカレンダーの側を、その部品に差し替えるだけだった。

21日 23:14:差し替えて配信した

差し替えは短い変更だった。型の検査も通った。そのまま配信した。

ここで、差し替え前の画面にあった1行をそのまま残していた。「範囲を選んでいる最中は、カレンダーのスクロールを止める」という1行だ。

元のコードでは、範囲を選んでいない時は「何もない」状態だった。だから「何かあれば止める」で正しく動いていた。ところが新しい部品は、選んでいない時も空の入れ物を返す。

郵便受けで例えると分かりやすい。元のコードは「手紙が来ていれば止める」だった。新しい部品では、郵便受けそのものが常に玄関にある。そこへ「郵便受けがあれば止める」という判定をそのまま当てたので、判定は常に「止める」になった

例え実物
郵便受け部品が返す入れ物
手紙選んでいる範囲
郵便受けがあれば止める残した1行の判定

結果、大きなカレンダーは縦にスクロールしなくなり、範囲選択も成立しなくなった。そして運の悪いことに、ちょうどその時間帯に新しく登録した利用者が2人いた。最初に開いたカレンダーが動かない、という体験をさせてしまったことになる。

22日 0:14:判定を直して配信した

判定を「郵便受けの中に手紙が入っている時だけ止める」に書き換えて配信した。壊れていたのは約1時間

同じ壊れ方を二度しないように、自動テストを6本足した。その中には「開いた直後は何も選ばれていない」という、あまりに当たり前な1本も入れてある。当たり前すぎて誰も確かめていなかったことが、今回の穴だったからだ。

ここで私は、直ったと思っていた。

その後:「まだできない」

利用者からの返事は「まだできない」だった。

スクロールは戻っている。でも範囲選択ができない。処理の側を見直して、それらしい箇所を直して、もう一度聞いた。返事はまた「できない」。2度続いた。

1つ目の原因を潰した時点で「直った」と言ったのが間違いだった。症状の全部を、その原因1つで説明できるかを確かめていなかった。

腰を据えて調べ直すと、残りの欠陥は2つ重なっていた。

2つ目:選んでいる最中に、後片付けが走っていた

大きなカレンダーには、別の画面から戻ってきた時に「選択を消す」後片付けがある。前の選択が残っていると紛らわしいからだ。

この後片付けを「いつやり直すか」の条件に、部品が返す入れ物を丸ごと入れていた。範囲を選ぶと入れ物の中身が変わる。中身が変わると入れ物ごと作り直される。作り直されると、条件が変わったとみなされて後片付けがもう一度走る。

つまり、指で範囲を引いている最中に、引いた範囲が消されていた。やり直しの条件を、作り直されない「消す」操作そのものだけに絞って解決した。

3つ目:長押しした瞬間、画面が何も変わらなかった

これがいちばん気づきにくく、いちばん効いていた。

選んだ期間には、日付の上に帯を敷いて見せる。ところがこの帯は2日以上選んだ時にしか描いていなかった。長押しした直後は、まだ1日しか掴んでいない。だから画面は何も変わらない。

利用者から見ると、長押ししても無反応に見える。無反応なら「できない」と判断するのが自然だ。処理はちゃんと動いていたのに、動いていることを見せていなかった

直し方は、長押しで掴んだ時は1日でも帯を塗ること。ただし普通のタップで選んだ1日は、これまでどおり丸で囲む。掴んだのか、タップしたのかを区別して描き分けた。

最後は、パソコン上で動かす仮の端末で「長押し→指を滑らせる→離す」を実際にやり、23日から25日の終日タスクを作る画面がきちんと開くところまで確かめた。

22日:兄弟アプリへ流し込む

同じコードから枝分かれした乗り換え案内アプリにも、この日の改修をまとめて流し込んだ。ぶつかったのは60ファイル・144箇所。どちらの形を残すかを1つずつ決めて解消した。

流し込んで初めて表に出た劣化は、翻訳の抜けだけだった。11言語で254語を足して埋めた。配信前の自動検査は11項目すべて合格

もう1つの兄弟アプリにも流し込んだが、こちらは配信していない。流し込んだ中身が、そのアプリの古い土台には入っていない部品を起動直後に使う。今の形で配信すると、既存の端末ではアプリが開かなくなる。使える状態にするには、アプリの焼き直しが1回要る。流し込めたことと、配信できることは別の話だった。

この一晩で書き残したこと

3つの欠陥を並べ直すと、壊れ方の種類がそれぞれ違う。

#欠陥どう見えたか
1入れ物の有無で判定していたスクロールも選択も死ぬ
2選んでいる最中に後片付けが走る引いた範囲が消える
31日だけの時に帯を描いていない長押しが無反応に見える

1番は型の検査では出ない。2番は動かしてみないと出ない。3番は、動かしても作った本人には見えない。私は長押しすれば選択が始まると知っているので、帯が出なくても違和感を持たない。知らない人だけが「壊れている」と感じる。

そこから手順書に足したのは2行だけだ。

  • 「反応しない」と言われたら、まず最初の一瞬に何が変わるかを見る。何も変わらないなら、そこが欠陥
  • 押した・掴んだという手応え(塗り・振動)は、飾りではなく機能の一部。無いものは、存在しないのと同じ

共通化そのものは間違っていなかった。いま2つの画面は、同じ部品で同じように動いている。間違えたのは、まとめ直した後に自分の指で触らずに配信したことだ。それが1時間の停止と、2度の「まだできない」の正体だった。

コメント (0)

まだコメントはありません。最初の一言を残しませんか?