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
320
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
660
How to handle 3D content on Android XR
akkeylab
0
78
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
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
160
Hack Claude Code with Claude Code
choplin
6
2.4k
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
910
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
180
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
1
180
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
210
Deep Dive into ~/.claude/projects
hiragram
14
12k
TypeScriptでDXを上げろ! Hono編
yusukebe
3
700
テスト駆動Kaggle
isax1015
1
520
技術同人誌をMCP Serverにしてみた
74th
1
680
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
190
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
300
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
14k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Visualization
eitanlees
146
16k
Done Done
chrislema
184
16k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
Side Projects
sachag
455
42k
Building Adaptive Systems
keathley
43
2.7k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
7
330
Agile that works and the tools we love
rasmusluckow
329
21k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
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 !!