rennurdev / front_sandbox

petampのフロントエンド用sandbox

Getting Started with Create React App

This project was bootstrapped with Create React App.

概要

petampのフロントエンド向けsand_box お好きにいじってもらって！

ローカルでの流れ

1. cp sample.env .env
2. MAPBOX_API_KEY を @hatake511522 に聞いてください
3. .env に API_KEY を貼り付けます
4. npm install
5. npm start

Rails との接続方法

https://github.com/hatake511522/petamp_apiをローカルで起動してください。 詳しくは↑のREADME参照

作業手順

• 作業の開始

1. masterブランチに移動 git checkout master
2. gitに上がっている最新版のアプリケーションをダウンロード git pull origin master
3. 適当な名前をつけてブランチを新規作成、作業開始。(すべて小文字、単語と単語の間はアンダースコアで。：スネークケースと言うよ！) git checkout -b tekitou_na_namae

• 作業の終了、githubへのアップロード

1. add : git add -A
2. commit : git commit -m "○○を追加"
3. push : git push origin 作業してたブランチ名

front_sandbox's Issues

react-map-gl の導入

フラッシュメッセージの実装

いろいろエラーをコンソールに出してるけど、ユーザに通知しておいた方がいいものもある。たとえば「軌跡の保存に失敗した」など。

ログイン画面の削除

背景

• web版ミニマム化のためログイン画面が不要となった

変更点

• ログイン画面への遷移を削除
• 実装予定だったログイン処理部分のコメントアウトも削除

座標が上手く取得できなかった場合のデータ除去

[lng, lat] = [NaN, NaN]になったデータが保存されることを未然に防ぎたい。配列へのpushの前にこのような場合を検出したいが、どの引数をみればそれがわかるのかについては調査が必要。方法として考えられるのは、
まずは愚直に[lng, lat] === [NaN, NaN]を検出して、そのときのpositionすべてをconsoleに出力しておく。どこかにこれを検出できそうなプロパティがあればそれを検出用の対象データに採用する。
あるいは普通にしらべて出てきたら教えてほしい！

バックエンドに関連したデバッグがプルリクエストの時点で検証できない

「保存が正常に行われない」といったエラーに対するデバッグをしたとき、その検証ってどうしたらいいんだろう？
現状マージされてない状態でのvercelのpreviewだとDBにアクセスできないよね、、

Refactoring 関数型コンポーネントへの変換

現状

• Mapbox.js の変換に手こずり
  • 見た目の崩れ
  • mapの管理場所がめんどい
  • isStarted による useEffect のだるさ

今後の変換構想

• まず関数化だけを意識して動作確認
• redux を用いた state 管理
• mapbox css を適用した際のデザイン崩れを解決
• Record 部分を recordTrigger に移行する？

ごちゅういmodalの追加

under constructionなモーダルウインドウが欲しい

最近いろんな人に見せてるんだけど、その都度「あ、ログイン機能は出来てないからはじめるボタンを押すだけで良くて、、、」とか、「記録するときはここのみどりのオバケを、、、」って説明するのめんどいので欲しい

あと、モーダルで出す場合でも「すいません！まだここできてません！」って宣言しながらもいろんな人に使ってもらってると、早くやんなきゃなって気持ちになってくるからモチベーション維持にも良いと思ってる
ここのごちゅういは俺けっこう遊び心持たせたいんだよな

https://material-ui.com/components/modal/

都道府県名取得の際に地名のみを出力するように修正

現状一部の都道府県ではmapboxのregionを取得した際"Tokyo Prefecture"のように行政区分も同時に出力されてしまう. これを除去したい.
方法としては, " "(半角スペース)で文字列を分割して配列に変換, 0番目の要素のみを戻り値に指定.

仮想ログイン画面の消去

ローディング画面の実装

背景

現状、mapの読み込みや位置情報が取得できた後のstateの更新、軌跡の表示などにとても時間がかかっており、全てのコンテンツが用意できていない状態をユーザに返している。全てのデータが準備し終わった段階で操作ができるようにしたいので、ローディング画面が欲しい。

STARTボタンを押した際に現在位置付近にジャンプ

こちらが参考になる
https://docs.mapbox.com/mapbox-gl-js/example/flyto/

MapBoxの軌跡が再描画される際にアニメーションがリセットされる

CSSアニメーションの状態が, 軌跡が描画される度にリセットされる. 原因, 対処法がわからない.
一方で, insetアニメーションはmapBoxの影響を受けない.

試したこと

• アニメーションの種類によっては影響を受けないのかと思い, opacity. transformに対して検証してみたが, いずれもmapBoxに影響される.

再現方法

• 「はじめる」ボタンを押したあと, 地名を表示するアニメーションが軌跡描画の瞬間に消える.
  
  

ページの状態を感知するステートの追加

• トラックの読み込みやマップの表示など, アプリケーションに用いる種々の情報が利用可能な状態になってからアプリケーションを利用できるようにするため, これらを感知するstateが欲しい.
• 同時に, ランニング中, ランニング終了など, その状況によってページ全体のビューを変更したいときのために表示中のコンテンツがなんなのかを管理するstateが欲しい.

軌跡一覧画面にてスライドで軌跡を選択できるようにする

背景

• ui改善

変更点

• 軌跡をスワイプして選択できるようにする
• 使用するライブラリを精査する

備考

• 候補になり得るライブラリも2.3つ比較して簡潔にまとめてほしいです！

ランニング中の画面作成

Ref: JSからDOMのClassを叩く方法
https://stackoverflow.com/questions/33585491/how-to-get-a-react-component-reference-to-change-its-class-using-classlist/55101660

result画面用に軌跡のみ出力

TrackのDeleteリクエスト実装

開発中は破損データが頻繫に生じる。いちいちDBをリセットするより一件一件Deleteできると便利。

• 破損してる旨を出力してページが読み込めないという状況を防ぐ
• Delete機能実装

スマホでフロントのエラーが出力されるようにする

アプリを実際に使っていくと、予期せぬエラーが起こることがある。座標データにエラーが生じていた場合再現が難しいので,エラーが起こった場合はスマホでもエラーを確認できるようにしたい。
そのためにすることとしては、

• console.logで出力してた部分を変数に全部格納するなどして一元管理
• それを以下のうちいずれかで確認できるようにする。
  • alertで出力。エラーが起きたときユーザに状況を説明する役割も兼ねるのがいいところ。お手軽。
  • エラーログを格納するテーブルをDB上に作成。データを取り出してじっくり検証したりできるのがいいところ。

また、エラーメッセージ以外に何を出力すべきかは話し合いたい。今のところ考えているのは、

• 配列のデータ数
• 文字列変換後の文字数
• 文字列変換後の文字列

前２つについては、実際どのくらいのデータ量になっているのか把握するため。最後のは、undefinedなどエラーを引き起こす原因になっている要素の検出のため。

記録したばかりのデータが一時非表示になる

RECORDボタンを押すと記録したばかりのデータが一瞬非表示になってしまう。

ログ取得のバックグラウンド実行

現在、ログの取得がブラウザを開いている間しか行われないようになっている。ブラウザが閉じられても動作するように、バックグラウンド実行に仕様を変更する必要がある。そのためには、

• バックグラウンドで実行しないといけない関数が何なのかを洗い出す
• バックグラウンドでの実装方法を調べる
• 実装する
  の三段階を踏む必要がある。

MapBox MapMatchingの導入

道に沿わせてgeojsonの情報を整形してくれるAPI。
なんかどれくらいの精度で吸いつけるかとかパラメータでいじれるっぽいので要調査。あとたいきさんの意見もききたい。
https://docs.mapbox.com/api/navigation/map-matching/

トラックが正常に保存されなかった場合再度記録モードに入れない

再現方法：
① START → RECORDを行い、もしデータが保存できなかった場合、再度STARTが押せない。

解決方法：
SATRTの処理が実行できるようにするにはそのまえにMapbox.jsのthis.trackをクリアにする必要がある。今のところ正常に保存が行われたあとにクリアする仕様にしていた（＝保存前にクリアされると保存に失敗する）。
今後はSTARTボタンが押されたらすぐにクリアする仕様に変更する必要がある。先の「保存前にクリアされる問題」を解決する為、保存に用いるデータは別の変数に退避させておく。

Rails サーバーからデータを取得する

軌跡をsvg画像として出力するものをコンポーネントとして分割する

要件としては、 引数にsvg画像のwidth, heightを与えられること。
軌跡のアスペクト比によって、縦長の場合heightにフィットする。横長の場合widthにフィットする。
フィットしてない辺は**寄せ。

軌跡の描画をcanvasからsvgを用いたものに変更

canvasはビットマップ形式で表示されるのでディスプレイの解像度が高いとジャギーが生じる。（ディスプレイの解像度に合わせてcanvasのサイズを動的に変更し、解像度を合わせる方法もある：https://qiita.com/uto-usui/items/5ee0634d5107f3da86e8）
svgで表現されていれば、ディスプレイの解像度に応じて再描画されることに加え、描画のたびに出力用のcanvasや関数を用意する必要がないので、汎用性も高い。

PC版のPetampくんが大きすぎる

概要

SSの通りPCで開いた際, 上下のナビゲーションエリアが広すぎる

作成者

@hatake511522

現在地を取得できない問題

• MapBox 表示部分をコンポーネント分割してから発生した問題
• 以下の画像のように現在地取得ボタンが無効になっている

track encode の記法をmatchbox に合わせて変更

139.76608399999998,35.681382:139.763328,35.675069:
↓
139.76608399999998,35.681382; 139.763328,35.675069;

GPSのログからノイズを除去する

やりたいこと

現状GPSログには様々な欠損、ノイズが含まれている。これを判別した上でできる限り取り除きたい。

• 移動手段推定のための表現学習を用いたGPSログからの特徴抽出
  https://ipsj.ixsq.nii.ac.jp/ej/?action=repository_action_common_download&item_id=145433&item_no=1&attribute_id=1&file_no=1

軌跡選択画面でのスライドボタン変更

変更内容

現状のmaterial-UIボタンから統一感あるボタンに変更する

作成者

@k1105

content を 押したボタンによって切り替えられる state の実装

trackの初期化に失敗する

起こっていること

• 保存されているtrack logの先頭がundefinedになっている. 原因はおそらく初期化部分のハンドリングの失敗.
  https://arcane-sierra-72584.herokuapp.com/tracks/45 (0807 閲覧)

{"id":45,"data":"undefined140.3420672,38.2205952:140.3420672,38.2205952:140.329463,38.222845899999996:140.32946669999998,38.2228426:140.3420672,38.2205952","user_id":5,"created_at":"2021-08-06T13:17:48.894Z","updated_at":"2021-08-06T13:17:48.894Z"}

軌跡の表示方式や画面全体のレイアウトをユーザが選択できるようにしたい

背景

• 軌跡の表示方法（動点、軌跡のみ、速度によって線幅を変える、etc...）や、トラックログの表示画面、アニメーションについて様々なアイデアはあるものの、一つに決めきれず検討、実装が進んでいない項目がたくさんある。そこで、気軽に実装ができるように、これらのアイデアを可変なものとして扱い、ユーザが好きに選択できる機能として開放したいと考えている。実際にアプリを操作する中でそれらのアイデアの良し悪しについて検討し、今後も可変なものとして扱うか、或いはどれか一つに絞り込むかも含めて議論を前に進めていきたい。

やりたいこと

設定のタブから、以下の項目をユーザが自由に設定できるように機能として開放したい。

• 軌跡の色
• UI全体のテーマカラー
• 軌跡の線幅
• 動点の表示/非表示
• トラックログの表示形式（単一のトラックのみ表示、複数トラックをまとめて表示）
• フォント

いくつかの項目は、実装に至るか検討の余地あり。またこれ以外にも追加する可能性あり。

座標データから平面に投影された軌跡の作成にむけた調査

リザルト画面やtrackのログを確認する際に必要な、座標データから構成される軌跡を生成したい.
そのために、緯度経度を用いた極座標系で表現された軌跡データをデカルト座標系に投影する必要がある.

これはなぜ必要かというと、極座標で表現された緯度経度をそのまま用いると、北極、南極に近づくにつれて軌跡が大きく歪むから.（ref: メルカトル図法）北極付近で経度を１°分移動するのと、赤道付近で１°分移動するのは距離にして全く異なる.

適切な投影方法（正距方位図法？）を用いて軌跡をキレイに表現したい.
そのためには, mapBox(あるいはgooglemapなど)がどのような投影方法を用いているのか調査する必要がある.