人生64日目
HAGIRE(10)
ほぼ全ての作業が終わった。現在SendGridが凍結されている影響でメール認証ができないため、公開はしていないけど。
以下に今回初めてwebアプリを作ってみての感想を述べます。
感想
・強力なgem
deviseを使って認証してみたけど、影響範囲がとにかくでかくて、一歩歩くたびに地雷を踏み抜いてしまった。
これは大きな学びになった。大いなる力には大いなる責任が伴うということ。
userモデルが全てprivateになるのが一番焦った。これ設定で変えられるのかな？
なのでuserモデルで定義したメソッドは全てsendメソッドを使ってる。悲しみ。
・そもそも設計が難しい
何が必要なのか事前にわからなかったので、結局できたものは設計とかなり乖離したものになってしまった。
設計がないようなものなのでGitの使い方も曖昧になってしまって、本当に反省してる。
・強敵・Bootstrap
Bootstrapはすごく便利でレスポンシブ対応も簡単なんだけど、素人なので結構表示崩れが多かった。
正直認証関係をdeviseに任せたおかげでRuby部分はそこまで書く必要がなくて、2週間のうち半分はBootstrapかCSSの勉強をしていた。
・勉強してるとわかる、いろんな仕組み
色んなwebサイトをみながら勉強していたので、「あ〜これあのサイトでも使ってたわ」みたいな表現がたくさんあった。
相当アーティスティックなことしない限りは、ネットに溜まってる知見だけで見てくれは何とかできそう。
ただし、堅牢なHTMLやCSSを書こうと思うと相当難しいと思う。クラス名の命名とかマジで地獄かと思った。
・Gitをあまり有効活用できなかった
後から「branch切っとけばよかった」「わざわざbranch切らなくてよかったな」の連続。
これは実務で使っていかないと判断が難しそうだなって思った。
次に作るときはちゃんとGitを有効活用したい。
・結局楽しい
作ってる間、色んな例外に襲われ、CSSは崩れ、完成したと思ったら本番環境でおかしいことになり、散々だった。
でも解決した時の喜びがすごい。周辺知識を深掘りしていくのも楽しい。コードを書きながら次に実装するもののことを考えてると楽しい。
向いてるのかもしれないなと思えたのが一番の収穫だった。
作りたいものがそもそもツイッタークローンだったので、Railsチュートリアルの焼き直しになってしまったけど、これから機能を足していく予定なのでいずれ差別化できるといいな。
尚コードはクソ汚い模様・・・。
人生64日目
HAGIRE(9)
ほとんど全ての機能が完成した。
あと原因不明だったcontainerのmarginが解決した！（原因不明のまま)
ユーザー検索機能の実装
生のSQLをちょこッと書いた。
. . . #users controller def index @users = if params[:search] User.all.page(params[:page]).per(10).where("username LIKE ?", "%#{params[:search]}%") else User.all.page(params[:page]).per(10) end end
#index.html.erb . . . <%= form_with url: users_path, method: :get, local: true do |form| %> <%= form.text_field :search %> <%= form.submit "検索" %> <% end %>
フォームの入力内容をparams[:search]に保存してusers controllerのindexアクションに送信。
%は前方/後方一致を示すもので、%params[:search]%とすることで入力内容を含むusernameを探すことができる。
kaminariを使ったページネートを利用しているので、.page~.per~がある。
正直、ユーザー検索機能そのものより、ユーザーを一覧で綺麗に表示する方がめんどくさかった・・・。（リファクタしてないのでコードは載せない）
明日には全てが完成する予定。ただのTwitterクローンになっちゃった。もっと綺麗に、早く、上手くできるようになりたい。
ただ、とにかく楽しい。
人生63日目
HGIRE(8)
昨日もちゃんと作業してたんだけど、力尽きて寝てしまっていた。
初めて解決できない問題にぶち当たってしまった。
rubyの問題ではなくてCSSの問題なのでまあいいっちゃいいんだけど・・・。
herokuにデプロイすると謎のマージンが指定されるっていう。
プリコンパイルとか色々試したけどダメだったので、応急措置としてとりあえずmarginを0pxに指定している。
何だか１つ気に入らないことがあるだけで、とても惨めなものを作っているような気になってしまう・・・。
さて、HAGIREも残すところあとわずかとなってきました。おそらく明日・明後日には完成するでしょう。
追加の機能もたくさん考えていますが、とりあえずは就活をしなければいけないので、隙間時間にやることになりそう。
結局JSも全然勉強できてないし後悔もたくさんあるし、本当はもっとたくさんブログに開発記録を残したいけれど、時間がそうさせてくれないという現実が本当に辛い。
人生61日目
HAGIRE(6)
今日はログインユーザー向けHomeページの外観を完成させた。
あとはユーザー情報の編集ページ、フォロー/フォロワーのリストページ、ユーザーの個別ページ、認証メールの再送信ページで全て終わるはず。
目算だとあと2日くらいかなあ、就活本当に不安だ。結局ポートフォリオもtwitterクローンみたいになっちゃったし。
あとCSS書いてるの楽しいから、フロントになりたいのか、サーバサイドになりたいのかわからない。
それはこれからの人生で追々決めるとしよう。
今日の学び
textareaのplaceholderにCSSを適用する
::placeholder { style } /* :focusなどのオプションは以下のように指定する */ textarea:focus::placeholder { style }
人生60日目
HAGIRE(5)
あ、今日で2ヶ月だったのか。全然気づかなかった。ブログ書くときにしか気にしてないからわからなかった。
今日、最初の頃のブログを読んでたんだけど、何もわかってないのに頑張ってて偉かった。
2ヶ月経つと割となんでもわかるようになるぞ、過去の俺頑張れ！（Googleで検索できるスキルが身につくからな！）
さて、今日は色々とやったのであんまり詳しくは覚えていないけれど、無限スクロール(jQuery)の実装ついでにkaminari gemのページネーションの作り方を学び、実装しました。
jQueryというか、jsが便利すぎる。
ほぼjsやってないのに色々実装できるので、困ったらjQueryで検索してみるのもいいかも。
今日の学び
#時間をJSTにして出力する post.created_at.in_time_zone('Tokyo') #出力形式を指定する post.created_at.in_time_zone('Tokyo').strftime("%Y年%-m月%-d日 %-H時%-M分%-S秒")
出力テンプレートを弄る方法や、そもそもDBにJSTで保存する方法もあるそうだけど、日時の表示箇所が一箇所だけなので今回は上記のような簡単な実装になった。
実装もほとんど終わったのでずっとCSSを書いてる。
400行超えてきたしどこかでリファクタしなければ死んでしまいそう。
Devise日本語化後の「translation missing」に対処する
このように、translation missing: ja.activerecord.errors.models.user.attributes.current_password.blankというエラーが出て、エラーメッセージの表示がうまくいかなかった。
これは、devise.views.ja.ymlに該当の項目がないため発生している。
以下のように、エラーメッセージの階層に沿ってymlファイルを記述することで解決できる。
[/config/locales/devise.views.ja.yml]
ja:
activerecord:
errors:
models:
user:
attributes:
current_password:
blank: "が空になっています"
期待通りに動作した。
Deviseの日本語化
deviseを日本語化する - Qiita
日本語化自体は上記ページを参考にしました。圧倒的感謝🙏
人生59日目
HAGIRE(4)
トップページのビューをほぼ完成させた。
まだ高さが物足りないため、いくつか項目を追加予定ではある。
deviseのflashメッセージを日本語化したりもした。
後、プルリクエストを作ってGitHub上でmergeするというプロっぽいことも始めた。
Gitは触っておいて損はないと思う。慎重に扱わねば。
今日の学び
・CSSのクラスを動的に変える
<% flash.each do |key, value| %> <%= content_tag(:div, value, class: "flash flash_#{key}") %> <% end %> #以下のようなHTMLになる <div class="flash flash_#{key}"> value </div>
上記のようにcontent_tagを使うことで解決可能。
deviseのflashメッセージは:noticeと:alertの二種類のみのようなので、対応するCSSを書くことで表示を変えられる。
deviseを日本語化する - Qiita
こちらを参考にした。
deviseのflashメッセージはActive Recordが出力するようになっているため、ymlファイルがあり、そこに内容が書かれているので、手作業で修正してメッセージを変更することもできなくはない。（やりたくないけど）
一通り出来上がったらメッセージを確認して、違和感あるところは修正しよう。
Gitでプルリクエストを作成する
$ git add -A
branchの変更内容をaddして・・・
$ git commit
commitして・・・
$ git push origin ブランチ名
GitHub上でプルリクエストを作成、diffを確認して必要があれば修正する。
プルリクエストの修正は、ローカルで編集して、同じ手順でpushすればいい感じにしてくれる。
確認が終わったらGitHub上でmergeする。
$ git checkout master
masterブランチに戻って・・・
$ git pull origin master
これでローカルのmasterが最新の状態になる。
ちなみにfetchしてから自分でmergeするという手もある。
pullだと思わぬコンフリクトを起こすことがあるらしい。
ちなみにoriginとは、remoteリポジトリの別名であり、ここに最初に設定したURLなどの情報が入っている。
test書き忘れる
test全然かけてないので明日はテストでーにする。
後、まだminimagicを導入していないため、そこらへんもどうにかして、投稿ベージのビューが完成すれば御の字って感じかなあ。
