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
huyuyasumi_lt_ssk.pdf
Search
sasaki MIERUNE
January 16, 2025
0
42
huyuyasumi_lt_ssk.pdf
sasaki MIERUNE
January 16, 2025
Tweet
Share
More Decks by sasaki MIERUNE
See All by sasaki MIERUNE
ブログを作ってみる
groovyjovy
0
32
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
512
110k
For a Future-Friendly Web
brad_frost
179
9.8k
GraphQLとの向き合い方2022年版
quramy
49
14k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
4 Signs Your Business is Dying
shpigford
184
22k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
370
How STYLIGHT went responsive
nonsquared
100
5.6k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
530
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
The Invisible Side of Design
smashingmag
301
51k
Transcript
位置情報とSupabase 佐々木 遥人 クラメソさっぽろIT勉強会(仮)#7 2025/1/16
©Project PLATEAU / MLIT Japan 2年くらい前から土木業界からきま した 普段はバックエンドフロントエンド問 わず書いています 自己紹介
佐々木 遥人 SASAKI Haruto ソフトウェアエンジニア
©OpenStreetMap contributors 01 What is Supabase 02 何が嬉しいか 03 位置情報とSupabase 目次
©OpenStreetMap contributors 01 What is Supabase
©Project PLATEAU / MLIT Japan What is Supabase •Alternative FirebaseなOSS
•PostgreSQLが全ての基礎 ◦ 設定はSQLで記述 •DataBase, Authentication, Storage, Edge Functions •Que, Cronなどもあるらしい https://supabase.com/
©OpenStreetMap contributors 02 何が嬉しいか
©Project PLATEAU / MLIT Japan 何が嬉しいか •各コンポーネントの繋ぎ込みを考えなくても良い ◦ Lambda +
Firebase + RDS + S3 ⇒ Supabaseで包括 •基本的にSQLを利用して設定が記述される。画一的に書ける ◦ migrationファイルをたくさん作ってデプロイ •極論、SSGしたファイルをホスティングしてSupabaseプロジェクトと疎 通すればそれだけでリッチなアプリケーションを作成することができる →限られた工数を「顧客に価値を届けること」に割くことができる!
©Project PLATEAU / MLIT Japan 何が嬉しいか •DBのブランチング機能がある ◦ アプリに破壊的な変更を加える時、ブランチングされているとレ ビューがしやすい
◦ Vercel、AWS Amplify、Cloudflareにデプロイするとフロントも バックもPRごとにブランチングされた環境が構築できる ◦ 💰はみないことにする •TSなら当然型の生成機能もある
©OpenStreetMap contributors 03 位置情報とSupabase
©Project PLATEAU / MLIT Japan 位置情報とSupabase •やっぱりPostgreSQLネイティブなのが大きい! ◦ PostGIS拡張機能を利用できるのがデカすぎる •地図はタイルというものを表示する
◦ 動的にDBからタイルを作成する方法と、静的にファイルを配信する 方法がある ◦ 動的タイル: PostgreSQLを利用して、rpcを作成し、呼び出す ◦ 静的タイル: PMTilesという方式のファイルをSupabaseの Storageに配置し、呼び出す
©Project PLATEAU / MLIT Japan 位置情報とSupabase •型情報を使ってORMのように記述もできる ◦ Geometryな型付けはできないが、他の基本的な型はこれで賄え る
•Geospatialなものも含めて、複雑な処理はrpcで行い、簡単な処理は SupabaseクライアントからDBにアクセスするので十分 •Realtimeを利用すればリアルタイムな位置情報を共有するアプリを作成 することも簡単そう(試していない)
© 地理院地図 全国最新写真(シームレス) •位置情報とSupabaseは相性が良い! •爆速でタイル配信システムを構築できる! まとめ