webエンジニアさもの挑戦

RubyやPython, JavaScriptなど勉強したことなど、IT関連の記事を書いています

ビットコイン取引高日本一の仮想通貨取引所 coincheck bitcoin

国選択を簡単に実装するgem(country_select)の紹介

こんにちは、エンジニアのさもです。

今回は、Railsアプリ内で国名のセレクトボックスを簡単に実装できるgem「country_select」をご紹介します。

スポンサーリンク

使うに至った経緯

今参加しているプロジェクトで、多言語化対応するというタスクを任されているのですが、お客さんから会員登録時に国を選択できるようにして欲しいという要望がありました。

セレクトボックス一つなので、頑張って実装することも考えたのですが、国名マスタの管理まで実装するのは少しオーバーだなと感じ、いい感じのgemが無いか探したところ、すぐにこのcountry_selectが見つかりました。

あ、英語化対応について以前まとめたので、興味があるor仕事でしなければならないor東京オリンピックもあるし、多言語化も考えないといけないなという方は是非ご一読下さい。

www.uosansatox.biz

How To Use

インストール

インストールは、gemfileにgem 'country_select' と記述し、bundle するだけです。

ただし、gem 'country_select', require: 'country_select_without_sort_alphabetical'とすると、sort_alphabeticalを使わないようにします。sort_alphabeticalはメモリを多く使用するそうなので、必要なければ、このオプションをつけてねとうことです。

sort_alphabeticalというのは、例えば「Ä」みたいにAに似ている文字を含む文字列をソートする場合に、Aと同様に扱うことができるようになるものです。

つまりどういうことかというと、

["ÄA", "AB", "Ä"].sort #=>  ["AB", "Ä", "ÄA"]

 ["ÄA", "AB", "Ä"].sort_alphabetical #=>  ["Ä", "ÄA", "AB"]

こういうことです。「Ä」をAとみなすなら、sortではちゃんとソートできていないですよね。

もしcountry_selectを入れるアプリが日本人しか使わないということならsort_alphabeticalは必要ないと思いますが、今回は誰が使うか分からないので(使う言語が今後増えてくるかもしれない)ので使えるようにしておきます。

フォームでの使い方

最も簡単な使い方は以下のようになります

  • form_for内で使う場合
<%= f.country_select :country %>
  • form_tag内で使う場合
<%= country_select "user", "country" %>

これだけでセレクトボックスが実装できます

有用なオプション

  • 優先的に(セレクトボックスの上位に)出す国を指定する
<%= f.country_select :country, priority_countries: ["JP", "US"] %>
  • 優先的に出していることを表すセパレータを指定する
<%= f.country_select :country, priority_countries: ["JP", "US"], priority_countries_divider: "----------" %>
  • セレクトボックスに表示する国を制限する
<%= f.country_select :country, only: ["JP", "US"] %>
  • 表示しない国を指定する
<%= f.country_select :country, ecpect: ["JP", "US"] %>
  • デフォルトで選択しておく国を指定
<%= f.country_select :country, selected: "JP" %>

また、もともとセレクトボックスで使えるinclude_blankなども使えます。

セレクトボックスでの表示フォーマットをカスタマイズする

config/initializers へcountry_select.rbというファイルを作り、以下のように記述します

CountrySelect::FORMATS[:with_alpha2] = lambda do |country|
  "#{country.translations[I18n.locale.to_s]} (#{country.alpha2})"
end

ビュー側で、このフォーマットを使うように指定します。

<%= f.country_select :country, format: :with_alpha2 %>

上記の例では、各国が「日本(JP)」のように表示されます。

最後に

country_selectはコンパクトで簡単なカスタマイズもできて使いやすいなという印象でした。

国選択のgemがそんなに多くあるとは思わないですが、導入を検討される方の参考になれば幸いです。

読者登録をしていただけると、ブログを続ける励みになりますので、よろしくお願いします。