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
95
パスキーでのログインを 実装してみよう!
hibiki_cube
0
1.3k
今日からできる! はじめてのパスキー認証
hibiki_cube
1
180
ここがおもろい! Swift UI
hibiki_cube
1
73
Other Decks in Technology
See All in Technology
組織全員で向き合うAI Readyなデータ利活用
gappy50
1
820
AI機能プロジェクト炎上の 3つのしくじりと学び
nakawai
0
120
様々なファイルシステム
sat
PRO
0
250
生成AI時代のPythonセキュリティとガバナンス
abenben
0
140
可観測性は開発環境から、開発環境にもオブザーバビリティ導入のススメ
layerx
PRO
2
990
AIエージェントによる業務効率化への飽くなき挑戦-AWS上の実開発事例から学んだ効果、現実そしてギャップ-
nasuvitz
5
1.3k
ラスベガスの歩き方 2025年版(re:Invent 事前勉強会)
junjikoide
0
260
OTEPsで知るOpenTelemetryの未来 / Observability Conference Tokyo 2025
arthur1
0
270
20251029_Cursor Meetup Tokyo #02_MK_「あなたのAI、私のシェル」 - プロンプトインジェクションによるエージェントのハイジャック
mk0721
PRO
0
300
AI時代におけるデータの重要性 ~データマネジメントの第一歩~
ryoichi_ota
0
720
【SORACOM UG Explorer 2025】さらなる10年へ ~ SORACOM MVC 発表
soracom
PRO
0
150
AI AgentをLangflowでサクッと作って、1日働かせてみた!
yano13
1
160
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
185
22k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Embracing the Ebb and Flow
colly
88
4.9k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
640
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
How STYLIGHT went responsive
nonsquared
100
5.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
The Language of Interfaces
destraynor
162
25k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Statistics for Hackers
jakevdp
799
220k
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
まだまだ開発がんばります!