Railsの会18,19日目「bootstrap /partial /Sass 」

今日の範囲です。祝 5章!!!
今回はHTMLの部分は飛ばしているので部分的な説明になると思います。(レイアウトの話。)

IEの処理

IEに対応することがなければ記述しなくて大丈夫

<!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
  </script>
<![endif]-->

imageタグ

画像のリンク貼る link_toに link_tagを貼る

image_tag(画像ファイルへのパス, [, (オプション or HTMLオプション)])
<%= link_to image_tag("rails.png", alt: "Rails logo"),'http://rubyonrails.org/' %>

ファイル場所 app /assets /images/

ファイル名が重ならないようにRailsが文字列を追加している
もしRailsの写真使いたい時はu9jfoshfiu90...文字をそのままコピーして使わないといけない。

Bootstrap を作る

 @import "bootstrap-sprockets";
 @import "bootstrap";

CSS復習

/*テキストの大文字・小文字を指定する [upperdcase : 全て大文字で表示]*/
 text-transform :uppercase;
/*フォントの太さを指定[bold: 一般的な太さ]*/
font-weight :bold;
/*テキストの下線・打ち消し線等を指定[none: 何も表示しない（初期値) ]*/
text-decoration: none;

partial (パーシャル)

部分テンプレートまたはパーシャルは、出力を扱いやすく分割するための仕組みです。パーシャルを使用することで、ビュー内のコードをいくつものファイルに分割して書き出し、他のテンプレートでも使いまわすことができます。

ルール: 出力（viewの一部）するには、viewでrender メソッドを使用します。

 <%= render "menu" %>

読み込む場所　app/views/layouts/apprication.html.erb

<%=render 'layouts/footer' %>

Action View の概要 | Rails ガイド

アセットパイプライン

静的ファイルを目的別に分類する３つのディレクトリが使用されている。

  app /assets          現在アプリケーション固有のアセット
  lib  /assets           開発チームにより作成されたライブラリ用アセット
  vendor /assets     サードパーティのアセット

マニフェストファイル

app/assets/stylesheets/application.css

*=require_tree,
*=require_self

引数として与えられたディレクトリ下を再帰的に全てを検索する。

 *= require_tree . 

require_self呼び出しの時にCSSがあれば読み込む。
複数のディレクティブを記述しているとき、読み込まれる順番を指定したい場合に利用します。

 *= require_self

Sass

Sassの使い方について紹介します！
通常の書き方　

#logo{                  
float: left;
   ...
}

#logo:hover {
  color: #fff;
}

1. Sassの書き方をすると入れ子にできます

#logo {
  float: left;
  &:hover {
    color:#fff;
  }
}

2. 他には bootstrap-sass というgemを利用すると、変数を作れます！
LESS変数一覧: Customize and download · Bootstrap
LESSとSassの変数の見分け方
LESS: ＠
Sass: $

使用例

$light-gray: #777;

h2{
 color: $light-gray;
}

Railsでページごとのscssを管理する方法 -- blog.10rane.com

dockerのエラー(ポート)解決までの流れ

環境

・docker for mac
・macOS Sierra

docker 起動して いつものように 接続しようとすると

docker-compose up -d nginx redis

エラー文: 80番ポートが重複して起動できません！(写真とても見づらい...ごめんなさい！)

いつものコマンドが使えなくなっている...?!

Dockerのコンテナ消してもサーバ接続されているしどうゆうこと...?
となったので探す。
TCP探してkillを 繰り返してた 。

netstat -nlp | grep  ':80'
sudo lsof -i -n  | grep TCP

sudo kill 1810

原因

Macに搭載されているApacheが自動起動していることが原因でした

対処法

sudo apachectl stop

もう一度起動します
解決!!!!!

dump.sql を再読み込みにエラーが出た時の対処法

sql文はあっているはずなのにdumpしたらerrorが表示されるってことありますよね！

こんな感じで

ERROR:  column "id" of relation "column_id" does not exist

そんな時のコードはこちら

drop schema public cascade;
create schema public;

posticoで実証済みです。
手順
１　前のデータを消去
２　再度読み込み
の順番で 作るとうまくできます。

var について啓発する

var について使い方を間違えるとまずいことを学んだのでメモ。

<script>
  var hako = function(){
         for (f=1; f< 5; f+=1){ ... };
  hako();
  }
</script>

上記でもコードは動きますが、一つ注意するべき部分があります。
fにvar を指定せず変数を宣言しています。
では一つの区切りを終わらし、新しく下記に記述します。

<script>
    alert(f);
</script>

結果 5

普通はエラーが起きるのですが、varをつけないことにより
意図しない「グローバル変数」になってしまいます。
なので必ず変数を宣言するときは常にvarをつけて書きましょう。
例

var hoge = 1;

//または

for(f =1; f< 5; f +=1){
console.log(f);
};

おわり。

varについて啓発する[JS]

var について使い方を間違えるとまずいことを学んだのでメモ。

<scropt>
  var hako = function(){
         for (f =1; f< 5; f +=1){ ... };
  hako();
  }
</script>

上のコードでもうまくコードは動きますが、一つ注意するべき部分があります。
それは、var で変数を宣言していことです！
では別の区切りでコードを書いてみましょう。
script で区切って追加で記載します。

<script>
    alert(f);
</script>

結果 5
普通はエラーが起きるのですが、varをつけないことにより
意図しない「グローバル変数」になってしまいます。
なので必ず変数を宣言するときは常にvarをつけて書きましょう。
例

var hoge = 1;

おわり。