TokStopのWebとネイティブを分ける構成

同じ画面でも、実行環境の役割は違う

TokStopの制作コードでは、Next.jsによる画面、Supabaseを使う記録、Capacitorを介したネイティブ機能を組み合わせています。この構成を選ぶと画面の実装を共有できますが、ブラウザーと端末固有の動作まで同じになるわけではありません。

この記事は現在の制作コードを読み直した構成の説明です。元の指示文を再現したり、開発効率やコード共通化率を測定したりした記録ではありません。

表示中の時間と、保存された結果を分ける

画面のカウント表示は利用者へ進行を伝えます。一方で、通信が遅れたときや画面へ戻ったときには、保存したセッションとの整合が必要です。開始した記録、終了した結果、画面が表示している状態を別々に確認します。

例えば停止ボタンを押した直後に通信が切れると、利用者には成功したか分からない状態が生まれます。再試行が可能であることと、報酬を二重に確定しないことを一組で設計する必要があります。単に一行の更新条件を付けただけで、報酬まで含めた競合がすべて解決したとは説明できません。

端末の状態はネイティブ側との境界で扱う

消灯を扱う部分には、端末の画面状態を受け取り、直前の状態を保持して変化を通知する処理があります。画面を閉じたとき、別アプリへ移ったとき、端末をロックしたときは同じ出来事ではありません。Web側が見える範囲だけで推測すると、計測の意味が変わってしまいます。

確認の観点は、アプリの復帰、通信断、停止の再試行、異なる端末環境です。コードの存在は実機受入の代わりにはならず、この記事では全OS・全端末の動作を保証しません。

現在の配布はクローズドベータです。参加案内と消灯デトックスの記事をご覧ください。