【Rails】jquery を使わずに javascript で flashメッセージをフェードアウトさせる

# はじめに
Railsアプリを開発していてflashメッセージをフェードアウトさせたく、javascriptを用いて実装したので書く。

こういったやつ↓↓（Bootstrapのalertを適用させています）

これをフェードアウトさせる

# 環境
Ruby: 2.5.1
Rails: 5.2.4.2

# 実装

実装イメージとしては徐々に透明度を高くしていき、最終的に非表示にします。

要素のstyle属性
①opacityの値を減少させていく
②opacityが0になったらdisplay: none; にする

## viewファイル
erbはこのようになっている

“`_flash_messages.html.erb
<% flash

初心者がRails内のVueでライブラリを使わずに簡単なページネーションを作ってみた

Railsアプリ内でVueを使用し、SPAを実装しました。
ページネーション機能が欲しかったので、簡単に自分で実装してみました。
ライブラリを使うのが基本的だと思いますが、今回は練習したかったということでライブラリは使いませんでした。

プログラミング初心者かつVue自体も初めてなので間違いもだいぶあると思います。見つけたら指摘していただいたら嬉しいです。

version
Rails 6.0.3.2
ruby 2.6.3
@vue/cli 4.4.1

## モデル

“`diary.rb
class Diary < ApplicationRecord # 省略 end ``` ## コントローラ ```diaries.rb def index diaries = Diary.all render json: diaries end ``` ## コンポーネントのscript部分 今回は1ページ(1つのページネーションごと)に6つの要素を表示させることにしました。 ### 表示分の要素をマウントできるようにする まずコントローラから全ての要素を取得し、dia

【Nuxt/Rails】axiosとdevise_token_authを使ってPOSTした実装

Nuxt.jsとRuby on Railsでaxiosとdevise_token_authを利用してPOSTする時に、地味に詰まってしまったので備忘録がてらまとめます。

## Ruby on Rails側の実装

devise_token_authの設定諸々は省きます。

以下のURLあたりが参考になりましたので、そちらをご覧いただけると良いかもしれません。

https://github.com/lynndylanhurley/devise_token_auth
https://qiita.com/Masahiro_T/items/6bc49a625b437a7c2f45

FormObjectを導入してるので、そちらも込みで載せます。

“`articles_controller.rb
class ArticlesController < ApplicationController def create @article = ArticleForm.new(art

【開発ログ⑰】サイドメニューの表示と非表示

# 前提について
はじめまして、
プログラミングスクールに通っていたいりふねと申します。この記事は、スクールの課題である個人アプリの開発の記録を書くことで、自身のアウトプットに利用しています。もし、読んでいただけた方がいましたら、フィードバックをしていただけたら嬉しいです。

開発するのは「有給休暇管理ツール」です。仕様は[過去記事](https://qiita.com/iczo32/items/97ad7d4baa985b3b99ca)をどうぞ。

アプリはデプロイまで行いますが、サービスとして提供するものではありません。あくまでも自学習の一環ですので、ご理解下さい。では本題へどうぞ。

# 今回の実施内容
作成中のアプリのビューのうち、サイドメニュー部分の表示と非表示を切り替えたいと言うのが、今回の内容になります。というのもこの個人アプリを見た方から「iPadのようなモバイル端末でも見られるようにしないと企業の管理者としては使いづらいのでは？」というフィードバックを頂いたためです。たしかに。。。
具体的には以下の手順で実装しました。

– application.html.haml

メッセージ送信の非同期化

# フォームが送信されたら、イベントが発火するようにしよう

この記述の解説をします。
$(*****)には、formのクラス名を記述します。
.on(*****,にはイベント名を記述します。
e.preventDefaulでは、非同期通信を行う為にデフォルトのイベントを止めています。
##イベントが発火したときにAjaxを使用して、messages#createが動くようしましょう
VueでRailsのactive_storageに保存した画像を表示する

Railsアプリ内でVueを使用し、SPAを実装しました。
その中で、VueからRailsのactive_storageを使おうと思いましたがそれっぽい方法を見つけられず、自分でとりあえず実装してみたので残します。
プログラミング初心者かつVue自体も初めてなので間違いもだいぶあると思います。見つけたら指摘していただいたら嬉しいです。

version
Rails 6.0.3.2
ruby 2.6.3
@vue/cli 4.4.1

active_storageに保存するまでは
https://qiita.com/ozin/items/5ec81a4b126b8ebf7a96
この記事でやりました。

このあとvue側に表示するまでを書きます。Vueでは単一ファイルコンポーネントで実装しています。
ライブラリのインストール方法は省略します。

## モデル

“`diary.rb
has_one_attached :image

# 省略
“`

## コントローラ

“`diaries_controller.rb
def index
diaries = Diary.

完成したRailsアプリの立ち上げ方

“`:Terminal
bundle install –path vendor/bundle

rails db:migrate

rails s
“`

Rails5でECサイトを作る①　～アプリ構成、各種gem準備、Model・Routing作成～

# はじめに
先日、プログラミングスクールにてチーム実装の課題があり、ECサイトを作りました。
自分の担当したところ以外がどのようなコードで動いているのか、復習も兼ねて作ってみたいと思います。

何のお店のECサイトにするか迷いましたが、Googleフォトのアルバムにパンの写真がたくさん入っていたので、架空のパン屋さんということにします。

# アプリの概要
・ECサイト（ユーザがサイト内で買い物できる）
・ユーザサイトと管理者サイトを制作
・ユーザサイトでは会員登録してログイン後、カートに商品を入れ、注文手続きをする
・管理者サイトでは注文が入った商品の注文ステータス（入金待ち、製作中、……）と製作ステータス（着手不可、製作中、……）の変更、商品や会員の管理を行う

# アプリ立ち上げ
“`
$ rails new fumizuki # 7月なので店名（架空）は「ベーカリー文月」で。
$ cd fumizuki
“`
# Gemfileに以下を追加
“`Gemfile
# ログイン機能
gem ‘devise’

# view装飾
gem ‘bootstrap’
gem ‘jq

Ruby on Rails　住所自動入力実装方法

# はじめに

現在のバージョン：
macOS Catalina 10.15.3

Ruby on Railsで住所自動入力を実装してみました。
備忘録として記述します。もし参考になれば幸いです。

# 手順

（1）はじめに下記からjsファイル(jQueryプラグイン)をダウンロード。
[jquery.jpostal.js](https://github.com/ninton/jquery.jpostal.js)

（2）ダウンロードしたjsファイルをapp/assets/javascriptsに配置。

（3）Gemfileに下記を追加後、ターミナルで“`$ bundle install“`。

“`ruby:Gemfile
# RailsでjQueryを使えるようにするため
gem ‘jquery-rails’
# 住所機能
gem ‘jp_prefecture’
“`

（4）Userモデルに下記カラムを追加後、ターミナルで“`$ rails db:migrate“`。

“`ruby:ターミナル
rails generate migration AddColum

エラーAn error occurred while installing mysql2 (0.5.3), and Bundler cannot continue. Make sure that `gem install mysql2 -v ‘0.5.3’ –source ‘https://rubygems.org/’` succeeds before bundling.の解決方法

何回も忘れるのでメモ。

##原因
Gemfile内にmysql2を書いてない。

##解決法
Gemfileに下記をかいて、“`bundle install“`する。

“`
gem ‘mysql2’, ‘~>0.5.3’
“`

なぐり書き

ruby on rails にて　閲覧機能をつけたい

プログラミングを初めて２週間ほどです。

NoMethodError in Todolists#index
Showing /home/vagrant/work/sample_app/app/views/todolists/index.html.erb where line #2 raised:

undefined method `each’ for nil:NilClass
Extracted source (around line #2):
1NoMethodError in Todolists#index
Showing /home/vagrant/work/sample_app/app/views/todolists/index.html.erb where line #2 raised:

undefined method `each’ for nil:NilClass
Extracted source (around line #2
１　

投稿一覧

２　<% @lists.each do |list| %>　←ここがエラー
３

タイトル

４

[Rails]’devise’エラーメッセージの日本語化

## application.rbを編集

“`application.rb
require_relative ‘boot’

require ‘rails/all’

# Require the gems listed in Gemfile, including any gems
# you’ve limited to :test, :development, or :production.
Bundler.require(*Rails.groups)

module Tsumiage
class Application < Rails::Application config.i18n.default_locale = :ja #記入コード # Settings in config/environments/* take precedence over those specified here. # Application configuration should go into files in config/initializers # -

rails capybara使用時に出たエラー

今回の目的として、以下の参考記事のように、
rspecテスト実行時にsign_inメソッドを利用できるようになることであった。
https://qiita.com/jnchito/items/a8360e5e7a829d1e19b2

そのために、railsでcapybaraの設定を試みたところ以下のエラーが出た
それぞれのエラーに参考になったリンクを貼っておく。
また、大まかな設定は次の記事を参考にさせていただいた。
https://qiita.com/morrr/items/0e24251c049180218db4

undefined method `visit’
https://qiita.com/terufumi1122/items/aefd6c965e9e946efc3b
visitはcapybaraで使えるメソッドなので、設定したうえでないと上記のエラーになるらしい

Failure/Error: fill_in ‘email’, with: user.email
Capybara::ElementNotFound:
Unable to

【備忘録】Railsでgraphqlのmutationが増えていくとディレクトリがグちゃるので整理したい

##　問題点
実用案件でmutationを黙々と増やしていくと、
`api/app/graphql/mutations/`に以下例のようにファイルが溢れてしまう。

“`
(例)
create_user_mutation.rb
update_user_mutation.rb
delete_user_mutation.rb
create_news_mutation.rb
update_news_mutation.rb
delete_news_mutation.rb
create_item_mutation.rb
update_item_mutation.rb
delete_item_mutation.rb
create_catalog_mutation.rb
update_catalog_mutation.rb
delete_catalog_mutation.rb
“`

### Generateコマンド
自分はDockerを利用しているため以下のようになりますが、Dockerを利用しない場合は通常のRailsコマンドで大丈夫です。(Userを例に)

“`
docker-comp

【Rails 5.x】フリーフォントの導入方法

##フリーフォントをRailsに導入する方法
自作のポートフォリオにフリーフォントを導入したいと思い、Qiita記事を参考に導入しました。
今更感はありますが・・・備忘録かつ、
初学者の参考になればと思い、記事を作成しました。

筆者の環境
・Ruby　 2.5.3
・Rails　5.2.2

#####1　フリーフォントのファイルをダウンロード

#####2　フォントファイルを app/assets/fonts 配下に置く

“`
(app名)/app/assets/fonts
“`
hogehoge.ttf ( または hoge.otf ) のようなフォントファイルを、fonts ディレクトリ内に入れます。
自分の場合はfontsディレクトリがなかったのでassets配下にmkdirで作成しました。

#####3　SCSSファイルに記述
SCSSに、

“`ruby:custom.scss
@font-face {
font-family: ‘hoge’; # font-family名は適宜決定
src: font-url(‘hogehoge.ttf’) form

【Rails】タイマー機能

## はじめに
Railsでタイマー機能を実装したくて、調べてもなかなか欲しい情報が見つからず:expressionless:

友人から「javascriptで実装できるよ！」と教えてもらったら、あるわ♪あるわ♪情報が:sparkles:

無知過ぎる自分の戒め＆【Rails　タイマー】で検索した際、ヒットするよう記事に残します:bow_tone1:

## どんな機能？
**時間を指定し、時間になったらアラートがでる**という機能になります。

例えば、３秒と入力し、3秒後にアラートがでる。

こんな感じです(Gyazoなのでタイミングによっては見れなくなります:bow_tone1:)
↓↓↓↓
https://gyazo.com/89773746aac0c2a1640d48e6a536190b

## 実装
“`HTML:view.html.haml
.timer__input
%form{name: “timer”}
%input{type: “text”, value: “”}>/
分
%input{type: “text”, v

fullcalendarを使ってイベント管理できるものを作ろう。①準備

#fullcalendarを使ってイベント管理できるものを作成しようと思っています。
これは、RubyonRailsの勉強を兼ねてのものです。何か間違っている、こう改善した方がいい、など指摘があれば教えていただけたらと思っています。
参考書は、「現場で使えるRuby on Rails 5速習実践ガイド」です。
さあ、頑張っていこう。
##環境
OS：MacOS Catalina10.15.5
Ruby：2.6.3
Rails：5.2.4

##アプリの作成
`$ rails new Mark -d postgresql`

##モデルの作成
`$ rails g model Event`
Railsのモデルは、主に2つの要素から構成
・モデルに対応するRubyのクラス
・モデルに対応するデータベースのテーブル

クラス名とテーブル名には以下の命名規約がある。
・データベースのテーブル名は、モデルのクラス名を複数形にしたもの
・モデルのクラス名はキャメルケース、テーブル名はスネークケース

##Eventモデルの属性を設定
|属性の意味|属性名・カラム名|データ型|
|:——|:

herokuで常時SSL化（rails)

知ってれば何てことないのに、英語は読まなあかんわ、
情報は断片的だわってことで流れだけでもまとめました。

とりあえず、google翻訳は必須だね・・・。

前提：herokuで証明書を発行する

##流れ
思い出しながらやっているので、実際のところ前後があるかもしれませんがご容赦ください

**１、herokuのDynoを有料化してSSL証明書を発行できる状態にする**
7ドル以上の有料プランしかSSLを発行できないです。
https://jp.heroku.com/pricing

##２、herokuのsetting画面でSSL Certificatesを確認（画面の真ん中らへん##

基本的には自動で作られるので、有料化したら作られるよう。
なければ、configure SSlボタンより作成

##３、オリジナルドメイン追加##

![i

EC2、RDSを利用してRailsアプリをデプロイする [NGINX + puma + PostgreSQL + Rails 6]

# 目標：AWSのEC2、RDSを利用してRailsアプリをデプロイする

– Railsチュートリアルをより実践的な環境、Ultimate Hard Modeで挑みたい
– NGINX, puma, PostgreSQL, Rails 6で開発〜デプロイ
– ローカル開発環境へ移行
[はじめてのDockerでRails開発環境構築 [NGINX + Rails 5 (puma) + PostgreSQL] – Qiita](https://qiita.com/daddy_hacker/items/66d8fd40ce01d1aeea02)
– 脱Herokuで模擬CI/CD環境を取り入れたい（この後自動デプロイまでいきたい）
– AWSを利用した、より実践的な本番環境構築のウォームアップ

このような目的のため、とりあえずAWS上でアプリが動くことを目標にしています
そのためセキュリティ面で本来必要そうな手順（環境変数定義や、SSL対応)を排除して進行しております

備忘録的に記録を残しておりますので、
思い出したことや、不備あれば随時訂正いたします

# 気づき

– 環境

Ruby on Rails チュートリアル(第4版)　第4章

4.2 nanoエディタから離脱する際、`Ctrl+X`→`Y`だけでは離脱出来ず。`Enter`キーを押せば離脱出来た(ググった)。

##4.2.2 演習
1.city変数に適当な市区町村を、prefecture変数に適当な都道府県を代入してください。

“`
>> city = “横浜市”
=> “横浜市”
>> prefecture = “神奈川県”
=> “神奈川県”
“`

2.先ほど作った変数と式展開を使って、「東京都 新宿区」のような住所の文字列を作ってみましょう。出力にはputsを使ってください。

“`
>> puts “#{prefecture} #{city}”
神奈川県　横浜市
=> nil

“`

3.上記の文字列の間にある半角スペースをタブに置き換えてみてください。(ヒント: 改行文字と同じで、タブも特殊文字です)
　tabキー押しても何も無いと思ったら、`\t`でtabらしい。

“`
>> puts “#{prefecture}\t#{city}”
神奈川県 横浜市
=> nil
“`

4.タブに置き換えた文字列を、ダブル