かんたん登録のつくりかた

かんたん登録とは？

ワンクリックでSign-upとLoginができるユーザーフレンドリーな機能

準備

users/index.html.erbに以下の記述を追加

<%= link_to "簡単ログイン", easy_login_path, method: :get, class: 'btn slide-bg' %>

routes.rbに以下の記述を追加

get "easy_login" => "users#easy_login"

続きを読む →

form_forからform_withに移行するには？

コメントを残す

form_forからform_withに移行する

before:users/_form.html.erb

<%= form_for user do |f| %>
  <%= render 'shared/error_messages', object: f.object %>
    <div class="inputWithIcon">
    <%= f.text_field :name, class: 'form-field', placeholder: 'Your name' %>
    </div>
  <div class="inputWithIcon">
    <%= f.email_field :email, class: 'form-field', placeholder: 'Email' %>
  </div>
    <%= f.password_field :password, class: 'form-field', placeholder: 'パスワード' %>
    <%= f.password_field :password_confirmation, class: 'form-field', placeholder: 'パスワード確認' %>
    <%= f.submit "登録", class: "btn btn-submit" %>
<% end %>

after:users/_form.html.erb

<div class="new-todo-list-form">
  <%= form_with model: user, local: true do |f| %>
    <%= render 'shared/error_messages', object: f.object %>
      <div class="inputWithIcon">
      <%= f.text_field :name, class: 'form-field', placeholder: 'Your name' %>
      </div>
    <div class="inputWithIcon">
      <%= f.email_field :email, class: 'form-field', placeholder: 'Email' %>
    </div>
      <%= f.password_field :password, class: 'form-field', placeholder: 'パスワード' %>
      <%= f.password_field :password_confirmation, class: 'form-field', placeholder: 'パスワード確認' %>
      <%= f.submit "登録", class: "btn btn-submit" %>
  <% end %>
</div>

local: trueを入れたのはエラーメッセージを表示させるため。

shared/_error_messages.html.erb

<% if object.errors.any? %>
  <div id="error_explanation">
    <div class="alert alert-danger">
      <% object.errors.full_messages.each do |msg| %>
        <li><h4><%= msg %></h4></li>
      <% end %></div>
  </div>
<% end %>

local: trueがない場合表示されないが、local: trueを追加されば表示される。

スコープのprefixを指定するとき(ログイン機能など)

before:sessions/new.html.erb

<h1>ログイン</h1>
<div class="login-form">
  <%= form_for(:session, url: login_path) do |f| %>
    <%= f.label :メールアドレス, class: 'label' %>
    <%= f.email_field :email, class: 'form-field' %>
    <%= f.label :パスワード, class: 'label' %>
    <%= f.password_field :password, class: 'form-field' %>
    <%= f.label :次回ログインを省略する, class: "checkbox inline" do %>
      <%= f.check_box :remember_me %>
      <span>次回ログインを省略する</span>
    <% end %>
    <%= f.submit "ログイン", class: "btn btn-submit" %>
  <% end %>
  <br>
  <%= link_to(content_tag(:i, 'はじめての方はこちら',
                          class: "fas fa-angle-double-right faa-horizontal animated-hover fa-pull-left",
                          style: "color: sienna;"), new_user_path) %>
</div>

after:sessions/new.html.erb

<h1>ログイン</h1>
<div class="login-form">
  <%= form_with scope: :session, url: login_path do |f| %>
    <div class="inputWithIcon">
    <%= f.email_field :email, class: 'form-field', placeholder: 'Email' %>
    <%= f.password_field :password, class: 'form-field', placeholder: 'パスワード' %>
    </div>
    <%= f.label :次回ログインを省略する, class: "checkbox inline" do %>
      <%= f.check_box :remember_me %>
      <span>次回ログインを省略する</span>
    <% end %>
    <%= f.submit "ログイン", class: "btn btn-submit" %>
  <% end %>
  <br>
  <%= link_to(content_tag(:i, 'はじめての方はこちら',
                          class: "fas fa-angle-double-right faa-horizontal animated-hover fa-pull-left",
                          style: "color: sienna;"), new_user_path) %>
</div>

scopeを加えるだけ。

unexpected end-of-input(エラー対処録)

コメントを残す

Railsで開発中の時遭遇

エラーにあった時の解決法

syntax error, unexpected end-of-input, expecting keyword_end end

とりあえず翻訳機にかけると↓

構文エラー、予期しない入力終了、keyword_end を期待しています。

となっているので以下を記述↓(Railsの場合)

<% end %>

問題が解消された！

if文などでendが必要なときにendが記述されてないときによくあるエラーのようです。

Could not find xxxx in any of the sources(エラー対処法)

コメントを残す

Could not find xxxx in any of the sourcesとは？

経緯：Macの空き容量が少なくなっていたのでClean / Purge dataで空き容量を増やした後に、

Dockerでdocker-compose upでコンテナを起動した時に発生したエラーです。

解決方法

gemfile.lockの記述を全て削除(まっさらな状態)した後に以下のコマンドをします。

$ rm gemfile.lock

$ docker-compose build

$ docker-compose up

エラーが出なくなっているのを確認したらOKです。

destroy_allの使い方(1対他モデルの一括削除)

コメントを残す

destroy_allとは？

すでにテーブルに存在するレコードを一括で削除するメソッドです。

テーブルの状態

usersテーブル(1)にtasksテーブル(多)がhas_manyで紐付いています。

user.rbはこのようになっています。

# == Schema Information
#
# Table name: users
#
#  id              :bigint           not null, primary key
#  admin           :boolean          default(FALSE)
#  email           :string(255)
#  image           :string(255)
#  name            :string(255)
#  password_digest :string(255)
#  remember_digest :string(255)
#  created_at      :datetime         not null
#  updated_at      :datetime         not null
#

class User < ApplicationRecord
  has_many :tasks, dependent: :destroy
  accepts_nested_attributes_for :tasks, allow_destroy: true

1対多の場合は1の方(例としてuserとする)has_many :tasks, dependent: :destroyを追加記述することで、userを消したときに紐付いているtaskも削除されるようにできる！

sessions_helper.rbはこのようになっています(ほぼRailsチュートリアルと同じです)

module SessionsHelper

  # 記憶トークンcookieに対応するユーザーを返す
  def current_user
    if (user_id = session[:user_id])
      @current_user ||= User.find_by(id: user_id)
    elsif (user_id = cookies.signed[:user_id])
      user = User.find_by(id: user_id)
      if user && user.authenticated?(cookies[:remember_token])
        log_in user
        @current_user = user
      end
    end
  end

  # 渡されたユーザーがログイン済みユーザーであればtrueを返す
  def current_user?(user)
    user == current_user
  end

  # 記憶したURL (もしくはデフォルト値) にリダイレクト(フレンドリーフォワーディング)
  def redirect_back_or(default)
    redirect_to(session[:forwarding_url] || default)
    session.delete(:forwarding_url)
  end

end

task.rbはこのようになっています

続きを読む →

FizzBuzz問題(Ruby)

コメントを残す

FizzBuzz問題の復習をば

問題

整数 N が入力として与えられます。
1からNまでの整数を1から順に表示してください。
ただし、表示しようとしている数値が、
・3の倍数かつ5の倍数のときには、”Fizz Buzz”
・3の倍数のときには、”Fizz”
・5の倍数のときには、”Buzz”

を数値の代わりに表示してください。

入力例

出力例2

1
2
Fizz
4
Buzz
Fizz
7
8
Fizz
Buzz
11
Fizz
13
14
Fizz Buzz
16
17
Fizz

※ポイント

1.繰り返しを使う
2.繰り返しは基本0から始まってしまう
3.if文で各値を振り分けてあげる
4.０のとき判定がFizuBuzzと出力されてしまう
5.それをどうするか考える。

解答範囲を使う場合(for inを使う)範囲オブジェクトの範囲分同じ処理を繰り返したり、配列の要素を順番に取得したい場合に使用するので

# Nを受け取る
n = gets.to_i
＃範囲を作成する。(1から初めたいので)
m = (1..n)
for num in m do
  if num % 15 == 0
    puts "Fizz Buzz"
  elsif num % 3 == 0
    puts "Fizz"
  elsif num % 5 == 0
    puts "Buzz"
  else puts num
  end
end
puts

別解 uptoを使う場合(こっちのほうがいいかも)

# Nを受け取る
n = gets.to_i

1.upto(n) do |i|
  if (i % 15).zero?
    puts 'Fizz Buzz'
  elsif (i % 3).zero?
    puts 'Fizz'
  elsif (i % 5).zero?
    puts 'Buzz'
  else
    puts i
  end
end
puts

別解2 eachを使う場合

# Nを受け取る(例:18)
n = gets.to_i
＃範囲を作成する。(1から初めたいので)(中身1..18)
m = (1..n)
＃eachで1から18まで18回繰り返してもろて各値をif文で振り分ける
m.each do |m|
  if m % 15 == 0 
    puts "Fizz Buzz"
  elsif m % 3 == 0 
    puts "Fizz" 
  elsif m % 5 == 0 
    puts "Buzz" 
  else puts m 
  end
end

ERROR Rule can only have one resource source(エラー対処録)

コメントを残す

①経緯：npm run devでサーバーを立ち上げる際に

ERROR Rule can only have one resource source (provided resource and test + include + exclude)

と表示されサーバー起動できない

②まず翻訳にかける

ERROR ルールは 1 つのリソースソースしか持つことができません（提供リソースとテスト + 包含 + 除外） と表示されました。

npmの依存関係の問題に関連しているようです。

③やってみたこと

npm i -D webpack@^4.46.0

カレントディレクトリに指定のパッケージをインストールするときに package.json の devDependencies欄にパッケージ名が記録される。

④実行結果

npm WARN idealTree Removing dependencies.webpack in favor of devDependencies.webpack

npm WARN idealTree dependencies.webpack を削除して devDependencies.webpack を優先します。

added 74 packages, removed 121 packages, changed 29 packages, and audited 1290 packages in 14s

npm ruv dev で無事にサーバーが起動できました！

npm installで警告が出たとき(エラー対処録)

コメントを残す

①経緯：npm install をしたときに↓のような表示が出たので

added 2 packages, and audited 1289 packages in 7s

105 packages are looking for funding
run `npm fund` for details

90 vulnerabilities (84 moderate, 6 high)

To address issues that do not require attention, run:
npm audit fix

To address all issues (including breaking changes), run:
npm audit fix --force

Run `npm audit` for details.

②：まず翻訳機にかけてみる

2パッケージ追加、7sで1289パッケージの監査を実施

105個のパッケージがを募集しています
詳細は `npm fund` を実行してください。

90件の脆弱性（中程度84件、高程度6件）

注意を払う必要のない問題に対処するには、実行します。
npm audit fix

すべての問題（ブレークチェンジを含む）に対処するには、実行します。
npm audit fix --force

詳細は `npm audit` を実行してください。

③：警告文の指示通りにコマンドをするだけ

npm audit fix

私の場合これで脆弱性が減りました・・・が０になってはいないので

引き続き調査します・・・

ポートフォリオ作成で得たテクニック2(備忘録：随時追加)

コメントを残す

作成してから時間が立ってだいぶ忘れてきているのですぐに思い出せるように残しておく

1:ページローダーの実装(Rails)

まず初めにPace.jsをコチラから手に入れます

https://raw.githubusercontent.com/HubSpot/pace/v1.0.0/pace.min.js

pace.jsを以下のように配置

SCSSの記述

続きを読む →

ポートフォリオ作成で得たテクニック1(備忘録)

コメントを残す

作成してから時間が立ってだいぶ忘れてきているのですぐに思い出せるように残しておきます。

1：かんたん登録

かんたん登録とは？

ワンクリックでSign-upとLoginができるユーザーフレンドリーな機能

準備

users/index.html.erbに以下の記述を追加

<%= link_to "簡単ログイン", easy_login_path, method: :get, class: 'btn slide-bg' %>

routes.rbに以下の記述を追加

get "easy_login" => "users#easy_login"

続きを読む →

月	火	水	木	金	土	日
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

かんたん登録とは？

準備

users/index.html.erbに以下の記述を追加

routes.rbに以下の記述を追加

form_forからform_withに移行する

スコープのprefixを指定するとき(ログイン機能など)

Railsで開発中の時遭遇

エラーにあった時の解決法

syntax error, unexpected end-of-input, expecting keyword_end end

構文エラー、予期しない入力終了、keyword_end を期待しています。

Could not find xxxx in any of the sourcesとは？

destroy_allとは？

テーブルの状態

user.rbはこのようになっています。

sessions_helper.rbはこのようになっています(ほぼRailsチュートリアルと同じです)

task.rbはこのようになっています

FizzBuzz問題の復習をば

問題

※ポイント

解答 範囲を使う場合(for inを使う)範囲オブジェクトの範囲分同じ処理を繰り返したり、配列の要素を順番に取得したい場合に使用するので

別解 uptoを使う場合(こっちのほうがいいかも)

別解2 eachを使う場合

①経緯：npm run devでサーバーを立ち上げる際に

と表示されサーバー起動できない

②まず翻訳にかける

③やってみたこと

①経緯：npm install をしたときに↓のような表示が出たので

②：まず翻訳機にかけてみる

③：警告文の指示通りにコマンドをするだけ

作成してから時間が立ってだいぶ忘れてきているのですぐに思い出せるように残しておく

1:ページローダーの実装(Rails)

pace.jsを以下のように配置

SCSSの記述

1：かんたん登録

かんたん登録とは？

準備

users/index.html.erbに以下の記述を追加

routes.rbに以下の記述を追加

解答範囲を使う場合(for inを使う)範囲オブジェクトの範囲分同じ処理を繰り返したり、配列の要素を順番に取得したい場合に使用するので