【Rails】Flashメッセージに「閉じるボタン」をつける

Flashメッセージはブラウザをリロードすれば消えますが、メッセージ横に×ボタンを設置してクリックしたらcloseできるようにしました。
アラートはBootstrap3のalert-infoとalert-dangerを使用して、若干cssを追加しています。

rails alert info

rails alert danger

レイアウトにアラートを設置する

レイアウト毎に共通して同じアラートを使う場合ですが、レイアウトのヘッダーの下部にアラートのパーシャルを読み込むようにしました。

app/views/layouts/application.html.erb

テンプレートの方は次の通りです。noticeかalertかで分岐しています。×ボタンはHTML-特殊文字を使用しています。

app/views/layouts/_alert.html.erb

スタイルシート

一応、今回加えたcssも載せておきます。

簡単ですが以上です!ご覧いただきありがとうございました!!😀

【Rails5】Devise-i18nで日本語化する

Deviseの日本語化の手順をまとめました。

デフォルトのロケールを設定

デフォルトのlocaleは暗黙的に:enになっているかと思いますので、”config.i18n.default_locale = :ja”を以下のあたりに記述します。

config/application.rb

必要なgemを記載

Gemfile

“$ bundle install”します。

Deviseの日本語化

次のコマンドで日本語翻訳ファイルを生成します。

生成されたファイルにエラーメッセージを追加しています。和訳の内容は適宜変更してください!

config/locales/devise.views.ja.yml

あとは”$ rails s” でアプリを再起動して、完了です!!
ご覧いただき、ありがとうございました!😃

【Rails】Devise で Sign up 時に confirmableモジュールを使わずに Welcome メールを送信する

アカウト登録にDeviseのconfirmableモジュールを使かった場合、ユーザーに確認メールが送られ、そこに記載されたリンクをクリックしたら、アカウント登録完了となる機能を実装することができます。この方法とは別に本記事では、Deviseでアカウント登録はするが、シンプルに即アカウント登録完了とし、Welcomeメールのみ送る方法を実装してみました。
実装方法としてはDeviseのコントローラーは極力触らずに、Active Record コールバックの after_create を使っています。

環境はこちらです

メーラークラスとメソッドを指定して、次のコマンドを入力します。

メーラーメソッドの編集

UserMailerのuser_welcome_mailメソッド内に渡したい変数を定義します。
メソッドが呼ばれた後は、自動的に同名のviewsを読み込みます。
その他全メーラー共通の設定があればapplication_mailerに書きます。

app/mailers/user_mailer.rb

メールテンプレートの作成

メールテンプレートはデフォルトで views/user_mailer/user_welcome_mail.html.erb と views/user_mailer/user_welcome_mail.text.erb の二種類の形式が提供されていますが、これは「 HTMLメールが送信できない場合にはテキストベースのメールを送信する 」といった動作を保証するためであるので、二種類とも作成しておくことが望まれます。

app/views/user_mailer/user_welcome_mail.html.erb

app/views/user_mailer/user_welcome_mail.text.erb

Models

after_create コールバックを使うことで、Userが新規作成された後にメールを送信するためのメソッドを呼び出すことができます。
confirmableモジュールを使う場合:confirmableの記載をしますが、今回はしていません。

app/models/user.rb

メールサーバーの設定

開発環境のメールサーバの設定はGmailの場合です。

config/environments/development.rb

テストしてみてメールが届いたけど、引数が渡されなかったのですが、私の場合、configure_sign_up_paramsの設定を忘れていました!汗

app/controllers/users/registrations_controller.rb

以上です!ご覧いただきありがとうございました!!😆

Railsアプリにdrawer.jsで横から出てくるドロワーメニューを導入する

rails drawer js hamburger

横から出てくるハンバーガーメニューの drawer です。タップするとアニメーションでハンバーガーメニューが × ボタンに変わります。閉じるときは × ボタンの他にメニュー領域以外をタップしても閉じます。

Drawer
https://github.com/blivesta/drawer/
http://git.blivesta.com/drawer/

読み込み

CDNを読み込む方法で行いました。iScrollはメニュー部分のスクロールを行うプラグインです。jqueryを使えるように ‘jquery-rails’を入れています。

app/views/layouts/application.html.erb

bodyタグに “drawer drawer–left” クラスを指定しています。ここを ‘drawer–right’ にすると右から、 ‘drawer–top’ にすると上からドロワーメニューが出てきます。 https://github.com/blivesta/drawer/blob/master/scss/_position-right.scss

Gemfile

app/assets/javascripts/application.js

ヘッダー

app/views/layouts/_header.html.erb

レスポンシブなヘッダーになっていて、デフォルトのブレイクポイントは次の通りです。

jQuery

基本はこれだけで動作します。

app/assets/javascripts/drawer.js

その他オプションは次の通りです。

簡単ですが以上です!ありがとうございました!!

【Rails5】gmaps4rails + geocoder で GoogleMapを表示させる

google map rails

Ruby on Rails で gmaps4rails と geocoder というライブラリを使って、ユーザーが入力したアドレスから、経度と緯度を取得して、Google Map を表示できるように実装していきたいと思います。

Google Maps for Rails
https://github.com/apneadiving/Google-Maps-for-Rails
Geocoder
https://github.com/alexreisner/geocoder

環境はこちらです

準備

Gemfile

あらかじめ Article モデルがあるとして、そこに緯度・経度のデータを格納するカラムを追加します。

app/assets/javascripts/application.js

こちらからunderscore-min.jsの中身を全てコピーして、underscore.jsという名前で作成し、 app/assets/javascripts/ に配置します。

Models

対象となるモデルに次の記述を追加すると、 geocoder が address から経度・緯度を取得してくれます。

app/models/article.rb

Google APIキー

Google Maps JavaScript APIを使うためにはAPIキーが必要です。
下記URLにGoogleアカウントでログインしてAPIキーを取得してください。
https://console.developers.google.com/?hl=ja

対象レイアウトの head 内に以下の script を読み込ませます。Google Map の APIキーは環境変数に入れています。

app/views/layouts/application.html.erb

Views

オプションで scrollwheel を false に設定するとスクロールイベント(ページのスクロール中にMapが拡大・縮小する)を無効にできます。
handler.getMap().setZoom(拡大率); でマップの拡大率を調節してください。

app/views/articles/show.html.erb

Controllers

ストロングパラメータも忘れずに設定します。

app/controllers/articles_controller.rb

ユーザーがアドレスを入力できるように、 field を追加します。

app/views/articles/_form.html.erb

createすると longitude, latitude に経度・緯度の値が格納されて マップが表示されます。

以上です!ご覧いただき、ありがとうございました!!😊

【Rails】gem ‘bxslider-rails’ でスライドショーを作成する

bxslider rails
レスポンシブルでオプションも豊富なコンテンツ・スライダーの “bxSlider” が Ruby on Rails の gem でもありましたので使ってみました。

本記事ではあらかじめ Article モデルに 画像を格納する image カラムがあって、 数件データが入っていることを前提にすすめていきます。

bxSlider Rails
https://github.com/manfe/bxslider-rails

環境はこちらです

準備

Gemfile

app/assets/javascripts/application.js

app/assets/stylesheets/application.css.scss

Controllers

ここではシンプルに全件取得とします。

app/controllers/top_controller.rb

Views

ここでは each で 取り出された article の image と title を link_to do ~ end で囲っています。

app/views/top/index.html.erb

jQuery

ここでは適当な js ファイルを作成しています。こちらのオプションは本記事のサンプルとして動作させているものです。

app/assets/javascripts/bxslider.js

boxSlider オプション デフォルト値

以上です!ご覧いただきありがとうございました!!

【Rails5】Carrierwave + Fog で AWS S3 に画像をアップロードする

CarrierWave を利用することで手軽に画像アップロードをおこない、fog と連携してクラウド上にあるAWS S3へのアップロードをおこなえるようにします。ちなみに、S3 は新規登録から1年間は無料で利用できます。
前提として、Rails アプリにあらかじめ既存モデル(本記事ではArticle)があり、 AWS S3 でバケットを作成してある状態で進めていきます。

Amazon S3
https://aws.amazon.com/jp/s3/
CarrierWave
https://github.com/carrierwaveuploader/carrierwave
Fog::Aws
https://github.com/fog/fog-aws
rmagick
https://github.com/rmagick

環境はこちらです

準備

本記事で必要な gem をインストールします。RMagickは画像処理を行うライブラリで、CarrierWaveからサムネイルなどを作るときに必要になります。

Gemfile

画像保存用のカラムを追加するためのマイグレーションファイルを生成します。本記事では Article テーブルに追加します。

db/migrate/20xxxxxxxx_add_image_to_articles.rb

アップローダの作成

次のコマンドで生成されたアップローダーをそれぞれの好みで設定してください。本番環境もしくはステージング環境で s3 に送り、開発環境等では public 配下に一時的に保存します。

app/uploaders/image_uploader.rb

モデルとの紐づけ

使用するモデルに次の一行を追記して、モデルとの紐づけをおこないます。

app/models/article.rb

AWSの設定

config/initializers/carrierwave.rb を作成して、以下のように設定します。

config/initializers/carrierwave.rb

ちなみにこちらは Heroku に環境変数を入れる時のコマンドです。

ファイルのアップロード

モデル.persisted?は保存済みかどうかをチェックしてくれます。<%= f.file_field :image %> でアップロードできます。あとはお好みですが、バリデーション時も値を保持させるために <%= f.hidden_field :image_cache %> や、既存の画像を削除したい場合の <%= f.check_box :remove_image %> を追加します。

app/views/articles/_form.html.erb

ストロングパラメータの設定もしておきます

app/controllers/articles_controller.rb

画像の表示

こちらもお好みですが、もし画像がない場合は no_image.png を表示させます。その画像は app/assets/images/ などに置いておきます。

app/views/articles/show.html.erb

はい、今回は以上です!ご覧いただきありがとうございました!😆

【Rails】has_many と belongs_to のリレーションで データベースに保存する

あらかじめ Userモデルがあって、Userが複数のArticlesを作成できて、Articleは一人のUserに属するという、1対多( has_many – belongs_to )の関係を作っていきたいと思います。

環境はこちらです

Migration

既存のモデル(ここでは User )との、リレーションを構築するので、 user:references とします。このオプションで user_id カラム、 外部キー制約、インデックスを自動で作成してくれます。ちなみに references は belongs_to に入れ替えても同じです
また、 CRUD 機能を素早く構築するために、本記事では scaffold を使っています。

db/migrate/20xxxxxxxxxx_create_articles.rb

書き換えられたスキーマものせておきます。index もはられていますね。

db/schema.rb

モデルにhas_manyとbelongs_toを追加する

User は複数の articles を持つという関連を定義するので、 has_many :articles です。また、dependent: :destroyオプションを追加することで、User が articles を持ったまま退会してしまったなどの時、 User に 紐付いていた articles も全て削除してくれます。

app/models/user.rb

Article 側は一人の User に属するので、 belongs_to :user と書きます。

app/models/article.rb

Controllers

関連するモデルを生成するときは、 build メソッドを使います。これで外部キーに値が入った状態でインスタンスが生成できます。
ちなみに本記事では 「ログインしている User のみ Articles を作成できる」としているため、 current_user としています。
成功した後のリダイレクト先は my_page にしています。

app/controllers/articles_controller.rb

また、本記事では my_page でログインしている User が自身の Articles を管理できるようにしています。

app/controllers/users/registrations_controller.rb

Views

最後に my_page で一覧表示させます。 articles/index をそのままこっちに持ってきた感じです。

app/views/devise/registrations/my_page.html.erb

rails create articles

以上です!
また、Userにreferencesを持たせるパターンの実装はこちらの記事をご覧ください。
参考になれば幸いです!

【Rails5】Devise でコントローラーをカスタマイズして、ユーザー登録後のリダイレクト先を my page にする

本記事では Devise のコントローラーをカスタマイズして、ユーザー登録後、 ログイン後のリダイレクト先を my_page に指定したいと思います。

Devise
https://github.com/plataformatec/devise

環境はこちらです

Generate

Deviseはユーザーモデルをベースとして進めていきます。コントローラーをカスタマイズしていくために、次のコマンドを実行します。
すると、app/controllers/users/ にそれぞれのコントローラーが作成されます。

Routes

devise_for でコントローラーのルーティングを、 devise_scope で my_page のルーティングを設定します。

Controllers

ユーザー登録後は registrations_controller に after_sign_up_path_for を、 ログイン後は sessions_controller に after_sign_in_path_for のメソッドをオーバーライドします。
ちなみにこれらのメソッドは app/controllers/application_controller.rb に定義した方が管理しやすいという意見もあるかと思いますが、 個人的には application_controller.rb はどんどん煩雑になってくるので、 今回はそれぞれのコントローラーに定義しています。

registrations_controller に my_page アクションを追加します。 また、 authenticate_user! メソッドは、Deviseが提供しているメソッドで、ログイン有無のチェックして、ログインしていない場合はログイン画面にリダイレクトさせます。

app/controllers/users/registrations_controller.rb

app/controllers/users/sessions_controller.rb

ちなみに、ユーザー登録にメール認証を導入してくれる confirmableモジュール を有効にしている場合は、 after_sign_up_path_for ではなく after_inactive_sign_up_path_for に指定することになります。

Views

リダイレクト先となる my_page.html.erb を作成します。ここではログアウトできるように delete_path を書いておきます。

app/views/devise/registrations/my_page.html.erb

あとはユーザーのログインの有無を確認するために、 header などに <%= current_user.email if user_signed_in? %>
などを書いておくといいですね。 current_user や、 user_signed_in? も Devise のヘルパーメソッドです。

今回は以上です。ご覧いただき、ありがとうございました!😺

【Rails】Deviseのsign_upフォームにjQuery-Validation-Engine-railsを導入する

rails validation engine

エラーメッセージをPost送信する前に、ユーザーに知らせるために、本記事では ‘jQuery-Validation-Engine-rails’ を導入します。ユーザ認証機能には ‘devise’、CSSフレームワークには’devise-bootstrap-views’を使っています。

jQuery.validationEngine
https://github.com/posabsolute/jQuery-Validation-Engine
Devise
https://github.com/plataformatec/devise
Devise Bootstrap Views
https://github.com/hisea/devise-bootstrap-views

環境はこちらです

Gemfile

以下のコマンドでdeviseのインストールから、セットアップまで行います。

Assets

必要なアセットを読み込ませていきます。

app/assets/stylesheets/application.scss

app/assets/javascripts/application.js

jQuery

基本形はこちらですが、その他オプションはドキュメントをどうぞ。

Views

フォームにidを設定し、それぞれの入力フィールドにバリデーションを設定していきます。

ちなみにsimple_formを使っている場合は、このような感じなるかと思います。

あとはhttps://localhost:3000/users/sign_upにアクセスして、動作を確認して下さい。

エラーメッセージの日本語化

jQuery-Validation-Engine-railsのエラーメッセージの日本語化は、次のリンクから「jquery.validationEngine-ja.js」をダウンロードして app/assets/javascripts/ 配下に配置します。
https://github.com/posabsolute/jQuery-Validation-Engine/blob/master/js/languages/jquery.validationEngine-ja.js

以上です。ご覧いただき、ありがとうございました!😊

【Rails5】impressionistを使ってページビューのランキングを作る

rails pv impressionist gem

ページビュー数の計測ができる「impressionist」というgemを導入します。ip_addressやsession_hashなどの情報を取得してくれるので、ユニークユーザー数が計測できます。本記事ではscaffoldでサンプルを用意して、PV数でランキングを作るところまでやってみたいと思います。

impressionist
https://github.com/charlotte-ruby/impressionist

バージョンはこちらです

準備

scaffoldでサンプルとなる環境を作ります。対象テーブルにPV数を格納する impressions_count カラムを作りintegerにしておきます。

生成されたマイグレーションファイルにimpressions_count カラムに デフォルト値を 0 に設定しておきます。

db/migrate/20xxxxxxxxxx_create_users.rb

Gemfile

$ bundle install して次の generate コマンドを実行します。

このコマンドだけで下記のマイグレーションファイルを生成してくれます。

db/migrate/20xxxxxxxx_create_impressions_table.rb

Models

対象となるモデルクラスに :counter_cache オプション追加します。

app/models/user.rb

Controllers

app/controllers/users_controller.rb

Views

app/views/users/show.html.erb

ブラウザをロードしてみるとImpressionのカラムにそれぞれデータが格納され、Userのimpressions_countが + 1 になりました。

rails impressionist

PVランキングを作る

次にページビュー数でランキングを作ってみます。本記事は表示用のサンプルとして、Userテーブルにseedデータを流しますが、実際にはImpressionテーブルのそれぞれのカラムにもデータが必要ですので、実際の運用には、それぞれの環境に合わせて行ってください。

db/seeds.rb

app/controllers/users_controller.rb

app/views/users/index.html.erb

rails impressionist rank

はい、これでトップ10のランキングができました!!また機会があれば週毎・月毎などの一定期間ごとのランキングの実装もしてみたいなと思います。
ご覧いただき、ありがとうございました!!

【Rails】GitHubのアカウント登録 から、Herokuへデプロイまで

ソースコード管理システムのGitHubを活用して、Ruby on Rails アプリケーション開発を効率化しましょう!また、Herokuは無料で使えるクラウドプラットフォームで、Webアプリの公開が簡単にでき、小規模サイトや個人ブログ程度にも使えます。本番アプリとは別でステージング環境も無料で追加できるので、おすすめです。

GitHub アカウント登録


1)まずは、GitHubのトップページにアクセスして、ユーザ名とメールアドレス、パスワードを入力してSign upします。
2)Create an accountをクリック
3)「Choose your personal plan」で無料プランのUnlimited public repositories for free.を選択し、Continue。
4)経験について答えて、Submit
5)登録したメールアドレス宛に認証メールが届くので、そのメールに記載のURLもしくはボタンをクリックして登録完了です。

Gitリポジトリの作成

ルート・ディレクトリで次のコマンドを打ち、Gitリポジトリの新規作成、または既存のGitリポジトリの再初期化を行います。

Gitはすべてのファイルの変更履歴を管理しますが、管理対象に含めたくないファイルは .gitignore で管理します。ここではRails Tutorial を参考にさせていただきます。

.gitignore

Gitに追加、コミット

次のコマンドで、カレントディレクトリ(自分の今いるディレクトリ)以下の全てのファイルをステージングエリアに追加します。「.」がカレントディレクトリを示します。

「-m」フラグで、コミットメッセージをつけて変更をコミット(保存)します。

※「git add .」 と 「git commit -m」 を 一度に行う場合は「git commit -a -m “コミットメッセージ”」です。

GitHubにリモートリポジトリの作成 ~ プッシュ

次にGitHubのリモートリポジトリの作成を行います。

ブラウザで GitHub を開き、 New repository をクリック => Repository name を入力 => Create repository をクリックで作成できます。

次のコマンドでルートディレクトリから、リモートリポジトリを追加することができます。
ここではRepository nameを「test」、 GitHubのusernameを「remonote」としました。それぞれ適宜、変更してください。

登録されているリモートリポジトリの確認は次のコマンドをうつ。

間違えた時にリモートリポジトリを削除する場合はこれです

続いて次のコマンドで、ローカルリポジトリを、リモートリポジトリにプッシュ(同期)します。

Username と Password を聞かれるのでGitHubのアカウント設定のものを入力。

herokuへdeploy

Gemfileに、下記を追記します。pgはherokuで利用するデータベースPostgreSQLで、rails_12factorは、herokuでまとまったアセットを利用するために使用します。

Gemfile

gemのインストール

そして、上記の追加分をコミット。

続いて、herokuのアカウントを作成してください。
https://dashboard.heroku.com/
そしてルートディレクトリで次のコマンドを実行。

Email と Password を入力。

Herokuに新しいアプリケーションを作成。heroku createの後ろにアプリ名を指定します。指定がないとHeroku側で適当なアプリ名が付けられますが、後から変更も可能です。

すでにあるからっておこられました。Heroku全体でユニークにする必要があるようです。そのままURLにも使われるので、他のユーザーに使われていないアプリ名が必要ですね。

そしてHerokuへプッシュすればデプロイとなりますが、、、、

Herokuではsqlite3はサポートしていないということで拒否されました。以下のようにsqlite3は開発環境の指定をします。

Gemfile

コミットしてから再度、Herokuにプッシュしたら今度はデプロイに成功しました。

あとはHerokuでもマイグレーションを実行して、シードデータを流す場合は、追加でコマンド入力してください。

gem ‘seed-fu’使っている場合はseed_fuですね。

これで $ heroku open または https://アプリ名.herokuapp.com でブラウザからアクセスできます。
お疲れ様でした!

【Rails】gem “meta-tags” で SEO 設定する

Ruby on RailsでSEOの設定を行うライブラリでmeta-tagsというGemがあります。本記事ではこのGemを使って全ページ共通のSEOの設定や個別ページでの設定をしていきたいと思います。OGP設定もすればSNSでの投稿時の見栄えもよくなります。本番運営するなら必須の設定ですね。

MetaTags
https://github.com/kpumuk/meta-tags

環境はこちらです

Gemfile

$ bundle install を実行

Helper

metaデータは直接app/views/layouts/application.html.erbに書いてもいいのですが、ヘルパーメソッドにして呼んだ方が head内がカオスにならなくてすみます。

app/helpers/application_helper.rb

Views

headに設定すればそのlayoutが適用されている全ページにデフォルトの設定が適用されます。

app/views/layouts/application.html.rb

あとは上書きしたいページ毎に set_meta_tags を設定して default_meta_tags を上書きします。

ここでは例としてshow.html.erbとしています。変数で渡すこともできます。

app/views/posts/show.html.erb

検索に引っかかって欲しくないページにはnoindex: trueを設定します。

以上となります!
メタタグは奥が深く、サイトによって適切に設定しいく必要がありそうです。🤔

【Rails5】setTimeoutを使ってflash messageを自動的に非表示にする

rails flash message
Ruby on Railsでredirect_toを使ってフラッシュメッセージを表示させた際に、そのフラッシュメッセージを表示させたままにせずに、一定の時間が経過後に自動でフェードアウトして非表示にさせたいと思うことがありました。本記事ではそれをjQueryのsetTimeoutを使った遅延処理で実現したいと思います。

合わせて、本記事ではサンプルを兼ねて、bootstrapをflashメッセージを使いたいと思います。

環境はこちらです

準備

Gemfile

$ bundle install を実行

app/assets/stylesheets/application.scss

app/assets/javascripts/application.js

Controllers

redirect_toからのflashメッセージは、application_controller.rbに以下のadd_flash_typesを追記すれば簡単に使えます。

app/controllers/application_controller.rb

使用したいクラスのアクションにflash_typeを書きます。ここではredirect_toにsuccessを追記しました。

Views

送られたフラッシュメッセージをビューで表示します。nameに先ほどのsuccessが入ります。以下の記述はapplication.html.erbに書いてlayoutの全共通にしてもいいですが、ここではパーシャルにして、必要な箇所にだけ埋め込めるようにしました。

app/views/layouts/_flashes.html.erb

jQuery

最後に本記事のメインとなるsetTimeoutをセットします。今回はフラッシュメッセージをゆっくり非表示にしたいので、オプションをfadeOut(‘slow’)としています。動作のタイミングはミリ秒表示なので、「1000」の場合は1秒後、「10000」の場合は10秒後となります。本記事では「3000」で3秒後としていますが、この辺りはお好みで変えてみてください。

以上で、動作するかと思います。
ご覧いただきありがとうございました。😄

【Rails5】ajaxでcheck_boxのboolean値を切り替える

rails boolean ajax

チェックボックスのboolean値をajaxリクエストでデータベース更新を手軽にするやり方です。

準備

Gemfile

bundle install します

assets/javascripts/application.js

サンプルとしてscaffoldでユーザーを作ります。

Boolean型のカラムにデフォルト値と、null: falseを追加します。

db/migrate/20xxxxx_create_users.rb

$ rails db:migrate を実行します。

Routes

post送信するためのルートを追加します

config/routes.rb

Controllers

特にrenderの記述はしなくても勝手にやってくれます。後からカラムを追加した方はprivateをストロングパラメータに追加することを忘れないように

app/controllers/users_controller.rb

Views

app/views/users/show.html.erb

remote: trueを指定します。これでajaxリクエストになりますね。

アクションと同名のjs.erbファイルをレンダーしてくれます。

app/views/users/user_private.js.erb

分かりやすくするためにクラスをつけています。

app/views/users/private_boolean.html.erb

app/assets/stylesheets/users.scss

以上です。間違っていたら教えていただけるとありがたいです。

Railsのi18nでviewsを日本語/英語に切り替える機能を実装

rails i18n

Ruby on Railsにデフォルトで入っているi18nというライブラリを使って、ヘッダーに設置した「日本語/English」のリンクによって言語(locale)を切り替える機能を実装したいと思います。
URLのパラメータで言語を切り替える方法なので、「http://xxxx.com/」か、「http://xxxx.com/ja/」なら日本語、「http://xxxx.com/en/」なら英語とします。

Rails i18n
https://github.com/svenfuchs/rails-i18n

環境はこちらです

i18nがデフォルトで入っているかは$ bundle listを実行すると、「i18n (1.0.1)」とか出てくるので確認ができます。

Config

デフォルトのlocaleは暗黙的に:enになっているかと思いますので、config.i18n.default_locale = :jaを以下のあたりに記述してください

config/application.rb

Routes

localeをパスに含めるためにscopeで囲います。

config/routes.rb

このようなルーティングになります。

Controllers

application_controller.rbにset_localeでパスのパラメータを現在の言語I18n.localeに設定します。また、デフォルト値として現在の言語を指定するようにします。

app/controllers/application_controller.rb

Views

ヘッダーにlocalを切り替えるリンクを設置します。

app/views/layouts/_header.html.erb

users#showの場合のビューです。t ( translate ) ヘルパーメソッドを使って書いていきます。訳文メッセージの中に変数を含め、ビューから変数に値を渡すこともできます。

app/views/users/show.html.erb

日本語訳をja.ymlに追加します。

config/locales/en.yml

はい、以上で動作するかと思います!ご覧いただきありがとうございました!
今回はこちらを参考にさせていただきました。https://railsguides.jp/i18n.html
i18nも奥が深いですね。🤔

Rails5でkaminari + faker + bootstrap を使ってページネーションを作成する。

kaminariというgemを使ってページネーションを実装していきます。ある程度データが必要なのでダミーデータはFakerを使って投入します。kaminariにはあらかじめテーマがいくつかあるようですが、今回はbootstrapを適用したいと思います。i18nで日本語化もします。

Kaminari
https://github.com/kaminari/kaminari
Faker
https://github.com/stympy/faker
https://remonote.jp/rails-gem-faker

バージョンはこちらです

準備

scaffoldでユーザーを作って進めていきます。

Gemfile

application.cssの方はScssを使うのでリネームします。
application.css => application.scss (application.css.scssとしてもOK!)

app/assets/stylesheets/application.scss

fakerでseedデータを入れる

db/seeds.rb

kaminariを適用する

次のコマンドでkaminariの設定ファイルが生成されます。

config/initializers/kaminari_config.rb

config.default_per_page = 5で全体として1ページ辺りの項目数を設定するか、モデル毎に設定する場合は次のように書きます。

app/models/user.rb

app/controllers/users_controller.rb

一覧表示するデータの上と下の2箇所に、kaminariのヘルパーを一行づつ追記します。

app/views/users/index.html.erb

これで5件づつ表示できるようになりました。
railsでbootstrapとkaminariでpagenationする

i18nで日本語化

config.i18n.default_locale = :jaを以下のあたりに記述します

config/application.rb

config/locales/ja.yml

はい、以上です!
最後までご覧いただき、ありがとうございました!😃

Railsの多対多で、ユーザーが複数のタグを持ち、合計数をcountする

has_and_belongs_to_manyでタグのカウント合計

前回の記事ではタグをseed-fuやorder_as_specifiedといったライブラリを用いて作成していまが、今回はそのタグをユーザーが複数持てるようにして、上の画像のようにタグの一覧表示をした際に、そのタグがいくつ持たれているかを表示するための合計数を取得します。
考え方としてはユーザーは「複数のタグが持てるし、タグも複数のユーザーを持てる関係」になるので、railsのリレーションとしては多対多の関係にしていきます。
いろいろやり方はあるかと思いますが、今回はhas_and_belongs_to_manyを使う方法で実現していきたいと思います。

バージョンはこちらです

Migration

userモデルとtagモデル、それぞれnameカラムを持っているとします。

次にそれらの中間テーブルを作成します。create_tags_usersのところはテーブル名をアルファベット順でつなげます

中間テーブルはidカラムを作成しないようにするため、以下のようにマイグレーションファイルにid: false を追加します。

Models

それぞれのモデルにアソシエーション設定を追記します。

app/models/user.rb

app/models/tag.rb

※ extend OrderAsSpecifiedは前回の記事で入れたgem ‘order_as_specified’のextendです

Controller

ユーザーのストロングパラメータにtag_ids: []を追加しておきます。

app/controllers/users_controller.rb

Views

ユーザーがタグを選択できるように、タグのチェックボックスを作ります。

app/views/users/_form.html.erb

↓このようになるかと思います。
タグのチェックボックス

ユーザーとタグの一覧表示です。

app/views/users/index.html.erb

ここではサンプルとして、10のユーザーデータと、それぞれ適当にタグを持たせています。
ユーザーのタグ一覧

タグのスタイルも記載しておきます。

最後にcountメソッドで合計数を取得したら完成です。

以上です!ご覧いただき、ありがとうございました!😁

Rails5でbootstrap tooltipを動的に使う

rails tooltip

リンクにちょっとしたツールチップもあったら、ユーザビリティが上がりますね!さらにrailsなら動的にデータが変わった場合、ツールチップの表示内容も変わります。今回はbootstrap tooltipを使って簡単に実装してみたいと思います。これはhover時に動作するものですが、クリック時に動かしたいならpopoversというものもあります。
また、ダミーのデータはFakerというライブラリを使って投入します。

bootstrap-tooltip-rails
https://github.com/brandonhilkert/bootstrap-tooltip-rails
Documentation
https://getbootstrap.com/docs/4.1/components/tooltips/
Faker
https://github.com/stympy/faker

環境はこちらです

準備

準備としてScaffoldでユーザーと、ダミーデータを入れるカラムも生成します。カラム名は適当に変えてください。

Gemfile

bundle install します

assets/javascripts/application.js

assets/stylesheets/application.scss

fakerでダミーデータ作成

Userテーブルに20件のnameとbookのダミーデータを作成する内容のファイルをseed.rbに書きます。

db/seed.rb

次のコマンドでseedデータが入ります。

コンソールで入っているのが確認できました。

jQuery

オプションのplacementはtop,bottom,right,leftでツールチップのでる向きが変わります。
その他のオプションはこちら

Views

title属性にRubyコードを入れます。

これで動きました!
ご覧いただき、ありがとうございました!😆

Rails5でjp_prefectureとjpostal.jpを使って郵便番号から住所を自動入力する

rails jp_prefecture jpostal

ユーザーに住所を入力してもらう時、郵便番号を入力したら、住所も自動で入るフォームをjp_prefectureとjpostal.jsで作っていきます。
都道府県はプルダウンメニューにします。また、formはsimple_formで書いています。

JpPrefecture
都道府県コードと都道府県名を変換するGemです。
https://github.com/chocoby/jp_prefecture
jquery.jpostal.js
郵便番号から住所を自動入力してくれるjQueryプラグインです。
https://github.com/ninton/jquery.jpostal.js/

環境はこちらです

準備

はじめにScaffoldでユーザーを作っておきます。

$ bundle install を実行します

jpostal.jp – GitHubからダウンロードしてjquery.jposta.jsというファイルを、app/assets/javascripts/に配置します。

assets/javascripts/application.jsにこれを入れないとrails5ではjQueryが動きません。

Migration

郵便番号や住所を入れるカラムを追加していきます。

できたマイグレーションファイルに次のようにカラムを書き足します。
ちなみにprefecture_codeはintegerです。

$ rails db:migrate を実行します。

Model

prefecture_codeからprefecture_nameに変換するメソッドをモデルに書いておきます。

app/models/user.rb

View

シンプルフォームで書いていきます。都道府県はプルダウンにするので、collectionです。include_blankで空のオプションを先頭に追加しています。

app/views/users/_form.html.erb

jQuery

CoffeeScriptでjpostalメソッドを呼んでいます。それぞれのフィールドのID属性を指定しておきます。

app/assets/javascripts/user.coffee

これで郵便番号を入力すると、住所が自動で入るかと思います。

Controller

忘れずにストロングパラメーターを追加しておくことで、create, updateができるかと思います。

app/controllers/users_controller.rb

以上です!
また、gemを使わずに都道府県データを持つ実装方法の記事はこちらをご覧ください。
ありがとうございました。😊