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
330
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
910
How to handle 3D content on Android XR
akkeylab
0
82
How to build visionOS apps using Windows
akkeylab
0
170
How to build visionOS apps using Persona
akkeylab
1
360
Summary - Introducing enterprise APls for visionOS
akkeylab
0
510
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
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
220
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
300
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
520
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
710
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
240
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
270
LLMは麻雀を知らなすぎるから俺が教育してやる
po3rin
2
1.3k
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
7
1k
Quality Gates in the Age of Agentic Coding
helmedeiros
PRO
1
110
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
160
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
2
220
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
570
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
4 Signs Your Business is Dying
shpigford
184
22k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
GraphQLとの向き合い方2022年版
quramy
49
14k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Code Review Best Practice
trishagee
69
19k
Code Reviewing Like a Champion
maltzj
524
40k
Bash Introduction
62gerente
613
210k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
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 !!