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
190
Azure Static Web Apps を用いたWebAR実装
BlackCat
March 19, 2022
Tweet
Share
More Decks by BlackCat
See All by BlackCat
スキャンソンをふり返ってみる話
myaon
0
61
みゃおんがXRを仕事にするまでの軌跡
myaon
0
90
Geospacial APIを使った聖地巡礼AR
myaon
0
160
AR釣りゲーム 活用してみませんか?
myaon
0
98
楽器の音階をPCのキーボード入力に置き換えるシステム
myaon
0
91
第二回VR講習
myaon
0
95
S.C.L HandTrackHackチーム 成果発表
myaon
0
110
ARロボコン展示から見るバーチャル活用
myaon
0
81
支援学校でVR体験会を開いた話
myaon
0
99
Other Decks in Technology
See All in Technology
新しいスケーリング則と学習理論
taiji_suzuki
9
3.8k
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
1
16k
The future we create with our own MVV
matsukurou
0
1.8k
実践! ソフトウェアエンジニアリングの価値の計測 ── Effort、Output、Outcome、Impact
nomuson
0
1.8k
LangGraphとFlaskを用いた社内資料検索ボットの実装②Retriever構築編
aoikumadaki
0
100
20250116_JAWS_Osaka
takuyay0ne
2
160
comilioとCloudflare、そして未来へと向けて
oliver_diary
5
400
WantedlyでのKotlin Multiplatformの導入と課題 / Kotlin Multiplatform Implementation and Challenges at Wantedly
kubode
0
200
Evolving Architecture
rainerhahnekamp
3
240
Cloudflareで実現する AIエージェント ワークフロー基盤
kmd09
0
250
AWSの生成AIサービス Amazon Bedrock入門!(2025年1月版)
minorun365
PRO
7
420
商品レコメンドでのexplicit negative feedbackの活用
alpicola
1
210
Featured
See All Featured
Gamification - CAS2011
davidbonilla
80
5.1k
Building Adaptive Systems
keathley
38
2.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
KATA
mclloyd
29
14k
Side Projects
sachag
452
42k
Site-Speed That Sticks
csswizardry
2
240
Producing Creativity
orderedlist
PRO
343
39k
BBQ
matthewcrist
85
9.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Code Reviewing Like a Champion
maltzj
521
39k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
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