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
200
Azure Static Web Apps を用いたWebAR実装
BlackCat
March 19, 2022
Tweet
Share
More Decks by BlackCat
See All by BlackCat
スキャンソンをふり返ってみる話
myaon
0
64
みゃおんがXRを仕事にするまでの軌跡
myaon
0
93
Geospacial APIを使った聖地巡礼AR
myaon
0
170
AR釣りゲーム 活用してみませんか?
myaon
0
100
楽器の音階をPCのキーボード入力に置き換えるシステム
myaon
0
95
第二回VR講習
myaon
0
99
S.C.L HandTrackHackチーム 成果発表
myaon
0
110
ARロボコン展示から見るバーチャル活用
myaon
0
84
支援学校でVR体験会を開いた話
myaon
0
100
Other Decks in Technology
See All in Technology
Moved to https://speakerdeck.com/toshihue/presales-engineer-career-bridging-tech-biz-ja
toshihue
2
740
2.5Dモデルのすべて
yu4u
2
870
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
590
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
370
現場の種を事業の芽にする - エンジニア主導のイノベーションを事業戦略に装着する方法 -
kzkmaeda
2
2.1k
株式会社EventHub・エンジニア採用資料
eventhub
0
4.3k
開発スピードは上がっている…品質はどうする? スピードと品質を両立させるためのプロダクト開発の進め方とは #DevSumi #DevSumiB / Agile And Quality
nihonbuson
2
3k
プロダクトエンジニア構想を立ち上げ、プロダクト志向な組織への成長を続けている話 / grow into a product-oriented organization
hiro_torii
1
210
Data-centric AI入門第6章:Data-centric AIの実践例
x_ttyszk
1
410
速くて安いWebサイトを作る
nishiharatsubasa
10
13k
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
siropaca
7
1.8k
地方拠点で エンジニアリングマネージャーってできるの? 〜地方という制約を楽しむオーナーシップとコミュニティ作り〜
1coin
1
230
Featured
See All Featured
How to Ace a Technical Interview
jacobian
276
23k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Unsuck your backbone
ammeep
669
57k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Building Adaptive Systems
keathley
40
2.4k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Being A Developer After 40
akosma
89
590k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Facilitating Awesome Meetings
lara
52
6.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