使い方
①初期画面です。青色の「START」ボタンを押してください。
②ダイアログの「OK」を押すとボタンが切り替わります。
③上下左右の青色のボタンのいずれかを押して、ﾗﾝﾄﾞﾙﾄ環の切れ目がどの向きにあるのか選んでください。
④最後まで正解したら試験が終了します。ダイアログが出ますので「OK」を押して①に戻ります。
サイトはこちらです。
視力検査
ここからは「他」にあたります
はじめに
超簡単な視力検査を作りました。「使い方がわかりにくいな～」と思ったので、「使い方」を書いてます。
視力検査を作ろうとしたわけ
「私は目が悪いので、簡単に視力検査ができたらな」と思ったのがきっかけです。
「3DCGとwebを組み合わせてみよう」という試みがあります。3Dモデルを使っているのはﾗﾝﾄﾞﾙﾄ環の部分になります。
ﾗﾝﾄﾞﾙﾄ環とは「Cの形をしたマーク」のことです。
使用したもの
| ソフト | プログラミング言語 | ライブラリ | プラットフォーム | パッケージマネージャ |
|---|---|---|---|---|
| Maya | Typescript | Three.js | Node.js | yarn |
| Blender | - | React | - | - |
| VScode | - | Vite | - | - |
苦労したこと
1. ﾗﾝﾄﾞﾙﾄ環の描画サイズの決定
1. 視力検査でよく見る「C」から調べてみる
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のエラー
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. 次のウェブページを参考にした処理
私は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