課題リスト

だんだんと形はできてきたものの、それにつれて直さなければいけないことや実装したい機能が増えてきたのでリスト化して整理しておきたい。
##グラフ関係
###日付の表示が英語表記になってしまっているので日本語あるいはXXXX-XX-XX表記化(解決済）
いろいろと試行してみたが、どうやら現在の日付型はdateで、それにはXXXX年XX月XX日というデータはいれることができないらしい。
XXXX-XX-XX表記なら可能だし、それで入っているのだが、グラフのデータを抽出する際のpluckメソッドで取得した配列になった時点で、それが以下のように変わっていた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/193ee312-9d11-14c6-19f9-9a28dc212d43.png)
そこで、graph内でこれらのデータを、XXXX年XX月XX日にしようと、.strftime("%Y年 %m月 %d日")メソッドを使い、試みたが、グラフ化するコードのなかでそれを適用することはできず、また、pluckメソッドでもってきた配列を.each doで一つずつXXXX年XX月XX日にすることはできても、そのできたそれらをグラフに入れることはできなかった。（ブロック内でのみ利用可能）
もし文字列のデータ型で、XXXX-XX-XXのデータをpluckメソッドで持ってくるとそれも上の画像のように英語にされてしまうのか試すと、文字列だとpluckしてもXXXX-XX-XXのままで取れることがわかった。(String型で登録されるユーザテーブルの名前にXXXX-XX-XXを入れて、それをpluckでとってきた）
<img width="1239" alt="スクリーンショット 2020-01-15 20.25.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/28c25181-91ab-7534-2cd2-12a0c321de5b.png">
そこで、ユーザーが入力する日付のdate型をStringに変えてやれば、PluckしてもXXXX-XX-XXのまま表示できるのではないかと考え、下記のようにデータ型を変更した。*同時にchangeメソッドの中に    remove_column :posts, :title, :stringなど削除したいコラムを指定することもできる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/a5cc5ebb-fbe0-18c1-b1bc-97392472f1ca.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/5e196593-c5b7-194e-4622-b53ad6534cb4.png)
また、この修正をすると今まで体重入力フォームのdate_selectが崩れてしまう。見た目やユーザの使いやすさからすればdate_selectのほうが良いだろうが、データ型がDateだとどうしても表記方法が英語圏のものになってしまい、それと比べると、多少見た目や使いやすさが落ちはするが、日本語表記を優先することにする。一番いいのはDate型のままXXXX-XX-XXで入れられることだが・・・。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/a1f08b64-c9a3-b8e6-65de-9d117ba84c30.png)
ささいでもその日の日付をデフォルトで入れておくようにはした。
>>追記
不思議なことに一件でもXXXX年XX月XX日という形のデータがあればそれになるし、なければ英語表記になると言う振る舞いであることがわかった。詰まりそうなので後回しにする（1/16)pluckで取得されるデータはきちんとXXXX-XX-XXとなっている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/e1ef6a49-5d11-243d-62b8-86a2a1bd4aad.png)
これに2020年1月22日を追加すると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/c107d379-7d26-e393-6f5b-4b094894fcee.png)
こうなる。



###登録した体重データを削除機能（実装済）
体重データの削除は別ページで行うことにした。ほとんどユーザの削除と一緒だが、pluckで取得した日付と体重のデータはページネーションでまとめることができなかったため、pluckは使わずに日付と体重を取得した。
  **削除の流れ**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/fb63fd3c-3ce0-990a-25ac-fd2c55aa338f.png)
@gdataは、グラフに適用するためのpluckで取得したデータ
＠dataは、ページネーションするためにまとめたデータ（created at id全部入ってるのでこれはグラフには使えない）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/293870ca-aad3-2caa-5316-1b1c5a2a11fc.png)
pluckで取得した日付と体重のデータをグラフに適用して表示。
ページネーションで表示したい体重と日付と削除ボタンは、ページネーションで囲み、またそれは.weightなどでコラムを抽出できるのでそこから体重と日付を抽出。同時に、削除するアクションで対象のデータを特定するためにURLにidを含ませ、DELTEのリクエストを送っている。
工夫した点としては、ページネーションで取り出すにはpluckで取得したデータは使えず、他の方法で取得する必要があり、またグラフ用にはpluckを使う必要があったため、そこを考えた点。

###他のユーザへの、「応援する」や「いいね」機能。（実装済2020/1/17)
・完成後の画像
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/1a6ba74b-ffb1-7e5d-29fe-b38fa54ca84c.png)
Link_toがなぜかPOSTリクエストはあげられず、すべてGETになってしまう問題が直らないのでButtonを使ってこのような見た目になってしまっている・・・・。
いいねのロジック自体はProgateをベースにした。いいねをするユーザ、User_idと、いいねをされるユーザPro_idをもったLikesテーブルを作成し、例えばuser_id 100とpro_id200のレコードは、１００が２００にいいねをしていると言う風にすることができる。
実際にはuser_idはCurrent_userから、pro_idはParamsから（いいねをするページはユーザのIDがURLに入っているため）取って実装することができた。
ただ、Link_toがGET以外のリクエストを送れないとなると、見た目が全て絶望的になるのでこれは問題だ・・・。課題リスト追加。


###グラフにデータがひとつしかない時、グラフが表示されない問題。

##ツイート関係
コメント式に方向転換することを考えている。ユーザのグラフやプロフィールにコメントをすることができて、そこでもちろんそのユーザもコメントしてくれた人と交流することができると言う風にしたい。ツイートとタイムラインの違いは？
###コメント機能（実装済-2020/1/17)
コメント蘭には、コメント内容・コメントをした人を表示させたい。
コメントは、user_idを外部キーとするCommentsテーブルを新たに作成した。また、書き込んだ人の名前も表示するためにput_idという書き込んだ人のIDを格納するコラムも作った。
・完成後の画像
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/067a5ba5-09f9-c436-5584-5468f1d7a70e.png)
**コメント送信・保存**
まずはどのグラフにコメントしているのかを特定するためにparamsからプロフィールの画面のユーザデータを取得する。
次にそのuser_idを外部キーとするテーブルを、入力されたコメント、名前、ID（current_use.idで取得）とともに作成し保存する。これで投稿は完了する。paramsを一個一個入れているのは、put_idをcurrent_userから個別に取得しないといけないため。（comment_paramsには入っていない）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/46083640-9472-4e68-8ec6-9562cac24631.png)
**コメント表示**
userdataと言う変数にはparams[:id]から取得したユーザデータ、つまりプロフィールのユーザのデータが入っている。そこからそのユーザのIDを持ったCommentテーブルのデータを取得し、表示させている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/e8a876dc-da54-f710-aa19-ac340f64aae3.png)



##その他
###ユーザー削除機能のバグ(解決済）
体重投稿の削除を実装しようと、実装したユーザ削除をみていると、削除したいユーザを削除しても別のユーザが削除されていた。コードをみてみると、ユーザを識別するparams[:id]にちゃんとuser.idが入っていないことが原因だった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/89a4b25c-e388-ee79-694e-d4468d387fd5.png)
削除コントローラを呼ぶURLにIDを明記。（コントローラ側はこのURLからparams[:id]を呼べて、それをもとにユーザを削除することができる。）
###CSS
正直苦手意識がある・・・。実装途中から簡単なデザインは整えるようにはしているものの、崩れたりして原因がよくわからない・・・。崩れてしまうとサーバサイドの実装のモチベーションも低下してしまう。ただ、苦手意識を持って自分には不向きと考えるのは楽だけど、ちゃんと勉強すれば絶対わかるから時間を取ってでもCSSは勉強する。
###プロフィール非公開機能(実装済2020-1/16)
ユーザ一覧に表示されない、ユーザープロフィールページにアクセスされないようにする非公開機能を追加した。
ユーザ登録時にprivate（Boolean)を選択できるようにし、選択した場合は非公開ユーザになるようにした。
合わせてユーザプロフィール更新時にも非公開若しくは公開に変更できるようアップデートした。

ユーザー一覧機能では、管理ユーザ以外は非公開ユーザは表示されない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/ae138668-91ed-7e2d-74cf-6bb1268bc12b.png)
BeforeActionで、ユーザのプロフィールにアクセスする際に非公開かどうかをチェックするフィルターを設置。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/195628f4-4d19-3db4-d15b-5456f73a881a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/51324f0a-aa75-8864-304b-41587281f3f6.png)

###Link_toがGETメソッドしか送れない問題。(2020/1/17解決)
Link_toはmethod: :post等指定すれば、本来であればGETしか扱えないHTMLを他のリクエストを扱えるようにしてくれるが、それができなかった。
Link_toがそれをできるのは、jquery-ujs(rails5.0からは@rails/ujs)を使っているからで、今回の場合Application.jsを読み込めていない問題は解決していないので、そこでrequireしているそれも使えなかったため、Link_toも機能しない事態に陥っていた。
Application.jsをなんとかしようと、いろいろしていたが、最終的にはこのようなエラーが出てしまい、また詰まってしまった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/b4af392b-9f28-6545-61d0-95f73ee3e422.png)
そこで結局、グラフのJSファイルを読み込んだ時と同様、それ自体をマニフェストファイルに指定して読み込ませてみた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/d6224657-cfda-11cc-a2a5-950b0653f798.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/f60b5ac8-89f7-42a2-0afa-54d422e2f61a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/33759491-0e30-b5c6-db54-52d62e2a36e2.png)
(いいねの見た目が大幅に改善した）

一応これでLink_toがGET以外もリクエストできるようにはなったが、Application.jsが読み込まれない問題は依然解決ができないままである・・。

###管理ユーザ機能(2020/1/18実装）
ユーザが問合せや意見を送ることができるフォームと、管理ユーザのみがその内容をみることのできる機能を実装した。画像アップロード機能を実装したあとだったこともあり、添付画像なども添えることができるようにした。
・ビュー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/fbfda6b3-c53a-12bb-6f80-977bc9377687.png)
・パーシャル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/9aeb02cd-9d7d-14b7-406d-6378fc961e78.png)
・コントローラ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/d5e4a538-51ab-ac9f-e31e-23c206f8f3ef.png)
わざわざcontact_paramsを用意しているのに使っていないのは、paramsに入っていないデータ（put_idという投稿した人のIDが入るコラム）があるため。だが、書いていて思ったのは、put_idのコラムを作ってビューでそれを取得して、コントローラでcontact_paramsから取得した方がコードがぐちゃぐちゃにならなくていいかもしれない・・・・？でもFormでどうやってparamsデータにフォーム欄もないのにput_idを入れるんだ？
↑Formとparamsについてはよくわかっていないことがあるので要確認！！
###画像アップロード機能(2020/1/18実装）
RailsTutorialを参考にして、CarrierWaveとrmagic・Imagemagicを使ってアップロード機能と、リサイズ機能を実装した。
大まかな流れはこのサイトやRailsTutorialがとても参考になったので省略し、ここではいまいち理解することができないrmagic・Imagemagicの関係について書いておきたい。

**画像拡大機能**
仕組みは、実際のサイズデータとサムネのサイズデータ二つを生成するよう、設定を変えて、普通の表示にはサムネデータを、画像拡大の表示には実際のサイズデータを表示するようにして、実装した。
・ビュー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/115c05fa-0c46-1132-e9cb-fe996c0097fe.png)
拡大表示は新規タブで開くように工夫した。
・ルーティング
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/043b011b-9fb3-e54c-b19a-341c3c21e19f.png)
・コントローラ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/497361a6-e5c7-e10d-31b4-f58778cf70bb.png)
コントローラはURLにあるID、つまり、コメントテーブルの選択した画像のレコードのIDをparamsから取得して、データを@imageに格納。
・コントローラ先のビュー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/bb6f8acd-caac-d442-c978-4e6d8b00b18c.png)
コントローラで入れたimageのある変数を使い、サムネではない画像を表示。

#気づいたこと
##URLはパスヘルパーを使わないなら絶対パスをルートからしっかり書くべき。(2020/1/16)
ルートから遷移するときはルートが省略されていても問題がなかったが、別ページから遷移するときに思わぬ問題がおきたため、注意したい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/be67a49f-e138-83cc-947a-5611974f0904.png)
ルートからであれば、/users/id/editに遷移できたが、/users/100からこのリンクを踏むと、/users/users/100/editとなってしまった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/96e23ddf-2f67-f3b6-57e9-49c4107f1973.png)
##params[:id]はとても便利。（2020/1/17)
URLにユーザ個別のIDさえ設定していれば、それを利用していろいろなルートにいくことができることを実感した。
##link_toの第一引数は一つでないといけない。
下の例では、第一引数に”いいねを取り消す”があるのに、リンク先としてアイコンも設置したためこのようなエラーが出た。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/5ec06339-4d3d-228e-7beb-8c9f64a4f08b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/0fdfa75c-ca8c-d643-c32b-d47f2f3b4b82.png)