【Rails】国一覧リストの実装(carmen-rails)

実装すること

• gem carmen-railsを使用して、ユーザープロフィールにて国一覧を選択・表示出来るようにする。

（私のPFが留学関係である為、世界各国で登録できるようにしたく、実装しました。）

carmen-rails: https://github.com/carmen-ruby/carmen-rails
https://github.com/jim/carmen-demo-app/

完成形

• デフォルトでは、日本が選択されているように設定。
• 居住地で国が一覧で表示され、選択が可能。

前提

下記の機能実装済み。
・devise(今回は、memberモデル)

schema.rb

ActiveRecord::Schema.define(version: 2021_05_05_122222) do

  create_table "members", force: :cascade do |t|
    t.string "email", default: "", null: false
    t.string "encrypted_password", default: "", null: false
    t.string "name", default: "", null: false
    t.text "introduction"
    t.string "image_id"
    t.string "country_code", default: "JP"  
    t.string "experienced_country", default: ""
    t.boolean "is_deleted", default: false, null: false
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.index ["email"], name: "index_members_on_email", unique: true
    t.index ["reset_password_token"], name: "index_members_on_reset_password_token", unique: true
  end
end

手順

①gem"carmen-rails"の導入
②country_codeカラムの追加
③controllerへの記載
④modelへの記載
⑤viewへの記載

おまけ
⑥日本語表示にしたい場合

実装

1.carmen-railsのインストール

Gemifileにcarmen-railsを追加します。

Gemfile

gem 'carmen-rails', '~> 1.0.0'

インストールします。

terminal

$ bundle install

2.country_codeカラムの追加

carmen-railsをしようする為には、カラムを追加する必要があります。

terminal

$ rails g migration AddCountryCodeToMembers

マイグレーションファイルができたと思うので、下記のように記載します。
デフォルトで「日本」と表示したいのでdefaultも記載します。

db/add_country_code_to_members.rb

class AddCountryCodeToMembers < ActiveRecord::Migration[5.2]
  def change
    add_column :members, :country_code, :string, default: "JP" 
  end
end

記載できたら、反映させましょう。

terminal

$ rails db:migrate

無事できたかschemaファイルで確認しておきましょう。

3.controllerへの記載

dbに保存する為にも、ストロングパラメーターにcountry_code追記しておきましょう。

members_controller.rb

class Public::MembersController < ApplicationController

  def show
    @member = Member.find(params[:id]
  end

  ----省略----

  private
  def member_params
    params.require(:member).permit(:name, :email, :image, :introduction, :country_code, :experienced_country, :is_deleted)
  end

4.modelへの記載

現状でもviewで表示は可能ですが、
カラム名から分かる通り、そのまま表示すると国コード(2文字)が表示されます。
http://www.kc.tsukuba.ac.jp/ulismeta/metadata/standard/cntry_code.html
(※ ただ、編集画面では、国名がしっかりと表示されます。)

なので、memberモデルに国名で表示させるメソッドを記載します。

member.rb

def country
    Carmen::Country.coded(country_code)
end

これによって、国コードの国名に変換してくれます。

5.viewへの記載

①ユーザー詳細ページ

ここで先ほど作成したメソッドを使用します。

members/show.html.erb

<div>
　<div>
    <p>住居</p>
    <h5><%= @member.country.name %></h5>
  </div>
</div>

②ユーザー編集ページ

form_withを使用しているので、
それに則って下記を記載します。

<td><%= f.country_select :country_code %></td>

下記のようになるかと思います。

members/edit.html.erb

<%= form_with model: @member, url:member_path, method: :put, local: true do |f| %>
　　---省略----
<div class="form-group">
  <th><%= f.label :居住地 %></th>
  <td><%= f.country_select :country_code %></td>
</div>
<% end %>

country_selectで、選択ができる使用になります。
:以降は、カラム名を記載します。

form_withの説明は省きます。詳しくはこちらでご確認を。

6.日本語表示にしたい場合

gemで'rails-i18n'というものがあります。
そちらをインストールすると日本語表記に変わりますのでお好み。

以上です。