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
Azure Static Web Apps を用いたWebAR実装
Search
BlackCat
March 19, 2022
Technology
0
220
Azure Static Web Apps を用いたWebAR実装
BlackCat
March 19, 2022
Tweet
Share
More Decks by BlackCat
See All by BlackCat
スキャンソンをふり返ってみる話
myaon
0
91
みゃおんがXRを仕事にするまでの軌跡
myaon
0
110
Geospacial APIを使った聖地巡礼AR
myaon
0
200
AR釣りゲーム 活用してみませんか?
myaon
0
110
楽器の音階をPCのキーボード入力に置き換えるシステム
myaon
0
120
第二回VR講習
myaon
0
120
S.C.L HandTrackHackチーム 成果発表
myaon
0
140
ARロボコン展示から見るバーチャル活用
myaon
0
110
支援学校でVR体験会を開いた話
myaon
0
120
Other Decks in Technology
See All in Technology
[OCI Skill Mapping] AWSユーザーのためのOCI(2025年8月20日開催)
oracle4engineer
PRO
2
150
Android Studio の 新しいAI機能を試してみよう / Try out the new AI features in Android Studio
yanzm
0
270
トヨタ生産方式(TPS)入門
recruitengineers
PRO
3
240
ABEMAにおける 生成AI活用の現在地 / The Current Status of Generative AI at ABEMA
dekatotoro
0
660
microCMS 最新リリース情報(microCMS Meetup 2025)
microcms
0
110
生成AI利用プログラミング:誰でもプログラムが書けると 世の中どうなる?/opencampus202508
okana2ki
0
190
TypeScript入門
recruitengineers
PRO
19
5.9k
Postman MCP 関連機能アップデート / Postman MCP feature updates
yokawasa
0
150
人と組織に偏重したEMへのアンチテーゼ──なぜ、EMに設計力が必要なのか/An antithesis to the overemphasis of people and organizations in EM
dskst
6
620
「守る」から「進化させる」セキュリティへ ~AWS re:Inforce 2025参加報告~ / AWS re:Inforce 2025 Participation Report
yuj1osm
1
130
あなたの知らない OneDrive
murachiakira
0
240
自社製CMSからmicroCMSへのリプレースがプロダクトグロースを加速させた話
nextbeatdev
0
140
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
431
65k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
Facilitating Awesome Meetings
lara
55
6.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
The Cult of Friendly URLs
andyhume
79
6.5k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
BBQ
matthewcrist
89
9.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Transcript
Azure Static Web Apps を用いたWebAR実装
みゃおん 山口県の高専専攻科生 ハードウェアからXRまで幅広く触る エンジニア #バーチャルロボコン展示 #IwakenLab #SCL3期 @blackcatyuma
背景と今回やるもの にー兄さんにお声がけ頂き、急遽参加! にー兄さんが技術書典12に出展された「Vite + TypeScript + Babylon.jsでWebARをはじめる本」 をなぞりつつ、Azure Static Web
Appsを紹介しつ つ、オリジナリティを加えられればなおヨシって感じ でやっていきます!
全体の流れ
全体の流れ 今回はスキップ
詰まったところ紹介
yarn のインストール まず $ yarn create vite --template vanilla-ts でプロジェクトを作成しますが
私はその環境すら入ってなかったので インストールからはじめました。 node.jsはインストール済みだったので以 下を行いました。 # npm 経由でyarnをインストール npm install -g yarn # yarnのバージョンを確認 yarn -v # yarnの初期設定 yarn init
eslintのインストールエラー
eslintのインストールエラー --ignore-enginesオプションを付けて解決 参考:https://blog.terrier.dev/blog/2019/20190812221214-yarn-node-ignore-engine/
Azure Static Web Apps Azure Static Web Apps(以下 SWA)は、Azure が
提供する静的 Web サイトホスティングサービス GitHub と連携することにより指定したリポジトリ に GitHub Actions を自動的に組み込むため、 自分で YAML ファイルを触ることなくデプロイの 設 定ができるのはもちろん、あとからカスタマイ ズできるという利点がある
Azure Static Web Apps Azure Static Web Apps(以下 SWA)は、Azure が
提供する静的 Web サイトホスティングサービス GitHub と連携することにより指定したリポジトリ に GitHub Actions を自動的に組み込むため、 自分で YAML ファイルを触ることなくデプロイの 設 定ができるのはもちろん、あとからカスタマイ ズできるという利点がある
動いたもの 豆腐出せた 次は何か3Dモデルを召喚したい
動いたもの 豆腐出せた 次は何か3Dモデルを召喚したい
Blenderで作ってたアニメーション付きモデルを配 置 技術書典本のコードと先ほどのブログ記事に あったコードを見比べてコネコネすると右の動 画のようなWebアプリが完成 https://github.com/Myaon/babylon-glb-viewer GitHub上でPushするだけでどんどん反映・確認 していくことが出来る (ARとりあえず動きがあればそれっぽい)
まとめ WebXR色んな開発環境あるけど、これまではなかなか公開まで至れなかった ... Azure Static Web Appsで公開できるものは軽率に公開して色んな人に体験してもらおう! ・技術書典本積まないで済んだ ・Web周りナンモワカランけど何か公開できた!
参考文献 https://qiita.com/suisui654/items/1b89446e03991c7c2c3d https://qiita.com/NAKKA-K/items/2d884c4f216c4c04464f