kotarofunyu/recofit_web

筋トレ記録アプリ RecoFit

recofit_web's Issues

種目別記録のindexページUI改善

UIが放置されているので、改善する。

記録フォームのモーダル化

記録フォームをモーダル化しましょう。
backlogのようなイメージでAjax処理も追加。

参考URL
https://qiita.com/niwaken/items/ffbce52fb024fd369f24

メインセット機能

何をしたいのか

アップとメインセットを分ける人が多い or より一般的だと思うので、
メインセットがどれなのか？を区別する。

方法（仮説段階）

Setテーブルに、main_setカラム (型: boolean)を追加
登録時に、セットの横にラジオボタンを追加してonでtrue、offでfalse

気を付けたいこと

ユーザーによってはメインセットとアップを区別したりしない人も確実にいる。
その点、後々の表示などのロジックに関わってくるのでどうするか考えておくこと。

recofitについてページ作成

aboutページの作成

メインセット機能のUI改善

問題

• メインセットのマークが文字だけになっている
• メインセットの表記によって画面幅によってはUIが崩れている

解決方法

• メインセットのマークが文字だけになっている
  → アイコンを使う、ボーダーで囲ってコンパクトなマークを作る
• メインセットの表記によって画面幅によってはUIが崩れている
  → 上記の解決方法にプラスで、サイズを相対値で設定する。

ユーザーのプロフィール画像を丸くする

やりたいこと

ユーザーのプロフィール画像を丸くしたい。
登録時に自動でトリミングするのか、フロントエンドでクリップするのか

SNSでシェア機能

Twitter, facebook, lineでTrainingRecordをシェアできる機能を作る

クエリパラメータにリファクタリング

日本語のパラメータを扱うことや複数のパラメータを同時に渡すことが多いので、
パラメータの受け渡しは原則クエリパラメータにする。
そこで、現状、クエリパラメータを使っていない箇所をリファクタリングする。

記録の編集機能

記録を編集できるようにする。
複数種目部分の編集が難しそう…

アソシエーション箇所のバリデーションバグ修正

##概要
１対多のアソシエーションにおける、多の部分へバリデーションがかからない時がある

##発生条件
種目を削除→種目を追加→空欄でポスト→バリデーションをすり抜けてcreateされる

グラフの順番を日付順にする

問題

スマートフォン、特にherokuで見た時にグラフの項目の順番がバラバラで日付順になっていないため、日付順になるように修正する。

体組成計測定結果登録機能

ユーザーの種目別機能UI整理

グラフを実装できたので、そのページのUIを整える。

トレーニング記録のグラフ機能

なぜこの機能が必要なのか (why)
記録を取ることの最大のメリットは「自分がいかに成長しているか」を把握できることにある。
このメリットを最大化するために、数値をグラフに起こすことで、より直感的に「自分がいかに成長しているか」を把握できるようにしたい。

どのような機能なのか (what, where)

1. グラフは種目ごと。「ベンチプレス」の記録の伸びを見るのであれば、「ベンチプレス」のグラフのみ。
2. グラフに表示するのは、「記録を取った日で一番重かった重量」。記録には複数のセットがあり、すべてグラフに表示することはできないため。
3. もちろん、動的にグラフは更新される。
4. （縦軸＝重量(kg)、横軸=記録の日にち）という形。記録の日にちをクリックすると、記録詳細へ飛ぶ。
5. ページ上部か、下部に現在のマックス重量を表示。そのマックス重量がいつ記録されたかも表示する。
   ※現在、種目別ページ機能があるので、そのページに載せるのが良いかもしれない。

進め方 (how)
スモールスタートを意識して徐々に積み上げていく方式でいきましょう。
「ユーザー登録数の日にちごとの遷移」等から始めて、使い方に慣れていく。
その後、仕様2,4などのロジックを実装していくような流れ。

以下、有力な参考サイト/ページ
https://chartkick.com/ (gemの公式)
https://qiita.com/Y_uuu/items/0d57748954c7cdb9bbcb (Qiitaの解説記事)
webpackerを導入しているので、chartkickというgemが良いのではないかと考えている。

画像のアップロード先をAmanzon S3にする

環境によって場合分けする。
Herokuにおける画像のアップロード先をS3にする。
ローカル環境ではローカルのディレクトリでOK。

実装できると尚良いもの
・画像の容量制限
・画像のリサイズ
・画像の圧縮

参考記事
https://qiita.com/yumiyon/items/c970914f1ab1ce3aca37
https://qiita.com/nobu0717/items/a34a896f6e7ad68dc54e

記録更新機能

何をしたいのか
「今までで一番思い重量を挙げられた！」、
「前まで８回しかできなかったのに１０回できた！」など、
筋トレとは記録を更新することで楽しみが倍増するもの。
それを、せっかくだから記録にも残したい。
なので、セット単位で記録更新の有無を登録・表示できるようにしたい。

いつものメニュー機能

トレーニーは行う種目が決まっている場合が多いので、「いつものメニュー」機能を作る。

トップ画面追加

Twitterの未ログイン状態のTOP画面を参考に、TOP画面を作成する。
レスポンシブ込み。
Adobe XDでデザイン済。

ユーザー機能

ユーザーに関わる機能を作る。

今考えている順序は以下の通り

1. ユーザーモデルの作成
2. ユーザー登録機能の作成
3. ユーザー認証機能（＝ログイン機能）の作成
4. ユーザーと、トレーニング記録を紐づける。
5. ユーザーのプロフィール機能の作成
6. ユーザーページの作成
7. ユーザーアイコン機能の作成

※勉強目的なので、ログイン周りは原則gemを使わずに開発すること。積極的車輪再開発。

グラフの表示最低値を0にする

問題

グラフの最低値が、一番低い重量になっており、最低値が存在しないかのように見える。

どう改善したいか

表示最低値を0にして、一番低い重量でもバーが見えるようにする。

キャッシュ

種目別機能のスケーリング

現状
・種目別一覧が全てのユーザーのものしかない
・誰の記録か分からない（これは表示の問題なのですぐ直せるけど）

何をしたいのか
・ユーザーの、記録から、種目別の一覧を見れるようにする。（他人の種目別記録なんか興味なくない?）
　これは後にグラフ機能に繋がってくる！
・「みんなの記録」と「あなたの記録」を明確に分ける（メニューレベルで）
・分けて、それぞれのリンクを追加する。
・記録一覧TOPに表示される種目名のリンクは、自分のその種目別記録へ飛ぶようにする。
・ユーザー関係なしの種目別一覧は�、記録のタイトル部分にユーザー名と日付を表示する。

ユーザー一覧機能の実装

サイドバーに項目があるものの、ユーザー一覧を実装できていないので実装する。

記録登録フォーム追加場所の改善

https://rails.densan-labs.net/form/relation_register_form.html

このページを参考にcocoonをカスタマイズする。

Railsのバージョンアップ

ユーザー編集画面のUIを整える

初期状態なので、ユーザー詳細画面のUIに合わせる

体重記録機能

グラフでメインセットとアップの表示切り替え

何をしたいのか

チェックボックスのオン/オフで、メインセットだけの表示をしたり、アップだけ、もしくは両方表示したりするのなど、切り替えられる機能を追加したい。

いいね機能の追加

SNSでよく見られる「いいね」機能の追加

以下、現時点で考えている仕様

1. ユーザーはアイコンのクリックによって、いいね/いいねの取り消しができる。
2. 「いいね」されている状態と、されていない状態でアイコンの色を変える。
3. ユーザーは自分が「いいね」した投稿の一覧を見ることができる。

※1の機能はAjaxで実装したい（いいねでリロードさせるのは、ユーザーの取ったアクションの大きさの割りにユーザーを待たせることになってしまう）

機種(ブラウザ)依存のCSSをオフにする

Web制作をやっていると、iPhoneやAndroid、IE等で見たときに「なんだこれ」っていうデザインになっている要素がある。

このボタンがもっともな例。

これをオフにして、どのブラウザ、どの機種から利用しても同じデザインになるようにする。

ユーザー詳細画面のUIを整える

特にプロフィール周りを整える。
レスポンシブ込み

画像のアップロードサイズ上限追加

何をしたいのか？

HerokuでAmazon S3を使う予定だが、大量アップロードも一応想定されるため、画像のサイズに上限を設定したい。

ヘッダーメニューのUI改善

なにをしたいのか
アプリのUXを改善するために、ヘッダーメニューのUIを改善したい。
・ログイン中のユーザーのアイコンを表示する
・アイコンクリックで、ユーザーに関係するリンクを表示する。
・記録メニューを追加する
・記録メニューをクリックで、記録に関係するリンクを表示する。
・インフォメニューを追加する
・インフォメニューをクリックで、その他に関係するリンクを表示する（Recofitとは？とか、そういうの）

なぜするのか
ヘッダーメニューはいわば「どこにでも通じるターミナル駅」のようなもの。
ターミナル駅が不便だと、まずどこかに行く気が失せてしまう。
ターミナル駅を、アクセスしやすく、操作しやすく、わかりやすくすることでUXを改善できると考えた。

Rubyのバージョンアップ

Cocoonに制限を追加する

問題

Cocoonで、小要素の追加・削除の制御を設定していないため、小要素の全削除や、無限追加が可能な状態となっている。

対策

1. 追加個数の制限
   →現実的に考えて20種目50セットまで？
2. 削除の制限
   →最低１個は存在する状態を作る。

herokuへ種目の初期データを投入する

herokuにデプロイしているアプリへ、種目の初期データを流したいので、
db > seeds.rbを編集する。

トレーニング記録バリデーションの追加

この課題の背景
スモールスタートを大事にしてきた結果、細かいところを疎かにしてきてしまいました。
疎かにしたことの一つとして、「バリデーションを設定していない」ということが挙げられます。
このままだと、アプリとしてバグだらけになってしまうため、バリデーションを追加しようと考えました。

RM計算機作成

やりたいこと

RM計算機を作って、計算上の自分のマックスを把握できるようにする。

行ったジム登録機能

Google Maps APIを使って実装する。

ソーシャルログイン機能

Google, Twitter, FaceBook, LINEのアカウントを使ってユーザー登録/ログインできる機能を作る。

続きを見る機能

現状
記録一覧画面などで、記録が全部表示されている状態なのでliの大きさがそれぞれになってしまっている。
特にコメントが多い記録は、縦に長くなってしまう。

どうしたいのか
一定のところまで見せておいて、あとは「続きを見る」という形式にして、liの大きさを全て均等にしたい。

暫定的なレスポンシブ対応

PCでのレイアウトしか最適化されていないので、レスポンシブ対応をする。
ヘッダーもハンバーガーメニューにするなど、工夫すること。

ログイン画面のUI改善

デフォルトのままなので、記録インデックスページのデザインに合わせる形でUIを整える。