進捗バーが0から始まらないのは、測る場所を1つ間違えていたからだった

記事を開いた瞬間、読み進み具合のバーが9.5%を指していました。まだ何もしていません。

「あと90%」と出ているのを見て、指摘をもらいました。言われてみると、進み具合を名乗るものが0から始まらないのは変です。

分母を本文の高さに変えたところまでは合っていた#

このバーは一度直しています。

最初はページ全体の高さを分母にしていました。ところがページの下には、前後の記事へのリンク、一覧へ戻るリンク、フッターが続きます。実測するとその部分だけで1205pxありました。

つまり本文を読み終えても90%前後にしかならず、100%にするには読むもののないフッターまでスクロールする必要がありました。勢いよく動かす人は慣性で最下端まで行くので満たせてしまい、文章を追って読む人ほど100%にならない。そこで分母を本文の高さに変えました。

ここまでは正しい判断でした。それでも、始まりの値は0になりませんでした。

下端で測ると、開いた時点ですでに進んでいる#

計算はこうなっていました。

画面の下端が、本文の上端からどれだけ入ったか。それを本文の高さで割る。

この式だと、ページを開いた時点で本文の一部がすでに画面に映っています。実測した記事では、本文の上端がページの297px地点にあり、画面の高さが745pxでした。開いた瞬間に本文の448pxぶんが映っていることになります。本文の高さが4731pxなので、9.5%です。

上端で測り、分母を移動量に合わせる#

基準を画面の下端から上端に変えました。

あわせて分母も変えています。上端で測ると、本文の末尾まで読み切ったときの移動量は「本文の高さ − 画面の高さ」になります。本文の高さのままだと、最後まで読んでも100%に届きません。

そしてこの4283pxは、読了として記録される位置でもあります。バーが満杯になるのと「読了済み」に変わるのが同じ瞬間になりました。

本文が画面に収まる記事はどうなるか#

短い記事では「本文の高さ − 画面の高さ」が0以下になります。割り算が壊れる形です。

この場合は100%を返しています。動かす余地が無く、開いた時点で最後まで見えているからです。読了の判定も同じ扱いになっていて、開いた時点で全区画が埋まります。2つの表示が同じ答えを出すので、ここでも食い違いません。

今回の学び#

まず、0から始まらない指標は、測る対象と名乗りがずれている合図だということ。9.5%という値そのものは正確でした。式が答えていたのは「画面に映った割合」で、表示が名乗っていたのは「読み進み具合」です。数字が合っているかより先に、何を名乗っているかを確かめる必要がありました。

次に、割り算は分子と分母を組で見ること。基準を1つずらすと、分子と分母の両方に同じ量が効きます。片方だけ直すと、始まりが直って終わりが壊れます。今回は両方に効かせたので、終点を動かさずに始点だけ直せました。

そして、同じことを指す表示は、同じ場所で切り替わるべきだということ。バーの100%と読了の記録は、以前は別の位置にありました。いまは同じ4283pxで揃っています。揃っていれば、片方を見て他方を推測できます。ずれていると、どちらが本当なのかを毎回確かめることになります。