LoginSignup
0
0

More than 1 year has passed since last update.

@masatom86650860

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

Last updated at Posted at 2021-09-16

レイアウトを確認する

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

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

構造を追加する

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

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

ナビゲーション

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

構造を追加したWebサイトのレイアウト
<!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>

<!--[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を読み込めるため、非常に好都合です

<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要素が新たに使えるようになりました。

<%= 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である「'#'」を置いておきます

<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を評価し、レイアウトを描画すると、上のリストは次のように置き換わりま

<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>

<div class="container">
  <%= yield %>
</div>

```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で次のような仮のリンクを生成します。

<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のロゴ画像ファイルを加える必要があります。

<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画像を表示

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

困ったこと

ブランチを作成できない。
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'

インターネットで書いてあることを行ってみたがダメだった。
ダメもとで同じことをしてみるとなぜか成功した。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0