Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Create a website using Spatial Web

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Akio Itaya Akio Itaya
June 18, 2025
Programming
0
380

Create a website using Spatial Web

visionOS 26 向けのウェブサイトを作ろう！
https://mercari.connpass.com/event/352787/

Avatar for Akio Itaya

Akio Itaya

June 18, 2025
Tweet

More Decks by Akio Itaya

See All by Akio Itaya
Bringing Spatial Web to E-Commerce
Avatar for Akio Itaya akkeylab
0
54
Learn CPU architecture with Assembly
Avatar for Akio Itaya akkeylab
1
1.9k
Porting a visionOS App to Android XR
Avatar for Akio Itaya akkeylab
0
1.1k
How to handle 3D content on Android XR
Avatar for Akio Itaya akkeylab
0
190
How to build visionOS apps using Windows
Avatar for Akio Itaya akkeylab
0
190
How to build visionOS apps using Persona
Avatar for Akio Itaya akkeylab
1
420
Summary - Introducing enterprise APls for visionOS
Avatar for Akio Itaya akkeylab
0
540
Apple Vision Pro trial session
Avatar for Akio Itaya akkeylab
0
360
How to support Privacy Manifest
Avatar for Akio Itaya akkeylab
0
450

Other Decks in Programming

See All in Programming
Codexに役割を持たせる 他のAIエージェントと組み合わせる実務Tips
Avatar for o8n o8n
1
720
CSC307 Lecture 15
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
220
AI時代でも変わらない技術コミュニティの力～10年続く“ゆるい”つながりが生み出す価値
Avatar for Takehata Naoto n_takehata
2
650
CSC307 Lecture 14
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
450
ご飯食べながらエージェントが開発できる。そう、Agentic Engineeringならね。
Avatar for yoko / Naoki Yokomachi yokomachi
1
280
RubyとGoでゼロから作る証券システム： 高信頼性が求められるシステムのコードの外側にある設計と運用のリアル
Avatar for free_world21 free_world21
0
210
株式会社 Sun terras カンパニーデック
Avatar for Sun terras.Inc sunterras
0
2k
Event Storming
Avatar for Henning Schwentner hschwentner
3
1.3k
今更考える「単一責任原則」 / Thinking about the Single Responsibility Principle
Avatar for philomagi tooppoo
3
1.4k
AIとペアプロして処理時間を97%削減した話 #pyconshizu
Avatar for Kashun Yoshida kashewnuts
1
210
AHC061解説
Avatar for Shun_PI shun_pi
0
330
ベクトル検索のフィルタを用いた機械学習モデルとの統合 / python-meetup-fukuoka-06-vector-attr
Avatar for monochromegane monochromegane
2
320

Featured

See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
280
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
140
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
130
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.8k
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
0
260
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.4k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
5.8k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.1k
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
130
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
210

Transcript

  1. AKKEY / AKIO ITAYA visionOS 26 ޲͚ͷ΢ΣϒαΠτΛ࡞Ζ͏ʂ Recap of WWDC25

    Mercari Spatial Web

  2. جૅฤ

  3. <body> <model src="bird.usdz"> <img src="bird.png"> </model> </body>

  4. <body> <model src="bird.usdz"> <img src="bird.png"> </model> </body> Apple͸ <model> λάͷ࢓༷Λ


    ඪ४ԽஂମʢW3CʣʹఏҊத

  5. https://immersive-web.github.io/model-element/

  6. <body> <model src="bird.usdz"> <img src="bird.png"> </model> </body> ඇରԠϒϥ΢βͰ
 දࣔ͢Δը૾

  7. <body> <model src=“bird.usdz” stagemode="orbit" > <img src="bird.png"> </model> </body> ࠨӈ΁ͷճస͕


    ՄೳʹͳΔ ·ͣ͸λοϓδΣενϟʔΛ௥Ճͯ͠ɺ
 ΠϕϯτΛݕ஌ͨ͠Β֯౓Λܭࢉͯ͠…
 ͱ͍࣮ͬͨ૷͕ෆཁʂ

  8. <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> ศརͳ൓໘ɺҰఆͷ੍໿͕͋Δ

  9. <body> <model src=“bird.usdz” stagemode="orbit" loop autoplay> <img src="bird.png"> </model> </body>

    Ξχϝʔγϣϯʹ΋ରԠ

  10. <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ʣ

  11. Ԡ༻ฤ

  12. <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> αϙʔτͷ༗ແΛ֬ೝ

  13. <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> ಡΈࠐΈεςʔλε ΋औಘՄೳ

  14. <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>

  15. ࣮ԋ

  16. github.com/AkkeyLab/spatial-web
 Skydancer

  17. WWDC25 What’s new for the spatial web https://developer.apple.com/videos/play/wwdc2025/237

  18. Thank you !!