【Ruby on Rails】Devise + omniauth-facebook + omniauth-twitterでログイン機能作成（基本から詳細まで）
この記事は devise、omniauth-facebook、omniauth-twitterのGemを使って、メールとFacebookとTwitterでログイン機能を作ります。
まずはFacebookとTwitter側の設定から始めます。
Facebook側の設定
アプリを作成URL：https://developers.facebook.com/apps/create
![スクリーンショット 0003-11-07...
Updated by Yuto at 2022-01-21 17:49
[Rails App] Bootstrapの開発環境を自動的に作る (bootstrap-generators)
>>> デモサイトはこちらです <<<
参考
bootstrap-generators
この記事は早くBootstrapの開発環境を作る方法をご紹介させていただきます。
```ruby:Gemfile
gem 'bootstrap-sass'
group :development do
gem 'bootstrap-generators'
end
```
Bootstrapをインストール
rails g bootstrap:install [オプション]
オプション
-e=erb/haml/slim デフォルトは「ERB」
-se=css/scss/less デフォルトは「SCSS」
ERB以外の場合、views/layouts/application.html.erbを削除してください。
テストの為にScaffoldを作ります
rails g scaffold Article title content:text && rake db:migrate
そして、アプリを実行するとこのようになります。
ruby:Gemfile
gem 'acts_as_votable'
gem 'devise'
ユーザー登録を作成
Deviseをインストール：
rails g devise:install
ユーザーモデルを作る：
rails g devise User
ユーザー登録のリンクを付ける
ruby:app/views/layouts/application.html.slim
- if user_signed_in?
li Signed in as #{current_user.email}
...
Created by Yuto at 2022-01-21 17:42
【Ruby on Rails】filter_parameters.rbにログで見られたくないパラメーターを追加する
ruby:config/initializers/filter_parameters.rb
Rails.application.config.filter_parameters += [:password, :credit_card_number]
Created by Yuto at 2022-01-21 17:42
【Gem】kaminari で一つのページで複数のペイジング
Controller
ruby
@topics = Topic.page(params[:topics_page]).per(5)
@activities = Activity.page(params[:activities_page]).per(10)
View
ruby
= paginate @topics, param_name: 'topics_page'
= paginate @activities, param_name: 'activities_page'
Created by Yuto at 2022-01-21 17:42
【 Ruby on Rails 】自分のFlash message をカスタムする
ruby:app/controllers/application_controller.rb
class ApplicationController
add_flash_types :good, :bad
end
ruby:app/controllers/users_controller.rb
class UsersController < ApplicationController
def create
redirect_to root_path, good: "Created user!"
end
end
ruby:app/views/users/index.html.erb
<%= good %>
Created by Yuto at 2022-01-21 17:42
【Ruby on Rails】Foundation5 flash message with slim
ruby:app/views/layouts/_message.html.slim
- flash.each do |name, msg|
- if msg.is_a?(String)
div data-alert='' class="alert-box round #{name.to_s == 'notice' ? 'success' : 'alert'}"
= content_tag :div, msg
a href='#' class='close' ×
Created by Yuto at 2022-01-21 17:42
【 Ruby on Rails】複数のOmniauth
>>> アプリケーションはこちらです <<<
参考：Bootstrapの開発環境を自動的に作る
ruby:Gemfile
gem 'omniauth-facebook'
gem 'omniauth-twitter'
gem 'omniauth-google-oauth2'
gem 'omniauth-tumblr'
gem 'omniauth-amazon'
```ruby:config/devvariables.rb
ENV['FACEBOOKKEY'] = 'xxxxxxxxxxxxxxxxxxx'
ENV['FACEBOOK_SECRET'] = 'xxxxxxxxxxxxxxxxxxx'
ENV['TWITTERKEY'] =...
Created by Yuto at 2022-01-21 17:42
【Middleman】 Slim+Sass+Coffeescript+Bootstrap+Heroku
Middlemanを利用して、簡単に性的なサイトが作れます。
SlimとSassとCoffeescriptを使うと、コードが短くなって、コーディングすることが楽になります。Bootstrapなども利用できます。
Middlemanをインストール
gem install middleman
新しいMiddlemanサイトを作る
middleman init sample-app
サイトを動かす
middleman s
livereload を使う
ruby:Gemfile
gem 'middleman-livereload'
```ruby:config.rb
Reload the browser automatically whenever files change
configure :development do
activate :livereload
end
```
Slimを使う
ruby:Gemfile
gem 'slim'
ファイル名を変更
layout.erb => layout.html.slim
index.html.erb =>...
Created by Yuto at 2022-01-21 17:42
[Ruby on Rails] Devise + Omniauth Authentication
Sample Application
ruby:Gemfile
gem 'devise'
gem 'omniauth'
gem 'omniauth-facebook'
gem 'omniauth-twitter'
gem 'paperclip'
gem 'fog'
rails g devise:install
rails g devise User
rails g devise:controllers users
rails g migration AddAttributesToUsers name uid provider token
rails g paperclip user image
ruby:config/routes.rb
devise_for :users, controllers: {
omniauth_callbacks: 'users/omniauth_callbacks',
registrations: 'users/registrations'
}
ruby:config/initializers/devise.rb...
Created by Yuto at 2022-01-21 17:42
[Ruby on Rails] SubModel in Model
Category
Sub Category
Sub Category
Sub Category
```ruby:migrate.rb
class CreateCategories < ActiveRecord::Migration[5.0]
def change
create_table :categories do |t|
t.string :name
t.references :parent
t.timestamps
end
end
end
```
ruby:model.rb
class Category < ApplicationRecord
has_many :categories, class_name: 'Category', foreign_key: 'parent_id',
dependent: :destroy
belongs_to :parent, class_name: 'Category', optional: true
end
c.parent
c.categories
Created by Yuto at 2022-01-21 17:42
Ruby on Rails アプリにVuetifyとFontAwesomeの導入
Vuetify導入
yarn add vuetify @fortawesome/fontawesome-free
```javascript:app/javascript/packs/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import "vuetify/dist/vuetify.min.css"
import '@fortawesome/fontawesome-free/css/all.css'
Vue.use(Vuetify)
export default new Vuetify({
icons: {
iconfont: 'fa',
}
})
```
```javascript:app/javascript/packs/main.js
import vuetify from './plugins/vuetify'
document.addEventListener('DOMContentLoaded', () => {
const app = new...
Updated by Yuto at 2022-01-21 17:24
Ruby on Rails でFCMを使う時のメモ
click_actionを反映させる
firebase-messaging-sw.jsのトップにnotificationclickイベントを追加すればいいらしいです。
```javascript:public/firebase-messaging-sw.js
// Notification click
self.addEventListener('notificationclick', function(event) {
let url = event.notification.data.FCM_MSG.data.url;
event.notification.close(); // Android needs explicit close.
event.waitUntil(
clients.matchAll({ includeUncontrolled: true, type: 'window' }).then( windowClients => {
// Check if there is already a window/tab open...
Created by Yuto at 2022-01-21 17:22
Ruby on Rails 6にTailwindCSSを導入（Gemを使わず）
Yarnで必要なものをインストールする
yarn add tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
tailwind.config.jsファイルを生成する
yarn tailwindcss init app/javascript/packs/tailwind.config.js
javascript:app/javascript/packs/tailwind.config.js
module.exports = {
purge: [
'./app/**/*.html.erb',
'./app/**/*.html.slim',
'./app/helpers/**/*.rb',
'./app/javascript/packs/**/*.js',
],
//...
Updated by Yuto at 2022-01-20 23:55
EC2 Ubuntu インスタンスに CloudWatch Logsエージェントをインストールして設定する
CloudWatch Logs エージェントをインストールすると CloudWatch Logs の画面でEC2インスタンスで実行されているアプリケーションのログがリアルタイムに閲覧できます。
IAMロール設定
まずは適切なロールが必要です。
下記のポリシーで新規ロールを作って、そのロールをEC2インスタンスに割り当てます。
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": [
"logs:CreateLogGroup",
"logs:CreateLogStream",
"logs:PutLogEvents",
"logs:DescribeLogStreams"
],
"Resource": [
"*"
]
}
]
}
ロールが作成できたらEC2インスタンス一覧画面で、インスタンスを右クリックして、セキュリティーの中に...
Updated by Yuto at 2022-01-20 23:55
DockerでMailcatcherを使ってRuby on Rails開発環境のメールを受信する
Mailcatcherの概要は公式サイトで色々記載されています：https://mailcatcher.me
letter_opener も Ruby on Rails 開発環境のメールがテストできるが、個人的には Mailcatcher の方が便利で使いやすいので、よく使います。
docker-compose設定
yaml:docker-compose.yml
mailcatcher:
image: schickling/mailcatcher
container_name: mailcatcher
ports:
- '1080:1080'
- '1025:1025'
Dockerを起動したら「localhost:1080」で管理画面にアクセスできます。
Ruby on RailsアプリでAWS SESを使ってメールを送信する方法（設定から実装まで）
前はずっとSendGrid経由でメール送信機能を使っていましたが、せっかくAWSでアプリケーションをデプロイするのでAWSのサービスを使いたかったです。その為メール送信機能をSendGridからAWS SESに移動しました。
では、簡単に言うと Amazon Simple Email Service (SES) は、デベロッパーが任意のアプリケーションでメールを送信できるようにする、費用対効果の高い、柔軟でスケーラブルなメールサービスです。
SES設定
sandboxから移動
新規AWSアカウントではSESの制御があるます、確認済みのアドレスしか送信できなくて、1日最大200メールや1秒にあたり1メールなどの制限があります。
なので本番で使用できるにはリクエストをしなければなりません。
リクエスト方法はまずこのリンクにアクセス：http://aws.amazon.com/ses/fullaccessrequest
自分の場合は画像のように入力したら半日後で承認されました。
![スクリーンショット 0003-10-30...
Updated by Yuto at 2022-01-20 23:55