人生のヒント

私が経験したことが、誰かの人生のヒントになればと願い書きます。

Ruby On Railsでパンくずリスト(gretel)を表示させる

スポンサーリンク

f:id:hinthint:20160906171602j:plain

パンくずリストとは、Wikipediaによると、下記です。

パンくずリスト(breadcrumb list)は、ウェブサイト内でのウェブページの位置を、ツリー構造を持ったハイパーリンクの一覧として示すもの。

 

イメージは、↓こんな感じです。

f:id:hinthint:20160906181558p:plain

 

 

今回は、下記ページを参考にしました。

http://www.virment.com/rails_gretel_for_breadcrumb/

 

サーバは、いつもの通りrootでログインします。

 

 

1.インストール

# su - rails

$ cd work/foo

$ vi Gemfile

 

Gemfileに以下記述を記入します。

gem 'gretel'

 

以下コマンドを実行します。

$ bundle install

$ rails generate gretel:install

$ vi app/views/layouts/application.html.erb

 

app/views/layouts/application.html.erbファイルの<body>タグ内に以下記述をします。

記述箇所は適切な場所に記述してください。後ほど調整しても良いですが、とりあえず記載してください。

<%= breadcrumbs separator: " &rsaquo; " %>

 

 

2.パンくずリストの設定

ここからは、例を2つ用意して、そのための設定方法を記載していきます。

例1.[Home > User]と表示したい場合

config/routes.rb ファイルが以下のようにroot_pathが設定されていることを前提とします。

root 'users#index'

 

以下コマンドでコンフィグファイルを設定します。

$ vi config/breadcrumbs.rb

config/breadcrumbs.rb ファイルを以下を記載します。

crumb :root do
  link " Home ", root_path
end

crumb :user do
  link " User ", user_path

  parent :root
end

crumbからendまでが一つのくくりです。

 

以下コマンドで設定したいviewファイルを編集します。

$ vi app/views/users/index.html.erb

app/views/users/index.html.erb ファイルに1行追記します。

私は、ファイルの一番上に記載してます。

<% breadcrumb :root %>

 

$ vi app/views/users/show.html.erb

app/views/users/show.html.erb ファイルに1行追記します。

私は、ファイルの一番上に記載してます。

<% breadcrumb :user %>

 以下コマンドを実行します。

$ /etc/init.d/unicorn restart

 

http://FQDN /users/2と1ページを確認すると、下記のようなパンくずリストが表示されます。

f:id:hinthint:20160906181558p:plain

 

 

 

例2.[Home > 変数]と表示したい場合

以下コマンドでコンフィグファイルを設定します。

$ vi config/breadcrumbs.rb

config/breadcrumbs.rb ファイルを以下を記載します。

crumb :root do
  link "Home", root_path
end
crumb :user do
  if params[:id] == "1"
    name = "1"
  elsif params[:id] == "2"
    name = "2"
  else
    name = "A"
  end
  link " #{name} ", user_path
  parent :root
end

crumbからendまでが一つのくくりです。

変数を使って、リストの表示をさせることもできます。

例では、if文を使ってますが、ActiveRecordで文字を抽出して表示させることも可能です。

 

以下コマンドで設定したいviewファイルを編集します。

$ vi app/views/users/index.html.erb

app/views/users/index.html.erb ファイルに1行追記します。

私は、ファイルの一番上に記載してます。

<% breadcrumb :root %>

 

$ vi app/views/users/show.html.erb

app/views/users/show.html.erb ファイルに1行追記します。

私は、ファイルの一番上に記載してます。

<% breadcrumb :user %>

 以下コマンドを実行します。

$ /etc/init.d/unicorn restart

 

 http://FQDN /users/2と1ページを確認すると、下記のようなパンくずリストが表示されます。

 

f:id:hinthint:20160907085240p:plain

 

 

3.まとめ

パンくずリストを付けるのは、ユーザが自分がどの位置にいるのか分かるようにしてあげる親切機能と思います。

適切な設定をして、ユーザの使いやすいサイトを作りましょう。