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
55
みゃおんがXRを仕事にするまでの軌跡
myaon
0
82
Geospacial APIを使った聖地巡礼AR
myaon
0
140
AR釣りゲーム 活用してみませんか?
myaon
0
90
楽器の音階をPCのキーボード入力に置き換えるシステム
myaon
0
80
第二回VR講習
myaon
0
93
S.C.L HandTrackHackチーム 成果発表
myaon
0
90
ARロボコン展示から見るバーチャル活用
myaon
0
76
支援学校でVR体験会を開いた話
myaon
0
94
Other Decks in Technology
See All in Technology
AWSへのNIST SP800-171管理策 導入に向けての整備/20240930 Mitsutoshi Matsuo
shift_evolve
0
150
業務ヒアリングと知識の呪い
tamai_63
0
100
virtme-ng
ennael
PRO
0
310
分析者起点の企画を成功させた連携面の工夫
lycorptech_jp
PRO
1
220
Product Utilization of Large Language Models Starting Today
ymatsuwitter
3
640
スモールスタート、不都合な真実 〜 耳当たりの良い言葉に現場が振り回されないために/20240930-ssmjp-small-start
opelab
12
1.7k
PREEMPT_RT over the years
ennael
PRO
0
310
Efficient zero-copy networking using io_uring
ennael
PRO
0
270
たった一人で始めた音楽制作が気がついたら会社公認の部活動になっていた話〜組織の垣根を超えるコラボレーションを実現するには〜 / On-KAG-bu
piyonakajima
0
150
【shownet.conf_】トポロジ図の歩き方
shownet
PRO
0
360
Assisted reorganization of data structures
ennael
PRO
0
210
LINEヤフー新卒採用 コーディングテスト解説 実装問題編
lycorp_recruit_jp
1
12k
Featured
See All Featured
Web Components: a chance to create the future
zenorocha
310
42k
The Invisible Side of Design
smashingmag
297
50k
GitHub's CSS Performance
jonrohan
1030
450k
Docker and Python
trallard
40
3k
Building Your Own Lightsaber
phodgson
102
6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
42
6.5k
No one is an island. Learnings from fostering a developers community.
thoeni
19
2.9k
Large-scale JavaScript Application Architecture
addyosmani
509
110k
Clear Off the Table
cherdarchuk
91
320k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
KATA
mclloyd
27
13k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
230
17k
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