SvelteKit × Supabaseで オレオレカンバンボード作ってみた

せっかくカンバンボードを導入したのに、動かすのを忘れた…
みなさんきっとある経験ですよね。

それを解決すべく、タイマー付きのカンバンボードをSvelteで作ってみたお話です。

1. SvelteKit × Supabaseで オレオレ看板ボード作ってみた 〜え、思ってたよりムズくね?!〜
2. 自己紹介 HIBIKI CUBE @hibiki_cube
3. みなさん
4. タスク管理には 何を使っていますか？
5. 世の中のいろんなタスク管理ツール • ToDoリスト • ガントチャート • カレンダーに入れる • Slackのブックマーク • 頭で覚えておく
6. SvelteKit × Supabaseで オレオレ看板ボード作ってみた 〜え、思ってたよりムズくね?!〜
7. カンバンボード
8. カンバンボードとは
9. カンバンボードとは
10. カンバンボードとは
11. カンバンボードとは
12. カンバンボードとは
13. カンバンボードのいいところ • やる事・やりたい事・やらなきゃいけない事を どんどん溜めていける • 進捗管理も一緒にできる • タスクの状況が一目でわかる • 「頑張り」が可視化される
14. カンバンボードのいろんな付加機能 • GitHubのissueと連携できる • Milestonesで進捗率を確認できる • タグで分類できる • メンバーをアサインできる • いろんな条件で絞り込み、検索できる
15. 既存のサービスでいいじゃん
16. 既存のカンバンボードで起きる最大の問題 更新するのを忘れる…
17. 既存のカンバンボードで起きる最大の問題 今日も頑張るぞ〜
18. 既存のカンバンボードで起きる最大の問題 ノってきた! 捗るぜ！卍
19. 既存のカンバンボードで起きる最大の問題 カンバン動かして なかった…
20. カンバンボードの存在を忘れることによる弊害 • 単純にやることを忘れる・見逃す • 結局やることを脳内で意識してしまう • 別のタスクに気が散ってしまい効率が落ちる
21. タスク管理における問題 • ステータスを更新するのを忘れる • そのタスクにどのくらいかかったか分からない • いつまで経っても正確に見積もりができない
22. どう解決する…？
23. カンバンに タイマーをつける！
24. 今回作ったもの
26. デモ
27. やりたいこと
28. やりたいこと • カンバンボードの基本的な機能 • タイマー(当然) • データの永続化・同期 • すべるとでつくりたい🤪
29. やりたいこと • カンバンボードの基本的な機能 • タイマー(当然) • データの永続化・同期 • すべるとでつくりたい🤪
31. Svelte DND Action <div use:dndzone={{ items: lane.Items, flipDurationMs }} on:consider={e => DndConsider(e, lane.id)} on:finalize={e => DndFinalize(e, lane.id)} > {#each lane.Items as item (item.id)} <div animate:flip={{ duration: flipDurationMs }}> <Card {item} isRunning={lane.runsTimer} /> </div> {/each} </div>
32. やりたいこと • カンバンボードの基本的な機能 • タイマー(当然) • データの永続化・同期 • すべるとでつくりたい🤪
33. DndFinalize export const DndFinalize = async (e: CustomEvent<DndEvent<Item>>, laneId: bigint) => { // 並べ替えの更新 // タイマーの開始・停止 // DBの更新 }
34. タイマーの制御(開始) import { timers } from '$lib/timers'; //...なんやかんや if (!$timers[item.id]) { $timers[item.id] = { started_at: new Date(), sessionOffset: 0, duration: 0, }; } $timers[item.id].started_at = new Date();
35. タイマーの表示 import { timers } from '$lib/timers'; //...なんやかんや //↓↓↓ <Card />
37. タイマーの表示 import { timers } from '$lib/timers'; //...なんやかんや... //↓↓↓ <Card />
38. やりたいこと • カンバンボードの基本的な機能 • タイマー(当然) • データの永続化・同期 • すべるとでつくりたい🤪
39. 🤔「Supabase使ってみたいな…」
43. Supabaseを そのまま使ってもいいけど…
45. Prismaでデータにアクセス async ({ request }) => { const data = await request.formData(); const itemId = Number(data.get('id')); const timerControl = String(data.get('timerControl')); if (timerControl === 'start') { await prisma.logs.create({ data: { item: itemId, }, }); } }
46. Supabase側でデータができる
48. まだまだ開発がんばります！