kotarofunyu / recofit_web Goto Github PK
View Code? Open in Web Editor NEW筋トレ記録アプリ RecoFit
筋トレ記録アプリ RecoFit
日本語のパラメータを扱うことや複数のパラメータを同時に渡すことが多いので、
パラメータの受け渡しは原則クエリパラメータにする。
そこで、現状、クエリパラメータを使っていない箇所をリファクタリングする。
##概要
1対多のアソシエーションにおける、多の部分へバリデーションがかからない時がある
##発生条件
種目を削除→種目を追加→空欄でポスト→バリデーションをすり抜けてcreateされる
トレーニーは行う種目が決まっている場合が多いので、「いつものメニュー」機能を作る。
記録を編集できるようにする。
複数種目部分の編集が難しそう…
Twitterの未ログイン状態のTOP画面を参考に、TOP画面を作成する。
レスポンシブ込み。
Adobe XDでデザイン済。
HerokuでAmazon S3を使う予定だが、大量アップロードも一応想定されるため、画像のサイズに上限を設定したい。
PCでのレイアウトしか最適化されていないので、レスポンシブ対応をする。
ヘッダーもハンバーガーメニューにするなど、工夫すること。
Google, Twitter, FaceBook, LINEのアカウントを使ってユーザー登録/ログインできる機能を作る。
Google Maps APIを使って実装する。
SNSでよく見られる「いいね」機能の追加
以下、現時点で考えている仕様
※1の機能はAjaxで実装したい(いいねでリロードさせるのは、ユーザーの取ったアクションの大きさの割りにユーザーを待たせることになってしまう)
現状
・種目別一覧が全てのユーザーのものしかない
・誰の記録か分からない(これは表示の問題なのですぐ直せるけど)
何をしたいのか
・ユーザーの、記録から、種目別の一覧を見れるようにする。(他人の種目別記録なんか興味なくない?)
これは後にグラフ機能に繋がってくる!
・「みんなの記録」と「あなたの記録」を明確に分ける(メニューレベルで)
・分けて、それぞれのリンクを追加する。
・記録一覧TOPに表示される種目名のリンクは、自分のその種目別記録へ飛ぶようにする。
・ユーザー関係なしの種目別一覧は�、記録のタイトル部分にユーザー名と日付を表示する。
この課題の背景
スモールスタートを大事にしてきた結果、細かいところを疎かにしてきてしまいました。
疎かにしたことの一つとして、「バリデーションを設定していない」ということが挙げられます。
このままだと、アプリとしてバグだらけになってしまうため、バリデーションを追加しようと考えました。
アップとメインセットを分ける人が多い or より一般的だと思うので、
メインセットがどれなのか?を区別する。
Setテーブルに、main_setカラム (型: boolean)を追加
登録時に、セットの横にラジオボタンを追加してonでtrue、offでfalse
ユーザーによってはメインセットとアップを区別したりしない人も確実にいる。
その点、後々の表示などのロジックに関わってくるのでどうするか考えておくこと。
なにをしたいのか
アプリのUXを改善するために、ヘッダーメニューのUIを改善したい。
・ログイン中のユーザーのアイコンを表示する
・アイコンクリックで、ユーザーに関係するリンクを表示する。
・記録メニューを追加する
・記録メニューをクリックで、記録に関係するリンクを表示する。
・インフォメニューを追加する
・インフォメニューをクリックで、その他に関係するリンクを表示する(Recofitとは?とか、そういうの)
なぜするのか
ヘッダーメニューはいわば「どこにでも通じるターミナル駅」のようなもの。
ターミナル駅が不便だと、まずどこかに行く気が失せてしまう。
ターミナル駅を、アクセスしやすく、操作しやすく、わかりやすくすることでUXを改善できると考えた。
記録フォームをモーダル化しましょう。
backlogのようなイメージでAjax処理も追加。
aboutページの作成
herokuにデプロイしているアプリへ、種目の初期データを流したいので、
db > seeds.rbを編集する。
チェックボックスのオン/オフで、メインセットだけの表示をしたり、アップだけ、もしくは両方表示したりするのなど、切り替えられる機能を追加したい。
Twitter, facebook, lineでTrainingRecordをシェアできる機能を作る
なぜこの機能が必要なのか (why)
記録を取ることの最大のメリットは「自分がいかに成長しているか」を把握できることにある。
このメリットを最大化するために、数値をグラフに起こすことで、より直感的に「自分がいかに成長しているか」を把握できるようにしたい。
どのような機能なのか (what, where)
進め方 (how)
スモールスタートを意識して徐々に積み上げていく方式でいきましょう。
「ユーザー登録数の日にちごとの遷移」等から始めて、使い方に慣れていく。
その後、仕様2,4などのロジックを実装していくような流れ。
以下、有力な参考サイト/ページ
https://chartkick.com/ (gemの公式)
https://qiita.com/Y_uuu/items/0d57748954c7cdb9bbcb (Qiitaの解説記事)
webpackerを導入しているので、chartkickというgemが良いのではないかと考えている。
https://rails.densan-labs.net/form/relation_register_form.html
このページを参考にcocoonをカスタマイズする。
スマートフォン、特にherokuで見た時にグラフの項目の順番がバラバラで日付順になっていないため、日付順になるように修正する。
グラフの最低値が、一番低い重量になっており、最低値が存在しないかのように見える。
表示最低値を0にして、一番低い重量でもバーが見えるようにする。
RM計算機を作って、計算上の自分のマックスを把握できるようにする。
何をしたいのか
「今までで一番思い重量を挙げられた!」、
「前まで8回しかできなかったのに10回できた!」など、
筋トレとは記録を更新することで楽しみが倍増するもの。
それを、せっかくだから記録にも残したい。
なので、セット単位で記録更新の有無を登録・表示できるようにしたい。
サイドバーに項目があるものの、ユーザー一覧を実装できていないので実装する。
グラフを実装できたので、そのページのUIを整える。
ユーザーのプロフィール画像を丸くしたい。
登録時に自動でトリミングするのか、フロントエンドでクリップするのか
特にプロフィール周りを整える。
レスポンシブ込み
UIが放置されているので、改善する。
ユーザーに関わる機能を作る。
今考えている順序は以下の通り
※勉強目的なので、ログイン周りは原則gemを使わずに開発すること。積極的車輪再開発。
現状
記録一覧画面などで、記録が全部表示されている状態なのでliの大きさがそれぞれになってしまっている。
特にコメントが多い記録は、縦に長くなってしまう。
どうしたいのか
一定のところまで見せておいて、あとは「続きを見る」という形式にして、liの大きさを全て均等にしたい。
デフォルトのままなので、記録インデックスページのデザインに合わせる形でUIを整える。
初期状態なので、ユーザー詳細画面のUIに合わせる
環境によって場合分けする。
Herokuにおける画像のアップロード先をS3にする。
ローカル環境ではローカルのディレクトリでOK。
実装できると尚良いもの
・画像の容量制限
・画像のリサイズ
・画像の圧縮
参考記事
https://qiita.com/yumiyon/items/c970914f1ab1ce3aca37
https://qiita.com/nobu0717/items/a34a896f6e7ad68dc54e
Cocoonで、小要素の追加・削除の制御を設定していないため、小要素の全削除や、無限追加が可能な状態となっている。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.