さらなる高みへ -higher ground -

プログラミング学習の定着を狙いとしたアウトプット(独り言)をしてみるブログ

デザインを整える【Ruby on Rails11】

Ruby on Rails

ここでは今まで作ってきたアプリの見た目の部分を作成する。

  • レイアウトファイルの使い方
  • CSSファイルの適用の仕方

レイアウトを変更する

ここまで作成してきたビューにはまだ装飾がされていない。
このビューにHTML、CSSファイルを適用して見本のPictweetのような見た目にしていく。

ヘッダー部分を完成させる

まず、Pictweetのヘッダー部分を完成させる。
今までビューに関わる内容は、index.html.erbというファイルに記述してきた。
しかし、ヘッダーやフッターなど、同じ内容を固定で表示したいときはレイアウトテンプレートを使用する。

レイアウトテンプレートとは

多くのページで同じ内容を表示したいとき、同じコードを何回も書くのは効率的ではない。
そのため、Railsにはレイアウトテンプレートが用意されている。

https://tech-master.s3.amazonaws.com/uploads/curriculums//11cf8cf6c0cbe0feba4ed9f9555d3f1f.png

どのビューを表示するときも、必ずレイアウトテンプレートが表示され、その中に個別のページが埋め込まれる。
一般的には、ヘッダーやフッターの内容を記述するために用いられる。

また、レイアウトテンプレートは複数用意しておくことができる。
特に指定をしなかった場合は、app/views/layoutsフォルダにある「application.html.erb」がテンプレートとして使用される。

application.html.erbを下記の内容に書き換える

コードの量が多いので、間違えないようコピー&ペーストで書き換える。 

app/views/layouts/application.html.erb
 
<!DOCTYPE html>
<html>
  <head>
    <title>Pictweet</title>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
    <script type="text/javascript">
      WebFontConfig = {
        google: { families: [ 'Unica+One::latin' ] }
      };
      (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
          '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();
    </script>
  </head>

  <body>
    <header class="header">
      <div class="header__bar row">
        <h1 class="grid-6"><a href="/">PicTweet</a></h1>
        <div class="user_nav grid-6">
          <a class="post" href="/tweets/new">投稿する</a>
        </div>
      </div>
    </header>

    <%= yield %>

    <footer>
      <p>
        Copyright PicTweet 2019.
      </p>
    </footer>
  </body>
</html>

改行を適応させる

デフォルトの状態ではrailsは文字列の改行を読み込まず、改行した状態で文章を表示させることはできない。
改行がしっかりと適応されるようにするためにはsimple_formatというメソッドを使う必要がある。 

simple_format

simple_formatメソッドは下記の条件で文字列を加工してくれるメソッドである。
今回はこのメソッドを使って改行を反映したツイートをビューに表示にさせる。

①改行は<br/>を付与

②文字列を<p>で括る

【例】

 

app/views/test/sample.html.erb

1
 
  <%= simple_format(引数) %>

index.html.erbを以下のように編集する

app/views/tweets/index.html.erb
1
2
3
4
5
6
7
8
 
<div class="contents row" >
  <% @tweets.each do |tweet| %>
    <div class="content_post" style="background-image: url(<%= tweet.image %>);">
      <%= simple_format(tweet.text) %>
      <span class="name"><%= tweet.name %></span>
    </div>
  <% end %>
</div>
tweet.textで取得したツイートの本文をsimple_formatによって加工している。この処理によってツイートの改行が反映されるようになる。

ヘルパーメソッド

simple_formatのように、Railsでは主にviewでHTMLタグを出現させたりテキストを加工するために予めメソッドが用意されている。
これらをまとめて、ヘルパーメソッドという。
他には、form_tag(フォームを出現させるメソッド)やlink_to(aタグを出現させるメソッド)などがある。

CSSファイルを適用する

HTMLファイルの適用が終わったので、続いてCSSファイルの適用を行なっていく。
 stylesheet_link_tag

CSSファイルの読込みはHTMLのヘッダー部分のstylesheet_link_tagから読み込まれる。
Railsの場合レイアウトファイルがあるので、application.html.erbにヘッダーの記述がある。application.html.erbの3行目に注目する。

app/views/layouts/application.html.erb
1
2
3
4
5
6
 
  <head>
    <title>Pictweet</title>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
  </head>

cssファイルはapp/assets/stylesheets/というディレクトリに配置する。
application.html.erbのstylesheet_link_tagの部分にapplicationと書いてあるので、このHTMLからはapp/assets/stylesheets/application.cssというCSSファイルを読み込むことを示している。

require_tree

application.cssの13行目に注目する。

  •  app
    •  assets
      •  stylesheets
        •  application.css

app/assets/stylesheets/application.css

/*
 ## 中略 ##
 *
 *= require_tree .
 *= require_self
 */

application.cssには、どのcssを読み込むかという設定が書いてある。

require_treeには引数として与えられたディレクトリ以下のcssファイルをアルファベット順に全て読み込むという意味がある。

現在require_treeの引数には.(ドット)が渡されている。
引数.(ドット)はカレントディレクトリを表す。
つまり、この記述によってapp/assets/stylesheetsというディレクトリにあるcssファイルは全て読み込まれることになる。

リンク先のファイルをダウンロードして「style.scss」と「setting.css」を下記のディレクトリに配置する

style.scss

setting.css

https://tech-master.s3.amazonaws.com/uploads/curriculums//8e3e4f4b85d3545e8c2854a23d8625db.gif

※ファイルを追加する際には既に存在するファイルは削除しない

  •  app
    •  assets
      •  stylesheets
        •  style.scss
        •  setting.css

scssという拡張子はcssファイルの一種ですので、今は気にせずに追加する。

フォントファイルを適用しましょう

レイアウトを編集する際に、CSSやHTMLの編集に加えて文字のフォントの編集も可能である。
Railsでフォントを変更する際にはフォントファイルというものを追加する。 

フォントファイル

フォントファイルとは、文字のフォントを変更するためのファイルである。
このファイルには、フォントの情報が記載してある。
Railsでフォントを読み込むためにはapp/assets/fontsというディレクトリにフォントファイルを配置し、CSSファイルにフォントファイルの読み込みを記述する必要がある。

【例】

  •  app
    •  assets
      •  fonts
        •  フォントファイル

追加したフォントを使用する際には、CSSファイルにフォントファイルの指定を行なう。
app/assets/stylesheets/style.scssの11行目に注目する。font_1_honokamin.ttfという記述があり、これがフォントファイルの指定を行なっている。

app/assets/stylesheets/style.scss

@font-face {
    font-family: 'ほのか明朝';
    src: url('font_1_honokamin.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
「fonts」というディレクトリを以下のディレクトリに作成する

app-assets-fonts

https://tech-master.s3.amazonaws.com/uploads/curriculums//a6ab60f4cd1f2c61dbc62582dbe40d2a.gif

 リンク先のファイルをダウンロードして「font_1_honokamin.ttf」を下記のディレクトリに配置する

font_1_honokamin.ttf

  •  app
    •  assets
      •  fonts
        •  font_1_honokamin.ttf

https://tech-master.s3.amazonaws.com/uploads/curriculums//bf8a4bc33b6fc8a245a7c1be20984193.gif

レイアウトの変更を確認する

以上の作業で、HTMLの編集、CSSの編集、フォントファイルの適用が終了した。
これから、実際に編集が適用されているかを確認する。

imageカラムに画像のURLを保存する

サンプル画像

上のリンク先から画像のURLをコピーする。

画像URLコピー

imageカラムに画像のURLをペーストする

phpMyAdminのtweetsテーブルを開き、「表示」をクリックする。
最初のレコードの「編集」をクリックしてimageカラムの「値」の枠にコピーした画像のURLをペーストし、「実行」を押す。

https://tech-master.s3.amazonaws.com/uploads/curriculums//05490438f4d0aed1b5778c5a8756858c.gif 

indexページを表示させる。

indexページを表示させ、以下の画面のようになっていることを確認する。

https://tech-master.s3.amazonaws.com/uploads/curriculums//bc863402ffd58dbdfd25554bbf099d39.jpeg

要点チェック