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