ワダチを作る #13:利用規約・使い方・紹介のページ…公開の前に、見せる側を整えた

前回(#12)で、ログインや招待制などのマルチユーザーの土台を、本番に出しました。ただ、本番はまだ Cloudflare Access の後ろで、入れるのは自分だけです。

Access を外すと、ログインしていない人にも、トップページなどが見えるようになります。今回は、その前に作った**「見せる側」の画面**の話です。

  • 利用規約・プライバシーポリシー・お問い合わせ
  • ログインしていない人向けの、紹介のページ
  • 使い方のページ(画面の絵つき)と、エラーの画面

利用規約とプライバシーポリシー

ハコヅミで作ったものを土台に、ワダチの中身に合わせて書き直しました。文は Claude が下書きし、自分が読んで確かめています。法的な文なので、ここは人が見ます。

ワダチならではの点は、たとえば次のようなところです。

  • 料金:今は無料。登録数の上限は、習慣・内容・アイコンだけで、毎日の記録には上限がない(前回の「守り」の話)
  • 見える人:記録は本人にだけ見える。ほかの利用者に見せる機能はない
  • 消えるまでの時間:退会すると、すぐに消える。ただ、データベースを戻すための記録には、最長 7 日残る

日数や運営者の表記は、コードの 1 か所にまとめました。「7 日」は、退会した人の記録を残す日数と同じ値を使っているので、ポリシーの文と実装がずれません。

同意は、案内だけにした

規約への同意は、チェックボックスで同意を取る形も考えました。ただ、同意の記録を持つと、規約を変えたときに同意を取り直す仕組みも要ります。

ハコヅミと同じく、ログインの画面に「ログインすると、利用規約とプライバシーポリシーに同意したものとみなします」と書くだけにしました。同意の記録(テーブル)は持ちません。

お問い合わせは、じるラボのサイトのフォーム

お問い合わせのフォームは、ワダチの中には作らず、じるラボのサイトにある共通のフォームを使います。?service=wadachi を付けて開くと、「お問い合わせの対象」が「ワダチ」になります。

そのため、ワダチのほかに、ブログ(フォームの選択肢)と、メールを送る Worker(件名に [ワダチ] を付ける)の 2 つのリポジトリも直しました。サービスを足すたびに、ここも忘れずに直します。

ログインしていない人の、紹介のページ

ログインしていない人がトップページを開くと、ワダチの紹介が出ます。並びは、ハコヅミのトップと同じにしました。

  1. バナー
  2. 概要(1 文)と「Google でログインして始める」
  3. 3 つの特長(文と画面の絵)
  4. 料金とデータの扱い
  5. 使い方へのリンクと、もう一度ログインのボタン
スマホ幅のワダチの紹介のページ。上にバナー、その下に「毎日の習慣の記録を、1か所にまとめる、習慣トラッカーです。」と「Google でログインして始める」のボタン、ベータ版の案内。続けて、特長「毎日の習慣を、1か所に」の文と、記録の画面の絵

ログインしていない人のトップページ(画面の絵は、架空のデータ)

特長には、「連続」「途切れた」という言葉を使っていません。ワダチの一番大事な方針は、連続日数を主役にしないことです。紹介の文にも、それを通しました。

ベータ版のあいだは招待制なので、ボタンの下に「初めて使い始められるのは、招待した方だけです」と、お問い合わせへのリンクを置いています。

使い方のページと、絵の撮り方

使い方のページには、習慣の登録・記録・タイマー・積み上がり・並べ替えなどを、画面の絵つきで載せました。

困るのは、画面を直すたびに、絵が古くなることです。そこで、絵は手で撮らず、npm run help:shots で撮り直せるようにしました。

  • 手元のデータベースに、架空の習慣(6 つ)と、約 2 年分の記録を入れる
  • 幅 375px・2 倍の解像度で、決まった画面を撮る
  • 必要なところだけを切り出して、WebP にする

画面の見た目を変えたら、撮り直して、絵を目で見てからコミットする決まりにしました。実際、このあと見出しやカードの余白を直したときも、このスクリプトで撮り直しています。

撮っている途中で、タイマーの不具合も見つかりました。音の再生が始まる前に「一時停止」を押すと、再生が取り消され、「音を始められませんでした」と出ることがありました。絵を撮る自動の操作が、人より速く押したので気づけました。

エラーの画面と、ログ

エラーの画面は、番号ごとに、言葉と「トップページへ」のリンクを出します。

  • 404:ない URL・ない習慣・管理者でない人の管理画面を、同じ画面にする(あるかどうかを見せない)
  • 技術的な文は出さない(エラーの中身や SQL は、画面にもログにも出さない)

サーバーで思わぬ失敗をしたときは、エラーの名前・文・場所だけを、Workers のログに残します。データベースのエラーの文には、送った値(登録した内容)が含まれることがあるので、そこから後ろは切り捨てています。

公開の手順を、先に書いた

最後に、Access を外す手順を、文書(docs/public-launch.md)にしました。

  1. 本番で、招待制が効いていることを確かめる(招待していないアカウントは断られ、ユーザーも作られない)
  2. 本番の Access と、ホーム画面のアイコンのための例外の設定を消す
  3. curl とブラウザで、ログインしていない人に何が見えるかを確かめる
  4. 入口が、独自ドメインだけになっているかを確かめる
  5. 招待制を続けるかを決める

ここまでを本番に出して、あとは Access を外すだけ、になりました。

ただ、その前に、もう一つやりたいことがありました。別のモデルに、セカンドオピニオンを頼むことです。それが次回の話です。

おわりに

  • 規約・ポリシーの数字は、コードの 1 か所にまとめ、実装とずれないようにした
  • 同意は案内だけにして、同意の記録は持たない
  • 使い方の絵は、スクリプトで撮り直せるようにした。画面を直したら、撮り直す
  • 公開の手順は、外す前に文書にした

次回は、公開の前に頼んだセカンドオピニオンのレビューと、実際に Access を外して公開した話です。

← トップページに戻る