friendly_idとは
Github
https://github.com/norman/friendly_id
下の画像のように、通常railsでのルーティングは/users/:idのようなURLとなりますが、:idの部分をユーザーが自身で指定した文字列にできるようにすると、よりフレンドリーなURLになるということで、gem ‘friendly_id’を使って作ってみたいと思います。
こんな感じになります。⬇︎この方がユーザーが自身のページを紹介しやすいですね！
“profile”の部分を除いて、twitterやgithubのアカウントページように、ドメイン直下で localhost:3000/taroyamada とする方法も載せております。
導入する
動作環境はこちらです
|
1 2 3 4 |
ruby 2.5.1 rails 5.1.6 devise 4.4.3 friendly_id 5.2.4 |
既存の:nameカラムを使ったら、そのままURLにできるっていう考えもあると思いますが、私の場合、nameはひらがなや漢字を入れるユーザーも想定しているので、それを英数字のみに制約をつけるっていうものどうかと思ったので、別カラムを作って、URLを変えたいユーザーだけ変えられるようにしてみました。ということで、gemをbundleして、マイグレーションファイルを生成します。
|
1 |
gem 'friendly_id' |
マイグレーション
|
1 |
$ rails g migration add_friendly_url_to_users friendly_url:string |
add_index は検索速度を上げるためにと、 unique => true は一意性を保つために追加いたします。
|
1 2 3 4 5 6 7 |
class AddFriendlyUrlToUsers < ActiveRecord::Migration[5.1] def change add_column :users, :friendly_url, :string add_index :users, :friendly_url, :unique => true end end |
|
1 |
$ rails db:migrate |
モデル
対象となるモデルにFriendlyIdを読み込ませ、URLに表示させたい値を指定します。
app/models/user.rb
|
1 2 3 4 |
class User < ApplicationRecord include FriendlyId friendly_id :friendly_url end |
バリデーションはこのようにしてみましたが参考までに。正規表現は半角英数字と@とハイフンとアンダーバーのみを許可しています。記号のみは不可です。
|
1 2 3 |
validates :friendly_url, length: { in: 3..20 }, uniqueness: true, format: { with: /\A[\w@-]*[A-Za-z][\w@-]*\z/ } |
コントローラー
対象コントローラーのアクション内を以下のように変更します。
app/controllers/users/registrations_controller.rb
|
1 2 |
#@user = User.find(params[:id]) @user = User.friendly.find(params[:id]) #こちらに変更 |
ストロングパラメータの設定も忘れずにしておきます。
|
1 2 3 4 |
def configure_account_update_params devise_parameter_sanitizer.permit(:account_update, keys: [ :name, :friendly_url]) end |
これで localhost:3000/profile/taroyamada でアクセス可能になりましたし、 従来通り localhost:3000/profile/12 でもアクセスはできます。
ドメイン直下のURL
好みによりますが、ドメイン直下にURLを設定する場合のルーティングです。deviseを使っている筆者の場合のルーティングです。
config/routes.rb
|
1 2 3 |
devise_scope :user do get '/:id/' => 'users/registrations#profile', as: 'profile' end |
gemを使わない実装方法
gemを使わずにto_paramメソッドを使って、実現する場合は、こちらの記事も参考になるかと思います。
https://remonote.jp/rails-to-param-url-user-name
以上です。ご覧いただきありがとうございました！
