読者です 読者をやめる 読者になる 読者になる

キリンめも

記事を書いています #rails #swift #JS #UE4

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

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

f:id:geta206:20170411193012p:plain

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 ガイド

アセットパイプライン

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

  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番ポートが重複して起動できません!(写真とても見づらい...ごめんなさい!)
f:id:geta206:20170405172112p:plain

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

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で実証済みです。
手順
1 前のデータを消去
2 再度読み込み
の順番で 作るとうまくできます。

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);
};

おわり。

Railsの会 17日目「ユーザクラス/4章まとめ」

今回の範囲です。
今回はなんとなく理解している部分だったので詳しく書いています。

f:id:geta206:20170331101007p:plain

ユーザクラス

まずはコードを見てみましょう (example_user.rb)

class User
attr_accessor :name, :email

def initialize(attributes = {})
@name = attributes[:name]
@email = attributes[:email]
end

def formatted_email
"#{@name} <#{@email}>"
end
end


説明していきます。

attr_accessor :name, :email

attr _accessor 外部で email と nameを接続できるようにしています。
(Objectから値が取得できる)

def initialize (attributes = {})

メソッド(initialize)を作り、引数に初期値({}ハッシュ)を入れてます。

どうして初期値を指定しないといけないの??

結論から言うとエラーがでる可能性が出てくるからです。

A def initialize (attributes = {})
B def initialize (attributes )

AとB で意味が違うことに気がつきますか?
Aは 「引数がない時attributesをハッシュとして定義します」
Bは  「initializeの引数は必ず必要です」

つまり Bは値が必ず必要なのに値が入っていない場合エラーが起こるということになります。
なので Aのように記述してエラーを事前に防いでいます。

initialize (初期化)

初期化すると
Objectを生成すると自動でインスタンスがつくられる便利なメソッド。 (private)
hoge.new をすると呼び出されるということになります。


Bでもエラーが出ない方法があります。

 User.new(name: "hoge", email: "hoge.com")

値が指定されているのでエラーを防ぐことができます。

エラーがでる書き方とは?

User.new

Bのコードの意味は 「initializeの引数は必ず必要です」と書いているのにないとおこられます。

次の行に進みます。

 def formatted_email
    "#{@name} <#{@email}>"
  end

メソッドを定義してインスタンス変数(@name @email)を呼び出しています。
何も定義されていない場合はnilになります。

実践

1 > require './example_user' # example_userのコードを読み込む方法
=> true
2 >> example = User.new
=> #
>> example.name # attributes[:name]は存在しないのでnil
=> nil
>> example.name = "Example User" # 名前を代入する
=> "Example User"
>> example.email = "user@example.com" # メールアドレスを代入する
=> "user@example.com"
>> example.formatted_email
=> "Example User "


1  カレントディレクトリからexample_userファイルを探す。
2  @name変数に "Example User"という値を設定。

initializeメソッド - クラスの概念 - Ruby入門

おまけ メソッドについておさらい
def の後に記載しているものは関数。緑色で書かれています(^ω^)

4章まとめ

Rubyは文字列を扱うためのメソッドを多数持っている

Rubyは全てObjectでできている

・def でメソッドを定義

・class でクラスを定義

Railsのview はerbでも使用出来る

Rubyの組み込みクラス(配列  範囲 ハッシュなど)がある

Rubyのブロックは添え字を使うデータ構造より自然にイテレーション出来る

・シンボルとはラベルの事。(代入できない文字列)

Rubyはクラスを継承できる

Rubyの組み込みクラスは内部を見たり修正できる

・deified は回文

Ruby on Rails チュートリアル:実例を使って Rails を学ぼう


次回は5章になります!