体重133キロからのプログラミング

体重はちょっと減って今125キロです。

人生68日目

HAGIRE(n)

devise+omniauthを使用してtwitterログインを実装した。

学び

device gem使用時、ユーザー情報の更新に現在のパスワード(current_password)を使用しないように設定する。
Twitterログインと通常の認証をユーザーが選択する場合、Twitterログインを選択した場合アプリ側のパスワード属性に「Devise.friendly_token[0, 20]」として、ランダム生成されたパスワードを使用するため、ユーザーはデータベースに登録してあるパスワードがわからないので、こういった設定が必要になる場合がある。
以下のようにする。

①「registrations_controller.rb」を作成する

#registrations_controller.rb
class RegistrationsController < Devise::RegistrationsController
  
  protected

  def update_resource(resource, params)
    resource.update_without_password(params)
  end
end

rails g controllerで作成すると、単にApplicationControllerを継承したコントローラーが生成されるが、devise側のcontrollerをオーバーライドしたいので、Devise::RegistrationsControllerを継承するようにする。

②routes.rbを変更

#routes.rb
Rails.application.routes.draw do

  devise_for :users, controllers:  {  registrations: 'registrations' }
.
.
.
end

omniauthを使っている場合はdevise_for :users, controllers: { omniauth_callbacks: ’users/omniauth_callbacks’, registrations: 'registrations' }とする。

③user editページのformにあるcurrent_passwordの部分を消す。 パスワードを用いないように設定しているため、残っているとエラーがでる。
また、formをデフォルトのまま使っている場合、新しいパスワードを設定するフォームがあると思うが、そちらもTwitterログインを使用しているユーザーには不要なので<% if current_user.provider.nil? %>などの条件文で表示されないようにする。
適当なユーザーで確認してみるとわかりやすいが、omniauthを使ってFacebookなりTwitterなりでログインするとプロバイダ名が入るようになっている。
ここは本当はTwitterログイン⇨ユーザーedieページへ移動⇨メールアドレスを登録してもらうという流れが一番いいんだろうけど、カジュアルに使って欲しい(ネタで作ったWebアプリなので)ので、メールアドレスには取り合えずランダム生成したものを登録するようにしている。

コード書いてると常に思うけど、こんなQiita読んだりしてコピペして、例外が出たらコードを読み込んで自分の環境に合わせるような書き方でいいのだろうか・・・。

人生67日目

昨日ナチュラルにブログ書き忘れちゃった、てへぺろ

Ruby超入門

Railsばっかやってるのもどうかなと思って原点であるRubyを最初から学んでる。
ページ数はまあまあ多いけど、3〜4日あれば読めるようにできてると思う。
とりあえずざっと読んで付箋挟んで辞書的に使う予定です。

omniauthでつんでる

これのせいで昨日もブログ書くの忘れてしまった。
なんとか自分の力でここまで調べてきたけどなかなか難しい問題もあるんだなっていう感じ。
認証周りはコードがファットになってからやると影響範囲広くてどうなるかわからない感じあるから最初にやっちゃえばよかったなあ・・・。ほんと後悔の毎日です。

就活

書類審査で一箇所落ちました。10月の頭の方に他の会社で面接です。緊張する🙃

人生65日目

HAGIRE(11)

画像アップロード時にアップロード予定の画像をプレビューできるようにした。
f:id:poinorou:20190926001055p:plain
一応うまくいってるんだけど、jsの知識がないので複数表示は一旦保留にしている。
そもそもActive Storageに対してうまくvalidationを適用できなくて困ってる。
1日調べたけどうまくいかなかったので、明日もチャレンジしてみる。

投稿に改行が適用されるようにした。
f:id:poinorou:20190926001305p:plain
これは簡単で、post.contentsimple_format(post.content)とするだけ。
何も指定しなくても、改行文字も含めてデータベースに保存してくれてるっぽい。

Ruby超入門を今更読み始めた

正直getsメソッドとか、pushメソッド、unshiftやshiftなんて知らなかった。
メンターが口を酸っぱくして「p使ってデバッグしろ」と言ってたがそれもそのまま書いてあった。
Railsの勉強も大事だけど、やっぱり原典であるRubyもちゃんと学ばないとダメだなと思った。

人生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に指定している。
何だか1つ気に入らないことがあるだけで、とても惨めなものを作っているような気になってしまう・・・。

さて、HAGIREも残すところあとわずかとなってきました。おそらく明日・明後日には完成するでしょう。
追加の機能もたくさん考えていますが、とりあえずは就活をしなければいけないので、隙間時間にやることになりそう。
結局JSも全然勉強できてないし後悔もたくさんあるし、本当はもっとたくさんブログに開発記録を残したいけれど、時間がそうさせてくれないという現実が本当に辛い。

人生61日目

HAGIRE(6)

今日はログインユーザー向けHomeページの外観を完成させた。
あとはユーザー情報の編集ページ、フォロー/フォロワーのリストページ、ユーザーの個別ページ、認証メールの再送信ページで全て終わるはず。
目算だとあと2日くらいかなあ、就活本当に不安だ。結局ポートフォリオtwitterクローンみたいになっちゃったし。
あとCSS書いてるの楽しいから、フロントになりたいのか、サーバサイドになりたいのかわからない。
それはこれからの人生で追々決めるとしよう。

f:id:poinorou:20190917231959p:plain
PCビュー
f:id:poinorou:20190917232042p:plain
モバイルビュー

今日の学び

textareaのplaceholderにCSSを適用する

::placeholder {
  style
}

/* :focusなどのオプションは以下のように指定する */
textarea:focus::placeholder {
  style
}