LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@likapantrip

【Rails】SNSアカウントでのログイン機能について

Posted at

記事概要

Ruby on RailsにSNSアカウントでのログイン機能を実装する方法について、まとめる

前提

  • Ruby on Railsでアプリケーションを作成している
  • Gem「pry-rails」はインストール済みである
  • Meta for Developersアカウントは登録済みである
  • Googleアカウントは登録済みである
  • 本番環境はRenderにデプロイしている
    AWSでデプロイをしているアプリケーションでSNS認証を使用したい場合、ドメインの取得やセキュリティの観点からSSL化が必須になる。費用が発生する実装となるため、注意

サンプルアプリ(GitHub)

omniauth(Gem)

Google、Facebook、twitter等のSNSアカウントを用いてユーザー登録やログインなどを実装できるgem

※Omniauth認証はCSRF脆弱性が指摘されているため、omniauth-rails_csrf_protectionというGemをインストールして対策する

OmniAuthのGithub

google-oauth2のGithub

手順1(外部APIの設定)

Facebookの設定

  1. アプリ作成
    1. Meta for developersにアクセスする
    2. 画面上部のナビバーにある「マイアプリ」をクリックする
    3. 「アプリを作成」をクリックする
    4. 「アプリの詳細」が表示されるので、「アプリ名」に任意のアプリ名を入力し、「次へ」をクリックする
      ※今回のアプリ名は「sns」
    5. 「ユースケース」が表示されるので、「その他」を選択し、「次へ」をクリックする
    6. 「アプリタイプ選択」が表示されるので、「生活者」を選択し、「次へ」をクリックする
    7. アプリの内容を確認し、「アプリを作成」をクリックする
    8. 下記のような画面が表示され、アプリ作成が完了
      Image from Gyazo
  2. 設定
    1. 「アプリの設定」を選択し、「ベーシック」をクリックする
    2. 後ほど利用する「アプリID」「app secret」を確認する
    3. アプリのURL（プラットフォーム）を登録するため、画面最下部の「プラットフォームを追加」をクリックする
    4. 「Website」を選択し、「次へ」をクリックする
    5. サイトURL欄にhttp://localhost:3000と入力する
    6. 「変更を保存」をクリックする

Googleの設定

  1. プロジェクト作成
    1. こちらのサイトにアクセスする
    2. ヘッダーにある「プロジェクトの選択」をクリックする
    3. モーダルウィンドウ内の右上にある「新しいプロジェクト」をクリックする
    4. 「プロジェクト名」に任意のプロジェクト名を入力し、「作成」をクリックする
      ※場所は「組織なし」のままでOK
      ※今回のプロジェクト名は「snsgoogle」
  2. OAuth同意
    1. 画面左側の「OAuth同意画面」をクリックする
    2. 「開始」をクリックする
    3. アプリ情報にある「アプリ名」に任意のアプリ名を入力する
      ※今回のアプリ名は「sns」
    4. アプリ情報にある「ユーザーサポートメール」は、自身のメールアドレスを選択する
    5. 「次へ」をクリックする
    6. 対象は「外部」を選択し、「次へ」をクリックする
    7. 連絡先情報にある「メールアドレス」に自身のメールアドレスを入力し、「次へ」をクリックする
    8. ポリシーに同意し、「続行」をクリックする
    9. 「作成」をクリックする
  3. 認証情報
    1. ナビゲーションメニュー＞APIとサービス＞認証情報 をクリックする
    2. ヘッダー付近に表示されている「＋ 認証情報を作成」をクリックする
    3. プルダウンリストにある「OAuthクライアント ID」をクリックする
    4. 「アプリケーションの種類」は、「ウェブアプリケーション」を選択する
    5. 「承認済みのリダイレクト URI」の「＋URI を追加」クリックする
    6. http://localhost:3000/users/auth/google_oauth2/callbackを入力する
    7. 「作成」をクリックする
    8. 後ほど利用する「クライアント ID」「クライアント シークレット」を確認する
  4. ライブラリ
    1. 「ライブラリ」をクリックする
    2. 「google+ API」と検索し、「google+ API」を選択する
    3. 「有効にする」をクリックする

手順2(アプリの作成)

ユーザー管理機能を実装

  1. usersコントローラーを作成する 
    % rails g controller users
  2. ルーティングを編集する
    config/routes.rb
    Rails.application.routes.draw do
  root 'users#index'
  resources :users, only: :new
end
  3. deviseをインストールする
    詳細は、こちらを参照
  4. devise関連のコマンドを実行する 
    # deviseの設定ファイルをRailsアプリケーションにインストールするコマンド
% rails g devise:install

# Userモデルの作成コマンド
% rails g devise user

# deviseのビューをインストールするコマンド
% rails g devise:views
  5. ニックネーム、苗字、名前、誕生日カラムを追加するため、マイグレーションファイルを編集する
    db/migrate/XXXXXXXXXXXXXXXX_devise_create_users.rb
    # frozen_string_literal: true

class DeviseCreateUsers < ActiveRecord::Migration[7.1]
  def change
    create_table :users do |t|
      t.string :nickname, null: false
      t.string :lastname, null: false
      t.string :firstname, null: false
      t.date   :birthday, null: false

      ## Database authenticatable
      t.string :email,              null: false, default: ""
      t.string :encrypted_password, null: false, default: ""
      
      # 省略
  6. マイグレートのコマンドを実行する 
    % rails db:migrate
  7. 追加したカラムに対応するフォームを設定するため、app/views/devise/registrations/new.html.erbのビューファイルを編集する 
    <h2>Sign up</h2>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <%= render "devise/shared/error_messages", resource: resource %>
  
  <%#= ニックネームカラム %>
  <div class="field">
    <%= f.label :nickname %><br />
    <%= f.text_field :nickname, autofocus: true %>
  </div>

  <%#= 苗字カラム %>
  <div class="field">
    <%= f.label :lastname %><br />
    <%= f.text_field :lastname %>
  </div>

  <%#= 名前カラム %>
  <div class="field">
    <%= f.label :firstname %><br />
    <%= f.text_field :firstname %>
  </div>

  <%#= 誕生日カラム %>
  <div class="field">
    <%= f.label :birthday %><br />
    <%= f.date_select :birthday, start_year: 1950, end_year: 2019 %>
  </div>

  <div class="field">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
  </div>
  
  <%#= 省略 %>
  8. トップページを設定するため、app/views/users/index.html.erbを手動作成する
  9. app/views/users/index.html.erbを編集する 
    <% if user_signed_in? %>
  <li><%= "#{current_user.nickname}でログイン中" %></li>
  <li><%= link_to 'ログアウト', destroy_user_session_path, data: { turbo_method: :delete } %></li>
<% else %>
  <p>ログインしていません</p>
  <li><%= link_to 'ログイン', new_user_session_path %></li>
  <li><%= link_to '新規登録', new_user_path %></li>
<% end %>
  10. 新規登録ページを設定するため、app/views/users/new.html.erbを手動作成する
  11. app/views/users/new.html.erbを編集する 
    <%= link_to "メールアドレスで登録", new_user_registration_path%>
  12. 追加した4つのカラムの値を送信できるようにするため、コントローラーを編集する
    app/contorollers/application_controller.rb
    class ApplicationController < ActionController::Base
  before_action :configure_permitted_parameters, if: :devise_controller?

  private
  def configure_permitted_parameters
    # ニックネーム、苗字、名前、誕生日カラムの値を送信できるようにする
    devise_parameter_sanitizer.permit(:sign_up, keys: [:nickname, :lastname, :firstname, :birthday])
  end
end
  13. 実装結果をブラウザで確認する
    1. パスの確認
      Image from Gyazo
    2. 新規アカウント登録の確認
      Image from Gyazo

SNS認証を実装

  1. omniauthというGemをインストールする
    詳細は、こちらを参照
  2. 環境変数を設定する
    1. ターミナルでコマンドを実行し、環境変数ファイルを開く 
      % vim ~/.zshrc
    2. iを押してインサートモードに移行する
    3. 最下部に下記を追記する。※既存の記述は消去しない 
      export FACEBOOK_CLIENT_ID='メモしたアプリID'
export FACEBOOK_CLIENT_SECRET='メモしたapp secret'
export GOOGLE_CLIENT_ID='メモしたクライアントID'
export GOOGLE_CLIENT_SECRET='メモしたクライアントシークレット'
    4. 編集が終わったらescapeキーを押し、:wqと入力して保存して終了する
    5. ターミナルでコマンドを実行し、設定を反映させる 
      % source ~/.zshrc
  3. 環境変数が読み込めるか確認する
    1. コンソールを起動する 
      % rails c
    2. コマンドを実行し、環境変数を確認する 
      irb(main):001> ENV['FACEBOOK_CLIENT_ID']
=> "設定しアプリID" # 数字だけ
irb(main):002> ENV['FACEBOOK_CLIENT_SECRET']
=> "設定したapp secret" # 数字と文字列
irb(main):003> ENV['GOOGLE_CLIENT_ID']
=> "設定したクライアントID" # 末尾がgoogleusercontent.com
irb(main):004> ENV['GOOGLE_CLIENT_SECRET']
=> "設定したクライアントシークレット" # 英数字や_(アンダーバー)が含まれる
  4. アプリ側で環境変数を読み込む記述を行う
    config/initializers/devise.rb
    # 省略

Devise.setup do |config|
  
  # 省略
  
  config.omniauth :facebook,ENV['FACEBOOK_CLIENT_ID'],ENV['FACEBOOK_CLIENT_SECRET']
  config.omniauth :google_oauth2,ENV['GOOGLE_CLIENT_ID'],ENV['GOOGLE_CLIENT_SECRET']
end

SNS認証のレスポンスを把握

Image from Gyazo

レスポンスの中の、uidとproviderをアプリケーションのデータベースに、ユーザー情報（誕生日やフルネームなど）とともに保存する

ただし、「SNS認証とユーザー登録のタイミングが異なる」仕様であるため、SNS認証時にはusersテーブルのレコードを作成することはできない。そのため、SNSに関わる別テーブルを用意した方が取り扱いは簡単

  1. SNS認証時の情報を保存するSnsCredentialモデルを作成する 
    % rails g model sns_credential
  2. Userモデルとのアソシエーションのために、外部キーとしてuser_idを保持するように、マイグレーションファイルを編集する
    db/migrate/XXXXXXXXXXXXXXXX_create_sns_credentials.rb
    class CreateSnsCredentials < ActiveRecord::Migration[7.1]
  def change
    create_table :sns_credentials do |t|
      t.string :provider
      t.string :uid
      t.references :user,  foreign_key: true
      t.timestamps
    end
  end
end
  3. コマンドを実行し、データベースに反映する 
    % rails db:migrate
  4. deviseでOmniAuthを使用できるようにするため、Userモデルを編集する
    app/models/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,
         :omniauthable, # Omniauthによる認証ができるようにする
         omniauth_providers: [:facebook, :google_oauth2] # FacebookとGoogleのOmniAuthを使用できる
end
  5. Userモデルのアソシエーションを設定する
    app/models/user.rb
      # 省略
  
  has_many :sns_credentials
end
  6. SnsCredentialモデルのアソシエーションを設定する
    app/models/sns_credential.rb
    class SnsCredential < ApplicationRecord
  belongs_to :user
end
  7. コマンドを実行し、deviseを再設定する 
    % rails g devise:controllers users
    controllers/users以下にdeviseのクラスを継承したコントローラーが生成される
    このコントローラー内に標準で実装されているdeviseの設定を上書きすることによって、deviseが提供するアクションの内容を再設定できる
  8. 生成したコントローラーを使用させるためにdeviseのルーティングを変更する
    config/routes.rb
    Rails.application.routes.draw do
  devise_for :users, controllers: {
    omniauth_callbacks: 'users/omniauth_callbacks',
    registrations: 'users/registrations'
  }
  root 'users#index'
  resources :users, only: :new
end

SNS認証を実現するためのメソッドを実装

Image from Gyazo

手順 処理内容
① Facebook（またはGoogle）での認証が開始される
② Facebook（またはGoogle）側にリクエストが送られる
③ 認証を経て、コントローラーにSNSに登録されている情報が返される
④ SNSの情報から、ユーザー情報のみを取得して、既存のユーザー情報と照合を行う
⑤ 照合結果から、今回SNSで認証されたユーザーが、すでにアプリケーションに登録されているユーザーなのか判断する
⑥ 照合の結果、既存のユーザーが存在しない場合は、新規登録画面に遷移する
⑦ すでに同じ情報のユーザーがアプリケーションのDBに存在している場合は、ログイン処理を行う
  1. authorizationを定義する
    app/controllers/users/omniauth_callbacks_controller.rb
    # frozen_string_literal: true

class Users::OmniauthCallbacksController < Devise::OmniauthCallbacksController
  private
  def authorization
    @user = User.from_omniauth(request.env["omniauth.auth"])
  end
end
  2. authorizationを呼び出す「facebook」と「google_oauth2」というアクションを定義する
    app/controllers/users/omniauth_callbacks_controller.rb
    # frozen_string_literal: true

class Users::OmniauthCallbacksController < Devise::OmniauthCallbacksController
  def facebook
    authorization
  end

  def google_oauth2
    authorization
  end

private
 def authorization
  @user = User.from_omniauth(request.env["omniauth.auth"])
 end
end
  3. 記述したアクションを呼び出せるように、app/views/users/new.html.erbを編集する 
    <%= link_to "メールアドレスで登録", new_user_registration_path%>

<%= button_to "Facebookで登録", user_facebook_omniauth_authorize_path, data: { turbo: false } %>
<%= button_to "Googleで登録", user_google_oauth2_omniauth_authorize_path, data: { turbo: false } %>
    ※コードの記述方法は、OmniAuthのGitHubを参照
    ※Railsアプリを高速化するための「turbo」をオフにするため、data: { turbo: false }を記述。turboによって非同期通信が行われると認証処理後のリダイレクトがうまくいかないため、オフにする
  4. Userモデルにメソッドを作成する
    app/models/user.rb
      # 省略
  
  has_many :sns_credentials

  def self.from_omniauth(auth)
  end
end
  5. omniauth_callbacks_controller.rbに記述したUser.from_omniauthも呼び出せるようになったため、値を確認する
    1. binding.pryを追記する
      app/models/user.rb
        # 処理
  has_many :sns_credentials

  def self.from_omniauth(auth)
    binding.pry # 処理を停止させるために追記
  end
end
    2. ブラウザで「新規登録」をクリックする
    3. 「Facebookで登録」をクリックする
    4. 「[アカウント名]としてログイン」をクリックする
    5. ターミナルで、処理が停止していることを確認する
    6. authと入力して実行すると、Facebookに登録済みのアカウント情報が表示される
    7. binding.pryの記述を削除する
  6. メソッドの中身を編集する
    app/models/user.rb
      # 省略
  
  def self.from_omniauth(auth)
    # SNS認証を行ったことがあるかを判断し、存在しない場合はデータベースに保存
    sns = SnsCredential.where(provider: auth.provider, uid: auth.uid).first_or_create
    # SNS認証したことがあればアソシエーションで取得し、無ければemailでユーザー検索して取得orビルド(保存はしない)
    user = User.where(email: auth.info.email).first_or_initialize(
      nickname: auth.info.name,
      email: auth.info.email
    )
  end
end
  7. コントローラーを編集する
    app/controllers/users/omniauth_callbacks_controller.rb
    # 省略

  private
  def authorization
    # Userモデルから返ってきた値を＠userに代入
    @user = User.from_omniauth(request.env["omniauth.auth"])

    if @user.persisted? #ユーザー情報が登録済みなので、新規登録ではなくログイン処理を行う
      sign_in_and_redirect @user, event: :authentication
    else #ユーザー情報が未登録なので、新規登録画面へ遷移する
      render template: 'devise/registrations/new'
    end
  end
end
  8. ブラウザで確認する
    1. sourceコマンドを再実行する 
      % source ~/.zshrc
    2. サーバーを再起動する
    3. ブラウザで「新規登録」をクリックする
    4. 「Facebookで登録」をクリックする
    5. 「[アカウント名]としてログイン」をクリックする
    6. 新規登録画面が開き、ニックネーム・メールアドレス項目が入力済みであることを確認する
    7. その他の必要情報を入力し、アカウント作成できることを確認する
  9. Userモデルを編集する
    app/models/user.rb
      # 省略
  
  def self.from_omniauth(auth)
    # SNS認証を行ったことがあるかを判断し、存在しない場合はデータベースに保存
    sns = SnsCredential.where(provider: auth.provider, uid: auth.uid).first_or_create
    # SNS認証したことがあればアソシエーションで取得し、無ければemailでユーザー検索して取得orビルド(保存はしない)
    user = User.where(email: auth.info.email).first_or_initialize(
      nickname: auth.info.name,
      email: auth.info.email
    )
    # userが登録済みであるか判断
    if user.persisted?
      sns.user = user # SnsCredentialモデルとUserモデルを紐づける
      sns.save
    end
    user
  end
end
  10. OmniAuthのリンクは新規登録とログインを兼ねているので、表示する文字だけ変更してログインのビューapp/views/devise/sessions/new.html.erbに追加する 
    <h2>Log in</h2>
<%= button_to 'Facebookでログイン', user_facebook_omniauth_authorize_path, data: { turbo: false } %>
<%= button_to 'Googleでログイン', user_google_oauth2_omniauth_authorize_path, data: { turbo: false } %>
<br>

<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>

<%#= 省略 %>
  11. app/views/devise/shared/_links.html.erbの下記記述を削除する 
    <%- if devise_mapping.omniauthable? %>
  <%- resource_class.omniauth_providers.each do |provider| %>
    <%= button_to "Sign in with #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider), data: { turbo: false } %><br />
  <% end %>
<% end %>
  12. ブラウザで確認する
    1. ブラウザで「ログイン」をクリックする
    2. 「Facebookでログイン」をクリックする
    3. 「[アカウント名]としてログイン」をクリックする
    4. 登録済みユーザーでログインできることを確認する

SNS認証時にはパスワード入力を不要にする

  1. アソシエーションにオプションを設定する
    app/models/sns_credential.rb
    class SnsCredential < ApplicationRecord
  belongs_to :user, optional: true # 外部キーの値がない場合でも保存ができる
end
    optional: trueを設定すると、レコード保存時に外部キーの値がない場合でも保存ができる
  2. Userモデルを編集する
    app/models/user.rb
      def self.from_omniauth(auth)
    # SNS認証を行ったことがあるかを判断し、存在しない場合はデータベースに保存
    sns = SnsCredential.where(provider: auth.provider, uid: auth.uid).first_or_create
    # SNS認証したことがあればアソシエーションで取得し、無ければemailでユーザー検索して取得orビルド(保存はしない)
    user = User.where(email: auth.info.email).first_or_initialize(
      nickname: auth.info.name,
      email: auth.info.email
    )
    # userが登録済みであるか判断
    if user.persisted?
      sns.user = user # SnsCredentialモデルとUserモデルを紐づける
      sns.save
    end
    { user: user, sns: sns } # snsに入っているsns_idをビューで扱えるようにするため、コントローラーに渡す
  end
end
    SnsCredentialモデルにoptional: trueを付与したので、3行目で外部キーのないレコードが保存される
  3. Userモデルから送られたデータをビューで扱えるようにするため、コントローラーを編集する
    app/controllers/users/omniauth_callbacks_controller.rb
      # 省略
  private
  def authorization
    # Userモデルから返ってきた値を@sns_infoに代入
    @sns_info = User.from_omniauth(request.env["omniauth.auth"])
    # @userには「nickname」と「email」の情報を保持させる
    @user = @sns_info[:user]

    if @user.persisted? #ユーザー情報が登録済みなので、新規登録ではなくログイン処理を行う
      sign_in_and_redirect @user, event: :authentication
    else #ユーザー情報が未登録なので、新規登録画面へ遷移する
      @sns_id = @sns_info[:sns].id # SNS認証の判断は、idのみで行う
      render template: 'devise/registrations/new'
    end
  end
end
  4. app/views/devise/registrations/new.html.erbに、SNS認証を行っているか、行っていないかの条件分岐を記述する 
      <%#= 省略 %>
  
  <div class="field">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
  </div>

  <%#= SNS認証を行っているか判断 %>
  <%if @sns_id.present? %>
    <%#= SNS認証を行なっている場合、パスワード項目は表示されない %>
    <%= hidden_field_tag :sns_auth, true %>
  <% else %>
    <div class="field">
      <%= f.label :password %>
      <% @minimum_password_length %>
      <em>(<%= @minimum_password_length %> characters minimum)</em>
      <br />
      <%= f.password_field :password, autocomplete: "new-password" %>
    </div>

    <div class="field">
      <%= f.label :password_confirmation %><br />
      <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
    </div>
  <% end %>

  <div class="actions">
    <%= f.submit "Sign up" %>
  </div>
<% end %>
  5. createアクションのコメントアウトを外して編集する
    app/controllers/users/registrations_controller.rb
    # frozen_string_literal: true

class Users::RegistrationsController < Devise::RegistrationsController
  # before_action :configure_sign_up_params, only: [:create]
  # before_action :configure_account_update_params, only: [:update]

  # GET /resource/sign_up
  # def new
  #   super
  # end

  # POST /resource
  def create
    # params[:sns_auth]を取得した時だけDevise.friendly_tokenを使ってパスワードを自動生成
    if params[:sns_auth] == 'true'
      pass = Devise.friendly_token
      params[:user][:password] = pass
      params[:user][:password_confirmation] = pass
    end
    # superメソッドでdeviseのregistrations#createを実行させる
    super
  end
  
  # 省略
  6. ブラウザで確認する
    1. DBをリセットする 
      % rails db:migrate:reset
    2. サーバーを再起動する
    3. ブラウザで「新規登録」をクリックする
    4. 「Facebookで登録」をクリックする
    5. 「[アカウント名]としてログイン」をクリックする
    6. 新規登録画面が開き、下記であることを確認する
      • ニックネーム・メールアドレス項目が入力済み
      • パスワード入力項目がない
    7. その他の必要情報を入力し、アカウント作成できることを確認する
    8. 「ログアウト」をクリックする
    9. 「ログイン」をクリックする
    10. 「Facebookでログイン」をクリックする
    11. 「[アカウント名]としてログイン」をクリックする
    12. 登録済みユーザーでログインできることを確認する

手順3(SNS認証を本番環境で利用する)

Renderにアプリをデプロイする

Renderへのデプロイ方法は、こちらを参照

Renderでのデプロイ時に環境変数を設定するが、以下の４つの変数も必ず設定する

変数名 変数の値
FACEBOOK_CLIENT_ID FacebookアプリのID
FACEBOOK_CLIENT_SECRET Facebookアプリのapp secret
GOOGLE_CLIENT_ID GoogleアプリのクライアントID
GOOGLE_CLIENT_SECRET Googleアプリのクライアントシークレット

Facebookの設定

ローカル開発ではこの作業を省略できるが、本番環境では必須設定

  1. facebook for developersへ、アクセスする
  2. ヘッダーにある「マイアプリ」をクリックする
  3. 一覧の中から、先ほど作成したアプリを選択する
  4. 左のメニューから「Facebookログイン＞設定」をクリックする
  5. 「有効なOAuthリダイレクトURI」に、（アプリのURL）/users/auth/facebook/callbackを入力する 
    入力例：
https://mini-sns-41468.onrender.com/users/auth/facebook/callback
  6. 「変更を保存」をクリックする
  7. Render環境にて、FacebookのSNS認証でアカウント登録・ログインできることを確認する

Googleの設定

  1. こちらのサイトへ、アクセスする
  2. 作成したプロジェクトを選択し、認証情報をクリックする
  3. 作成した認証情報をクリックする
  4. 「承認済みのリダイレクトURI」に（アプリのURL）/users/auth/google_oauth2/callbackを追記する 
    入力例：
https://mini-sns-41468.onrender.com/users/auth/google_oauth2/callback
  5. 「保存」をクリックする
  6. Render環境にて、GoogleのSNS認証でアカウント登録・ログインできることを確認する
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?