多段階構造ナビゲーションバーの作成 ruby on rails

多段階構造ナビゲーションバーと言っても何かピンとこないと思いますので

イメージとして

https://gyazo.com/20b1868225334bffa7cccc7d27d109a0

↑のような感じのナビバーのことをここでは多段階構造ナビゲーションバーと読んでます(正式名称があったらごめんなさい)

この多段階構造ナビゲーションバーは某プログラミングスクールのカリキュラムで

メルカリを真似したサイト制作時に実装した機能の一つです

 

多階層構造データテーブルはgem ancestryを使って用意しました(ancestryが必ず必要な訳ではありません)

以下は実際に書いたhamlの内容です

某スクールの諸先輩の記事を参考に記述しました

https://qiita.com/tk54_prog/items/149093cca9bdace71753

親と子の2段構造になっていて

●親はm-parentクラスで全て羅列しています

●子はm-childクラスでm-parentにひもづく子供を羅列してあります

 実際の画面には関連する子供だけを表示すれば良いのでjQueryで必要部分のみの表示にしてあります

●孫クラスに関してはhttps://qiita.com/tk54_prog/items/149093cca9bdace71753を参考にさせてもらったのですが、うまくいかなかったため(処理もかなり重くなったため)

子クラスにidをふりajaxでコントローラーに飛ばし必要な孫カテゴリーのみを表示するようにしました(もしかしたら処理の関係で子クラスもajaxで飛ばした方がいいのかもしれません)

@navicategory.each do |parent_name
  .m-category
    %ul.m-parent-wrap
      %li.m-parent
        = link_to items_pathclass: "m-parent__link"  do
           =parent_name
                  
         %ul.m-child-wrap
          %li.m-child
            -Category.find_by(name: parent_name).children.each do |child_name|
              = link_to items_pathclass: "m-child__link m-hover" ,id: "#{child_name.id}" do
                =child_name.name       
               %ul.m-grand-child-wrap

 

f:id:mi---tomo:20191029154540p:plain

(↑はancestryテーブルです.childrenや.parentを該当レコードにつけて記述すると該当レコードの親のレコードや子レコードを返してくれます詳しくはancestryで調べていただければたくさん記事が出てきます)
jQueryについては参考にさせて頂いた記事とほぼ同じで

孫カテゴリーの記述と

アイコンが乗った時、外れた時の動作

を追記した程度ですどの記事も簡単にできると書いてあったのですが、書いてある通り真似しようとしたことでかなり時間を取られてしまいました

最初っからajaxを使って子クラス、孫クラスの必要な部分のみを挿入という形式にしておけばスムーズだったかもしれません

 

参考にした記事

https://qiita.com/tk54_prog/items/149093cca9bdace71753

http://js.crap.jp/book/chapter2/drop-down-3menu.html#

Rails5.2からsecrets.ymlが廃止 → credentials.yml.enc & master.key へ AWS EC2 のデプロイ変更点

Rails5.2からsecrets.ymlが廃止 → credentials.yml.enc & master.key

ということで、tech-expert で同期だったとても優秀な方に教えて頂いたので、

メモの意味も含めてここに記します

 

基本的に以前のバージョンからの変化は

以下です

1.config/environments/production.rbの

config.require_master_key = true

コメントアウトを外す(デフォルトはコメントアウトしてあります。)。2.ローカルのmaster.keyの数字の羅列をコピーして、ec2インスタンスにログイン後、
$sudo vim /etc/environmentでi(挿入)を押して

RAILS_MASTER_KEY='コピーしたローカルmaster.keyの数字の羅列'

と記入してesc→:wqとして保存する。

                             以上

方法は複数あるそうですが今回はこの方法を教えてもらいました

同期の方には本当に感謝です!

なお写真データなどをS3に保存するのはもう少し工夫が必要ということなのでその内容はまた今度!

AmazonAWSで、気づいたら「 We're sorry, but something went wrong 」になるためswap 領域を設定

初めての投稿!ということで、何を投稿しようか迷ったが、最近学んだ内容を自分の記憶へのリマインドの意味も込めて投稿したいと思う

 

AWSでデプロイ後1週間くらいは普通に動いていたサイトが突然「 We're sorry, but something went wrong 」と表示され見れなくなってしまった

初心者なこともあり何が起こったのか理解できなかったが最終的に行ったこととしてはMySQLのメモリが不足するとMySQLが落ちる可能性が高いためswap 領域を設定した

 

以下行った手順

MySQLの中身を確認ターミナルよりec2にログインし

$top 

で確認

f:id:mi---tomo:20191023181408p:plain

totalに対しusedが8割以上を占めており残りの容量が少ないことが確認できる

(何割空き容量を作っておかないといけないかは不明)

swapの設定を行う

$ sudo dd if=/dev/zero of=/swapfile bs=1M count=1024
$ sudo mkswap /swapfile
$ sudo chmod 600 /swapfile
$ free -m
再起動してもswapが有効になるように

$ sudo vi /etc/fstab

で編集モードに入って、次の内容を末尾に追加

/swapfile   none    swap    sw    0   0

$ topでswapファイル確認

f:id:mi---tomo:20191023183519p:plain

swapファイルが使われていることが確認できる

以上でswap設定完了

もし間違いご指摘などありましたらコメントください!

参考にしたurl

https://wp.graphact.com/2016/10/29/mysql-ec2-swap/

https://dacelo.space/mysql/entry-1116.html