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
SvelteKitで凝ったルーティングをするのが楽しかった話
hibiki_cube
0
72
パスキーでのログインを 実装してみよう!
hibiki_cube
0
1.1k
今日からできる! はじめてのパスキー認証
hibiki_cube
1
170
ここがおもろい! Swift UI
hibiki_cube
1
69
Other Decks in Technology
See All in Technology
Kiroと学ぶコンテキストエンジニアリング
oikon48
6
7.4k
新規案件の立ち上げ専門チームから見たAI駆動開発の始め方
shuyakinjo
0
650
JavaScript 研修
recruitengineers
PRO
6
1.4k
攻撃と防御で実践するプロダクトセキュリティ演習~導入パート~
recruitengineers
PRO
4
1.8k
【 LLMエンジニアがヒューマノイド開発に挑んでみた 】 - 第104回 Machine Learning 15minutes! Hybrid
soneo1127
0
260
PRDの正しい使い方 ~AI時代にも効く思考・対話・成長ツールとして~
techtekt
PRO
0
520
Function Body Macros で、SwiftUI の View に Accessibility Identifier を自動付与する/Function Body Macros: Autogenerate accessibility identifiers for SwiftUI Views
miichan
2
150
生成AI時代のデータ基盤設計〜ペースレイヤリングで実現する高速開発と持続性〜 / Levtech Meetup_Session_2
sansan_randd
1
110
20250903_1つのAWSアカウントに複数システムがある環境におけるアクセス制御をABACで実現.pdf
yhana
2
280
まだ間に合う! StrandsとBedrock AgentCoreでAIエージェント構築に入門しよう
minorun365
PRO
11
750
生成AI時代に必要な価値ある意思決定を育てる「開発プロセス定義」を用いた中期戦略
kakehashi
PRO
1
250
オブザーバビリティが広げる AIOps の世界 / The World of AIOps Expanded by Observability
aoto
PRO
0
260
Featured
See All Featured
Practical Orchestrator
shlominoach
190
11k
How GitHub (no longer) Works
holman
315
140k
Navigating Team Friction
lara
189
15k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Fireside Chat
paigeccino
39
3.6k
A better future with KSS
kneath
239
17k
Designing for humans not robots
tammielis
253
25k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
11
1.1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
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
まだまだ開発がんばります!