20200322のRailsに関する記事は25件です。

投稿日：2020-03-22T21:42:55+09:00

Ruby on Railsで新規アプリケーションを立ち上げる自称最速手順(github連携)

目的

新規のアプリケーションを作成する際、
毎回「あれ？次どうするんだっけ？」ってなって調べている時間がムダなので、
最低限のものを最速で作る手順を残しておきます。
細かいことにこだわらず、とにかくサッと作成したいときに参考にしてください。
githubにも連携します。

前提

マークアップはhaml,scssを使用
リセットcssはyui3を使用
ローカルでビューファイルを開くところまでを記載

1.Railsのバージョン確認
ターミナル
% cd ~
% ruby -v
バージョンの変更が必要な場合は以下のコマンドを実行
(--version=以降は適宜指定してください。)
ターミナル
% gem install rails --version="5.0.7.2"
% rbenv rehash
2.アプリケーションの作成
ターミナル
% cd
% cd projects
% rails _5.0.7.2_ new <アプリケーション名> -d mysql
% cd <アプリケーション名>
% rails db:create
% git init
3.GitHubとの連携

GitHub DesktopのCurrent Repositoryタブ
→Add
→Add Existing Repository
→Chooseから ~ projects/<アプリケーション名>を選択
→Add Repository
→コミット名をinitial commitとし、Commit to master
→Publish repository
→Publish repository
→GitHubのリポジトリに反映していればOK

4.ルーティング/コントローラー/ビュー　の設定
routes.rb
Rails.application.routes.draw do
  root to: 'posts#index'
end
ターミナル
% rails g controller posts
posts_controller.rb
class PostsController < ApplicationController
  def index    
  end
end
Gemfile
#最下部に追加
gem "haml-rails"
ターミナル
% bundle install
app/assets/stylesheetsフォルダ内で以下を実行

application.cssを削除する
application.scssを新規作成する
posts.scssのファイル名を _posts.scssに変更する
_reset.scssを新規作成する
ダウンロード/yui3-3.18.1/src/cssreset/css/cssreset.cssのコードを_reset.scssに貼り付ける
application.scss
@import "reset";
@import "posts";
app/views/postsフォルダ内で以下を実行

index.html.hamlを新規作成
index.html.haml
hello
確認
ターミナル
% rails s
ローカルでhelloと表示されれば完了

以上です。
最後まで読んでいただきありがとうございました。

　 Tweet
Qiitaで続きを読む

投稿日：2020-03-22T21:06:40+09:00

【Rails】パスワードの2回入力は不要。1回にしてマスキング解除機能を実装【jQuery】

環境

Ruby on Rails 5.2.4（gem 'devise'は不使用）
⇒ gem 'font-awesome-sass'を使用
jquery-rails 4.3.5
haml 5.1.2

前提

Webアプリケーションのユーザ新規登録画面で、確認の為にパスワードを2回入力させる事ってよくあると思うんですよ。
Railsの機能的にもpasswordとpassword_confirmationが合致しないとユーザ登録できない仕様になっていますし。

これに関してはpassword用の入力フォームを1つ用意し、
userをsaveさせる前にpasswordの値をpassword_confirmationにも代入する事で、確認用のpassword_confirmationフォームを省くことが可能です。
users_controller.rb
# 色々省略
  def create
    @user = User.create(user_params)
    @user.password_confirmation = user_params[:password] #ここでpasswordの値を代入する
    if @user.save
      session[:user_id] = @user.id
      redirect_to mypage_path
      flash[:notice] = "新規登録が完了しました"
    else
      flash[:alert] = @user.errors.full_messages
      redirect_to root_path
    end
  end

  private

    def user_params
      params.require(:user).permit(:name, :email, :password, :password_confirmation)
    end
ただ、このままだとユーザが新規登録の時に想定と異なる値を入力してしまった場合、間違いが分からないので再ログインができなくなりますよね？
ましてやその後のパスワードの変更手続きって面倒じゃないですか？

という疑問を感じたので調べてみた所、ちょっと古いですが下記記事でこの件によるユーザビリティの低下が示されてました。
https://uxmilk.jp/18568

じゃあどうするのって話ですが、上の記事内にもこの記事のタイトルにもありますが、マスキング(*マークでパスワードを非表示させる機能)を解除できる機能を作ればいいんですね。

完成形はこんな感じ

解決策

それっぽく見えるものなら何でもいいですが、今回はfontawesomeの目を使います。
こんなフォームがあったとします。
新規登録ビュー
-# 色々省略
.signup
  .signup-top
    新規登録
  .signup__contents
    = form_with(model: @user, url: users_path, local: true) do |f|
      -# ユーザアカウント
      .form-group
        = f.label :アカウント名, class: "form-title"
        %br
        = f.text_field :name, class: 'form-control'
        %br          
      -# メールアドレス
      .form-group
        = f.label :メールアドレス, class: "form-title"
        %br
        = f.email_field :email, class: 'form-control'
        %br
        -# パスワード
      .form-group
        = f.label :パスワード, class: "form-title"
        %br
        = f.password_field :password, class: 'form-control' #ここでマスキングが機能している
        .form-password
          = icon("fas","eye-slash") #目のアイコン。これのクリックで制御する
        %br
      .form-submit
        = f.submit "Signup", class: "btn-submit"
このpassword_field部分がChromeの検証では下記画像のように表記されています。

この赤枠で囲われているtype="password"によってマスキングが動いているんですね。という事で、jQueryで目のアイコンをクリックした時にtype="text"に変更する制御を与えましょう。
また分かりやすくする為、ついでに目のアイコンも一緒に切り替えます。
signup.js
  // パスワード入力フォームのスラッシュ目アイコンをクリックするとpassのマスキングを解除
  function eyeslashClick(){
    $(".fa-eye-slash").on("click", function(){
      $(".fa-eye").off("click") // offを設定しないとクリックした回数分だけ重複作動してしまう為
      let input = $(this).parents(".form-group").find("input");
      input.attr("type", "text"); // typeをpasswordに変更しマスキングを解除する
      $(this).removeClass(); // 目を消す
      $(this).addClass("fas fa-eye"); // アイコンをスラッシュのない目に置き換える
      eyeClick(); // 追加したfas fa-eyeにクリックイベントを付与
    });
  }
  // パスワード入力フォームの目アイコンをクリックするとpassをマスキング
  function eyeClick(){
    $(".fa-eye").on("click", function(){
      $(".fa-eye-slash").off("click") // offを設定しないとクリックした回数分だけ重複作動してしまう為
      let input = $(this).parents(".form-group").find("input");
      input.attr("type", "password"); // typeをpasswordに変更しマスキングを有効にする
      $(this).removeClass(); // 目を消す
      $(this).addClass("fas fa-eye-slash"); // アイコンをスラッシュのある目に置き換える
      eyeslashClick(); // 追加したfas fa-eye-slashにクリックイベントを付与
    });
  }
  // 目アイコンのクリックイベント呼び出しをデフォルト化
  eyeslashClick();
  eyeClick();
addClassで追加するだけでは置き換わった目のアイコンのクリックイベントが有効にならないので、忘れず付与しましょう。

総評

マスキングの解除を実装してもユーザが確認せず登録したら意味ないだろって？
そんなの知らぬ(　´_ゝ`）

　 Tweet
Qiitaで続きを読む

投稿日：2020-03-22T20:11:02+09:00

7つのアクションのみのインクリメンタルサーチ

インクリメンタルサーチと7つのアクションのみのインクリメンタルサーチとの相違点

主に編集するファイル場所の違いと、それによるリクエストパスの違いになります。
1.検索に使用するコントローラーとビューの「名前」「場所」が異なる
2.構造が異なるため、ルーティングも異なる
3.ルーティングが異なるため、検索のリクエストパスが異なる
などの違いがあります。

コントローラーとビューの「名前」「場所」が異なる

7つのアクションのみで検索機能を実装した場合、searches_controller.rbの作成にnamespaceを利用します。
そのため、コントローラーが格納されているディレクトリの構造が変わります。
app/controllers/tweets/searches_controller.rb
加えて、作成したsearches_controller.rbのindexアクションに対応するビューは、
app/views/tweets/searches/にindex.html.erbとして格納されます。
これらの「namespaceを利用したことによる構造と名前の違い」があります。

検索のリクエストパスが異なる

ルーティングが変更されるため、検索機能を呼び出すリクエストを送信する処理を記述するJSファイルで、指定するリクエストパスを変更します。

jQueryの導入

jQueryにgem 'jquery-rails'が導入されていなければ導入します。
【例】

gem 'jquery-rails'

ターミナル

bundle install

【例】

app/assets/javascripts/application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery  #追加
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree

textカラムにインデックスを設定します。
ターミナル

$ rails g migration AddIndexToTweets

db/migrate/20XXXXXXXXXXXX_add_index_to_tweets.rb

class AddIndexToTweets < ActiveRecord::Migration
  def change
    add_index :tweets, :text, length: 32
  end
end

ターミナル

$ rails db:migrate

ルーティングなどAPI側の準備

アクションの中でHTMLとJSONなどのフォーマット毎に条件分岐するため、respond_toを使用します。
【例】

app/controllers/tweets/searches_controller.rb

class Tweets::SearchesController < ApplicationController
  def index
    @tweets = Tweet.search(params[:keyword])
    respond_to do |format|
      format.html
      format.json
    end
  end
end

app/views/tweets/searches/のディレクトリにindex.json.jbuilderファイルを作成します。

app/views/tweets/searches/index.json.jbuilder

json.array! @tweets do |tweet|
  json.id tweet.id
  json.text tweet.text
  json.image tweet.image
  json.user_id tweet.user_id
  json.nickname tweet.user.nickname
  json.user_sign_in current_user
end

テキストフィールドの作成

【例】

index.html.erb

<%= form_with(url: search_tweets_path, local: true, method: :get, class: "xxxx") do |form| %>
  <%= form.text_field :keyword, placeholder: "投稿を検索する", class: "yyyy" %>
  <%= form.submit "検索", class: "zzzz" %>
<% end %>
<div class="aaaa">
  <% @tweets.each do |tweet| %>
    <%= render partial: "tweet", locals: { tweet: tweet } %>
  <% end %>
  <%= paginate(@tweets) %>
</div>