20201229_アウトプット(SNS認証によるログイン機能の実装・複数条件検索の実装)

アウトプット画像

今日行ったこと 10時間35分

  • SNS認証によるログイン機能の実装 6時間5分
    👉完成✨

  • 複数機能検索の実装 4時間30分
    👉完成✨

新しい発見

SNS認証によるログイン機能の実装について(FacebookGoogleアカウント)

今回の仕様
  • Facebook/Google登録を押すと(SNS認証を挟み)ニックネーム&メールアドレスが入力された状態でユーザー登録が始まる

  • SNS認証での新規登録の際は、パスワードが自動生成され、ユーザーはパスワードを入力しなくて良い

流れ 処理内容 理解した部分
1 クライアントサイド側から入力によりFacebookあるいはGoogleの認証が開始
2 サーバーサイド側はWebAPIに対し、リクエストを送る omniauth_callbacks_controller.rbauthorizationメソッドを定義して、「API使わせて!」と送る。
3 認証を経て、コントローラーにSNSに登録されている情報が送られる models/user.rbにクラスメソッドを定義して、APIから受けた情報を受け取るための引数を定義する。
4 SNSの情報から、ユーザー情報のみを取得して、既存のユーザー情報と照合を行う provideruidを使って、SnsCredentialモデルにSNS認証したことあるか探しにいく。
⚠️first_or_createメソッドを用いる。
ある→user_idとの紐付け(ログイン処理)。
ないprovideruid保存しつつ次のステップへ(下記の新規登録画面へ)。
5 その照合結果から、今回SNSで認証されたユーザーが、すでにアプリに登録されているユーザーなのか判断する メアドで検索。
⚠️first_or_initializeメソッドを用いる。
ある→ニックネームとメールアドレスをビューに返す(入力の手間を減らす)パスワードは自動生成するよう実装したためhidden(ビューで条件分岐)
ない→新しくインスタンスを作る。

大きな流れとしては、
(1)認証に必要な専用gemを導入する。
(2)環境変数を設定する。
(3)gemのメソッド、プレフィックス、引数等を使いながら、データの受け渡し・既にあるユーザー情報との照合・必要なユーザー情報の取得を行う。
と理解。

間違えていたら教えてください!💦

複数条件による検索(ransack)

新しく学んだこと

ポイントとしては、

  1. 【導入】 ransackというgemを導入すること。(メソッドが使えるようになるため)

  2. 【生成・運ぶ】コントローラーで「検索オブジェクト」を生成。具体的には:pをパラムスとした「検索オブジェクト」を生成し、運ぶ準備をする。

  3. 【該当したものを判断して表示】ビューでransackのメソッドを使い、上記で運ばれてきたものの中から一致するものを表示する。

ということを理解。



(1)ransackというgemについて

  • シンプルな検索フォームと高度な検索フォームの作成を可能にするgem。

  • gemの話とずれるが、下準備として、seedファイルが活用できることを理解。
    (本番環境において、seedファイルを作成するには、heroku run rails db:seedが必要であることも新しい気づきだった。)


(2)コントローラーの設定について

  • N+1(DBへのアクセス回数が増えパフォーマンス低下)問題を解消するために、includes(:紐付くモデル名)を活用すること。(復習になった)
  # @pに対して「.result」とすることで、検索結果を取得している
  def search
    @results = @p.result.includes(:category) 
  end


  • はじめに読み込むようにするために、プライベートメソッドに検索オブジェクトを生成すること。
  def search_product
    @p = Product.ransack(params[:q])  # 検索オブジェクトを生成
  end


  • データを取得する際に、重複しているものを削除するdistinct(ディスティンクト)メソッドがあると理解。

  • これも、はじめに読み込ませたいので、プライベートメソッドに定義する。(カラムごとに変数を定義)

  def index
    @products = Product.all
    set_product_column       # privateメソッド内で定義
  end

(省略)

  def set_product_column
 # 重複なくnameカラムのデータを取り出す
    @product_name = Product.select("name").distinct  
  end



(3)ビューの設定について

  • search_form_forcollection_selectという2つのメソッドを使用した。

  • search_form_forは、ransack特有の検索フォームを生成するヘルパーメソッド 。(「form_forのransack版」というイメージ。)

  • collection_selectは、DBにある情報をプルダウン形式で表示できるヘルパーメソッド 。

collection_selectの詳細について

<%= f.collection_select 第一引数, 第二引数, 第三引数, 第四引数, オプション %>
という形で使う。


今回は以下のような実装をした。
<%= f.label :name_eq, '商品名' %>
👉「選択した商品名に合致するものを選ぶ」とラベル指定。
<%= f.collection_select :name_eq, @products, :name, :name, include_blank: '指定なし' %>
👉「ラベル」の中身をプルダウン形式で表示するためにDBから取ってきて表示。

引数 役割
第一引数(メソッド名) (今回で言えばラベルに指定した)どのname属性、id属性をプルダウンにするか決める
第二引数(オブジェクト) コントローラで定義している配列データ(変数)を指定
第三引数(value 参照するDBのカラム名
第四引数(name) 実際に表示されるカラム名
オプション 何も選択していないときに表示される内容



感想

  • 今日は岡山さんのTwitterのきっかけで「Tech Kids Grand Prix 2020 」を見た。凄すぎ😲

techkidsschool.jp

凄いと感じたところ
  • 自分が小学生の頃、ゲームを作る側に回るっていう発想がなかった。

  • 質問に対して「こう思う」と自分の言葉で表現できている。

  • イデアが柔軟で面白い。一番発想で印象的だったのが、TATAという小さな頃から一緒に寝ているぬいぐるみが朝起きるとベットの下に落ちていて僕が寝ている間に遊んでいるのではないかという発想。可愛い。しかも、そこからゲームの構造に持っていっていて形にしている。(僕が朝起きるまでの制限時間内に⭐️を獲得する。途中、音を出す・僕の視線に当たる・ママに見つかるとゲームオーバー)TATAの視線が左下にあって、ユーザー目線の実装までしている・・。すご!

  • プログラミングだけでなくて、音楽・バスケ・書道など自分のプログラミング以外の好きなこととを、掛け算にして形にしている。(プログラミング技術だけでも凄いのに、それ以外にも夢中になれること複数ある)

  • 皆に共通していたのは「楽しんで取り組んでいる」ことだった。

動画を見ながら、ついつい「卑下する気持ちになる自分」と、「それを今いってもしょうがない。今プログラミングの楽しさに気づけたのだから良かったんだ」と感じる自分がいた。

グランプリに出ていた小学生たちは、何がきっかけでプログラミングに出会ったのだろうか。新しい技術を取り入れるときに、どうやって実装して行っているのだろうか。日々どんな風に継続して行っているのだろうか。 そんな疑問を感じた。

比べても自分が成長するわけではないので、憧れの気持ちを抱きつつ、自分のスキルを一つずつ身に付けていこうと思った。



悩み・今の感情
  • ここ最近「〇〇をやろう」がいっぱいあって「追われている」感じになってしまっていた。

  • 上記の状況だと、どんなに取り組んでも足りないのではないかと焦る気持ちになってしまう。

  • 調子がいい時は、目標のために行うタスクについて、ゲーム感覚で達成していくような感じを持てている。(勉強が終わった後に「ここまでやった!」、プラスでやっている部分に対して「ボーナスタイム!」という感覚。)

  • 「余裕がない(気持ちの焦り)→計画の見直し→良い調子」の波があるように感じる。「良い調子」が続くように、再現性を持たせられるようにはどうしたらいいか。今一番、そのことについて悩んでいる。

  • 原因は「計画」ではないか。自分にあっていないから、予測を立てられていないから、自分が立てた計画に自分が苦しめられているのではないかと思った。

  • 達成しようがしまいが、結果を受けるのは自分なので、それなら楽しんでやりたい。一つずつ着実に力をつけていきたい。

覚書(12/29計画の見直し)

(1)やるべきこと (2)やりたいこと (3)やれること

(1)やるべきこと

  • 卒業要件の完成

(2)やりたいこと

(3)やれること

メンタル:楽しみながら、ゲーム感覚でいく🎮😎

時間で区切り(達成すればよし)
  • PHP 一日15分以上

  • オリジナルアプリ 1日1時間以上

追加実装のミニアプリを作り、引き出しを増やす
優先順位 内容(機能) 締め切り 達成度
1 AWS S3 12/18 完了(フリマアプリ)に実装)
2 AWS EC2 12/24 完了(フリマアプリに実装)
3 ウィザード形式 12/27 完了
4 SNS認証 12/28 完了
5 複数条件検索 12/29 完了
6 タグ付 12/31
7 画像プレビュー 1/2
8 複数枚写真OK 1/4
9 コメント機能(即時更新) 1/8
10 クレカ登録 1/10
11 パンくず 1/14
12 日本語エラー 1/18



身に付ける力(直近)

  • PHP7

  • Docker


身に付ける力(ゆくゆく・覚書)

  • ドメイン駆動開発

  • 環境構築

  • 環境変数などのOS知識

  • バージョン対応力

  • データベースをインポートする力・エクスポートする

  • GitHubActions×OpenAPIGenerator(APICilent)