【Rails】gem ‘friendly_id’を使ってユーザーがURLをカスタムできるようにする

friendly_idとは

Github
https://github.com/norman/friendly_id

下の画像のように、通常railsでのルーティングは/users/:idのようなURLとなりますが、:idの部分をユーザーが自身で指定した文字列にできるようにすると、よりフレンドリーなURLになるということで、gem ‘friendly_id’を使って作ってみたいと思います。
rails friendly_id before
こんな感じになります。⬇︎この方がユーザーが自身のページを紹介しやすいですね!
rails friendly_id after
“profile”の部分を除いて、twitterやgithubのアカウントページように、ドメイン直下で localhost:3000/taroyamada とする方法も載せております。

導入する

動作環境はこちらです

既存の:nameカラムを使ったら、そのままURLにできるっていう考えもあると思いますが、私の場合、nameはひらがなや漢字を入れるユーザーも想定しているので、それを英数字のみに制約をつけるっていうものどうかと思ったので、別カラムを作って、URLを変えたいユーザーだけ変えられるようにしてみました。ということで、gemをbundleして、マイグレーションファイルを生成します。

マイグレーション

add_index は検索速度を上げるためにと、 unique => true は一意性を保つために追加いたします。

モデル

対象となるモデルにFriendlyIdを読み込ませ、URLに表示させたい値を指定します。

app/models/user.rb

バリデーションはこのようにしてみましたが参考までに。正規表現は半角英数字と@とハイフンとアンダーバーのみを許可しています。記号のみは不可です。

コントローラー

対象コントローラーのアクション内を以下のように変更します。

app/controllers/users/registrations_controller.rb

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

これで localhost:3000/profile/taroyamada でアクセス可能になりましたし、 従来通り localhost:3000/profile/12 でもアクセスはできます。

ドメイン直下のURL

好みによりますが、ドメイン直下にURLを設定する場合のルーティングです。deviseを使っている筆者の場合のルーティングです。

config/routes.rb

gemを使わない実装方法

gemを使わずにto_paramメソッドを使って、実現する場合は、こちらの記事も参考になるかと思います。
https://remonote.jp/rails-to-param-url-user-name

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


投稿者:

Shuji Tenra

「仕事に特化したQ&AサイトJobQuery【ジョブクエリ】」の開発/運営をしています。https://jobquery.jp