1 fontawesomeの導入に関して
以下の手順で導入
gem 'font-awesome-sass'
bundle install
@import "font-awesome-sprockets";
@import "font-awesome";
上記を実施したとしてもapp/assets/stylesheets/application.cssが存在する場合にはこちらが優先されて読み込まれることにより反映されないことに注意する必要がある。
使用例）
= icon('fas', 'list', class: 'aaa')
第一引数のfas部分に関しては使用アイコンによりfarを使用する加藤が異なるところに留意する必要がある。また、第二引数のlist部分に関してはアイコンの種類の選択、第三引数部分に関してはclassを指定することで任意のクラスを入力することができる。
また、最後のクラス部分にfa-spinと入力すれば任意のアイコンを回転するアクションを付与することも出来る。
2 hamlに関して
BEMを元にcss設計のためにクラス名を付与しました。
form_with使用について
form_withを使用する以前にはform_forとform_tagを使い分けして使用していましたが、form_withに関してはそれぞれを使い分けることなく使用することができます。
その為、上記の二つに関しては非推奨となっているそうです。
また、form_withを使用する際に気をつけなければいけない点があります。
それは基本設定においてsubmitによるデータ送信にAjaxを使うように設定されています。
その為、必要に応じて設定を変更してあげないと実装の際に違った結果となってしまいます。
下記のようにform_withのオプションとしてlocal:trueとしてあげることでAjaxによる通信を使用しないように設定することが出来ます。
また、今回作成したのは検索フォームであり、情報をデータベースに保存する必要性がないので、url設定を任意のものにしています。
しかし、情報の送信フォームであったりした場合には情報の保存の必要性が出てくるのでmodelオプションを設定することによってモデルに基づいたフォームを作成することが可能です。
= form_with class: 'top-content__search', url: 任意のpath, local: true do |f|
= f.text_field :keyword, placeholder:'何かお探しですか？', class: 'top-content__search__keyword', id: 'top-content__search__keyword'
%label.top-content__search__icon
= icon('fas', 'search')
= f.submit :submit, style: "display: none;"
画像を使用する場合
= image_tag("画像名", class:"top-content__logo")
この時、使用する画像は、app/assets/images配下に画像ファイルを置いています。
publicに置く際には画像名の前に/を入れる形になります。
参考記事
3 sassに関して
sassではhaml書いたクラスを元に任意のクラスの見た目の作成を実施します。
下記のようにブロック要素からエレメント要素でクラスの関係が親子関係になっているものについては&__でつなげることで余計な記述を減らすことが出来ます。
また、@mixinや変数を用いることにより複数回使用するスタイルを定型化することで記述をより簡素にできるのでそちらも利用していきました。
.top-content {
display: flex;
...
}
&__search {
width: 100%;
...
&__keyword{
background-color: rgb(245, 245, 245);
...
}
&__icon {
cursor: pointer;
...
}
}
}
4 javascript
追記
参考記事
参考記事
参考記事
参考記事
参考記事(Qiitaより)
jsに関してはjqueryを用いて実装しました。
jqueryの使用に関しては、今回使用しているrailsのversionですとjqueryが非推奨の為、自分で下記のように使用する準備をしなければいけません。
gem 'jquery-rails'
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
上記の記述に関してはrequireに関してjquery-ujsという記述を使用している場合もありますが、今回は上記のようにしています。
尚、二つの分を両方記述した場合にはエラーが出るので注意する必要があります。
$(function() {
console.log($(".bottom-content__item__category__menu"));
$('.bottom-content__item__category').mouseover(function(){
$('.bottom-content__item__category__menu').toggle(true);
$('.bottom-content__item__category__part').addClass("categoryselect");
});
$('.bottom-content__item__category').mouseout(function(){
$('.bottom-content__item__category__menu').toggle(false);
$('.bottom-content__item__category__part').removeClass("categoryselect");
});
});
今回はjsでの動作確認が主な目的でしたので簡易的に目的の動作を行わせるための記述を行いました。
主にカーソルが特定の要素に乗った時にドロップダウンリストが出てきてカーソルが外れると要素が非表示になるという内容です。
以上、簡易的ではありますがまとめになります。