- 投稿日：2022-01-25T23:03:34+09:00
多重代入についてまとめてみました
ruby silverの勉強をしていく中で間違えたところがあったのでその解説記事を挙げていきます 多重代入 基本的な使い方 a, b, c = 1, 2, 3 a # => 1 b # => 2 c # => 3 右辺の要素が左辺の要素よりも多い場合は無視される a, b = 1, 2, 3 a # => 1 b # => 2 #この場合3は無視される 右辺の要素が左辺の要素よりも小さい場合は無視される a, b, c = 1, 2 a # => 1 b # => 2 c # => nil 該当する要素がない場合は、nilになる 残った要素は、配列として格納される a, *b = 1, 2, 3 a # => 1 b # => [2, 3] ・残りの要素が1つの場合でも、配列になる a, *b = 1 ,2 a # => 1 b # =>[2] ・残りの要素がない場合でも、配列になる a, *b = 1 a # => 1 b # => [] ネスト (a, b), c, d = [1, 2], 3 a # => 1 b # => 2 c # => 3 カッコを使うことで、ネストした配列の要素を代入することができる 左辺にカッコを使って、右辺に何もつけないとき (a, b), c = 1, 2, 3 a # => 1 b # => nil c # => 2 bにはnilが代入され、3は無視される 何か間違いがあったら、ご指摘いただけると嬉しいです！ 【参考記事】
- 投稿日：2022-01-25T22:31:38+09:00
[JS](基礎)関数について
アウトプットとして Rubyでいうところのメソッドを、JavaScriptでは関数と呼びます。 この関数ですが、いろんな記述の方法があるので整理するために記事にしたいと思いました。 いろいろな関数定義 関数宣言(function) JavaScriptではfunction 関数名(){ 処理 }と記述することで関数を定義することができます。 function 関数名(引数) { // 処理 } 例 function calc(num1,num2){ return num1*num2 } const num1 = 3 const num2 = 4 console.log(calc(num1,num2)) // => 12 無名関数 無名関数は、関数名なしで関数を定義することができます。より簡潔なコードが記述できるという点がメリット。 const hello = function(){ // 処理 } 例 const calc = function(num1,num2){ return num1*num2 } const num1 = 3 const num2 = 4 console.log(calc(num1,num2)) // => 12 即時関数 関数を定義すると同時に実行される構文。関数を定義してから呼び出すという手間を省くことができます。 (function 関数名(引数) { // 処理 })(呼び出すための引数) 例 (function countNum(num) { console.log(num) })(1) // => 1 ()の中にfunctionからはじまる関数定義そのものを配置することで、その関数を即実行するということができるようになります。 アロー関数 functionの記述を省略し、その代わりに（）=>という記述によって関数を定義する構文です。より短い記述で関数定義をできるという点がメリット。 // 無名関数 const 変数名 = function(){ 処理 } // アロー関数 const 変数名 = () => { 処理 } 例 const countNum = (num) => { console.log(num) } countNum(1) // => 1 それぞれの関数の特徴まとめ 関数定義の種類 特徴 関数宣言 標準的な関数の定義 無名関数 関数を多く使用するコードであるときに使用する。関数名の重複を避けることができる。 即時関数 流用する可能性のない関数を定義するときに使用する。別途関数を定義する手間がない。 アロー関数 無名関数または即時関数において、より省略した記述をしたい時に使用する。 JavaScriptの関数における戻り値 JavaScriptでは関数の戻り値をreturnを用いて明示する必要があります。 returnを記述していない例 function calc(num1, num2){ num1 * num2 } num1 = 3 num2 = 5 console.log(calc(num1, num2)) // => undefined（戻り値が取得できてない） returnを記述した例 function calc(num1, num2){ return num1 * num2 //戻り値を得るためにreturnを記述 } num1 = 3 num2 = 5 console.log(calc(num1, num2)) // => 15 まとめ 関数名などは覚える必要はないと思いますが、どういう書き方があってどういう特徴があるのかは覚えておきたいです！ ※補足等ありましたらコメントいただけると幸いです。
- 投稿日：2022-01-25T21:21:53+09:00
rails GoogleFont導入仕方
１．はじめに RailsのHTML/CSSに対して、GoogleFont適用する2つの方法を学んでもらうのが この記事のゴールだよ！ 2. まずは、GoogleFontのサイトから使用するFontを選ぶ GoogleFontのサイト ↑ ここからサイトへ飛びます そしたら上記のページに行くと思います。 この中から使用したいフォントを選択します。 今回は変化がわかりやすいように"Comforter Brusho"を使います。 選んだフォントをクリックします。 そうすると、以下のようなページになると思います。 そしたら、右上にある"View your selected families"をクリックします。 そうすると、以下の画像が現れると思います。 これで、GoogleFontを適応させる準備は整いました。 3. ここからはGoogleFontの導入方法を2つ紹介します。 1. application.cssを使って導入する方法からやります。 上記の<link>に選択して画像でドラッグしているところをコピーします。 コピーができたら、 <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Comforter+Brush&family=Gloria+Hallelujah&family=Mochiy+Pop+P+One&family=Reenie+Beanie&display=swap" rel="stylesheet"> これをapplication.html.erbにペーストします。 app/views/layouts/application.html.erb <!DOCTYPE html> <html> <head> <title>Pra</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <%= csrf_meta_tags %> <%= csp_meta_tag %> #追加箇所 <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Comforter+Brush&family=Gloria+Hallelujah&family=Mochiy+Pop+P+One&family=Reenie+Beanie&display=swap" rel="stylesheet"> #ここまで <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> </head> </html> これでcssでfont-family指定をしてあげれば、完了です。 font-familyはgooglefontのサイトからコピペすれば大丈夫です。 app/assets/stylesheets/application.css body { font-family: 'Comforter Brush', cursive; } と記述してあげると適応されます。 2. application.scssを使って導入する方法からやります。 1つ目の導入方法と大きく違う点はscssに記述をすることです 導入方法はcssの時と違うのは@importの方をコピーします。 そうしましたら、そのコードをapplication.scssに記述します。 app/assets/stylesheets/application.scss // /* // Place all the styles related to the tweets controller here. // // They will automatically be included in application.css. // // You can use Sass (SCSS) here: https://sass-lang.com/ */ #追加箇所 @import url('https://fonts.googleapis.com/css2?family=Comforter+Brush&family=Gloria+Hallelujah&family=Mochiy+Pop+P+One&family=Reenie+Beanie&display=swap'); #ここまで header { background-color: #cef0ff; height: 80px; display: flex; justify-content: space-between; align-items: center; } これでscssでfont-family指定をしてあげれば、完了です。 font-familyはgooglefontのサイトからコピペすれば大丈夫です。 app/assets/stylesheets/application.scss // /* // Place all the styles related to the tweets controller here. // // They will automatically be included in application.css. // // You can use Sass (SCSS) here: https://sass-lang.com/ */ @import url('https://fonts.googleapis.com/css2?family=Comforter+Brush&family=Gloria+Hallelujah&family=Mochiy+Pop+P+One&family=Reenie+Beanie&display=swap'); header { background-color: #cef0ff; height: 80px; display: flex; justify-content: space-between; align-items: center; font-family: 'Comforter Brush', cursive; } これで適応されます。 4.完成図 このようにフォントが変更されていたら成功です。 ５．これで以上です！！！ みなさんここまでお疲れ様でした！ これからGoogleFontを使ってより良いwebサイトを作っていってください！！！！！
- 投稿日：2022-01-25T19:16:05+09:00
【Rails API】devise_token_authで作成したコントローラにルーティングを追加したい【memo】
課題 ゲストログインを実装する際に、既存のsessions_controller.rbにメソッドを追加する api/v1/users/auth/sessions_controller.rb # frozen_string_literal: true class Api::V1::Users::Auth::SessionsController < DeviseTokenAuth::SessionsController # 今回はこれを追加！ def guest_sign_in # ゲストログイン処理 end end 問題 ルーティングをなかなか追加することができませんでした。 devise_scope :userと記載したのですが、なかなかうまくいかず・・・。 routes.rb Rails.application.routes.draw do namespace :api do namespace :v1 do ### 失敗した実装 ### devise_scope :user do post 'users/guest_sign_in', to: 'users/auth/sessions#guest_sign_in' end ### 失敗した実装 ### mount_devise_token_auth_for 'User', at: 'user/auth', controllers: { registrations: 'api/v1/users/auth/registrations', sessions: 'api/v1/users/auth/sessions', confirmations: 'api/v1/users/auth/confirmations', passwords: 'api/v1/users/auth/passwords' } end end end 解決策 devise_scope :api_v1_userと記載すると追加することができました。 routes.rb # frozen_string_literal: true Rails.application.routes.draw do namespace :api do namespace :v1 do ### 成功した実装 ### devise_scope :api_v1_user do post 'users/guest_sign_in', to: 'users/auth/sessions#guest_sign_in' end ### 成功した実装 ### mount_devise_token_auth_for 'User', at: 'user/auth', controllers: { registrations: 'api/v1/users/auth/registrations', sessions: 'api/v1/users/auth/sessions', confirmations: 'api/v1/users/auth/confirmations', passwords: 'api/v1/users/auth/passwords' } end end end devise_scope :user で追加できるものと思っていたので、かなり時間を取られました。 namespceの影響がここまで来るとは思いませんでした・・。
- 投稿日：2022-01-25T16:46:23+09:00
RubyのFileの解説
rubyのsilverを勉強していく中で、この問題が正解できなかったので、それを解説する意味でもこの記事を書かせていただきます。 この問題を正解するうえで、抑えておくべきポイントは、 w :書き込みモード。 w+ :読み書きモード。既にファイルが存在する場合は、空になります。新規作成もされます。 r :読み込みモード。 r+ :読み書きモード。ファイルの読み込みと書き込みの位置は文の先頭から。 a :追記モード。既存のファイルの文末に入力内容を追記する。 a+ :読み書きモード。ファイルの読み込み位置は先頭に、書き込み位置は常に末尾になる 1個ずつ解説していきますね w wはwriteのwと覚えれば役割がはっきりしますね。 既存のファイルに、書き込みをしていく機能なんですね。 r readのrと覚えればわかりやすいですね！ 既存のファイルを読み込む機能ですね。どんな記述がされているかなどを読みこむためのものですね。 a appendのaと覚えれば分かりやすいですね！ appendメソッドと同じように、書き込み位置は末尾になるんですね。 +がつくとどうなるか？ +がつくとどうなるか？どっちもできるようになります。例えばどういうことかというと、 wは書き込みモードですが、+がつくと読み込み機能も付加されるんです。他も同様に、ない機能が追加されるといった感じです！ IOクラスについて IOクラスとは、外部データとやり取りするための機能として、入力(Input)と出力(Output)を提供するためのものなんです。 IOはinputとoutputの頭文字をとったものなんですね。 seekメソッドに関しては、こちらの公式ドキュメントをお読みください！ seek_setは今回の問題でいえば、値は先頭からということですね。 今回の問題の正解 今回の問題でいえば、wとw+は不正解です。なぜなら、今回の問題のIO:seek_setはファイルポインタを先頭に移動するため、上書きされてしまうんですね。 表示結果がrecode2だけが表示されるんですね。 そのため、今回でいうと正解は、aとa+です 以上です！ 間違い等ございましたら、ご教示いただけると幸いです！
- 投稿日：2022-01-25T12:56:55+09:00
railsでカレンダー機能を実装する方法
はじめに この記事はプログラミング学習の備忘録です。 現在習慣化アプリを実装中です。その中でsimple_calenderを使って簡単にカレンダー機能を実装する方法について学んだので紹介します。 実装の目標 ①以下のようなカレンダーを導入する ②タスクを記録したら、カレンダーが緑色になるようにする gemfileを導入 ・gemfileに以下の記述をします。 gem 'simple_calendar', '~> 2.0' その後忘れずに、bundleinstallしましょう。 これでgemfileの導入は完了です。 モデルの設定をする 以下のようにモデルを設定します。今回はテストなのでシンプルな形で作ります。 マイグレーションファイルに以下のように記述して、「rails db:migrate」します。 t.string :title t.text :content t.datetime :start_time t.timestamps 注意点としては、t.datetime :start_timeの部分です。 start_timeで入力された日時をもとにカレンダーと紐付けます。 従って、「投稿内容をカレンダーに反映させる処理」を実装する場合には、 datetime型のstart_timeカラムを作る必要があります。 viewに表示させる 次にsimple_calenderの保有するメソッド「month_calenderメソッド」を使って、月毎のカレンダーを表示させます。 index.html.erb <%= month_calendar do |date| %> <%= date.day %> <% end %> すると以下のようなカレンダーが表示されます。 デフォルトなのでシンプルです。 投稿フォームを作る 次に投稿を行うためのフォームを作ります。 new.html.erb <%= form_with(model: @event, local: true) do |form| %> <div class="title"> <%= form.label :title %> <%= form.text_field :title %> </div> <div class="time"> <%= form.label :start_time %> <%= form.datetime_select :start_time %> </div> <div class="content"> <%= form.label :content %> <%= form.text_field :content %> </div> <div class="submit"> <%= form.submit %> </div> <% end %> 注目して欲しいのは、 <%= form.datetime_select :start_time %>です。 この記述でカレンダーと紐づけるための日時用のフォームを作っています。 カレンダーと投稿を紐づける 次にviewのカレンダーを修正します。 index.html.erb <%= month_calendar events: @events do |date, events| %> <%= date.day %> <% events.each do |event| %> <div> <%= event.title %> </div> <% end %> <% end %> datetime型のstart_timeカラムをもとにカレンダーと紐付けます。 実行すると以下の表示になります。 無事25日の場所に、無事に投稿内容を出現させる事ができました。 レイアウトを整える 次にデフォルト表示のレイアウトを整えます。 ターミナルで以下のコマンドを実行します。 rails g simple_calendar:views するとレイアウトを整えるためのviewファイルが生成されます。 このままだと特に何も変化はないので、 stylesheets/application.cssに以下のコードを追記します。 *= require simple_calendar ページを更新すると、 レイアウトを整える事ができました！ ここまでで、基本的なカレンダーの実装は完了です。 投稿すると緑色になる実装 最後に投稿すると緑色になり、継続率が分かるようにします。（習慣化アプリなどでよく実装されているものです） scssファイルに以下のように記述します。 このフォーマットはsimple_calenderのreadmeからコピペできます。 https://github.com/excid3/simple_calendar/blob/master/README.md .simple-calendar { .day {} .wday-0 {} .wday-1 {} .wday-2 {} .wday-3 {} .wday-4 {} .wday-5 {} .wday-6 {} .today {} .past {} .future {} .start-date {} .prev-month {} .next-month { } .current-month {} .has-events { background: #98fb98; } } 注目して欲しいのは、.has-events に背景色を指定しているところです。 この記述によって背景色が変化します。 これで、継続率が分かる実装ができました！ まとめ 今回はsimple_calenderを使ってカレンダー機能を導入する方法についてまとめました。 最初は難しそうだなと思っていたのですが、想像以上に簡単に実装する事ができました。 カスタマイズすれば、更に使いやすいカレンダーができると思うので、進展があればまた記事にまとめます。 参考文献 https://qiita.com/AKI3/items/109d54a35c98328d9155
- 投稿日：2022-01-25T11:39:23+09:00
【Rails】ページ遷移せずにいいねをしたい/取り消したい
みなさん、こんにちは！ 筆者は大学生限定のプログラミングスクール「GeekSalon」でメンターをしています！ 興味のある方や話だけでも聞いてみてい方はぜひのぞいてみてください? さっそく今回の本題に入っていきます！ 今回は投稿に対するいいねを、ページ遷移せずともできる/取り消せるようにしていきたいと思います。 なお、いいね機能は実装済みという前提で話を進めていくため、いいね機能をまだ実装していない人は先にそちらの実装をお願いします。 また今回の実装では部分テンプレートを用いています。部分テンプレートについての理解が怪しい方は、参考となる記事を載せておきますので、そちらも参照してください！ 実装環境 ruby 2.7.4p191 (2021-07-07 revision a21a3b7d23) [x64-mingw32] Rails 6.1.4.1 （※投稿機能、投稿に対するコメント機能は実装済みという前提で記事を書いていきます。） 実装① ～Javascriptを使えるようにする～ ページ遷移をせずに動的なプロセスを実行する方法はいくつかありますが、今回はJavascriptを用いて実装していきます。そのためにまずはJavascriptを使うことができるように記述を加えていきましょう。Javascriptと聞いて身構えたひともいるかもしれませんが、そんなに難しいプロセスは必要ないため安心してください。 まずは、view/layouts/application.html.erbの該当箇所に以下の記述を加えていきます。 view/layouts/application.html.erb <head> ＃省略 <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> ＃←この１行を追加 ＃省略 </head> これでJavascriptの記述が有効になりました。 実装② ～Viewファイルを整えよう～ Javascriptを使えるようにしたため、次はViweファイルを変更していきます。 まずは、view/likes/の配下に、_like.html.erbとcreate.js.erbとdestroy.js.erb```の３つのファイルを作成します。１つ目のファイルはアンダーバー（_）から始まる部分テンプレートであるということ、そして後半２つはhtmlファイルではなくjsファイルであるということに注意しつつファイルを作りましょう。 この後半２つのjsファイルが、likesコントローラーのcreateアクションとdestroyアクションの実行に対応したファイルとなります。 では、作成した３つのファイルにそれぞれ記述を加えていきましょう。 まずは_like.html.erbファイルへの記述です。このファイルには、投稿一覧のviewページに記述してある、いいねボタンに関する記述をそのままコピーしてきて貼り付けましょう。 貼り付けた結果は以下のようになります。 view/likes/_like.html.erb <% if user_signed_in? %> <% if current_user.already_liked?(t) %> <%= link_to tweet_like_path(id: t.id, tweet_id: t.id), method: :delete do %> <p>いいねを取り消す</p><%= t.likes.count %> <% end %> <% else %> <%= link_to tweet_likes_path(id: t.id, tweet_id: t.id), method: :post do %> <p>いいね</p><%= t.likes.count %> <% end %> <% end %> <% else %> <p>いいねの数 = </p><%= t.likes.count %> <% end %> さて、では２つのjsファイルにも記述を加えていきましょう。 それぞれのファイルに以下の記述を張り付けてください。 なお、@tweet（やt）といった変数は、自身のプロダクトに対応したものに書き換えてください。（変数tはlikes/_like.html.erbで用いた変数と同じものにする） view/likes/create.js.erb $('#likes_buttons_<%= @tweet.id %>').html("<%= j(render partial: 'likes/like', locals: {t: @tweet}) %>"); view/likes/destroy.js.erb $('#likes_buttons_<%= @tweet.id %>').html("<%= j(render partial: 'likes/like', locals: {t: @tweet}) %>"); 最後に、投稿のページ（投稿一覧ページや投稿詳細ページ）にて、_like.html.erbの記述が反映されるように、それぞれ以下の記述を加えてください。 なお、@tweetやtといった変数は、自身のプロダクトに対応したものに書き換えてください。 view/tweets/index.html.erb <div id="likes_buttons_<%= t.id %>"> <%= render partial: 'likes/like', locals: { t: t } %> </div> view/tweets/show.html.erb <div id="likes_buttons_<%= @tweet.id %>"> <%= render partial: 'likes/like', locals: { t: @tweet } %> </div> タグについているidは、create.js.erbとdestroy.js.erbとこの記述を紐づけるためのもの、<%= render ～ %>の記述は_like.html.erbを呼び込むための記述です。 さて、ここまでの記述でViewファイルは完成です。 実装③ ～コントローラーの記述変更～ 最後に、likes_controller.rbの記述を変更していきます。 まずは、viewにあるjsファイルが変数@tweetを受け取ることができるように、@tweetを定義していきます。 また、Javascriptでいいね/いいね取り消しを動的に行えるようにしている状態のため、redirectの記述も消していきます。 変更前と変更後は以下のような感じです。 変更前 likes_controller.rb def create like = current_user.likes.create(tweet_id: params[:tweet_id]) #user_idとtweet_idの二つを代入 redirect_back(fallback_location: root_path) end def destroy like = Like.find_by(tweet_id: params[:tweet_id], user_id: current_user.id) like.destroy redirect_back(fallback_location: root_path) end 変更後 likes_controller.rb def create @tweet = Tweet.find(params[:tweet_id]) like = current_user.likes.create(tweet_id: params[:tweet_id]) end def destroy @tweet = Tweet.find(params[:tweet_id]) like = Like.find_by(tweet_id: params[:tweet_id], user_id: current_user.id) like.destroy end 以上で実装は完了です！ rails sをして、自分のプロダクトでいいねボタンを押してみてください！ ページ遷移せずに、その場でいいねができるようになっているはずです。
- 投稿日：2022-01-25T02:43:58+09:00
Rails Googleアカウントでユーザ登録する方法 [SNS認証]
ゴール gooleアカウントでログインできるようになる。 前提 gem 'devise' 導入済み STEP1 Google Cloud Platformに登録 ここからアカウント登録してください！ 登録が終わったら以下の手順で設定 以下写真です。見にくくて申し訳ないです。 ↑↑↑入力必須欄以外は何もいじらずに進んでください！ 次に認証情報を作成します（よく読んでね） 現地点ではlocalhost:3000のやつだけで大丈夫です！ デプロイするときにオリジナル用の設定するの忘れないでください。 一応httpとhttpsどちらも作っておいてください http://localhost:3000/users/auth/google_oauth2/callback https://localhost:3000/users/auth/google_oauth2/callback デプロイする時にこちらを入力してください https://自分で作った名前.herokuapp.com/users/auth/google_oauth2/callback ※herokuで想定して書いてます ※本番環境では必ずhttpsでURIを登録してください！ ※httpsではなくhttpで登録するとリダイレクトURIエラーが出ちゃいました 発行されたクライアントIDとクライアントシークレットをどこかにメモっといてください。 以上でGoogle Cloud Platformの設定は終了です 見にくい写真ばかりで申し訳ないです STEP2 いざ実装へ 2-1まずはgemを入れましょう！ ※gem 'dotenv-rails'は既に入れてる場合があるので入ってる人は飛ばして大丈夫です！ Gemfile gem 'dotenv-rails' gem 'omniauth', '1.9.1' gem 'omniauth-google-oauth2' ※ gem 'omniauth'は最新バージョンだとrailsとの相性が悪いそうなので、安定しているgem 'omniauth', '1.9.1'を入れてください。 これ知らんくて２時間ぐらい沼りました笑笑 コマンドプロンプト $ bundle install 2-2 devise.rb追記 config.omniauth :google_oauth2, ENV['GOOGLE_CLIENT_ID'], ENV['GOOGLE_CLIENT_SECRET'] 特に張り付ける場所はどこでもいいですが270行目付近に関連したコメントアウトがあるのでそこら辺に上のコードをペーストしましょう。 config/initializers/devise.rb # ==> OmniAuth # Add a new OmniAuth provider. Check the wiki for more information on setting # up on your models and hooks. # config.omniauth :github, 'APP_ID', 'APP_SECRET', scope: 'user,public_repo' config.omniauth :google_oauth2, ENV['GOOGLE_CLIENT_ID'], ENV['GOOGLE_CLIENT_SECRET'] 2-3 .envと.gitignoreに記述 .envファイルに先ほど取得したクライアントIDとクライアントシークレットを追記します。 .envがないねんけど！！って人は 写真のように一番下の空間で右クリックして.envファイルを作ってあげましょう！！ ※作る階層ミスると詰むので注意してください。 .env GOOGLE_CLIENT_ID=自分のクライアントID GOOGLE_CLIENT_SECRET=自分のクライアントシークレット 続いて.gitignoreの一番下の行に.envを記述してください！ .gitignore ～省略～ .env 2-4 routes.rbの編集 deviseのコントローラを編集するので変更が反映されるように書き換えます！ routes.rb Rails.application.routes.draw do # 変更前ここから devise_for :users # 変更前ここまで # 変更後ここから devise_for :users, controllers: { omniauth_callbacks: "users/omniauth_callbacks" } # 変更後ここまで resource :hoges root 'hoges#index' end 2-5 userモデルを編集 注意事項がいくつかあるのでコピペした後よく読んで下さい！！！ その１：コメントアウトのところにも書きましたが、:validatableの後ろに「,」コンマを忘れないこと その２：ユーザーマイページを作成している人、ユーザー情報にname、profile等のカラムがある人（要はdeviseのuserカラムに色々追加してる人）は user.追加してるカラム名 = auth.info.追加してるカラム名 を追記してあげてください！！ 特別大サービスで # user.name = auth.info.name # user.profile = auth.info.profile この２つはコメントアウトに書いておいたのでコメントアウトを外すだけでいいですよ！ ※ユーザーマイページを作成している人は注意事項がもう一つあるので記事の最後まで読んで下さい！！ パスワード無しで更新する的なやつです。まぁ取り敢えず先に認証実装させましょう。 user.rb class User < ApplicationRecord # Include default devise modules. Others available are: # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable devise :database_authenticatable, :registerable, :recoverable, :rememberable, :validatable, #「validatable」の後ろにコンマ「,」をつけるのわすれずに↑↑ :omniauthable, omniauth_providers: %i[google_oauth2] # この一行を追加 # 追記部分ここから def self.from_omniauth(auth) where(provider: auth.provider, uid: auth.uid).first_or_create do |user| # ※deviseのuserカラムに nameやprofile を追加している場合は下のコメントアウトを外して使用 # user.name = auth.info.name # user.profile = auth.info.profile user.email = auth.info.email user.password = Devise.friendly_token[0,20] end end #追記部分ここまで end 2-6 マイグレーションファイル作成 認証を行う際にproviderカラムと、uidカラムを使用するのでマイグレーションファイルを作成します。 コマンドプロンプト $ rails g migration AddOuthColumnToUsers provider:string uid:string その後忘れずにrails db:migrateしましょう。 コマンドプロンプト $ rails db:migrate 2-6 コントローラー作成・編集 以下の手順でコントローラーを作成してください。 1.controllersのファイルにて(右クリックして)usersフォルダーを作成する。 ※作成するのはファイルじゃなくてフォルダーですよ！フォルダー！！！！！ 2.作成したusersフォルダーにomniauth_callbacks_controller.rbを作成する。 ※こっちはファイル作成で大丈夫です！ controllers/users/omniauth_callbacks_controller.rb # frozen_string_literal: true class Users::OmniauthCallbacksController < Devise::OmniauthCallbacksController # callback for google def google_oauth2 callback_for(:google) end def callback_for(provider) # 先ほどuser.rbで記述したメソッド(from_omniauth)をここで使っています # 'request.env["omniauth.auth"]'この中にgoogoleアカウントから取得したメールアドレスや、名前と言ったデータが含まれています @user = User.from_omniauth(request.env["omniauth.auth"]) sign_in_and_redirect @user, event: :authentication set_flash_message(:notice, :success, kind: "#{provider}".capitalize) if is_navigational_format? end def failure redirect_to root_path end end ※一番上のマジックコメント# frozen_string_literal: trueも忘れずに入れてください！！ なんやねんそれ！って人はこちら 2-7 ラスト！登録ボタン作成 いよいよラストです。 サインインページのボタンを作成しましょう！ views/users/shared/_links.html.erb #変更前 <%- if devise_mapping.omniauthable? %> <%- resource_class.omniauth_providers.each do |provider| %> <%= link_to "Sign in with #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider), method: :post %><br /> <% end %> <% end %> #変更後 <%- if devise_mapping.omniauthable? %> <%= button_to 'Sign in with Google', user_google_oauth2_omniauth_authorize_path %> <% end %> 以上で認証の実装自体は終わりです。 STEP3 マイページ、ユーザー情報を更新する場合は必読 先ほど※ユーザーマイページを作成している人は注意事項がもう一つあるので記事の最後まで読んで下さい！！と書いたと思います。 ユーザー情報を更新する時、何をしないといけないですか？？ そうです！現在のパスワードを入力しないといけません ただ今回実装したGoogleアカウントで認証した場合、ランダムに自動生成されるようになってしまっています。 user.rb user.password = Devise.friendly_token[0,20] これです。。。。 こちらを他のカラムの記述同様に書き直してもいいのですが、 流石に自分のgoogleアカウントのパスワードを晒すのは、、、、 って感じなので解決策として、、、、 パスワードなしでマイページを更新できるようにします！ 基本的にこの記事で実装できますが、混乱する点が多いので解説します！！ 手順はこの３つ 1. deviseコントローラの作成（routes.rbの編集） 2. registrations_controller.rbの編集 3. ユーザー編集画面の編集 3-1 deviseコントローラの作成 ※ざっと目を通してからの方が事故るの防げます コマンドプロンプト $ rails g devise:controllers users 上記コマンドを実行すると、、 コマンドプロンプト Overwrite C:/Users/～省略～/app/controllers/users/omniauth_callbacks_controller.rb? (enter "h" for help) [Ynaqdhm] omniauth_callbacks_controller.rb? (enter "h" for help) [Ynaqdhm] 上書きするんかどうするんだい？？的な文章がでてくると思います。 コマンドプロンプト Overwrite ～省略～ /omniauth_callbacks_controller.rb? (enter "h" for help) [Ynaqdhm] h (enter "h" for help) [Ynaqdhm] h 「h」を打って何が出来るか確認しましょう！！ コマンドプロンプト Y - yes, overwrite n - no, do not overwrite a - all, overwrite this and all others q - quit, abort d - diff, show the differences between the old and the new h - help, show this help m - merge, run merge tool 色々出てきましたね笑笑 コマンドプロンプト Overwrite ～省略～ /omniauth_callbacks_controller.rb? (enter "h" for help) [Ynaqdhm] n 今回は上書きしないので(enter "h" for help) [Ynaqdhm] n 「n」を選んでenterしてください！ routes.rbの編集 以下のように編集してください！ ※users/omniauth_callbacksの後ろに「,」つけるのお忘れなく！！！ routes.rb # before devise_for :users, controllers: { omniauth_callbacks: "users/omniauth_callbacks" } #after devise_for :users, controllers: { omniauth_callbacks: "users/omniauth_callbacks" , registrations: "users/registrations" } 3-2 registrations_controller.rbの編集 先ほど作成したcontrollers/users/registrations_controller.rbを開いてください。 40行目付近の#protectedのコメントアウト外して以下を追記してください。 controllers/users/registrations_controller.rb # コメントアウト外す protected #追記 def update_resource(resource, params) resource.update_without_password(params) end 3-3 これでほんまのほんまにラスト ～パスワード更新関連の記述削除～ users/registrations/edit.html.erbにて以下の記述を削除してください views/users/registrations/edit.html.erb # 以下の記述を削除 <div class="field"> <%= f.label :password %> <i>(leave blank if you don't want to change it)</i><br /> <%= f.password_field :password, autocomplete: "new-password" %> <% if @minimum_password_length %> <br /> <em><%= @minimum_password_length %> characters minimum</em> <% end %> </div> <div class="field"> <%= f.label :password_confirmation %><br /> <%= f.password_field :password_confirmation, autocomplete: "new-password" %> </div> <div class="field"> <%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br /> <%= f.password_field :current_password, autocomplete: "current-password" %> </div> サーバーを立ち上げて動作確認をしてください！ 参考にさせていただいた記事 https://qiita.com/kakki0315/items/b1f0fd10432b273b7e90 https://qiita.com/akioneway94/items/35641ad30c2acb23b562 https://qiita.com/kizakey18/items/aed3c0830c67f19c65a0 https://qiita.com/d0ne1s/items/e1ee23ea23343d6aaa34 https://qiita.com/1992_momotaro/items/d8a220be528a7af69deb 先人の皆さまありがとうございました。 以上で終わりです。お疲れ様でした！何かエラー等あれば連絡してください！！