使い方

①初期画面です。青色の「START」ボタンを押してください。
②ダイアログの「OK」を押すとボタンが切り替わります。
③上下左右の青色のボタンのいずれかを押して、ﾗﾝﾄﾞﾙﾄ環の切れ目がどの向きにあるのか選んでください。
④最後まで正解したら試験が終了します。ダイアログが出ますので「OK」を押して①に戻ります。

サイトはこちらです。
視力検査

ここからは「他」にあたります

はじめに

超簡単な視力検査を作りました。「使い方がわかりにくいな～」と思ったので、「使い方」を書いてます。

視力検査を作ろうとしたわけ

「私は目が悪いので、簡単に視力検査ができたらな」と思ったのがきっかけです。
「3DCGとwebを組み合わせてみよう」という試みがあります。3Dモデルを使っているのはﾗﾝﾄﾞﾙﾄ環の部分になります。
ﾗﾝﾄﾞﾙﾄ環とは「Cの形をしたマーク」のことです。

使用したもの

ソフト	プログラミング言語	ライブラリ	プラットフォーム	パッケージマネージャ
Maya	Typescript	Three.js	Node.js	yarn
Blender	-	React	-	-
VScode	-	Vite	-	-

苦労したこと

1. ﾗﾝﾄﾞﾙﾄ環の描画サイズの決定

1. 視力検査でよく見る「C」から調べてみる

NIDEKさんのウェブサイトを参考にしました。

NIDEKさんのウェブサイト
ﾗﾝﾄﾞﾙﾄ環とは
 視角と視力の関係

ふむふむへーほー（なるほど）。

視力1.0の時、5ｍの距離から測ったときのﾗﾝﾄﾞﾙﾄ環の大きさは7.272mmとなる。ﾗﾝﾄﾞﾙﾄ環の切れ目の大きさは1.454mmになる。
視角と視力の関係をグラフにすると、視力は隙間の大きさに反比例する。

ということがわかりました。

スマホやiphoneで測る場合で考えると。

	画面からの距離	ﾗﾝﾄﾞﾙﾄ環の大きさ	ﾗﾝﾄﾞﾙﾄ環の切れ目の大きさ
基本	5m	7.272mm	1.454mm
１０で割る	50cm	0.7272mm	0.1454mm
ピクセルへ変換	1889.764px	2.748px	0.549px
使用したピクセル	無視	2.75px	0.55px

となります。
はじめは「画面からの距離」を30cmでやるつもりでしたが、視力1.0の時のﾗﾝﾄﾞﾙﾄ環が、潰れて見えなかったので断念しました。

2. 各視力値の時のﾗﾝﾄﾞﾙﾄ環の大きさを求める

次の動画を参考にしました。

数学校チャンネルさんの動画
ﾗﾝﾄﾞﾙﾄ環と関数について

y=1.5/x を利用して
x : 視力
y : ﾗﾝﾄﾞﾙﾄ環の切り目の大きさ(単位mm)
計px : mmをpxに変換した値
使px : 実際に使用した幅のpx
使px/10 : 実際に使用したpx
ﾗﾝﾄﾞﾙﾄ環 : 使px/10に5を掛けた値

x	0.05	0.07	0.1	0.3	0.5	0.6	0.7	0.8	0.9	1.0
y	30	21.43	15	5	3	2.5	2.14	1.875	1.67	1.5
計px	113	80	56	18.90	11.34	9.45	8.09	7.09	6.31	5.67
使px	112	80	56	19	11	9	8	7	6	5
使px/10	11.2	8	5.6	1.9	1.1	0.9	0.8	0.7	0.6	0.5
ﾗﾝﾄﾞﾙﾄ環	56	40	28	9.5	5.5	4.5	4.0	3.5	3.0	2.5

3. 大体値が一致しているのでヨシ！

1.と2.から、視力1.0の時の値は 2.75px ≒ 2.5px
大体あってます。
実際にウェブアプリケーションの方で視力1.0を表示しているとき、定規で測ってみてください。大体0.7mmになっていると思います。

2. リポジトリの作成ミス

私が知っているリポジトリの作成方法は二つあります。
PowerShell上でリポジトリを作る方法と、github上でリポジトリを作る方法の二つです。
私は両方実行してしまいました。
どういうことかというと、先ず基礎となるフォルダを作成します。次に、git-hub上でリポジトリを作成。その後、PowerShell上でリポジトリを作成していました。するとGit Graphのブランチが二つになってしまいます。

github? Git Graph? ブランチ? リポジトリ?と思った方はこちらを参考にしてください。
github?
Git Graph?
リポジトリ?
ブランチ?

・何が困ったのか？

基礎のフォルダの情報をすべて消してしまったことです。
①基礎のフォルダの情報を持ったブランチ、②何も情報がないブランチとして。①から②へブランチを変更してしまい、手持ちのPCのフォルダ情報がすべて消えてしまいました。

・どう解決したのか？

デフォルトのブランチを変更して、②を削除しました。
幸い、ブランチは残っていたので、リポジトリの設定へ移動。デフォルトブランチを①へ変更した後、②を削除することで解決しました。

3. Material UI Boxのエラー

Material UI Boxとは？

typescriptで次のようにBoxを使用するとエラーが出ます。
子タグ内

const function_1 = () => {
	//何らかの処理
    return (
        <div>
            <Box xs={{ pt:30 }}>//この行にエラー
    			//略
            </Box>
        </div>
    )
}

export const function_2 = () => {
	//何らかの処理
    return (
        <div>
            <Box xs={{ pt:20 }}>//この行にエラー
    			//略
            </Box>
        </div>
    )
}

export default function_1

親タグ内で

function App() {
  return (
    <div className='任意名'>
      <Function_1 />//頭文字を大文字にしないとエラーが出ます    仕様な模様
      <Function_2 />
    </div>
  )
}

export default App

・エラー内容

子タグで、両方のBox部分に「Expression produces a union type that is too complex to represent. ts(2590)」
翻訳すると「エクスプレッションは、表現するには複雑すぎる共用体型を生成します。」だそうです。
「複雑すぎだよ！」ということですね。

・試したこと

1. 次のウェブページを参考にした処理

https://zenn.dev/nyatinte/articles/1777eb483319d2

私はVscodeを使用してます。
Vscodeでやる処理は、
①ショートカット「Ctrl + Shift + P」を入力
②「TypeScript: Select TypeScript Version...」→「Enter」の順に入力
③「Use workspace version」を選択
エラーの解決はせず。

2. ptの指定方法を変えてみた

二つのパターンで下記のように変更。

const function_1 = () => {
	//何らかの処理
    const TopSpace = { pt:30 }
    return (
        <div>
            <Box xs={TopSpace}>
    			//略
----------------------------------------------
const function_1 = () => {
	//何らかの処理
    return (
        <div>
            <Box pt={30}>
    			//略

エラーの解決はせず。
実際には、function_1はエラーが消えました。しかし、function_2でエラーは残ったままです。

3. Material-UI boxの公式ページをよく見ると…

Overriding MUI components
を発見！
以下のように、function_1とfunction_2のBoxを変更

<Box component="span" pt={3}>
    //略
</Box>

エラーが消えました。
エラーをちゃんと見る。
公式を見る。
この二つが重要ですね。

最後に

github上に公開しています。
利用してみたい方はこちらのgithubページへアクセスしてください。
https://github.com/inxole/Vision_test.git