railsチュートリアル 第五章 html　

##レイアウトを確認する
この章では、アプリケーションに```Bootstrap```フレームワークを組み込み、
、カスタムスタイルを追加。
これまで作成したページ（HomeやAboutなど）へのリンクをレイアウトに追加。
```パーシャル```
Railsのルーティング
Asset Pipeline
Sassを学習する。
章の最後に、ユーザーをサイトにログインさせる

サンプルアプリケーションにレイアウトを追加、修正の部分に注力
本章ではテキストエディタによる修正とブラウザによる確認がほとんど。
最後に、新しいテスト手法```「統合テスト（Integration Test）」```について紹介
統合テストを使って、最終的なレイアウトやリンクが正しいかどうかをチェック。

###構造を追加する
レイアウトにいくつかの構造とCSSを与えて、最小限のスタイルを追加。
カスタムCSSルールの他に、Twitter社によるオープンソースのWebデザインフレームワークとして公開している```Bootstrap```も利用します。また、コードそのものにもスタイルを与えます。
つまり、散らかり始めたレイアウトのコードを、```パーシャル（Partial）```機能を使って整えていく

Webアプリケーションを作成するときに、ユーザーインターフェイスの概要を知っておく。
そこで本書では、モックアップ（Webの文脈ではよくワイヤーフレームと呼ばれます）を使っていく。
サイトロゴ、ナビゲーションヘッダー、サイトフッターを含む静的ページを開

####ナビゲーション
ンプルアプリケーションにリンクとスタイルを追加するために、サイトのレイアウトファイルapplication.html.erb（リスト 4.3）にHTML構造を追加し、レイアウトファイルを更新

#####構造を追加したWebサイトのレイアウト
```html
<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag    'application', media: 'all',
                               'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application',
                               'data-turbolinks-track': 'reload' %>
    <!--[if lt IE 9]>
      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
      </script>
    <![endif]-->
  </head>
  <body>
    <header class="navbar navbar-fixed-top navbar-inverse">
      <div class="container">
        <%= link_to "sample app", '#', id: "logo" %>
        <nav>
          <ul class="nav navbar-nav navbar-right">
            <li><%= link_to "Home",   '#' %></li>
            <li><%= link_to "Help",   '#' %></li>
            <li><%= link_to "Log in", '#' %></li>
          </ul>
        </nav>
      </div>
    </header>
    <div class="container">
      <%= yield %>
    </div>
  </body>
</html>
```

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

```[if lt IE 9]```は、Railsの一部ではありません。
条件付きコメントと呼ばれる。
今回のような状況のためにInternet Explorerで特別にサポートされている。
これによりFirefox、Chrome、Safariなどの他のブラウザに影響を与えずに、IEのバージョンが9未満の場合にのみHTML5 shimを読み込めるため、非常に好都合です

```html
<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <%= link_to "sample app", '#', id: "logo" %>
    <nav>
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "Home",   '#' %></li>
        <li><%= link_to "Help",   '#' %></li>
        <li><%= link_to "Log in", '#' %></li>
      </ul>
    </nav>
  </div>
</header>
```
```header ```タグは、ページの上部に来るべき要素を表す。
このheaderタグには、
```navbar```、
```navbar-fixed-top```、
```navbar-inverse```という３つのCSSクラスがスペース区切りで与えられています

```class="container"``` ``` id: "logo"```
すべてのHTML要素には、クラスとid 6 の両方を指定することができます
CSSでスタイルを指定するときに便利です
クラスとidの主な違いは、クラスはページ内で何度でも使えるのに対し、idは一度しか使えない点

```div ```タグは一般的な表示領域を表し、要素を別々のパーツに分けるときに使われます。
```div```タグはサイト内のよく使われる領域ごとに細分化
```header```要素、```nav```要素、```section```要素が新たに使えるようになりました。

```html
<%= link_to "sample app", '#', id: "logo" %>
<nav>
  <ul class="nav navbar-nav navbar-right">
    <li><%= link_to "Home",   '#' %></li>
    <li><%= link_to "Help",   '#' %></li>
    <li><%= link_to "Log in", '#' %></li>
  </ul>
</nav>
```
リンクを生成するために、Railsヘルパーのlink_toを使います
```link_to```の第1引数はリンクテキスト、第2引数はURLです。このURLは名前付きルート（Named Routes）
今はWebデザインで一般に使われるスタブ（=一種のダミー）用のURLである「```'#'```」を置いておきます

```html
<nav>
  <ul class="nav navbar-nav navbar-right">
    <li><%= link_to "Home",   '#' %></li>
    <li><%= link_to "Help",   '#' %></li>
    <li><%= link_to "Log in", '#' %></li>
  </ul>
</nav>
```
```nav ```タグには「その内側がナビゲーションリンクである」という意図
```ul```タグに付与されている```nav```や```navbar-nav```、```navbar-right```クラスもBootstrapにおいて特別な意味を持ちます
Railsが埋め込みRubyを評価し、レイアウトを描画すると、上のリストは次のように置き換わりま

```html
<nav>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Home</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Log in</a></li>
  </ul>
</nav>
```

```html
<div class="container">
  <%= yield %>
</div>
```
```container```クラスもBootstrapにおいて特別な意味を持ちます
```yield```メソッドはWebサイトのレイアウトにページごとの内容を挿入

#####サインアップページへのリンクがあるHomeページ

```rb
<div class="center jumbotron">
  <h1>Welcome to the Sample App</h1>

  <h2>
    This is the home page for the
    <a href="https://railstutorial.jp/">Ruby on Rails Tutorial</a>
    sample application.
  </h2>

  <%= link_to "Sign up now!", '#', class: "btn btn-lg btn-primary" %>
</div>

<%= link_to image_tag("rails.svg", alt: "Rails logo", width: "200px"),
                      "https://rubyonrails.org/" %>
```

```link_to ```で次のような仮のリンクを生成します。

```rb
<a href="#" class="btn btn-lg btn-primary">Sign up now!</a>
```

上で挙げた
```div```タグのCSSクラス```jumbotron```や、
signupボタンの```btn```クラス、
```btn-lg```クラス、
```btn-primary```クラスはすべて、Bootstrapにおいて特別な意味を持ちます

2番目の```link_to```では、引数として画像ファイルのパスと任意のオプションハッシュをとる```image_tag```ヘルパーの能力が示されています。
このヘルパーでは、シンボルを使って```alt```属性や```width```属性などを設定できます。
一方で画像を表示するためには、```rails.svg```というRailsのロゴ画像ファイルを加える必要があります。

```rb
<img alt="Rails logo" width="200px" src="/assets/rails-<long string>.svg">
```
```src```属性には "images" というディレクトリ名が含まれていないことにも注目してください
```assets```ディレクトリ内の他のディレクトリも同様です
これは高速化のための仕組み
Railsは```assets```ディレクトリ直下の画像を```app/assets/images```ディレクトリにある画像と紐付けています
```alt```属性は、画像がない場合に代わりに表示される文字列

####演習
1.画像をダウンロード
2.mvコマンドを使い、適切なアセットディレクトリに移動
ファイル名と移動先を書く

```
mv kitten.jpg app/assets/images
```
3.image_tagを使って、kitten.jpg画像を表示

```rb
 <%= link_to image_tag("kitten.jpg") %>
```


####困ったこと
#####ブランチを作成できない。

```rb
ubuntu:~/environment/sample_app (master) $ git checkout -b filling-in-layoutgit checkout -b filling-in-layout
fatal: 'checkout' is not a commit and a branch 'filling-in-layout' cannot be created from it

ubuntu:~/environment/sample_app (master) $ git fetch --prune
Password for 'https://***@github.com/***/sample_app.git': 
remote: Invalid username or password.
fatal: Authentication failed for 'https://***@github.com/***/sample_app.git/'

ubuntu:~/environment/sample_app (master) $ git checkout -b filling-in-layoutgit checkout -b filling-in-layout
fatal: 'checkout' is not a commit and a branch 'filling-in-layout' cannot be created from it

ubuntu:~/environment/sample_app (master) $ git fetch
Password for 'https://***@github.com/***/sample_app.git': 
remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead.
remote: Please see https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/ for more information.
fatal: Authentication failed for 'https://***@github.com/***/sample_app.git/'

ubuntu:~/environment/sample_app (master) $ git branch -a                   * master
  rails-flavored-ruby
  static-pages
  remotes/heroku/master
  remotes/origin/master
  remotes/origin/static-pages

ubuntu:~/environment/sample_app (master) $ git checkout -b filling-in-layoutgit checkout -b filling-in-layout
fatal: 'checkout' is not a commit and a branch 'filling-in-layout' cannot be created from it

ubuntu:~/environment/sample_app (master) $ git checkout -b filling-in-layout
Switched to a new branch 'filling-in-layout'
```
インターネットで書いてあることを行ってみたがダメだった。
ダメもとで同じことをしてみるとなぜか成功した。