「画面に入った」で数えたら、17%残して読了になった

記事を最後まで読んだかどうかを、サイト側で判定しています。その作りを一度入れ替えたあとで、まだ食い違っているという指摘をもらいました。

調べたら、本文をまだ17%残している位置で読了が成立していました。

本文を区画に分けて、通った跡を見ている#

判定の仕組みはこうです。本文の高さを6つの区画に分け、画面に映った区画に印を付けます。全部に印が付いたら読了とします。

時間では測っていません。開いて放置しても時間は進むので、読まずに読了になってしまうからです。通った経路そのものを見れば、連続して読んだ人は必ず全部を通り、途中を飛ばした人には穴が残ります。

ここまでは意図どおりに動いていました。問題は「映った」をどう数えるかのほうにありました。

最後の区画は、画面に入った瞬間に埋まる#

最初の数え方は「画面と少しでも重なった区画に印を付ける」でした。素直な書き方に見えます。

この数え方だと、最後の区画は画面の下から顔を出した瞬間に埋まります。まだ読んでいない部分が画面の下に残っていても、区画としては「映った」ことになります。

実際の記事で測りました。本文の高さが4731px、画面の高さが745px、1区画は788pxです。最後の区画が画面に入るのは、本文の83%まで進んだところでした。

読み終わりを指す数字が、2つとも違う場所にあった#

同じページには、読み進み具合を出す細いバーもあります。こちらは「本文の末尾が画面の下端に来たら100%」で計算していました。

つまり同じ「読み終わり」を指しているはずの2つが、17%ずれた場所を指していました。バーはまだ「あと17%」と言っているのに、記録のほうはもう読了になっている。どちらも動いていて、どちらも例外を出しません。

「通り過ぎた」に変えると、位置が揃う#

区画に印を付ける条件を、下端まで通り過ぎたかどうかに変えました。

最後の区画の下端は、本文の末尾と同じ位置です。そこを画面の下端が越えるのは、本文を読み切ったときになります。バーが100%になるのと、読了が成立するのが、同じ瞬間になりました。

直したのは条件式の不等号ひとつぶんですが、意味はかなり変わっています。「見えた」を「見終えた」にしたので、読む側の実感と一致するようになりました。

速く動かしたときに、何を数えていいのか#

もうひとつ直したところがあります。

目次から飛んだときに、途中を読んだことにしてはいけません。かといって、速くスクロールしただけの人を弾いてもいけません。この2つを分けるのに、以前は移動量のしきい値を置くことを考えていました。

置かずに済む書き方がありました。前回の画面の下端と、いまの画面の上端の、大きいほうを下限にします。

実際のジオメトリで確かめました。連続して100px、300px、700px、744pxずつ動かした場合とPageDownでは、いずれも読了になります。一気に最下部へ飛んだ場合は成立しません。目次から中ほどへ飛んで最後まで読んだ場合は、手前に穴が残って成立しません。飛んだあとに戻って全部読めば成立します。

今回の学び#

まず、同じ名前で呼んでいるものが、同じものだとは限らないこと。「読み終わり」を2か所で判定していて、どちらもそう呼んでいました。呼び名が一致していると、中身を照らし合わせる機会が来ません。ずれていたのは実装ではなく、言葉のほうが先に揃ってしまったことでした。

次に、「見えた」と「見終えた」は別の状態だということ。画面に入った時点で数えると、まだ読んでいない部分が残ります。人が読み終えたと感じるのは通り過ぎたときなので、そちらに合わせるほうが実感と一致します。

そして、しきい値を置く前に、置かずに書ける形を探すこと。今回は下限の取り方を変えるだけで場合分けが消えました。しきい値は、決めた瞬間から「その値でよいのか」を考え続ける対象になります。要らないなら、無いほうが軽い。