9/8の学び

部分テンプレートについて

部分テンプレートは、呼び出して使うテンプレート。 名前は、header.html.erbのようにをつける。 呼び出す際は、

<%= render 'shared/header' %>

のように、ファイル名を指定する。

image_tagの書き方

image_tag(source, options{} ) imageはapp/assets/imagesに全て配置する。 optionはシンボル形式で指定する。 sourceは文字列で指定する事ができる。 link_toと組み合わせることで、

<%= link_to image_tag('btn.png'), '/books/index' %>

のように、文字の代わりに画像をリンクにすることもできる。

link_toにHTML表現を入れる

erbで、link_toにdata-toggleやaria-haspopupなどをいれることができないので、これを入れられるようにしたい。

data-toggleなどにシングルクォーテーションをつけ、 'data-toggle': :dropdownのように書き直すことで使えるようになる。

data-toggle'dropdown'
=>
'data-toggle': :dropdown

のように、link_toで使うなら書き直すことが必要。 :記法を使うときは〇〇:スペース:XXとしないといけない。

scssをマニフェストファイルのscssへ読み込ませる

@import ファイル名;

でできる。urlでもできる。

font-awesomeの導入（Rails5）

font-awesomeとは、無料で使えるフォントアイコンをRailsで使うことができるようになるGem インストール手順 ①font-awesome-sassをinstall ②app/assets/stylesheets/application.scssにimport

詳しく ①

gem "font-awesome-sass"

②

@import "font-awesome-sprockets";
@import "font-awesome";

②については順番が逆だと上手くいかないので注意

bootstrapの導入

bootstrapはデザインをいい感じにできる。

gem 'bootstrap','~>4.3.1'
gem 'jquery-rails'

jQueryも一緒にインストールする必要がある。

bundle

でインストールすればよい。 app/assets/stylesheets/application.scssに

@import "bootstrap";

で使える！ さらに、jQueryを使えるようにするために、app/assets/javascripts/application.jsのなかに、

.
.
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require_tree .

となるように上の3行を足して上げる必要がある。これでバッチリ！

migrationのカラムの追加

usersテーブルにfirst_nameカラムとlast_nameカラムを追加したい。 まずは変更するためのマイグレーションを作成する。

rails g migration AddNameToUsers

これでマイグレーションが作成されるので、中に書いていく。

class AddNameToUsers< ActiveRecord::Migration[5.2]
  def change
    add_column :users, :first_name,:string
    add_column :users, :last_name,:string
  end
end

あとはrails db:migrateすればOK！