Ruby on Rails 7でselect2を導入方法
Webpackerの場合はこちらの記事です (https://qiita.com/YutoYasunaga/items/5cbbd546f51d8b37dac8)
select2とjQueryインストール
yarn add select2 jquery
select2 コントローラー作成
```javascript:app/frontend/controllers/select2_controller.js
import { Controller } from "@hotwired/stimulus"
import $ from 'jquery';
import 'select2/dist/css/select2.min.css'
import Select2 from "select2"
export default class extends Controller {
connect() {
Select2()
$('.js-select2').select2()
//...
Updated by Yuto at 2022-10-25 06:00
Ruby on RailsでQiitaエディターみたいなマークダウン機能を作る。TOC、ライププレビュー、ファイルアップロード、ファイル名、コピーボタンなど全て対応!
こんにちは。ずっと前からQiitaのエディターみたいなマークダウンエディターを作りたかったです。
今回はRailsアプリケーションでマークダウンが使えるまでの実装をご紹介いたします。jQueryは使いません。この記事の内容は以下になります。
マークダウンの導入
TOC (Table of contents)
コードブロックのテーマの設定
コードブロックの上にファイル名の表示
コピーボタンの実装
ライププレビュー
ファイルアップロード
アップロードの前に画像を圧縮したりリサイズしたりする
結果はこのようになります。
1.gif https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35605/792a9929-0cea-d0ca-aa88-5a0309f3f27c.gif
では、始めましょう!
マークダウンの導入
まずは必要なGemをインストールする
ruby:Gemfile
gem 'redcarpet' # Markdown parser
gem 'rouge' # Syntax...
Created by Yuto at 2022-10-10 13:43
Ruby on Rails 7にFont Awesome 6を導入
importmapを使う場合
./bin/importmap pin @fortawesome/fontawesome-free @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons
yarnを使う場合
yarn add @fortawesome/fontawesome-free @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons
アプリケーションに導入する
js:application.js
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far...
Created by Yuto at 2022-10-10 06:00
Ruby on Rails + Docker + Capistrano + Puma + Nginx AWS EC2へデプロイ方法のメモ
AWS EC2 インスタンスの準備
AWS コンソール (https://ap-northeast-1.console.aws.amazon.com/ec2/v2/home?region=ap-northeast-1#Instances:sort=instanceId)にアクセスする
「Launch Instance」をクリックする
Step 1: Choose an Amazon Machine Image (AMI)
「Ubuntu Server 16.04 LTS (HVM), SSD Volume Type 64bit (x86」を選択する
スクリーンショット 2020-05-03 2.35.38.png https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35605/8735bc25-93b2-dc3b-baaa-3acf7f60cca0.png
Step 2: Choose an Instance Type
「t2.micro」を選択する
スクリーンショット 2020-05-03...
Updated by Yuto at 2022-10-09 06:00
【Ruby on Rails】sidekiqの導入手順(ローカル、Heroku、AWS EC2、Docker、Capistrano)
redisを準備する
sidekiqを使う為にredisが必要です。
redisインストール(Mac OS)
brew install redis
redis起動
brew services start redis
docker-composeを使う場合
yaml:docker-compose.yml
redis:
image: redis:latest
volumes:
- redis:/data
ports:
- '6379:6379'
アプリケーションにsidekiqを導入する
ruby:Gemfile
gem 'sidekiq'
ruby:config/application.rb
config.active_job.queue_adapter = :sidekiq
sidekiqを起動する
sidekiq -q default -q mailers
もしくは
yml:config/sidekiq.yml
:concurrency: 25
:pidfile:...
Updated by Yuto at 2022-10-09 06:00
Cách học để đậu chứng chỉ Ruby Gold trong một tháng
Ở phần trước mình có viết bài giới thiệu về cách học để đậu chứng chỉ Ruby Silver trong một tháng, phần tiếp theo này sẽ là Ruby Gold.Chứng chỉ Ruby Gold là gì?
Ruby Association Certified Ruby Programmer Gold version 2.1 hay còn gọi tắt là Ruby Gold hoặc Ruby Vàng, là một chứng chỉ được cấp bởi tổ chức phi lợi nhuận Ruby Association, được điều hành bởi người sáng tạo ra ngôn ngữ Ruby - Yukihiro Matsumoto. Điều kiện để được công nhận đậu Ruby Gold là bạn đã đậu Ruby Silver và trong kỳ thi...
Updated by Yuto at 2022-09-20 19:34
Cách học để đậu chứng chỉ Ruby Silver trong một tháng
Phần tiếp theo: Cách học để đậu chứng chỉ Ruby Gold trong một tháng
Chứng chỉ Ruby Silver là gì?
Ruby Association Certified Ruby Programmer Silver version 2.1 hay còn gọi tắt là Ruby Silver hoặc Ruby Bạc, là một chứng chỉ được cấp bởi tổ chức phi lợi nhuận Ruby Association, được điều hành bởi người sáng tạo ra ngôn ngữ Ruby - Yukihiro Matsumoto.
Mục đích lấy chứng chỉ Ruby Silver
Đối với bản thân mình, người bắt đầu tiếp xúc với ngôn ngữ lập trình Ruby từ năm 2013 thì chứng chỉ này có ý...
Updated by Yuto at 2022-09-20 01:34
【Ruby on Rails】RSpecとFactoryBotとShoulda MatchersとCapybaraを導入メモ
RSpec設定
ruby:Gemfile
group :test do
gem 'rspec-rails'
end
rails g rspec:install
:.rspec
--require spec_helper
--format documentation
ruby:config/application.rb
config.generators do |g|
g.test_framework :rspec,
fixtures: false,
controller_specs: false,
view_specs: false,
helper_specs: false,
decorator_specs: false,
routing_specs: false
Spring設定
ruby:Gemfile
group :test do
...
Updated by Yuto at 2022-09-19 06:00
Viteを使っているRailsアプリに一部のBootstrap 5を導入方法
Bootstrapはかなり有名で便利ですね。早くアプリケーションが使えるようにするためよく使う場合が多いと思います。
しかし、いつも全てのBootstrapの機能が必要ではない場合もあります。その時に一部の機能だけ導入すればいいです。
今回はViteを使っているRails 7アプリにBootstrap 5を導入してみました。
Bootstrap 5 と popperjs/coreを導入
yarn add bootstrap @popperjs/core
BootstrapのCSSを導入
```scss:app/assets/stylesheets/bootstrap.scss
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins';
@import...
Created by Yuto at 2022-06-12 00:43
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 11.54.00.png...
Updated by Yuto at 2022-01-29 21:22
Rails 7 + Devise + omniauth-facebook + omniauth-twitterでログイン機能作成(基本から詳細まで)
この記事は devise、omniauth-facebook、omniauth-twitterのGemを使って、メールとFacebookとTwitterでログイン機能を作ります。
まずはFacebookとTwitter側の設定から始めます。
Facebook側の設定
アプリを作成URL:https://developers.facebook.com/apps/create (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 10.59.42.png...
Updated by Yuto at 2022-01-29 21:22
【Ruby on Rails】Webpackerにselect2導入メモ
Ruby on Rails 7 (stimulus) の場合はこちらの記事です (https://qiita.com/YutoYasunaga/items/9044a3d590f7d8f1f41d)
jQuery導入
select2を使う為に、jQueryが必要です。
jQuery導入方法 (https://qiita.com/YutoYasunaga/items/9a7eaa0a4ca898535912)
select2導入
:terminal
yarn add select2
```javascript:app/javascript/packs/application.js
import 'select2'
import 'select2/dist/css/select2.css'
document.addEventListener('turbolinks:load', () => {
$('.js-select').select2({
placeholder: 'Select an option',
allowClear: true
...
Updated by Yuto at 2022-01-26 19:57
Ruby on Rails 7 search selectbox with select2 and stimulus
Install select2 and jQuery
yarn add select2 jquery
Create select2 controller
```app/frontend/controllers/select2_controller.js
import { Controller } from "@hotwired/stimulus"
import $ from 'jquery';
import 'select2/dist/css/select2.min.css'
import Select2 from "select2"
export default class extends Controller {
connect() {
Select2()
$('.select2').select2();
}
}
```
app/frontend/controllers/index.js
import Select2Controller from...
Created by Yuto at 2022-01-26 19:37
[Rails App] Bootstrapの開発環境を自動的に作る (bootstrap-generators)
>>> デモサイトはこちらです <<< (https://yuto-bootstrap-environment.herokuapp.com/)
参考
bootstrap-generators (https://github.com/decioferreira/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...
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)
>>> サンプルアプリケーションはこちらです <<< (https://renshu-upload-image.herokuapp.com/)
今日は Ruby on Rails で画像をアップロード出来るサイトの作り方をご紹介させて頂きます。
OPTIONAL: Bootstrapの開発環境を自動的に作る (http://qiita.com/YutoYasunaga/items/f53e62d850570eb85e4f)
まず、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...
Created by Yuto at 2022-01-21 17:42
Ruby on Rails で vote (like, dislike, unvote) 出来るアプリケーションを作る (acts_as_votable)
>>> デモサイトはこちらです <<< (https://yuto-vote-system.herokuapp.com)
>>> 参考:Bootstrapの開発環境を自動的に作る <<< (http://qiita.com/YutoYasunaga/items/f53e62d850570eb85e4f)
このアプリケーションでは、ユーザーは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...
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