【学習71日】mixin活用方法・deviseの導入【応用33日】

■mixin を活用してdisplay:flexを効率的に設定

$prefixes: -webkit-, -moz-, -ms-, -o-, '';

@mixin flexbox {

  @each $prefix in $prefixes {

    display: #{$prefix}flex;

  }

}

●1行目　

prefixesという変数を設定し、中に複数の値を代入（配列）

●2行目

flexbox という mixin（スタイルの定義）を設定

●3−5行目

おなじみのeach

@each  $●●(単数形の変数) in  %▼▼(複数形の変数(配列)) {

　配列の要素1つ1つに繰り返したい処理

　この中で変数を使いたい時には #{ 単数形の変数 }

}

つまり

 

-webkit-, -moz-, -ms-, -o-　において

display:flex を設定する

 

という意味になる

■そもそもベンダープレフィックスとは何ぞ？

参考記事：http://www.htmq.com/csskihon/603.shtml

ベンダープレフィックス（接頭辞）とは

ブラウザベンダーが

（GooglechromeやInternet Explorer等のブラウザ提供元）

独自の拡張機能を実装したり

草案段階の仕様を先行実装する場合に

それが拡張機能であることを明示するために付ける

識別子のこと

将来的に仕様が変更されるリスクに備えて

独自拡張や先行実装のプロパティ名や

値の先頭に付けることが推奨されている

ベンダープレフィックスでは、

前後に「-」を付けたベンダー識別子（vendor identifier）で

ブラウザの種類を特定

-moz-　　…… Firefox
-webkit-　…… Google Chrome、Safari
-o-　　  　…… Opera
-ms-　   　…… Internet Explorer 

■display:flex　をはじめとする並列表記

参考記事： https://mamewaza.com/support/blog/howto-use-flex.html 

ある要素に定義するだけで、その直下の要素が並列になる便利なスタイル。シンプルな導入であれば、CSSで「display:flex」というスタイルを指定するだけでOK。

使い方	解説
float:left法	並列させたい要素のスタイルにfloat:left	要素を回り込みさせることで並列レイアウトを実現
display:inline-block法	並列させたい要素のスタイルにdisplay:inline-block	要素をインライン化（左寄せの場合に左詰め）することで並列レイアウトを実現
table法	tableタグを利用するか CSSのdisplay:tableを使って要素をテーブル化	要素をテーブル化することで、並列・縦列を操る

上記3つでも並列表記が可能。

flex : display では以下のような柔軟な対応も可能

・順番入替え

・均等配置

・自在な配置

・並列幅の指定

・並列・縦列・隙間埋めの合わせ技

■box-sizingプロパティ

参考記事：http://www.htmq.com/css3/box-sizing.shtml

ボックスサイズの算出方法を指定するプロパティ。

■box-sizing : content-box
パディングとボーダーを幅と高さに含めない（初期値）

■box-sizing : border-box
パディングとボーダーを幅と高さに含める

■box-sizing : inherit
親要素の値を継承する

値にborder-boxを指定すると、

widthとheightで指定する幅と高さがボーダーボックスになる。

内容領域にパディングとボーダーを含んだ範囲に対して

幅と高さが適用されるため、

パディングとボーダーの分だけボックスサイズが小さくなる

■devise とは？？

参考記事：https://www.sejuku.net/blog/13378

 deviseとは、簡単に認証機能を実装できるgemのこと

 ■手順

devise導入①deviseのインストール

①-1　Gemfileに以下の内容を追記

＃いずれの環境でも必要
gem 'devise'


＃開発環境にのみ必要
group :development do 
     gem 'rspec'
end


＃テスト環境にのみ必要
group :test do 
     gem 'rspec'
end


＃本番環境にのみ必要
group :production do 
     gem 'unicorn'
end

①-2

ターミナルにて、bundle install

devise導入②deviseに必要な設定ファイルを作成

②-1

ターミナルにて、rails g devise:installコマンドを実行！

アプリケーションの中にdeviseの設定ファイルを作成する

【作成されるファイル】

config/initializers/devise.rb（deviseセットアップ等のために動くruby）
config/locales/devise.en.yml（devise諸設定・履歴の為のファイル）

devise導入③deviseに対応したモデルを作成

③-1 

普通のモデルなら　rails g model モデル名

deviseに対応したモデルなら　rails g devise モデル名（user）

（モデル：DBとデータのやりとりをする役割を持つもの）

モデルが作成され

ついでにルーティングも自動で設定される！便利！

config/routes.rb

 

Rails.application.routes.draw do

  devise_for :users

  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html

end

・devise_for　はdeviseのヘルパーメソッド

・rails g devise モデル名コマンドを入力すると勝手に発動

・必要なルーティングを一気に作ってくれる

devise導入④テーブルを作成

rails g devise モデル名コマンドを発動しただけでは

モデル・データベース・ルーティングを設定しただけ。

まだテーブルは作れていないので、migrateファイルを編集し実行。

テーブルのカラムに制限をつける（NOT NULL制限・一意性制限など） 

db/migrate

def change

    create_table :users do |t|

      ## Database authenticatable

      t.string :name,               null: false, unique: true, index: true

      t.string :email,              null: false, default: ""

      t.string :encrypted_password, null: false, default: ""

migrateファイルを編集した後に

ターミナルにて、rails db:migrateコマンドを実行

devise導入⑤ビュー画面を作成

ターミナルにて、rails g devise:views users コマンドを入力

コントローラーと同じ名前のビューを作成したい

→デフォルトのビューのディレクトリ（フォルダ群）を生成できる！

　それがrails g devise:views テーブル名

以下のようなディレクトリができるはず

| app
| | views/
| | | users/
| | | | confirmations/
| | | | mailer/
| | | | passwords/
| | | | registrations/
| | | | sessions/
| | | | shared/
| | | | unlocks/