素振りの練習を充実させませんか？？VRで試合をイメージした練習術！

##こんな経験ありませんか？？
<font color="RED">**『試合で打てない！！』『大事な場面で打って、ヒーローになりたい！！』**</font>ただ打撃というものは、奥が深く、中々上達しないですよね、、、汗
プロの打撃フォームを参考にしたから打てる訳でもなく、監督から教わった事を真面目に聞いて、取り入れたからといって打てる訳でもありません。
成功したメジャーリーガーは<font color="blue">**『色々な人の打撃フォームを教わる事も重要だが、最終的には、自分の身体にあった、最適なスイングを見つけ出さないと上達する事が出来ないし、無理なフォームにすると怪我する！』**</font>
有名なプロ野球選手は<font color="blue">**『バットを上から出して、たたけばヒットが出る時代は、終わった！日々の状態を確認しながら、スイングを変えた方がいい』**</font>など、時代の変化とともに野球の考え方も大きく変わってきているという事ですね！！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793863/9a8bb93e-1061-9d81-6a89-262d68b8a3b8.png" width=60%>
##打撃が向上せずに悩んだ日々、、
<font color="black">**『じゃあどのような練習をすればいいのだろう』**</font>と思う人も多いと思います！
これまで自分も17年間野球をプレーしてきましたが、『守備』『走塁』は、全体練習で量を増やせば、わりかし上手くなる傾向にありました。
しかし、『打撃』だけはいかにコツを掴むか、自分なりのスイングを見つけ出す事が出来るかという事が非常に重要であると感じていました。
コツを掴む為に自分は、試合形式の全体練習での打撃練習やマシンを使った打ち込みをしてきましたが、中々結果に結び付きませんでした。
<font color="red">**『このままだとまずい』**</font>と思い、自宅で素振りの練習を毎日するようになりました。
ただそれでも結果が出ずに悩んでいました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793863/47f78de9-f774-3f9a-e4e4-5c935a542f43.png" width=60%>

##野球教室をきっかけに打撃向上！！！コツを掴んだ！！
そんなある日、プロ野球選手が近くの球場に来て、野球を教えてくれる機会がありました。
自分の打撃フォームを見て、プロ野球選手が一言<font color="red">**『打撃フォームを変えた方がいい』『どんな練習しているの？』**</font>と言われました。
<font color="blue">**『打撃マシンで打ち込みしてます！』『自主練習で素振りしてます！』**</font>と言いましたが、<font color="red">**『もっと考えて練習した方がいい』『量より質にこだわった方がいいよ！』**</font>と言われたのを今でも鮮明に覚えています！
そこから、自宅での素振り練習で、試合や投手をイメージして素振り練習をするようになりました。
量より質にこだわり結果に結びつくようになりました！！

##そこで誰でも投手をイメージして素振りが出来るトレーニングマシンを開発したい！
野球を始めた子に、『投手をイメージして素振りをしなさい』と言っても中々出来ないのが現状ですよね？
頭の中で長時間投手をイメージしながら、素振りをするのは、限度があるし、長続きしない。
そういう悩みを抱えている人は、多いだろうと思い、<font color="blue">**今回VRと連動させて打撃トレーニングマシンを開発する事にしました。**</font>
<font color="black">**↓VRイメージこんな感じ！！**</font>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793863/8a709490-0b95-37ce-2f6f-1cfbb6b3ec83.png" width=50%>
<font color="black">**↓VR映像こんな感じ！！**</font>
<iframe width="500" height="500" src="https://www.youtube.com/embed/rvHd6cKvuZk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


##開発中『打撃』『守備』『走塁』
VSCodeを活用し、『打撃』『守備』『走塁』ボタンを押すと、映像が流れる仕組みを開発！
今後は、unity×Oculus Quest 2を連携させ、映像を取り込んで、VR上で投手をイメージして練習できる環境を構築していきたいと思っております。
<iframe width="400" height="400" src="https://www.youtube.com/embed/7EQ8M2a83VM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

##各コード(VSCode)
<details><summary>count-down.cssコード　<font color="Red">**(クリックで表示)**</font></summary><div><br><br>

```js
body {
  display: flex;
  text-align: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}

.main {
  width: 100%;
  height: 100%;
}

h1 {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 200px;
}
```
</div></details>

<details><summary>index.cssコード　<font color="Red">**(クリックで表示)**</font></summary><div><br><br>

```js
body {
  width: 100%;
  height: 100%;
  background-image:url(../images/22031893_m.jpg);
  background-size: cover;
  background-attachment:fixed;
  margin: 0;
  padding: 0;
  transition: opacity 2s;
}

h1 {
  font-family: 'Kaushan Script', cursive;
  font-size: 120px;
  color:crimson;
  opacity: 0.8;
}

.wrapper {
  display: flex;
  justify-content:center;
  align-items: center;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
}

.buttons {
  text-align: center;
  display: flex;
  justify-content:center;
  align-items: center;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
}

.button {
  font-family: 'Kaushan Script', cursive;
  font-size: 100px;
  cursor: pointer;
  color:blue;
  background-color: white;
  opacity: 0.8;
  border-radius: 20px;
}

.start1 {
  margin-left: 600px;
}

.start3 {
  margin-right: 600px;
}

```
</div></details>

<details><summary>practice.cssコード　<font color="Red">**(クリックで表示)**</font></summary><div><br><br>

```js
.video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.video iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

```
</div></details>

<details><summary>count-down.jsコード　<font color="Red">**(クリックで表示)**</font></summary><div><br><br>

```js
function count() {
  var count = 3;
  var countDown = setInterval(function() {
    count--;
    document.getElementById('count-num').innerHTML = count;
    if(count <= 0) {
      goToMovie();
      clearInterval(countDown);
    }
  },1000);
}

function goToMovie() {
  var num = location.search.substring(1);
  switch (num) {
    case 'hit':
      location.href = './hit.html';
      break;
    case 'defense':
      location.href = './defense.html';
      break;
    case 'run':
      location.href = './run.html';
      break;
    default:
      location.href = './index.html';
  }
}

window.addEventListener('load', count);

```
</div></details>

##制作過程！
<font color="black">**①unityをインストールし、環境構築中！**</font>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793863/b5e57205-4ab3-2ab1-0224-27e4a3c3d9ca.png" width=40%>

<font color="black">**②Oculus Quest2 初期設定＋アカウント設定＋360度映像使ってみる！**</font>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793863/2867e625-6517-04b5-d2eb-aef670c61e67.png" width=40%>
<font color="black">**③『打撃』映像を撮影！(バッティングセンターにて！)**</font>
<iframe width="400" height="400" src="https://www.youtube.com/embed/J8_QkiiyOyE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<font color="black">**④unity＋Oculus Quest2を連携(こちらのメモも参考にしながら制作中！)**</font>

https://framesynthesis.jp/tech/unity/oculusquest/

<font color="black">**⑤CFページ限定公開中ですが、アクションを開始！**</font>

https://note.com/dsvvpxgc/n/nbc70498aa833

<font color="black">**まとめ**</font>
まだまだ課題が山積みですが、良り多くの人へプロダクトを開発し発信していきたいと思いますので、
『企画』『開発』を更にブラッシュアップして、世の中に発信していきたいと思います！
unity＋Oculus Quest2を連携させることが凄く難しいなーーーー！！汗
頑張るぞ！！

https://camp-fire.jp/projects/529459/preview?token=45tsjeej