ブログ

記事一覧のカードには、前から「読了済み」の印を付けていました。 付けた当時は57本でした。いまは110本を超えています。印は役に立たなくなっていました。 この記事で扱うこと 読了の印だけでは足りず、未読だけを出す絞り込み […]

本文が文字列として届くこと、そこから見出しを拾う方法、既にあるidを勝手に変えてはいけない理由、そして読んでいる位置をどう追いかけているかです。

このサイトの作りについては何度か書きましたが、中のコードそのものには触れていませんでした。 ここから何本かに分けて、実際のファイルを開きながら説明していきます。まずは全体の地図と、読むために知っておいたほうがいい前提から […]

記事ページを測ったら、本文が始まるのは772px、画面の高さは723pxだった。最初の画面に文章が1文字も無い。アイキャッチ・コピーボタン・見出しリンク・関連記事の4点を直した記録。

読了判定の分母に、フッターや前後記事リンクまで入っていた。本文を読み終えても89.9%。丁寧に読む人ほど読了にならない逆転が起きていた原因と、測ってから直した記録。

貼り付いたヘッダーと目次が、読んでいるあいだずっと画面を占めていた。下へ読むときは引っ込むヘッダー、スクロール中だけ薄くなる目次、先頭へ戻るボタン。3つの判断の記録。

問い合わせフォームで決めることは3つあった。メールアドレスを載せるか、送信先が未設定のときフォームを出すか、失敗をどう伝えるか。共通していたのは「うまくいったように見えて、実は何も起きていない」状態をどう避けるかだった。

脆弱性28件のうち23件がNext.jsに集約されていた。あとは上げるだけ、のはずが「どこまで上げるか」で手が止まった。サポート期限を調べたら選択肢は実質1つだけ。コードモッドが入れた不要な設定を消し、プレビューで確認してから本番へ入れた記録。

PCで右側に追従させていた目次を、スマホでは上部に貼り付けた。ところが貼り付くものは画面を占め続けるため、本文を読む場所が足りなくなる。情報を消さずに縦を横へ並べ替えた話と、「飛んだ先がバーの裏に隠れる」という副作用への対処。

Next.jsはページを読み込み直さない。表示は速いが、計測から見ると「ずっと同じページを見ている」ようにしか映らない。Googleタグマネージャーを挟んでページ内遷移を拾い、さらに初回だけ二重に数えられる問題を止めるまで。

記事を5本公開したあと、読む側の体験を作り込みました。目次の自動生成、追従する目次、読了状況の表示と保存、スマートフォンのメニュー、読了目安の時間。あわせて、トップページの見た目も見直しています。 この記事は、その実装記 […]