スマートフォンで魚釣りして夢が釣れるwebアプリ

#フィーーーーーーーーーッシュ
![images.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/7190dea4-9ead-9efa-bdab-dbde11c7f5e2.jpeg)
年齢がバレてしまいますね。

スマホ一つで直感操作。楽しく魚を釣りましょう。

**未完です。完成記事は以下のアドベントカレンダーに投稿します。**


https://qiita.com/advent-calendar/2021/protoout


#操作方法


スマートフォンから以下のQRコードを読み取ってください。
**加速度センサーが必要なので、ブラウザでは動作しません。**
<img border="0" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/0dc9dbdf-6dc6-b209-5ad0-dbd9870f20f1.png" width=30% alt="72953bb0c3e1b38919af3132a13238a3ffe5170b.png">

<iframe width="560" height="315" src="https://www.youtube.com/embed/8w98AaUO5dM" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

スマートフォンを振り上げる動作を検知して、y方向の加速度を緯度、z方向の加速度を経度として、スプレッドシートに記録していきます。
開発中に撮影したものなので、画面上にはフィッシュと出力されていますが、ここに緯度・経度として設定する数値が出力されるイメージです。

![e.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/bd263ab7-568d-8ea6-59ff-c56907cfecf8.jpeg)

その後シートに記録された経緯と東京の経緯差から距離を測定、LINE notifyに返してくれます。
まるで旅をしているような気分になれる、夢を釣るアプリです。

<img border="0" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/af9ca11d-2f32-543a-70f2-cf691b38cb98.png" width=50% alt="IMG_2718.PNG">
スマホにいきなり６件も通知来て何かと思ったら、**” 夢 ”**でした。

#開発環境、使用アプリ・ライブラリ
>[CodePen](https://codepen.io/)
>[integromat](https://www.integromat.com/)
>[Netlify](https://app.netlify.com/)
>[Stein-js-client](https://github.com/SteinHQ/JS-Client)
>[Vue.js](https://github.com/vuejs/vue)

#作り方詳細
**CodePen部分**
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="VwMLYGE" data-user="watanabe-tsubasa" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/watanabe-tsubasa/pen/VwMLYGE">
  釣り</a> by watanabe-tsubasa (<a href="https://codepen.io/watanabe-tsubasa">@watanabe-tsubasa</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

27行目から32行目で加速度の最高値を記録し、加速度がyかつz方向で15m/s^2を記録すると、スプレッドシート上にその時のy,z方向の加速度が、緯度・経度として出力されます。

動かしてみるとわかりますが、加速度変化はdevicemotionで常時変化を観測しております。
出力後、再度最高値を0に戻す処理をしてプログラムを継続するので、勢いよく振り抜くと、１振りで複数回スプレッドシート上に出力されます。
加速度の閾値（今回は15m/s^2）を変更することで、振り抜く速度に応じた出力個数を調整可能です。

**複数回転記されれば、複数個所の距離が返ってくるので、世界中を旅した気分が味わえます。**


:::note
Vue.js, steinを使用しているのでCodePenにライブラリを埋め込んでください。
:::

<details><summary>詳細はこちら展開ください</summary><div>

1. 編集画面上部 Settingsを開く
1. JS Add External Scripts/Pensに以下のURLを入力
    1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js //Vue.js
    1. https://unpkg.com/stein-js-client //stein-js-client

<img border="0" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/93fb999c-4e1a-3ba4-ee9b-f83634ab3166.png" width=50% alt="スクリーンショット 2021-12-02 5.38.08.png">
</div></details>

:::note warn
iOSで加速度センサーを有効にするためにはデプロイが必要です。今回はNetlifyを使用しています。
:::
<details><summary>詳細はこちら展開ください</summary><div>

![スクリーンショット 2021-12-02 5.53.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/5db7640c-4c8d-bff0-7f0a-79e4a1123673.png)
Export .zipより圧縮ファイルをダウンロードし解凍
解凍されたファイルのうちdistをフォルダごとNetlifyのサイトにドラッグ＆ドロップ
![スクリーンショット 2021-12-02 5.55.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/4148c0bb-5d69-e4f3-b8a1-80b8f1c063f1.png)

黄色の中にドロップ
![スクリーンショット 2021-12-02 5.57.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/284f3328-7be6-eb0d-5f4a-6dde87405733.png)

URLが出力されるので、デプロイされています。
</div></details>

**integromat部分**
スプレッドシートにはあらかじめA1にlatitude,B1にlongitude を記載しておきます。

GPS Toolsはoriginに東京、destinationに取得した経緯を記載しています。
<img border="0" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/2f6bcd50-c762-6449-ac6a-81b3aa16d734.jpeg" width=50% alt="d.jpg">

最後に計算した距離が最大15分後にLINEに帰ってきます。
但し、QRリンク先のアプリで釣りをしても、残念ながら通知先は私のスマートフォンです。
誰かが釣りをしているんだな、とうれしくなりますので、ぜひ実施していただけるとありがたいです。
釣果については、15分後に聞いてください。

**追記**
想定の100倍くらい通知くるので、ある程度溜まったらTwitterに投稿するようにします。
**追記2**
通知は1時間ごとにします。一日の最後に釣果を報告させていただきます。

https://twitter.com/shuyin02

皆さま、ありがとうございます。

#今後の改善点
- フィーーーッシュと叫んで、釣りをスタートさせる
- スプレッドシートに、一定数のログがたまったら消去する機能を、GASで付随する。