Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SvelteKit × Supabaseで オレオレカンバンボード作ってみた
Search
HIBIKI CUBE
March 22, 2024
Technology
2
110
SvelteKit × Supabaseで オレオレカンバンボード作ってみた
せっかくカンバンボードを導入したのに、動かすのを忘れた…
みなさんきっとある経験ですよね。
それを解決すべく、タイマー付きのカンバンボードをSvelteで作ってみたお話です。
HIBIKI CUBE
March 22, 2024
Tweet
Share
More Decks by HIBIKI CUBE
See All by HIBIKI CUBE
パスキーでのログインを 実装してみよう!
hibiki_cube
0
980
今日からできる! はじめてのパスキー認証
hibiki_cube
1
150
ここがおもろい! Swift UI
hibiki_cube
1
67
Other Decks in Technology
See All in Technology
AWS認定を取る中で感じたこと
siromi
1
190
Lakebaseを使ったAIエージェントを実装してみる
kameitomohiro
0
110
Operating Operator
shhnjk
1
590
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
340
PO初心者が考えた ”POらしさ”
nb_rady
0
210
2025 AWS Jr. Championが振り返るAWS Summit
kazukiadachi
0
110
OPENLOGI Company Profile for engineer
hr01
1
34k
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
270
Geminiとv0による高速プロトタイピング
shinya337
1
270
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
170
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
kaonavi
9
4.3k
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
17k
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
GitHub's CSS Performance
jonrohan
1031
460k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Making Projects Easy
brettharned
116
6.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Thoughts on Productivity
jonyablonski
69
4.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Transcript
SvelteKit × Supabaseで オレオレ看板ボード作ってみた 〜え、思ってたよりムズくね?!〜
自己紹介 HIBIKI CUBE @hibiki_cube
みなさん
タスク管理には 何を使っていますか?
世の中のいろんなタスク管理ツール • ToDoリスト • ガントチャート • カレンダーに入れる • Slackのブックマーク •
頭で覚えておく
SvelteKit × Supabaseで オレオレ看板ボード作ってみた 〜え、思ってたよりムズくね?!〜
カンバンボード
カンバンボードとは
カンバンボードとは
カンバンボードとは
カンバンボードとは
カンバンボードとは
カンバンボードのいいところ • やる事・やりたい事・やらなきゃいけない事を どんどん溜めていける • 進捗管理も一緒にできる • タスクの状況が一目でわかる • 「頑張り」が可視化される
カンバンボードのいろんな付加機能 • GitHubのissueと連携できる • Milestonesで進捗率を確認できる • タグで分類できる • メンバーをアサインできる •
いろんな条件で絞り込み、検索できる
既存のサービスでいいじゃん
既存のカンバンボードで起きる最大の問題 更新するのを忘れる…
既存のカンバンボードで起きる最大の問題 今日も頑張るぞ〜
既存のカンバンボードで起きる最大の問題 ノってきた! 捗るぜ!卍
既存のカンバンボードで起きる最大の問題 カンバン動かして なかった…
カンバンボードの存在を忘れることによる弊害 • 単純にやることを忘れる・見逃す • 結局やることを脳内で意識してしまう • 別のタスクに気が散ってしまい効率が落ちる
タスク管理における問題 • ステータスを更新するのを忘れる • そのタスクにどのくらいかかったか分からない • いつまで経っても正確に見積もりができない
どう解決する…?
カンバンに タイマーをつける!
今回作ったもの
None
デモ
やりたいこと
やりたいこと • カンバンボードの基本的な機能 • タイマー(当然) • データの永続化・同期 • すべるとでつくりたい🤪
やりたいこと • カンバンボードの基本的な機能 • タイマー(当然) • データの永続化・同期 • すべるとでつくりたい🤪
None
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>
やりたいこと • カンバンボードの基本的な機能 • タイマー(当然) • データの永続化・同期 • すべるとでつくりたい🤪
DndFinalize export const DndFinalize = async (e: CustomEvent<DndEvent<Item>>, laneId: bigint)
=> { // 並べ替えの更新 // タイマーの開始・停止 // DBの更新 }
タイマーの制御(開始) 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();
タイマーの表示 import { timers } from '$lib/timers'; //...なんやかんや //↓↓↓ <Card
/>
None
タイマーの表示 import { timers } from '$lib/timers'; //...なんやかんや... //↓↓↓ <Card
/>
やりたいこと • カンバンボードの基本的な機能 • タイマー(当然) • データの永続化・同期 • すべるとでつくりたい🤪
🤔「Supabase使ってみたいな…」
None
None
None
Supabaseを そのまま使ってもいいけど…
None
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, }, }); } }
Supabase側でデータができる
None
まだまだ開発がんばります!