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
120
SvelteKit × Supabaseで オレオレカンバンボード作ってみた
せっかくカンバンボードを導入したのに、動かすのを忘れた…
みなさんきっとある経験ですよね。
それを解決すべく、タイマー付きのカンバンボードをSvelteで作ってみたお話です。
HIBIKI CUBE
March 22, 2024
Tweet
Share
More Decks by HIBIKI CUBE
See All by HIBIKI CUBE
SvelteKitで凝ったルーティングをするのが楽しかった話
hibiki_cube
0
77
パスキーでのログインを 実装してみよう!
hibiki_cube
0
1.2k
今日からできる! はじめてのパスキー認証
hibiki_cube
1
170
ここがおもろい! Swift UI
hibiki_cube
1
70
Other Decks in Technology
See All in Technology
AIがコード書きすぎ問題にはAIで立ち向かえ
jyoshise
1
290
人工衛星のファームウェアをRustで書く理由
koba789
15
8.3k
【NoMapsTECH 2025】AI Edge Computing Workshop
akit37
0
230
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.8k
Create Ruby native extension gem with Go
sue445
0
130
会社紹介資料 / Sansan Company Profile
sansan33
PRO
7
380k
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
1.2k
slog.Handlerのよくある実装ミス
sakiengineer
4
480
今日から始めるAWSセキュリティ対策 3ステップでわかる実践ガイド
yoshidatakeshi1994
0
120
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.3k
組織を巻き込む大規模プラットフォーム移行戦略 〜50+サービスのマルチリージョン・マルチプロダクト化で学んだステークホルダー協働の実践〜 / Platform migration strategy engaging all stakeholders
toshi0607
2
200
Rustから学ぶ 非同期処理の仕組み
skanehira
1
150
Featured
See All Featured
Balancing Empowerment & Direction
lara
3
630
Visualization
eitanlees
148
16k
Producing Creativity
orderedlist
PRO
347
40k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Done Done
chrislema
185
16k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.1k
Writing Fast Ruby
sferik
628
62k
Rails Girls Zürich Keynote
gr2m
95
14k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
530
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
まだまだ開発がんばります!