思い立った気持ちを絶やさないために、まずはドメインを買いました。
レジストラは信頼と安心のCloudflareです。
2024/09/01時点で$14.18なり〜〜〜〜！

実際に引き落とされたのは¥2,297でした。

企画書のような何か

何を解決したいのか

• タスク管理がヘタクソ
  • 何かのアプリにタスクを登録しても更新し忘れる
  • タスクの一覧が脳内に溜まってしまう
  • 期限を覚えるのが大変
  • どのくらい掛かりそうか、感覚の域を出ない
  • いつまで経っても見積もりができない
  • 何にどのくらい時間を使ったか振り返れない

どうやって解決するのか

• 時間を軸にしたタスク管理アプリ
  • どんなタスクがあって、
  • それの期限がいつで、
  • いつ頃までに終わらせたくて、
  • それにどのくらい時間がかかりそうか
  • を管理する。

どうやって実現するか

• Stackにタスクを溜めていく
  • 名前
  • 優先度（☆☆★, ☆★★, ★★★）
  • 期限
  • 完了希望期限
  • 見積もり時間
  • これまでの経過時間
• どれか1つ選んでタスクを開始する
  • 全画面で表示
    • タスクの名前
    • 円形タイマー
    • 一時停止ボタン
    • 完了ボタン
    • 延長ボタン（5, 10, 15, 30, それ以上)
    • 他タスク追加ボタン
  • Live Activitiesにも表示
  • 全体の時間の1/4, 1/2, 3/4が経過した時点で、見積もっていた通りの時間で終わりそうか確認する
    • マルバツ
    • バツならどのくらい延長が必要か入力（5, 10, 15, 30, それ以上)
  • 時間が全て経過したら、完了しているかどうか聞く。
    • マルだとしても、聞かれる前に止めてほしいよね
    • バツなら、どのくらい延長が必要か入力
• タスクが完了したら、見積もりの精度を評価する
  • タスクにかかった時間が見積もりに近かったか
  • 途中進捗を聞かれた時にマルが多かったか
  • どのくらいの延長があったか
  • 延長せずにずるずる伸びるのは良くないね
• 1日, 1週間, 1ヶ月の間でやったタスクやかかった時間を振り返れるようにする

1タスクに絡むデータ

• 名前: string
• 優先度: "high" | "normal" | "low"
• 期限: タイムゾーン込みのdatetime | null
• 完了希望期限: タイムゾーン込みのdatetime | null
• 見積もり時間: ○分のnumber | null
• これまでの経過時間: ○分のnumber -> ログの総和
• 今実行中かどうか: boolean
• 完了したかどうか: boolean
• 手動で延長した時間: ○分のnumber
• 1/4進捗が良好か: boolean | null
• 1/2進捗が良好か: boolean | null
• 3/4進捗が良好か: boolean | null

ログのデータ

• どのタスクか
• いつ始めたか: タイムゾーン込みのdatetime
• いつ終わったか: タイムゾーン込みのdatetime | null

ページ構成

ホーム
├─ タスク一覧
├─ タスク追加
├─ 今やっているタスク
└─ 完了したタスク

こちらを活用させていただきました。ありがとうございます
https://zenn.dev/praha/articles/b2e225ae091ae3

ホーム画面

• サービスの紹介
• お試し用のタスク追加UI
  • supabaseのAnonymousを活用したい

タスク一覧

• カード形式でタスクを表示
  • 名前
  • 期限
  • 優先度: 背景色
  • 見積もり, 経過時間, 延長: カラーバーで表現

今やっているタスク

• 今やってるタスクがない
  • タスクを始めましょう的な表示と、タスク一覧
• 今やっているタスクがある
  • 名前
  • 円形タイマー
  • 残り時間の数字 mm:ss
  • 一時停止ボタン
    • 一時停止中は背景を点滅
  • 完了ボタン
  • 延長ボタン
    • モーダルを開く
  • 新規タスク追加ボタン
    • モーダルを開く

タスク追加

• フォーム(superforms)
  • 名前
  • 優先度（☆☆★, ☆★★, ★★★）
  • 期限
  • 完了希望期限
  • 見積もり時間

カードの状態の見た目でプレビュー

完了したタスク

• 基本的にはタスク一覧と同じ
• 日時のrangeで絞り込みできるフォーム
• ショートカットとして、今日, 今週, 今月の一覧をぱっと出せるボタン

認証

supabase
Sign in with Apple

Auth.jsのガイドに従って初期セットアップをする

1. SvelteKit用のセットアップ

参照: Auth.js | Sveltekit

パッケージのインストール

bun add @auth/sveltekit

auth.jsの諸々の設定

基本的にはauth.js(ファイル名)でいろんな設定をする。

import { SvelteKitAuth } from '@auth/sveltekit'

export const { handle, signIn, signOut } = SvelteKitAuth({
  providers: [],
  adapter: null,
})

これをSvelteのhookで読み込むようにする。

export { handle } from '$lib/auth'

ページ上で認証を扱えるようにする

<script>
  import { page } from '$app/stores'
  import { SignIn, SignOut } from '@auth/sveltekit/components'
</script>

<h1>SvelteKit Auth Example</h1>
<div>
  {#if $page.data.session}
    <!-- 認証されてたらこっち -->
    <span class='signedInText'>
      <small>Signed in as</small><br />
      <strong>{$page.data.session.user?.name ?? 'User'}</strong>
    </span>
    <SignOut>
      <div slot='submitButton' class='buttonPrimary'>Sign out</div>
    </SignOut>
  {:else}
    <!-- 認証されてなかったらこっち -->
    <span class='notSignedInText'>You are not signed in</span>
    <SignIn provider='passkey' />
  {/if}
</div>

これで/authにアクセスすると、こんなページが出てくるようになります。

ここで↑↑「Signin with passkey」↑↑のボタンを押すと、

こんな画面に遷移して…

メールアドレスを入力して指紋認証や顔認証で認証をすると、

こんな感じで認証が完了します。

体調不良やらなんやらで間が空いてしまったのでちょっと仕切り直し

Auth.jsに頼っていると自前のUIでのPassKey実装はできなさそうなので、Simplewebauthnを使って実装してみる