【Ruby on Rails】Devise + omniauth-facebook + omniauth-twitterでログイン機能作成(基本から詳細まで)

【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 10.58.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35605/a6ba4d02-6d33-f626-6d24-eac36edbc97e.png) ![スクリーンショット 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 そして、アプリを実行するとこのようになります。 ![スクリーンショット 2016-12-17...
Created by Yuto at 2022-01-21 17:42

私の使うGem

```ruby:Gemfile #! vim: ruby Yuto's Gemfile source 'https://rubygems.org' gem 'rails' Authentication gem 'devise' # Flexible authentication solution for Rails with Warden gem 'devise-i18n' # Translations for the devise gem gem 'omniauth-facebook' # OmniAuth strategy for Facebook gem 'omniauth-twitter' # OmniAuth strategy for Twitter gem 'omniauth-google-oauth2' # OmniAuth strategy for Google gem 'omniauth-tumblr' # OmniAuth strategy for Tumblr gem 'omniauth-amazon' # OmniAuth strategy for...
Created by Yuto at 2022-01-21 17:42

Ruby on Rails で画像をアップロード(paperclip, fog)

>>> サンプルアプリケーションはこちらです <<< 今日は Ruby on Rails で画像をアップロード出来るサイトの作り方をご紹介させて頂きます。 OPTIONAL: Bootstrapの開発環境を自動的に作る まず、ImageMagick をインストールする必要がありますので、ImageMagick のないパソコンならインストールしてください。 Mac OS: brew install imagemagick Ubuntu: sudo apt-get install imagemagick では、始めましょう! ruby:Gemfile gem 'paperclip' gem 'fog' Article というScaffoldを作る: rails g scaffold Article title content:text それでpaperclip photo を作る: rails g paperclip article...
Created by Yuto at 2022-01-21 17:42

複数の Heroku アカウントを使い方

プラグインをインストール heroku plugins:install https://github.com/heroku/heroku-accounts.git 使い方 アカウントを追加 例えば、personalというアカウント名をすると: heroku accounts:add personal Enter your Heroku credentials. Email: あなたのメール Password: パスワード SSH キーを作る ssh-keygen -t rsa -C "アカウントのメール" ~/.ssh/config というファイルに情報を追加 Host heroku.personal HostName heroku.com IdentityFile ~/.ssh/id_heroku_personal_rsa IdentitiesOnly yes アカウントを一覧 heroku accounts アカウントを使う heroku accounts:set personal アカウントを削除する heroku accounts:remove...
Created by Yuto at 2022-01-21 17:42

Ruby on Rails で vote (like, dislike, unvote) 出来るアプリケーションを作る (acts_as_votable)

>>> デモサイトはこちらです <<< >>> 参考:Bootstrapの開発環境を自動的に作る <<< このアプリケーションでは、ユーザーはLike、Dislike、またはUnvote出来る機能を追加したいと思います。 ![Screen Shot 2015-05-31 at 23.48.46.png](https://qiita-image-store.s3.amazonaws.com/0/35605/4ae10c18-36d9-52a2-7088-117b5518dee8.png) 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' &times;
Created by Yuto at 2022-01-21 17:42

【 Ruby on Rails】複数のOmniauth

>>> アプリケーションはこちらです <<< 参考:Bootstrapの開発環境を自動的に作る ![Screen Shot 2015-05-27 at 20.28.11.png](https://qiita-image-store.s3.amazonaws.com/0/35605/d4659969-7c74-3230-b216-478692ddab53.png) 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エージェントをインストールして設定する

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開発環境のメールを受信する

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」で管理画面にアクセスできます。 ![スクリーンショット 0003-10-30...
Updated by Yuto at 2022-01-20 23:55
Ruby on RailsアプリでAWS SESを使ってメールを送信する方法(設定から実装まで)

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