Momi-のプログラミング学習

日々のプログラミング学習について投稿します!

パンくずって何?

はじめに

今日は朝ごはんをゆっくり食べていたら、電車に乗り遅れてしまい、いつもの席に座ることができませんでした。。。今度からこの場所で朝ごはん食べようかな。。

WHAT

  • コントローラーの単体テスト(担
  • パンくずの作成(担
  • 個人アプリ開発(担
  • 各ビューページの作成
  • 商品詳細ページ

WHY

  • 本番環境で意図しない動きを起こさないため
  • ユーザリビティーを高めるため
  • バイト先のHPを作りたいから

HOW

  • コマンドを何度も叩き、エラー文を検索する
  • 各パスを把握し、マイページなど引数を渡すか判断する
  • ER図の作成(続き

WHEM

9-11 コントローラの単体テスト
13-17 パンくずの作成
18-21 個人アプリ開発

今日のエラー

今日はコントローラの単体テストについてです。
昨日ブログにて報告した件についてです。
まず、FactoryGirlについてですが、今はFactoryGirl→FactoryBotに名前が変わっており、私はどちらも入れていました笑
何年前の記事かはしっかり確認しないといけませんねー。
次にサインインしていないと、テストする際にサインアップ画面にリダイレクトする問題です。
これはapplication_controller.rbにリダイレクトする記述を書いてあるからです。
チーム開発で私は担当していなかったため、うっかり忘れていました。
チームメンバーがどんな機能をつけているかは随時確認しないといけませんね。

今日のピックアップ

https://www.gentosha-webma.com/wp-content/uploads/2018/12/1217-760x507.jpg

パンくず

今日はパンくずを無事実装することができました! 触れたことがなかったので、どれくらいかかるのか大体でしか測れませんでしたが、理解さえできれば、すぐですね。 ビュー画面がまだ全て完成できていないので、質然的に完成させることはできませんが、現段階でできるところまでやりました。
では説明していきます。

パンくずとは

パンくずと言う名前は童話のヘンぜルとグレーテルから取られています。森の奥に連れていかれる中でヘンゼルはパンを粉々に砕き、道しるべとして道々落としていく話ですね。

そして今回実装するパンくずとは自分が今どの画面にいてどういった階層にいるのかを示すものです。説明するより見た方が早いかも知れませんね。

https://i.gyazo.com/aaad7d06a1525ba21aa5206c09c3f90c.jpg
例えば、これはメルカリのサイトですが、パンくずが設置されています。
どこでしょうか笑

https://i.gyazo.com/39b4c93872a783aca6a776156294ff29.png

ここの部分ですね。パンくずと言う名前は聞いたことなかったけど、これのことだったのかと思う方も多いのではないでしょうか。
今ではほとんどのサイトに設置されていますね。
これにより今自分がどの画面にいるのか。どの画面を辿ってきたのかを知ることができます。

メリット

ではパンくずを設置するメリットは何でしょうか。
主に2つの理由があります。

  • まず一つはユーザリビティが高まる点です。
    ユーザビリティとはそのサイトがユーザーにとってどれくらい使いやすいかを指します。先ほども述べましたが、パンくずがあると、サイトの構造を把握することができ、ユーザビリティが高まると言えます。

  • もう一つは検索エンジンが簡単にクロージングできると言うことです。
    こちらは自分の言葉で説明するのが難しそうなので引用させていただきます。

Google検索などの検索エンジンにヒットさせるには、まずはクローラーと呼ばれる情報収集ロボットに自身のサイトの情報を収集(クローリング)してもらう必要があります。
パンくずリストを設置することは、そのサイトが体系的に整理されることとなります。するとクローラーパンくずリストによって効率的にそのサイト内のカテゴリーをたどることができるようになるため、サイトの全体像が把握しやすくなり、効率的なクローリングを期待することができます。
Googleが公式に出している「検索エンジン最適化(SEO)スターター ガイド」でも、パンくずリストの使用を推奨しています。 参考サイト

パンくずの作り方

まずrailsにはパンくずを簡単に実装するためのgemがいくつかあります。

gem 'gretel'
gem 'breadcrumbs_on_rails'

代表的なのはこの二つです。 違いについて簡単に説明していきます。
まずgretelについてですが、名前がグレーテルと言うのにユーモアを感じますね笑
こう言うところもプログラミングを学ぶ上で面白いところだなと笑
gretelの特徴は breadcrumbs_on_rails と比較すると簡単に実装することができる点です。
じゃあgretelの方がいいじゃないかと思うかも知れませんがbreadcrumbs_on_railsにはよりカスタマイズできると言う特徴があります。gemなのであらかたテンプレートは決まっていますが、どこまでカスタマイズしたいかが使い分けの基準かなと。
breadcrumbs_on_railsを使う際はその分、コントローラに記述をしないといけないなどの手間がかかります。

今回はそこまでカスタマイズしたいわけではないので、gretelを使っていきます。
ではまず gemfile に gretel を読み込みます。

Gemfile

gem 'gretel'

読み込んだらbundle installもしましょう
gemを読み込むためのサーバー立ち上げも忘れずに
ターミナル

$ bundle install
$ rails s

次にパンくずの設定をいじるFileを作成します。 以下のコマンドを実行してください

ターミナル

$ rails generate gretel:install

これによりconfigにbreadcrumb.rbを言うFileが作成されます。 パンくずという意味ですね笑

作成した際にbreadcrumb.rbにはデフォルトで色々とコメントアウトの記述があるかと思いますが、全て消していただいて構いません。

ちなみに言い忘れていましたが、今回はhaml記法で説明していきます。

breadcrumb.rbは現在のページのパスや、親ページは何なのかなどを記述するファイルです。後ほど詳しく説明します。

では読み込み箇所を指定する記述を書いていきましょう。
パンくずは基本的にヘッダーにあり、たくさんのページで使用するので部分テンプレートに書いてあげるといいでしょう。
私はヘッダーの部分テンプレートに記述しました。

_header.html.haml

= breadcrumbs separator: "   〉  "

この記述によって、ヘッダー部分にパンくずが読み込まれます。
今の段階ではまだbreadcrumb.rbに記述をしていないので表示されません。

ではbreadcrumb.rbにページの関係を書いていきましょう

config/breadcrumb.rb

crumb :root do
  link 'メルカリ', root_path
end

crumb :index_card do
  link '支払い方法', "/cards"
  parent :index_user
end

crumb :new_card do
  link "クレジットカード情報入力", new_card_path
  parent :index_card
end

crumb :show_card do
  link "支払い方法", cards_path
  parent :index_user
end

crumb :show_product do |product|
  link product.name, product_path
  parent :root
end

crumb :index_user do |user|
  link "マイページ", user_path
  parent :root
end

まだビュー画面が全て完成していないので未完成ですが、ご了承ください。 それではいくつか見ていきます。

crumb :root do
  link 'メルカリ', root_path
end

crub do
end
で囲ってあげることにより、一つのページの設定ができます。 まずこの記述はトップページの画面ですね。つまり、一番親にあたる部分です。
:root 部分の名前は特に何でも構いません。:topPageなどでもいいでしょう。わかりやすい名前にしてあげましょう。
二行目にリンク名とリンクのパスを記述してあげます。
今回の場合、リンク名がメルカリ、パスがroot_pathですね。
パスはコマンドのrake routesで確認してください。

crumb :show_product do |product|
  link product.name, product_path
  parent :root
end

この記述では引数で商品の情報を渡してリンク名に商品の名前を表示しています。 また3行目に親ページの指定をしていますね。この記述によってパンくずが階層を判断しています。
parent :自分でつけてページ名(root、topPageなど)

ではビュー画面を見ていきましょう。
先ほど_headerに読み込み箇所を指定しましたが、あれだけでは自分が今どのページにいるのか判断できません。
今回はCardsControllerのshowアクションの画面、show.html.hamlを見ていきます。

.card_registration
  - breadcrumb :show_card
  = render 'layouts/header'

renderでheaderを読み込む時にパンくずも読まれますが、その前に今どのページにいるのかをbreadcrumb :(現在のページ)で読んで指定してあげます。もしrenderの下に書いた場合はうまく読まれません。

あとはCSSを当ててレイアウトを整えてあげましょう

_header.html.haml

.breadcrumbs__area
    .breadcrumbs__area__text
      = breadcrumbs separator: "   〉  "

_header.scss

.breadcrumbs__area {
  position: relative;
  border-top: 1px solid #eee;
  -webkit-box-shadow: 0 3px 3px 0 rgba(0,0,0,0.16);
  box-shadow: 0 3px 3px 0 rgba(0,0,0,0.16);
  background: #fff;
  height: 49px;
  &__text {
    width: 1020px;
    overflow: visible;
    margin: 0 auto;
    padding: 16px 0;
    white-space: normal;
    .breadcrumbs {
      font-weight: 700;
      color: #333;
      a {
        font-weight: 100;
        text-decoration: none;
        color: #333;
      }
    }
  }
}

この部分は皆さんのお好みで。

最後に、ちょっとしたアレンジです。
トップページって一番の親要素なので、パンくずは表示されませんよね。
しかし、今のままだと、パンくずを表示する枠だけ、余計に表示されてしまいます。
なのでトップページ以外でのみパンくずの枠を表示するように設定しましょう。

_header.html.haml

- unless current_page?(controller: 'products', action: 'index') || current_page?(root_path)
  .breadcrumbs__area
    .breadcrumbs__area__text
      = breadcrumbs separator: "   〉  "

current_page?メソッドを使うことにより、productsContrillerのindexActionが動いた際のページの場合、もしくはrootpassによって表示された場合は以下の記述を読み込まないようにすることができます。

終わりに

ブログを書き始めて、約二週間ほど経ちましたが、こんなに書いたのは初めてです笑
間違えている箇所やもっと簡単に書ける部分もあるかもしれませんが、頑張って考えたので大目に見ていただければなと。
プログラミングの勉強をする上で、いくつもの記事やブログを参考にしてきましたが、しっかりしたものを仕上げるのは本当に大変なんだなと改めて感じました。
今日は大学なので次の投稿は少し少なくなるかもしれません。。。笑
では!