👻

第6回 React+TypeScriptなWebアプリで、QRコードをARしてみた。(リリース編)

2024/02/12に公開

React

<- 第5回 React+TypeScriptなWebアプリで、QRコードをARしてみた。(完成編)
[第7回]React+TypeScriptなWebアプリで、QRコードをARしてみた。(スマホでデバッグ編) ->

Abstract

React+TypescriptのWebアプリで、ARを実装してみた。第6回。
端が切れるとか、トラッキングが弱すぎとかいろいろあるだろうけど、ひとまず完成した前回のWebアプリを公開する手順。
Github Pagesを使うんだけど、Githubって無償で公開ページを提供してくれてるのでそれを使う。便利な世の中になったもんだ。

結論

今回の成果物はココ↓

前提

React+Typescriptの開発環境は構築済 [環境構築]WindowsにVSCode+React+TypeScriptの開発環境を構築してみた。
前回プロジェクトから。ReactTs-QrAr005
Webカメラは準備しておく。
githubアカウントも作っておく。

手順

1.プロジェクト生成 -> VSCodeで開く

このテンプレートコードから始める。ReactTs-QrAr005

git cloneとか、フォルダリネームとか

$ D:
$ cd .\Products\React.js\            # ご自身の適当なフォルダに読み替えてね。
$ rd /q /s D:\Products\React.js\ReactTs-QrAr005
$ git clone https://github.com/aaaa1597/ReactTs-QrAr005.git
$ rd /q /s "ReactTs-QrAr005/.git"
$ ren ReactTs-QrAr005 ReactTs-QrAr006
$ cd ReactTs-QrAr006

準備

コマンドプロンプト

$ npm install

実行してみる

コマンドプロンプト

$ npm start

ここまでで、一旦動作するのを確認する。

手順

開発ソース側で。

gh-pagesをインストール

reactプロジェクトで。

$ npm install gh-pages

package.jsonを修正

package.json

{
+ "name": "ReactTs-QrAr006",
+ "homepage": "https://aaaa1597.github.io/ReactTs-QrAr006",
～略～
  "scripts": {
+   "deploy": "npm run build && gh-pages -d build -m \"Updates --skip-ci\"",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
～略～

package.jsonを修正

reactプロジェクトで。

$ npm run deploy

コミット完了まで待って、もちょっと待つ。

上記にアクセスする。

出来た!!
QRコードの上に3Dモデル描画が出来ている。
トラッキングが弱いけど。。。