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
83
SvelteKit × Supabaseで オレオレカンバンボード作ってみた
せっかくカンバンボードを導入したのに、動かすのを忘れた…
みなさんきっとある経験ですよね。
それを解決すべく、タイマー付きのカンバンボードをSvelteで作ってみたお話です。
HIBIKI CUBE
March 22, 2024
Tweet
Share
More Decks by HIBIKI CUBE
See All by HIBIKI CUBE
パスキーでのログインを 実装してみよう!
hibiki_cube
0
580
今日からできる! はじめてのパスキー認証
hibiki_cube
1
110
ここがおもろい! Swift UI
hibiki_cube
1
59
Other Decks in Technology
See All in Technology
モノリスの認知負荷に立ち向かう、コードの所有者という思想と現実
kzkmaeda
0
110
DevinはクラウドエンジニアAIになれるのか!? 実践的なガードレール設計/devin-can-become-a-cloud-engineer-ai-practical-guardrail-design
tomoki10
3
1.2k
BCMathを高速化した一部始終をC言語でガチ目に解説する / BCMath performance improvement explanation
sakitakamachi
2
1.2k
fukuoka.ts #3 社内でESLintの共通設定を配りたい2025年春版
pirosikick
1
290
問題解決に役立つ数理工学
recruitengineers
PRO
6
970
ソフトウェア開発現代史: なぜ日本のソフトウェア開発は「滝」なのか?製造業の成功体験とのギャップ #jassttokyo
takabow
2
1.4k
「エンジニアマネージャー」の役割を担っている / 担ってみたい方へのキャリアパスガイド
coconala_engineer
1
240
caching_sha2_passwordのはなし
boro1234
0
200
ClineにNext.jsのプロジェクト改善をお願いしてみた / 20250321_reacttokyo_LT
optim
1
1.2k
頻繁リリース × 高品質 = 無理ゲー? いや、できます!/20250306 Shoki Hyo
shift_evolve
0
150
LINE API Deep Dive Q1 2025: Unlocking New Possibilities
linedevth
1
150
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
20k
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
GraphQLとの向き合い方2022年版
quramy
45
14k
It's Worth the Effort
3n
184
28k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Designing Experiences People Love
moore
140
23k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
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
まだまだ開発がんばります!