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

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

PHPの学習をはじめました!

はじめに

昨日はPHPの基本的な文法をProgateで学んだので忘備録として残しておきます。

文法

まずPHPはHTML上に埋め込んで使用することができる。

<?php echo '<h2> 初級 </h2>'; ?><h2> 初級 </h2>

変数

<?php
$name = 'Rin';
echo $name;
?>

変数に数字を足す

<?php
$x = 1;
$x = $x + 10; → $x += 10;
//値1を四則演算で表現するのは省略できる
$x += 1; → $x++;
$x -= 1; → $x--;

$x = 3;
$y = 3;
echo ++$x; → 4    //(echoの前に+1されるため)
echo $y++; → 3    //(echoの後に+1されるため)
?>

「.」ドット記号を用いると文字列を連結されることができる。

<?php
$lesson = 'PHP';
echo $lesson.'入門';

$level ='入門';
echo $lesson.$level;
?>

「.=」ドットイコールを用いると変数と文字列の連結を省略して書くことができる。

<?php
$name = 'にんじゃ';
$name .= 'わんこ';
echo $name → にんじゃわんこ
?>

変数展開

ダブルクォーテーションで文字列を囲んだ場合、中の変数を{}で囲むとその部分が変数に入っている値で置き換えられる。シングルクォーテーションの場合はそのまま出力される。

<?php
$name = 'にんじゃわんこ';
echo "こんにちは、{$name}さん";
?>

配列

<?php
$name = array('john', 'Kate', 'Bob');
echo $name[0];
echo $name[1];
$name[] = 'Mary';   //配列の末尾に追加
$name[1] = 'Jane';  //値の上書き
?>

連想配列

<?php
$user = array('name' => 'わんこ', 'age' => 14);
echo $user['name']; //わんこ
?>

連想配列 - 値の追加の仕方

<?php
$user['lavel'] = 'beginner'; 
?>

繰り返し処理(for文)

1から100まで出力したい場合 改行あり 初期化 ループの条件 変数の更新

<?php
for ($i = 1; $i =< 100; $i++ ) {
    echo $i.'<br>';
}
?>

while文

<?php
$i = 1;
while($i <= 100) {
echo $;
$i++;
}
?>

foreach

配列または連想配列に対して、先頭のデータから順に繰り返し処理を行うための命令をする。
キー変数、値変数をそれぞれの変数に入れることが可能だが、キー変数は省略が可能

<?php
$data = array('東京', '大阪', '京都');
forEach($data as $value) {
echo $value;
}
?>

関数

<?php
strlen();   //文字列の文字数を返す組み込み関数。変数も入れることができる。
count();  //配列の要素の数を返す関数
rand();   //一つ目の引数を二つ目の引数の間のランダムな整数を返す関数
?>

関数を自作する

<?php
function hello() {
echo "Hello, World";
}
?>

関数の呼び出し

<?php
hello(); //()をつけて関数を呼び出す
?>

formのデータを受け取る

<?php
$_POST  //$_POSTで受け取る
$_POST  //$_POSTは連想配列になっているため、[]の中にname属性の値を入れることでデータを取得できる。
?>

プロパティの書き方

<?php
public $name; //nameプロパティを定義
?>

プロパティへのアクセス

<?php
$curry -> name = 'CURRY'; //プロパティに値をセット
//インスタンス->プロパティ名とすることで、そのインスタンスのプロパティにアクセスすることができる。
echo $curry-> name;
 public function メソッド名();
?>

メソッド内でインスタンスのプロパティやメソッドにアクセスしたいときには「$this」という特殊な関数を扱う

<?php
public function hello() {
echo '私の名前は'.$this->name."です";
}
?>

コンストラクタ rubyでいうinitialize

newを用いてインスタンスを生成するときに自動で呼ばれるメソッド アンダーバー二つ

<?php
public function __construct() {
}
?>

参考文献

Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]

Basic認証がうまく読み込まれない

はじめに

Basic認証は二週間前に実装しており、すでに実装を確認済みだったのですが、一週間前に確認するとBasic認証が外れており、再び確認したところ、環境変数がうまく読み込まれていませんでした。メルカリのチーム開発でもpayjpの環境変数がうまく読み込まれず、しかしherokuでデプロイしている個人アプリはうまく読み込んでいるので、やはり本番環境での問題なのかなと。

今日のエラー

Basic認証がうまく読み込めず、入力欄は出てくるが、何も打ち込まない場合のみログインすることができる。

解決方法

EC2環境でcapistrrnoを用いてデプロイしているものとします。
まず次のコマンドで本番環境のディレクトリに移動してください

$ cd
$ cd .ssh/
$ ssh -i キー名.pem ec2-user@ElasticIP名
// 例 ssh -i keyname.pem ec2-user@34.654.234.89

EC2のディレクトリに移動できたでしょうか 次に環境変数が設定されているか確認してください

$ vim ~/.bash_profile

環境変数を設定できたでしょうか では次に今稼働しているUnicornを確認します

$ ps aux | grep unicorn

このコマンドを打つとおそらく3行のlogが出てくると思います。 f:id:zRintaro:20190611124717p:plain

この一番上のものが本番環境で動いているものですが、これを一度killします。 どうやってkillするかというとec2-user の右の数列を指定してあげます。
今回の場合は4854ですね。

$ kill 4854

もう一度稼働中のunicornを確認してみましょう

$  ps aux | grep unicorn

f:id:zRintaro:20190611125124p:plain
一つになっていますね。
では次にディレクトリを移動します。

$ cd /var/www/アプリ名/current

currentディレクトリまで移動できましたでしょうか
ではそのディレクトリでもう一度unicornを起動させましょう

$ bundle exec unicorn -c /var/www/アプリ名/current/config/unicorn.rb -D -E production

アプリを開いてみましょう。 Basic認証がかかっているはずです!

herokuでデプロイ完了!

はじめに

herokuでデプロイをしてみました。
簡単だと噂でしたが、実際1時間ほどでデプロイできました。
herokuでデフォルトに設定されているPostgreSQLからmySQLへの変更にかなり時間を使いました。。。

今日のエラー

f:id:zRintaro:20190611113627p:plain

mySQLなんてないよというエラーです。ここでかなり時間を食ってしまいました。 gemにもしっかり記述しているのに、なんでだろうと思っていたのですが、正しくはmysql2にしなければいけませんでした。 そこでherokuのdbをmysql2に変更するようにコマンドを記述したのですが、うまく反映されません。記事などにも書かれていましたが、普通に打ってもうまく変更を読み込まないみたいで色々と手順を踏まないといけないみたいです。
それも試そうかと思ったのですが、その前にherokuのappを直接いじったら、治りました!

実装内容

そして自分のappを選択します。
この場合はkaiseijyukuですね。

そして次の画面に進んだら、

Settingを選択してください 次にReveal Config Varsを選択すると、やっとdbの情報が出てきます。

この3つをmysql2にすることで無事デプロイすることができました。

お問い合わせフォーム作成

はじめに

今までアウトプットをTwitter→blogという形でやってきましたが、今日何をしたかの振り返りはTwitterに、エラーの内容や実装した内容などの説明やコードはblogにという形で分けようと思います。そちらの方が、エラーの内容や実装した内容だけ見たいという方に合っているかなと思いまして。今日何をしたか、なぜしたかなのは、あくまで自分への戒めなのでTwitterにします!
なので今後はよりblogが読みやすくなるかと。

今日のエラー

SendGridの導入 herokuデプロイに関してはまた明日触れます。 herokuでデプロイする際にSendgridを用いてメール送信機能を実装しました。
しかし、APIもしっかり記述し、環境変数も読み込んだのに、メールが送信されません。 こちらの記事を参考にし、コンソールからメールを送ってみたところ、原因は全く別の箇所にあり、 ユーザー名とパスワードが間違っているというエラーが出て SENDGRID_USERNAME
SENDGRID_PASSWORD
の記述が間違っていることに気づきました。
しょうもない理由でしたね笑
間違えてherokuかなんかの名前を入れていました。
また注意して欲しいのが、SendGridのアカウントを作成する際におそらく未入力情報があると勝手に決められてしまうことです。

実装内容

new.html.haml

.form__page
  - if flash[:notice]
    .flash__message
      .flash__message__text= flash[:notice]
  = form_with(url: contacts_path, local: true, method: :post, id: 'charge-form', class: 'area__contents__info') do |f|
    .form__page__area
      .form__page__area__title
        .title__text
          %h2 入塾体験希望(無料)
      .form__page__area__contents
        .contents__area
          .contents__area__left
            .left__top
              .left__top__text
                = f.label :保護者名
              .left__top__label
                必須
            .left__bottom
              = f.text_field :caregiver,  class: "input__default", placeholder: "開成花子" , maxlength: "15", type: "text"
          .contents__area__right
            .right__top
              .right__top__text
                = f.label :生徒名
              .right__top__label
                必須
            .right__bottom
              = f.text_field :student,  class: "input__default", placeholder: "開成太郎" , maxlength: "15", type: "text"
        .contents__area
          .contents__area__left
            .left__top
              .left__top__text
                = f.label :学校名
              .left__top__label
                必須
            .left__bottom
              = f.text_field :school,  class: "input__default", placeholder: "開成中学校" , maxlength: "10", type: "text"
          .contents__area__right
            .right__top
              .right__top__text
                = f.label :学年
              .right__top__label
                必須
            .right__bottom
              = f.text_field :grade,  class: "input__default", placeholder: "一年生" , maxlength: "8", type: "text"
        .contents__area
          .contents__area__left
            .left__top
              .left__top__text
                = f.label :メールアドレス
              .bottom__label
                ※1
            .left__bottom
              = f.text_field :email,  class: "input__default", placeholder: "kaisei@gmail.com" , type: "email"
          .contents__area__right
            .right__top
              .right__top__text
                = f.label :電話番号
              .bottom__label
                ※1
            .right__bottom
              = f.text_field :tel,  class: "input__default", placeholder: "0742467788" , maxlength: "13", type: "text"
          .contents__area__bottom
            ※1 どちらか必ず入力してください
    .form__button
      .form__button__area
        = f.submit "申し込む", class: "btn__submit"

contacts_controller.rb

class ContactsController < ApplicationController

  def new
  end

  def create
      @contact = Contact.new(contacts_params)
      flash[:notice] = "送信に失敗しました。もう一度入力してください。"
      redirect_to action: "new" and return unless @contact.email.present? || @contact.tel.present?
      if @contact.save
        ContactMailer.send_mail(@contact).deliver_now
      else
        redirect_to action: "new"
        flash[:notice] = "送信に失敗しました。もう一度入力してください。"
      end
  end

  def contacts_params
    params.permit(:caregiver, :student, :school, :grade, :email, :tel)
  end
end

feedin.js

$(function() {
  $(document).ready(function() {
     $(this).find('.form__page__area').fadeIn(2000).animate({
       'margin-top': '7%'
     },{
       duration: 2000,
       queue: false
     });
     $(this).find('.form__button').fadeIn(2000).animate({
      'margin-top': '40px'
    },{
      duration: 2000,
      queue: false
    });
   });
 });

完成した画面 f:id:zRintaro:20190611112106j:plain

問い合わせ内容をGmailに送信する

はじめに

今日はスプリントレビューでした。しかし、本番環境にしばらく実装した機能をあげておらず、bundle installのところでエラーが出てしまいました。これからはマージするごとに本番環境にあげることにします。反省しなければ。

WHAT

  • スプリントレビュー
  • 問い合わせフォームを作成する際にgmailにその内容を送信する。

WHY

  • 今週の進捗管理を報告し、来週までの目標を立てるため。
  • 入塾希望者からの連絡に迅速に対応するため。

HOW

  • gmailを二段階認証にし、なおかつアプリパスワードを設定する。

WHEN

9-12 メール連携について
12-14スプリントレビューの準備
14-21 gmailにメールを送る
22-25 バイト

今日のエラー

f:id:zRintaro:20190608115234p:plain 自動デプロイを再度実行した際に二つのエラーが起こりました。 一つが初めに述べたようにbundle installをする際にメモリが足りませんとなるエラーです。
これは私が本番環境にあげずにたくさんの機能を実装したせいで怒った事態です。
自動デプロイでなく、手動でデプロイし、gem installコマンドを打った際はうまく読み込まれるのですが、自動では何度試してもダメで、EC2を一度停止させるとうまくいきました!
もう一つは「`」この記号は読み込めないというものです。JQueryなどで読み込む際にこの記号を使うのですが、デフォルトの設定ではこの記号は読めません。
なのでconfig/enviroment/production.rbをいじってあげます。 f:id:zRintaro:20190608120146p:plain

こうすることでこの記号を読み取ってくれます!ちなみにこの記号はグレイヴ・アクセントまたはアクサングラーヴと言います。

今日のピックアップ

Gmailへのメール送信方法

今回は2通りの方法を試しました。Gmailgmail以外からメールが送信されてくるなどのセキュリティの低い可能性のある送信元の場合、自動でブロックされてしまいます。そして、私も初めはブロックされました。 f:id:zRintaro:20190608121618p:plain まず、一つ目の方法はGmailのセキュリティを低くすることです。
しかしこれはおすすめできません。なのでやらないでください笑

二つ目がセキュリティを高く保ったまま、二段階認証を設定し、なおかつ、アプリパスワードを作成するというものです。 アプリパスワードとは

アプリ パスワードでログイン アプリ パスワードは、Google アカウントへのアクセス権をアプリやデバイスに付与する 16 桁のパスコードです。2 段階認証プロセスを使用している場合に、Google アカウントにアクセスして「パスワードが正しくありません」というエラーが表示されるときは、アプリ パスワードで問題を解決できることがあります。ほとんどの場合、アプリ パスワードはアプリやデバイスごとに一度入力するだけなので、覚える必要はありません。
注: iOS 8.3 以上を搭載した iPhone や、OSX 10.10.3 以上を搭載した Mac の場合は、Gmail など iTunes から入手した Google ブランドのアプリを利用する際、2 段階認証プロセスでアプリ パスワードを使う必要はなくなります。iOS ネイティブのメール クライアントで Google オプションを使用する際も、アプリ パスワードは不要です。

というものです。
この記事を参考にすると実装することができます。一年ほどたっていますが私は問題ありませんでした。 あくまで今日実装したのはユーザーが登録された際にメールを送るというものだったので、明日はお問い合わせフォームに入力された情報をgmailに送ると言った作業を行なっていきます。
そのためにも一つ一つの機能をしっかり理解しなければ。

終わりに

明日はキックオフで新しい人たちが入ってきます。
もうすでにここのスクールはキャパオーバーなのですが笑
しかし7月から難波に場所を移転するそうです!
私はもう卒業してるんですけどねー。

管理者権限について(個人アプリ開発) 大学の卒論が。。

はじめに

いよいよ個人アプリ開発において何を作るか大枠が決まったので、作業に取り掛かります。
作るものは塾のHP兼、在塾生のマイページを作成しようかと。在塾生が楽しんで自分の学力や実力が成長していく過程を表現できればなと。
一方、今日は大学でゼミがあったのですが、卒論のゼミ発表が近づいてきました。。。
両立しつつ、チームに迷惑をかけないためにも効率的に時間を使わなくては。

WHAT

  • 管理者権限について

WHY

  • 管理者権限をつけることによって、生徒が悪さをできないし、先生のみが管理できるようにする。
  • ユーザーの作成やパスワード発行は管理者権限で行い、在塾生以外がマイページを作成できないようにする。

HOW

  • Active adminを使用する。

WHEN

9-13 Active adminについて調べる
13-17 授業
18-20 バイト
21-22 ブログ

今日のエラー

https://camo.qiitausercontent.com/b092bfcdfc039623b08c98a00026406413b28e68/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3132383035342f35326132313335372d316631392d396235642d343062312d3739306564633038376239342e706e67

記事を参考にすると、管理するテーブルで、どのカラムの編集権限をつけるか、パラメータを指定しないとなるエラーらしく、admin/テーブル名.rbのファイルにどのパラメータを渡すか指定するとエラーが解消されました。

今日のピックアップ

Active admin

管理者権限を実装するためのgemは有名なもので3つほどあるらしいのですが、今回は比較的サイトなどでおすすめされていたActive adminを使用します。
私が実際に管理するわけでもないので、非エンジニアでも管理できるできるようにしたという理由もあります。
実装方法としてはこちらの記事を参考にすると簡単に実装できるかと 参考記事

終わりに

明日はスプリントレビューです。
マークアップを今週中に終わらせるという目標は達成できたので、明日の進捗報告が楽しみです!

パンくずって何?

はじめに

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

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: " &nbsp;&nbsp;&#12297;&nbsp; "

この記述によって、ヘッダー部分にパンくずが読み込まれます。
今の段階ではまだ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: " &nbsp;&nbsp;&#12297;&nbsp; "

_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: " &nbsp;&nbsp;&#12297;&nbsp; "

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

終わりに

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