- 1. 【Rails】マイグレーションコマンドまとめ
- 2. 【リファクタリング】ルーティングの書き方
- 3. メディアクエリ
- 4. 【Rails5】CarrierWaveで「rails g uploader Image」ができないときの解決方法
- 5. Vagrant+Docker+Rails+Nuxt.js+MySQL+SSL化
- 6. 【Rails】gretelを使ってパンくずリストを追加してみる。
- 7. rails active_storage: install実行時に追加されるテーブルについて
- 8. 【Rails5.2】RESTful APIをRailsで簡単に実装する手順(APIモード)
- 9. Rails 単数リソース resourceによるルーティング
- 10. 【マークアップ 】デザインボタン
- 11. プログラミング未経験化学系大学院生がWeb系企業に新卒で内定をもらうまでの記録
- 12. 【Ruby】paizaで頻出メソッドまとめてみた
- 13. rails6でデータベースを変更した話
- 14. AWSへのRailsアプリのデプロイ その1
- 15. Rails5.2以降のCredentialsについてわかりやすく
- 16. [Rails]graphql-rubyでpolymorphicを表現する
- 17. [Rails]都道府県プルダウンリスト
- 18. RailsアプリをCircleCI(2.1)を使ってHerokuにデプロイするときの設定
- 19. 【Rails】Font Awesomeの導入方法
- 20. Ruby on RailsへのjQueryの導入準備
【Rails】マイグレーションコマンドまとめ
# 開発環境
・Ruby: 2.5.7
・Rails: 5.2.4
・Vagrant: 2.2.7
・VirtualBox: 6.1
・OS: macOS Catalina# マイグレーションコマンドの書き方
`$ rails g migration ChangeColumnToBooks` は、
`$ rails generation migration change_column_to_books` と書くのと同じ。つまり、`generation`は`g`と略す事ができ、
`AddBodyToBooks`の様に、単語の先頭を大文字にする事で「 _ 」を書く手間が省ける。# 基本コマンド
### 1.モデルとテーブルを作成
`$ rails g model モデル名 カラム名:型名`
“`terminal:ターミナル
$ rails g model Book title:string
“`“`ruby:migrate/~_create_books.rb
class CreateBooks < ActiveRecord::Migration[5.2]
【リファクタリング】ルーティングの書き方
# 概要
ルーティングをスッキリ書く方法です:relaxed:**背景**
ルーティングの指定をする際、7つのアクションのうち6つを使用する場合、onlyで書いたらダラダラと長くなってしまって、個人的に自分ダサっ:weary:っとなったので備忘録として残します:bow_tone1:# Railsの7つのアクション
まずは、Railsの7つのアクションについておさらい:writing_hand:| Action | 役割 |
|:————:|:——————:|
| index | 一覧を表示する |
| new | 追加する |
| create | 追加内容を登録す |
| edit | 編集する |
| update | 編集内容を更新する |
| destroy | 削除する |
| show
メディアクエリ
#レスポンシブWebデザインのメディアクエリについてのメモ
cssファイルやscssファイル内にてメディアクエリを指定することで、
タブレットやスマートフォン、または規定外の大画面にも対応できる様なcssを作成できる。
width等でのcssが切り替わる境目をブレイクポイントと呼ぶ。
ブレイクポイントは実際のビューが崩れそうなタイミングをとっても良いが、特に何もなければ、
1170pxと670px付近でブレイクポイントを取ると良い。“`ruby:scssファイル
@media (min-width: 1170px {
h1 {
color: pink;
}
}
@media (min-width: 670px {
h1 {
color:white;
}
}
@media (max-width 670px {
h1 {
color: blue;
}
}
“`別件だが、width: 25%; を4つ並べてビュー崩れが起こる場合は、
borderやpaddingも含まれているため、box-sizing: border-box;を与
【Rails5】CarrierWaveで「rails g uploader Image」ができないときの解決方法
##「rails g uploader Image」でエラー発生
“`text:開発環境
ruby > 2.6.5
rails > 5.2.4.2
devise > 4.7.1
carrierwave > 2.1.0
“``gem ‘devise’`のプロフ画像アップロードのために
`gem ‘carrierwave’`を設定中、
アップローダーを作成するコマンド`rails g uploader Image`でエラーが出ました。“`text:ターミナル
$ rails g uploader Image
Running via Spring preloader in process 65446
Could not find generator ‘uploader’. Maybe you meant ‘mailer’, ‘task’ or ‘helper’
Run `rails generate –help` for more options.
“`直訳するとこうなりますね
>
プロセス65446のSpringプリローダーを介して実行
ジェネレータ「アップローダー
Vagrant+Docker+Rails+Nuxt.js+MySQL+SSL化
#はじめに
ポートフォリオ作成まで、環境構築が辛すぎたのでその過程を書きました。
完全に全ての技術に対して初心者だったので、毎日絶望していました。ポートフォリオのために快適な開発環境をまず作りたくて試行錯誤していました。
Docker for Macが重すぎ、しかもfrontendとbackendに分けて、
しかもNginxを使ってSSL化までする記事がなさすぎて絶望したので実験しながら作りました。今後忘れないために備忘録として・・・。
とりあえずそれぞれHello World出来るまで。#こんな人へ
とりあえずサクサクっと開発環境をつくりたいぜ。
Dockerとかの知識はちょっとあるぜ。#これを読むとわかること/おおまかな流れ
– Vagrant環境構築
– Nuxt.js環境構築
– Docker環境構築
– nuxtとRails(APIモード)とMySQLの開発環境構築
– Nginxの環境構築
– SSL化(オレオレ証明書)# 環境
Mac OS
ruby:2.6.3
Rails 5.2.4.3#フォルダ構成
“`
app
├─docker-comp
【Rails】gretelを使ってパンくずリストを追加してみる。
# パンくずリストとは
パンくずリストとはWEBサイト上で自分がどこにいるかをわかりやすく表示しているものになります。
下記サイト参考パンくずリストを導入することで
・ユーザビリティが高くなる
・SEOに強くなる
というメリットがあります。今回はrailsにてパンくずリストを導入する手順を書いていきます。
# 導入
railsでパンくずを導入するには「gretel」というgemを使うと便利です。
■gem gretelのGithub
https://github.com/lassebunk/gretelまずはGemfileに追記して、bundle installを行う。
Gemfile
“`
gem ‘gretel’
“`“`
$ bundle install
“`その後起動コマンドを入力
“`
$ rails generate gretel:install
“`このコマンドを入力すると、config配下にbreadcrumb.rbというフ
rails active_storage: install実行時に追加されるテーブルについて
active_storage使用時に作成されるテーブルとカラムの役割について自分なりにまとめてみました
## 参考
https://railsguides.jp/active_storage_overview.html
## 環境
– Rails 5.2.4
– PostgreSQL
– Tweetモデルにactive_storageでtweet_imageを追加したとする
– 同様に、Userモデルにprofile_imageを追加` $ rails dbconsole`を使ってDBの中身を見ていきます
“`sql
select * from Tweetid | content | created_at | updated_at
—-+———+—————————-+—————————-
1 | first | 2020-05-31 09:15:39.315909 | 2020-05-31 09:15:39.34
【Rails5.2】RESTful APIをRailsで簡単に実装する手順(APIモード)
## 環境
ruby 2.6.4Rails 5.2.4.1
rbenv 1.1.2
mysql2 0.5.3
## やりたいこと
APIモードで簡単なtodoアプリを実装しますRESTfulなAPIをRailsで実装する手順を書いていきます
わかりやすさを追求して書いていきます
## カンタン実装手順
### ステップ1. APIモードで新規アプリを作成
“`
$ rails new sample_app –api -T
“`### ステップ2. TDD(テスト駆動開発)用にGem追加
“`ruby:Gemfile
group :development, :test do
gem ‘rspec-rails’, ‘~> 3.5’
endgroup :test do
gem ‘factory_bot_rails’, ‘~> 4.0’
gem ‘shoulda-matchers’, ‘~> 3.1’
gem ‘faker’
gem ‘database_cleaner’
end
“`### ステップ3. gemインストール
“`
$
Rails 単数リソース resourceによるルーティング
#単数リソース
resourcesメソッドは7つの基本アクションに対するルーティングを一括して設定するメソッドです。
うんそれはわかってる。でもresourceってなんだ…”s”付け忘れてない?
となったので、本日は単数リソースresourceについてまとめてみます。見た目ではsがついてるかついていないかですが、働きは結構違います。
##あるシステムについて考える
管理ユーザーと一般ユーザーのいるシステムを考えます。
一般ユーザーはログイン後、自分のアカウントのみを閲覧、管理することができます。
この場合resourcesでrouteを設定すると以下のように設定が行われます。“`
resources :users
“`| HTTP |パス | コントローラ#アクション |
|:—————–|——————:|:——————:|
| GET | /users | users#inde
【マークアップ 】デザインボタン
# 概要
ボタンに少しデザインを付けることで、サイトがカッコ良くなる〜:laughing:
と思い実装しました!今回紹介するのは、立体的に見えて押し込み式のボタンとなります:bulb:
# 実装
“`HTML:views/index.html.haml
.btn
.new__dispaly–commit
= f.submit “Submit”, class:”commit-btn”
“`“`scss:index.scss
.btn {
input.commit-btn {
display: inline-block;
position: relative;
padding: 0.5em 1.4em;
text-decoration: none;
background: #1d4d8b;/*ボタン色*/
color: $white;
border-bottom: solid 5px #123158;/*ボタンの下 色*/
border-right: sol
プログラミング未経験化学系大学院生がWeb系企業に新卒で内定をもらうまでの記録
# はじめに
はじめまして!
就職活動の結果、全くの未経験の状態からWeb系自社開発企業に内定をいただくことができたので、記録を残しておきます。
中途ではなく、新卒のエンジニア職での採用になります。他業種からエンジニアに転職されている方の記事は多く見かけましたが、新卒についての情報は少ないと感じたので記事化しようと思いました。もちろん転職活動に取り組んでいる方にも参考になる内容だと思います。## 学習を始める前の状況
– 某私立大の大学院生、化学系の研究をしている
– 研究室では完全なポンコツで、業績としては国内の小さな学会で1回発表しただけ
– 月~土は10時から23時くらいまで研究漬け(いわゆるブラック研究室)
– 2020年5月現在で大学院修士2年生、就活的には”21卒”と呼ばれる世代
– 研究でも学部時代もプログラミングには一切触れていない
– SIerとかWeb系といった言葉自体を知らない本当に0の状態からスタート## 読んでほしい人
– 現在、Web系エンジニアを目指し就職活動に取り組んでいる人
– これからWeb系エンジニアになりたい人
– なんとなくIT業界に行
【Ruby】paizaで頻出メソッドまとめてみた
#参考文献
– [【Ruby】getsとgets.chompの違いは改行にあり!](https://qiita.com/Take-st/items/26f29a6dea622d1e7e8d)
– [【Ruby】getsの使い方](https://qiita.com/aamonaamon9/items/7de49e4881ee07e24248)
– [paiza 開発日誌](https://paiza.hatenablog.com/entry/2019/09/20/%E5%88%9D%E5%BF%83%E8%80%85%E3%81%A7%E3%82%82Ruby%E3%81%A7%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%95%8F%E9%A1%8C%E3%82%92%E8%A7%A3%E3%81%91%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB)
– [Railsで簡単に英単語を複数形にする方法](https://qiita.com/narikei/items/023
rails6でデータベースを変更した話
これまではMySQLを使用していましたが、本番環境を考えてPostgreSQLに変更しました。
ググって、**SQLite→MySQL or PostgreSQL**の変更方法は出てくるのですが、
**MySQL→PostgreSQL**の変更方法は、ネットになかなか落ちていませんでした。そんなとき、webpack周りで躓いた際に参考にした記事を思い出しました。
[Ruby on Rails 6の主要な新機能・機能追加・変更点](https://qiita.com/ryohashimoto/items/622c3bcfb3336cb9317e)##どうやらrails6では簡単に変更出来るらしい
“`terminal:ターミナル
bin/rails db:system:change
“`上記で行けるみたい。
rails6からは**RDBMSを変更するdb:system:changeタスクが追加された**とのこと。ちなみにMySQLとSQLiteへの変更の仕方は以下の通り
[Rails6「SQLite ⇆ MySQL ⇆ PostgreSQL」データベースを移行
AWSへのRailsアプリのデプロイ その1
## はじめに
チームで開発したアプリを自分で建てたEC2に移行させたため記事に残しておきます。## EC2インスタンスを作る
まず、アプリの移行先のインスタンスを作りましょう。![スクリーンショット 2020-05-30 22.34.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/7f95f633-23f9-d34e-1959-89218f8c0c69.png)
ここは各個人で違うと思いますが、今回は「Amazon Linux AMI」を選択。
![スクリーンショット 2020-05-30 22.36.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/cb38664d-ac58-a321-0359-317eeb42dea2.png)EC2インスタンスを起動させるとキーペアの作成画面が表示されます。
ここでは新しいキーペアの作成を選択し、キーペア名を入力した後、キーペアのダウ
Rails5.2以降のCredentialsについてわかりやすく
## ポイントとなるのは`config/master.key`
production環境でアプリを利用する場合、`production環境で使われる秘密情報(暗号化されているもの)を元データに復元するために利用する鍵`が必要(元データに復元することを復号といったりします!)この鍵は、Rails5.2以降はconfig/master.keyファイルとして管理されている(自分でrails newした場合)
## production環境用の秘密情報の管理
* Rails5.1までは秘密情報を環境変数でアプリに伝える方法がとられていたが、
* Rails5.2からは`Credentialsという新しい機能`になった## Credentialsとはなにか
* 特定の方式で管理されるproduction環境用の`秘密情報そのもの`と`その管理の仕組み`という2つの意味があります。* Credentialsは、秘密情報が構造化して記述され(credentials.yml.enc)、`リポジトリで管理されるが、リポジトリに入る内容は暗号化`される。
* `暗号化する`・`暗号化
[Rails]graphql-rubyでpolymorphicを表現する
# はじめに
最近、graphql-rubyでAPIを実装しています。
Railsでは、モデルの関連付けにポリモーフィックという便利な機能があります。
これをUnionTypeを使ってgraphqlでも表現する方法について説明します。
# やりたいこと
UserテーブルとPetShopテーブルがDogテーブルのownerableでポリモーフィックな場合を考えます。graphqlでdogを取得するときに、その所有者であるownerable(user or pet_shop)のカラムも一緒にとってこれるようにする。
# ポリモーフィックではない場合
まず復習をかねて、通常の関連付け(belongs_toとかhas_manyとか)の場合を考えてみます。
以下のようにUserとDogが1対多だとします。“`user.rb
Class User < ApplicationRecord has_many: dogs end ``` ```dog.rb Class Dog < ApplicationRecord belongs_to: user end ``` ## ObjectTyp
[Rails]都道府県プルダウンリスト
# 前置き
検索フォームの都道府県プルダウンリスト実装を備忘録として残します。# 前提条件
ransack導入済# 1.導入
“`Gemfile
gem ‘active_hash’
“`
まずGemfileに上記のように記述し、bundle install。
再起動も忘れずに。#2.prefectureモデルを作成
こちら手動です。“`ruby:models/prefecture.rb
class Prefecture < ActiveHash::Base self.data = [ {id: 1, name: '北海道'}, {id: 2, name: '青森県'}, {id: 3, name: '岩手県'}, {id: 4, name: '宮城県'}, {id: 5, name: '秋田県'}, {id: 6, name: '山形県'}, {id: 7, name: '福島県'}, {id: 8, name: '茨城県'}, {id: 9, name: '栃木県'}, {id: 10, name: '群
RailsアプリをCircleCI(2.1)を使ってHerokuにデプロイするときの設定
## はじめに
Railsアプリの開発効率を上げるため、
GitHubにpushしたら静的コード解析(rubocop)と自動テスト(rspec)を実行し、
stagingブランチにマージしたらSTG環境に、masterブランチにマージをしたら本番環境に自動デプロイするように設定した。## 前提
– Railsのアプリケーションを作成済み
– Rubocop, Rspec設定済み
– Herokuの登録&設定済み
– CircleCIのユーザおよびプロジェクト登録済み&GitHubと連携済み## 環境
– Ruby 2.5.0
– Rails 5.2.2
– CircleCI 2.1
– SQLite(Rspec実行時)## 手順
– CircleCIに環境変数を設定する
– .circleci/config.ymlを記述し、GitHubにpushする### CircleCIに環境変数を設定
Project Settings > Environment Variables にAdd Variableで以下を設定する。– HEROKU_API_KEY(HerokuのAc
【Rails】Font Awesomeの導入方法
# 開発環境
・Ruby: 2.5.7
・Rails: 5.2.4
・Vagrant: 2.2.7
・VirtualBox: 6.1
・OS: macOS Catalina# アカウント作成
1.下記リンクにアクセスする。
[Font Awesome Start画面](https://fontawesome.com/start)2.メールアドレスを入力し、「Send Kit Code」をクリックする。
3.確認メールが届くので「Click to Confirm Your Email Address + Set Things Up」というリンクにアクセスする。
4.下記画面に遷移するので、パスワードを入力して「Set Password & Continue」をクリックする。
![image
Ruby on RailsへのjQueryの導入準備
#環境・前提条件
macOS Catalina バージョン10.15.4
ruby 2.5.1p57 (2018-03-29 revision 63029)
Rails 5.2.4.3#jQuery導入準備
Gemfileを確認し、“`
gem “jquery-rails”
“`
と記載する。application.jsに、
“`
//= require jquery
“`と記載する。※注意点として、”//= require_tree .”より上に記載する。
“`
//= require jquery//= require_tree .
“`
実際にjQueryが使えるのか、確認する。
任意の名前のjsファイルを作成する。(同名のcoffeeファイルがあれば削除すること。)“`javascript
$(function(){
console.log(‘OK’);
});
“`これでページを更新し、コンソールに’OK’と表示されれば準備OK!