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
Create a website using Spatial Web
Search
Akio Itaya
June 18, 2025
Programming
0
310
Create a website using Spatial Web
visionOS 26 向けのウェブサイトを作ろう!
https://mercari.connpass.com/event/352787/
Akio Itaya
June 18, 2025
Tweet
Share
More Decks by Akio Itaya
See All by Akio Itaya
Porting a visionOS App to Android XR
akkeylab
0
460
How to handle 3D content on Android XR
akkeylab
0
73
How to build visionOS apps using Windows
akkeylab
0
170
How to build visionOS apps using Persona
akkeylab
1
340
Summary - Introducing enterprise APls for visionOS
akkeylab
0
500
Apple Vision Pro trial session
akkeylab
0
300
How to support Privacy Manifest
akkeylab
0
420
Let's make it compatible with visionOS!
akkeylab
0
290
Let's Join the Android community!
akkeylab
0
190
Other Decks in Programming
See All in Programming
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
390
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
440
効率的な開発手段として VRTを活用する
ishkawa
0
140
Deep Dive into ~/.claude/projects
hiragram
14
2.5k
NPOでのDevinの活用
codeforeveryone
0
830
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
820
AIともっと楽するE2Eテスト
myohei
6
2.6k
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
9
2.6k
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
120
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
590
Team operations that are not burdened by SRE
kazatohiei
1
310
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
35
6.7k
Gamification - CAS2011
davidbonilla
81
5.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Practical Orchestrator
shlominoach
189
11k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Adopting Sorbet at Scale
ufuk
77
9.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Unsuck your backbone
ammeep
671
58k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
Transcript
AKKEY / AKIO ITAYA visionOS 26 ͚ͷΣϒαΠτΛ࡞Ζ͏ʂ Recap of WWDC25
Mercari Spatial Web
جૅฤ
<body> <model src="bird.usdz"> <img src="bird.png"> </model> </body>
<body> <model src="bird.usdz"> <img src="bird.png"> </model> </body> Apple <model> λάͷ༷Λ
ඪ४ԽஂମʢW3CʣʹఏҊத
https://immersive-web.github.io/model-element/
<body> <model src="bird.usdz"> <img src="bird.png"> </model> </body> ඇରԠϒϥβͰ දࣔ͢Δը૾
<body> <model src=“bird.usdz” stagemode="orbit" > <img src="bird.png"> </model> </body> ࠨӈͷճస͕
ՄೳʹͳΔ ·ͣλοϓδΣενϟʔΛՃͯ͠ɺ ΠϕϯτΛݕͨ͠Β֯Λܭࢉͯ͠… ͱ͍࣮͕ͬͨෆཁʂ
<body> <model src=“bird.usdz” stagemode="orbit" id="3d-model"> <img src="bird.png"> </model> <script> const
model = document.getElementById('3d-model'); function turnRight() { const matrix = model.entityTransform; const newMatrix = matrix.rotateAxisAngle(0, 1, 0, 90); model.entityTransform = newMatrix; } </script> </body> ศརͳ໘ɺҰఆͷ੍͕͋Δ
<body> <model src=“bird.usdz” stagemode="orbit" loop autoplay> <img src="bird.png"> </model> </body>
ΞχϝʔγϣϯʹରԠ
<body> <link rel="spatial-backdrop" href="sky.usdz"> <model src=“bird.usdz” stagemode="orbit" loop autoplay> <img
src="bird.png"> </model> </body> Website EnvironmentsʢBETAʣ
Ԡ༻ฤ
<body> <model src="bird.usdz" id="3d-model" stagemode="orbit" loop autoplay> <img src="bird.png" alt="bird
image"> </model> <script> const model = document.getElementById('3d-model'); if (window.HTMLModelElement) { model.ready.then(() => { // ಡΈࠐΈྃ }).catch(() => { // ಡΈࠐΈࣦഊ }); } else { // ඇରԠϒϥβ } </script> </body> <model> αϙʔτͷ༗ແΛ֬ೝ
<body> <model src="bird.usdz" id="3d-model" stagemode="orbit" loop autoplay> <img src="bird.png" alt="bird
image"> </model> <script> const model = document.getElementById('3d-model'); if (window.HTMLModelElement) { model.ready.then(() => { // ಡΈࠐΈྃ }).catch(() => { // ಡΈࠐΈࣦഊ }); } else { // ඇରԠϒϥβ } </script> </body> ಡΈࠐΈεςʔλε औಘՄೳ
<body> <div id="loading"> <div class="spinner"></div> <p>Loading 3D model...</p> </div> <model
src="bird.usdz" id="3d-model" stagemode="orbit" loop autoplay> <img src="bird.png" alt="bird image"> </model> <script> const model = document.getElementById('3d-model'); const loading = document.getElementById('loading'); if (window.HTMLModelElement) { model.ready.then(() => { loading.style.display = 'none'; }).catch(() => { loading.innerText = "Failed to load model."; }); } else { loading.style.display = 'none'; } </script> </body>
࣮ԋ
github.com/AkkeyLab/spatial-web Skydancer
WWDC25 What’s new for the spatial web https://developer.apple.com/videos/play/wwdc2025/237
Thank you !!