Azure Static Web Apps を用いたWebAR実装

Transcript

1. Azure Static Web Apps を用いたWebAR実装
2. みゃおん 山口県の高専専攻科生 ハードウェアからXRまで幅広く触る エンジニア #バーチャルロボコン展示 #IwakenLab #SCL3期 @blackcatyuma
3. 背景と今回やるもの にー兄さんにお声がけ頂き、急遽参加！ にー兄さんが技術書典12に出展された「Vite + TypeScript + Babylon.jsでWebARをはじめる本」 をなぞりつつ、Azure Static Web Appsを紹介しつ つ、オリジナリティを加えられればなおヨシって感じ でやっていきます！
4. 全体の流れ
5. 全体の流れ 今回はスキップ
6. 詰まったところ紹介
7. yarn のインストール まず $ yarn create vite --template vanilla-ts でプロジェクトを作成しますが 私はその環境すら入ってなかったので インストールからはじめました。 node.jsはインストール済みだったので以 下を行いました。 # npm 経由でyarnをインストール npm install -g yarn # yarnのバージョンを確認 yarn -v # yarnの初期設定 yarn init
8. eslintのインストールエラー
9. eslintのインストールエラー --ignore-enginesオプションを付けて解決 参考：https://blog.terrier.dev/blog/2019/20190812221214-yarn-node-ignore-engine/
10. Azure Static Web Apps Azure Static Web Apps（以下 SWA）は、Azure が 提供する静的 Web サイトホスティングサービス GitHub と連携することにより指定したリポジトリ に GitHub Actions を自動的に組み込むため、 自分で YAML ファイルを触ることなくデプロイの 設 定ができるのはもちろん、あとからカスタマイ ズできるという利点がある
11. Azure Static Web Apps Azure Static Web Apps（以下 SWA）は、Azure が 提供する静的 Web サイトホスティングサービス GitHub と連携することにより指定したリポジトリ に GitHub Actions を自動的に組み込むため、 自分で YAML ファイルを触ることなくデプロイの 設 定ができるのはもちろん、あとからカスタマイ ズできるという利点がある
12. 動いたもの 豆腐出せた 次は何か3Dモデルを召喚したい
13. 動いたもの 豆腐出せた 次は何か3Dモデルを召喚したい
14. Blenderで作ってたアニメーション付きモデルを配 置 技術書典本のコードと先ほどのブログ記事に あったコードを見比べてコネコネすると右の動 画のようなWebアプリが完成 https://github.com/Myaon/babylon-glb-viewer GitHub上でPushするだけでどんどん反映・確認 していくことが出来る （ARとりあえず動きがあればそれっぽい）
15. まとめ WebXR色んな開発環境あるけど、これまではなかなか公開まで至れなかった ... Azure Static Web Appsで公開できるものは軽率に公開して色んな人に体験してもらおう！ ・技術書典本積まないで済んだ ・Web周りナンモワカランけど何か公開できた！
16. 参考文献 https://qiita.com/suisui654/items/1b89446e03991c7c2c3d https://qiita.com/NAKKA-K/items/2d884c4f216c4c04464f