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
57
みゃおんがXRを仕事にするまでの軌跡
myaon
0
84
Geospacial APIを使った聖地巡礼AR
myaon
0
150
AR釣りゲーム 活用してみませんか?
myaon
0
91
楽器の音階をPCのキーボード入力に置き換えるシステム
myaon
0
84
第二回VR講習
myaon
0
93
S.C.L HandTrackHackチーム 成果発表
myaon
0
92
ARロボコン展示から見るバーチャル活用
myaon
0
76
支援学校でVR体験会を開いた話
myaon
0
97
Other Decks in Technology
See All in Technology
Vueで Webコンポーネントを作って Reactで使う / 20241030-cloudsign-vuefes_after_night
bengo4com
4
2.5k
MAMを軸とした動画ハンドリングにおけるAI活用前提の整備と次世代ビジョン / abema-ai-mam
cyberagentdevelopers
PRO
1
110
Datachain会社紹介資料(2024年11月) / Company Deck
datachain
3
16k
物価高なラスベガスでの過ごし方
zakky
0
380
とあるユーザー企業におけるリスクベースで考えるセキュリティ業務のお話し
4su_para
3
320
独自ツール開発でスタジオ撮影をDX!「VLS(Virtual LED Studio)」 / dx-studio-vls
cyberagentdevelopers
PRO
1
180
分布で見る効果検証入門 / ai-distributional-effect
cyberagentdevelopers
PRO
4
700
コンテンツを支える 若手ゲームクリエイターの アートディレクションの事例紹介 / cagamefi-game
cyberagentdevelopers
PRO
1
130
Apple/Google/Amazonの決済システムの違いを踏まえた定期購読課金システムの構築 / abema-billing-system
cyberagentdevelopers
PRO
1
220
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
49k
ガバメントクラウド単独利用方式におけるIaC活用
techniczna
3
270
AWS re:Inventを徹底的に楽しむためのTips / Tips for thoroughly enjoying AWS re:Invent
yuj1osm
1
570
Featured
See All Featured
Six Lessons from altMBA
skipperchong
26
3.5k
The Cost Of JavaScript in 2023
addyosmani
45
6.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
A Modern Web Designer's Workflow
chriscoyier
692
190k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
Automating Front-end Workflow
addyosmani
1365
200k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
A Tale of Four Properties
chriscoyier
156
23k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Music & Morning Musume
bryan
46
6.1k
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