チーム開発 3/21

3/21

メモになります

最終課題　四日目
トップページが終わったので
商品詳細ページのビューを作っていきます

ブロックの形を丸くしたい
border-radius
で解決

ボタンを押すと引っ込んだりする
立体的な動きをするようにしたい
:active
を使って擬似要素を使っていく
プラスα
border-bottom: solid 5px #25b8bd;
を使うとボーダーの色を変えて影っぽくして
擬似要素に
border-bottom: none;
を使って押すとボーダーをなくしてボタンを押したようにできる

表っぽく作りたい
border
を使うと解決

ページのソースを表示するためのショートカットキー
「option + command + U」

%li.optionalBtn
　%a{:href => "#"}
%i.fa.fa-flag
不適切な商品の通報
このコードを=>使わずに使いたい

%li.optionalBtn
=link_to "#" do
%i.fa.fa-flag 不適切な商品の通報
これで解決
https://pikawaka.com/rails/link_to
参考したサイト

%form#new_comment.new_comment{"accept-charset" => "UTF-8", :action => "#", :method => "post"}
%input{:name => "utf8", :type => "hidden", :value => "✓"}/
%input{:name => "authenticity_token", :type => "hidden", :value => "UZaji94lj/rTfLW3DcSaCXs2HPv6Ic+zHxCyGaZhfKQcIpGKWGwWxX9gCQcYcZ2SdCqU5NyBOUL3tc3504qWYA=="}/
%textarea#comment_body{:name => "comment[body]", :required => "required"}
 %p.noticeMsg
    相手のことを考え丁寧なコメントを心がけましょう。
    %br/
    不快な言葉遣いなどは利用制限や退会処分となることがあります。
%br/
%button.commentBtn-show{:name => "button", :type => "submit"}
    %i.fa.fa-comment
    コメントする

この文も直したい
accept-charset属性
form要素のaccept-charset属性は、文字エンコーディングを指定する属性。ほとんどの場合、
サーバーの自動判定に任せておけば問題ないが、文字化けする場合には試してみるとよい。

    %ul.commentContents
             %form#new_comment.new_comment{ action: "#",method: "post"}
            %input{name: "utf8", type: "hidden", value: "✓"}/
            %input{name:  "authenticity_token", type: "hidden", value: "UZaji94lj/rTfLW3DcSaCXs2HPv6Ic+zHxCyGaZhfKQcIpGKWGwWxX9gCQcYcZ2SdCqU5NyBOUL3tc3504qWYA=="}
            %textarea#comment_body{name: "comment[body]", required: "required"}
            %p.noticeMsg
              相手のことを考え丁寧なコメントを心がけましょう。
              %br/
              不快な言葉遣いなどは利用制限や退会処分となることがあります。
            %br/
            %button.commentBtn-show{name: "button", type: "submit"}
              %i.fa.fa-comment
              コメントする

このコードで解決
とりあえず商品詳細ページが完成！

この後は少し個人アプリをやっていく

改めて個人アプリを見てみると
ビューもサーバーサイトもめちゃくちゃ

データベースから考え直していこうと思う
ER図から考え直す
中間テーブルには
- has_many :messages, through: :messages_tags
と言ったthroughを使って関連づける

使いたい機能を改めて考える
・検索機能
タグとキーワード別に検索を使いたい
キーワードはtextのキーワードにする
・タグ機能
検索しやすくする
・ログイン機能
・いいね機能
わかりやすく纏まっている物をみんなで共有したいため
・ランキング機能
いいねの数が多いほど上位になる
検索で結果を出す時並びはランキングを使いたいなぁ

アプリの概要としては
トップページでいいねのランキングを表示
新規でtextを書くところのページ
検索結果のページ
自分の作った暗記カードを見るところ

のところまで実装したい
付け足したい機能としては
・タイムライン機能
・気に入った人の暗記カードをストックする
みたいなをしてみたいなぁ

アプリのイメージは
Qiitaのタイトルが単語、内容がその意味で
みんなでいい解説している物を共有する物
そしてそれを単語帳みたいに使えるようにしたい

ER図形は作れていたので次の段階
ビューを見ていく
かなり崩れていたり簡素に仕上がっていたので手直しをしていく
ルートを作った後は
rails g controller messages index