railsアプリでスクロール機能をつける
railsのオリジナルアプリで、記事に対してコメント機能を実装しました。
コメント欄を作成し、その中に投稿したコメントを表示することはできたのですが、
コメントが増えると、コメント欄に収まりきらずどんどん下に表示されてしまいます。
解決策ですが、今回はCSSをいじることで簡単に解決しました。
使用するのがoverflowプロパティです。
index.html.erb
<div class="comment-form">
<%= render "commens" %>
</div>
applicaion.scss
.comment-form {
overflow:scroll;
}
コメントは部分テンプレートにしているので、renderで表示しています。
コメントの親要素のdivタグにcssでoverflow:scroll;を付与すると...
＜画像＞
このようにきちんとスクロール表示ができるようになりました。
overflowには、scroll以外にも指定ができます。
以下のサイトが参考になりました。
気になる人は見てみてください。
文字列の省略
railsを用いたオリジナルアプリを作成しています。
＜課題＞
投稿の一覧表示にBootstrapのcardを用いているため、文字数が多くなると一つ一つのcardの高さが合わなくなってしまう。
それを回避するために、投稿された記事のテキストが一定の文字数を超えるとそれ以降の文字を省略して表示したい。
＜解決策＞
truncateメソッドを使用することで解決できました。
こんな感じです。
...で3文字取るので、引数に10を指定すると文字列の7文字目までを表示し、
それ以降を省略します。
ちなみに引数に2や3を指定すると...
こうなりました。
あまり意味はないですが、気になったので試してみました。笑
allow_blank
railsのアプリを作成している中で、正規表現で入力欄にバリデーションをかけていました。
しかし、任意入力欄を空欄でフォームを入力すると
”不正な値です”とエラーメッセージが表示されました。
presence: trueとはしていないのになぜ？と一瞬思いましたが、
正規表現でかけたバリデーションに引っかかっているので当たり前ですね。
ググってみるとallow_blankというオプションにたどり着きました。
これはフォームに入力があった場合のみバリデーションをかけるオプションで
今回はこれがallow_blankオプションが使えそうです。
allow_balnk: true としたらうまくいきました。
少し別件ですが、入力必須項目でpresence :trueと正規表現の両方をかけた場合に、
空欄でフォームを入力するとエラーメッセージ が2つ出てきました。
これも正規表現の方にallow_blank: trueとすることで解決できました！
created_atの表示変更
railsのオリジナルアプリでグラフを作成していた際に、データが記録された日時をグラフのx軸に表示したかったのですが、<%= @profile.created_at %> とすると、
2021-01-14 17:15:00.749979
が表示されます。
必要なのは2010/01/14のみです。
解決策がこちらです。
<%= @profile.created_at.strftime('%Y/%M/%D') %>
こうすると2010/01/14が表示できました。
downcase,upcaseメソッド
今日のスクールのドリルの中で初めて学習したメソッドについてです。
・downcaseメソッド
str = "Hello"
puts str.downcase
とすると、出力結果は
helloになります。
・upcaseメソッド
これはdowncaseメソッドとは逆に
str = "Hello"
puts str.upcase
とすると、出力結果は
HELLOとなります。
また調べたところ、
文字列に含まれる小文字を大文字に、大文字を小文字にするswapcaseメソッドや、
文字列の頭の小文字を大文字に変える、capitalizeメソッドもあるようです。
新しく出てきたものは、その場でキチンとおさえておきたいですね。
テストコードでのエラー
コメント投稿機能を実装し、テストコードを書いていた際に
Failure/Error: _query(sql, @query_options.merge(options))
ActiveRecord::StatementInvalid:
Mysql2::Error: MySQL client is not connected
というエラーが発生しました。
何回かテストコードを実行するも、毎回エラーが発生するタイミングが違い、理由がよくわかりませんでした。
以前、テストのデータが膨大になるとエラーが発生すると聞いたことがあったので、今回がそのケースでは？と考えましたが、データの量も多くない上に、一応データ取得の際には「N+1問題」に気をつけてincludesメソッドを使用しているので一旦その可能性は排除しました。
別の方向性で調べていくと、読み込み速度が関係しているかもしれないという記事を発見し、その解決策を実行したところ無事エラーが解決しました。
解決策としてはbefore do ~endのなかにsleep(1)と記述することで、テストを１秒毎に実行するようにしました。
備忘録として残します。
