railsアプリケーションの初期設定
1
rails _6.1.3.1_ new wakatter -d mysql
これでwakatterアプリケーションが作成できました！
以下のコマンドを実行してDBを作成しましょう。
1
rails db:create
development.rb に以下の内容を追加してアプリケーションにアクセスできるようにしましょう。
1
config.hosts.clear
Webpacker
Webpackerとは
Webpackerとは、CSSファイル、JSファイル、画像ファイルなど見た目を構成するのに必要なファイルを一つにまとめられるWebpackというフロントエンドのライブラリをRailsで使えるようにgem化したものです。
まずはWebpackerというのがどういうものか、以下の動画を見て理解を深めましょう！
Webpackerの設定
それでは動画で学習したWebpackerをRailsで使えるように設定していきましょう。
Webpackerの使い方を理解するためにサンプル画面を作っていきます。
以下のコマンドを実行して、TopsController を作成して下さい！
1
rails g controller tops --skip-assets
--skip-assets とオプションを指定する理由は、webpackerでは基本的にassetsディレクトリを使用しないためです。
作成した tops_controller.rb に indexアクションを以下のように加えましょう。
1
2
3
class TopsController < ApplicationController
def index; end
end
続いて tops/index.html.erb に以下の内容を加えましょう。
1
2
<p>Hello Wakatter</p>
上記で作成した Topページを表示できるようにルーティングを設定しましょう。
ルーティングファイルに以下の内容を加えて下さい。
1
2
3
Rails.application.routes.draw do
resources :tops, only: :index
end
サーバーを起動して /tops にアクセスした際に、以下のように表示されていることを確認しましょう！
それでは、 Hello Wakatter という記述を CSS と Webpacker を使って装飾していきます。
まず注目すべきファイルは app/javascript/packs/application.js ファイルになります。このファイルはエントリファイルと呼ばれ、Webpackerはこのエントリファイルでimportしているモジュールを順番に辿っていき bundle を行います。
app/javascript/packs/application.js のファイルを開いてみましょう！以下のような記述になっていますね。
このapplication.jsファイルに scssファイル を import することで scssファイルのスタイルを適用することができます。既に書かれている記述に関しては理解しなくても問題ないので、このファイルに色々なファイルを import するとイメージできていれば大丈夫です。
1
2
3
4
5
6
7
8
9
10
11
12
13
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
Rails.start()
Turbolinks.start()
ActiveStorage.start()
それでは、application.js ファイルに importするscssファイルを作成していきましょう！
以下のディレクトリ構成になるように stylesディレクトリと application.scssファイルとtop.scssファイルを作成して下さい。
1
2
3
4
5
6
7
8
├── wakatter
│ ├── app
│ │ ├── javascript
│ │ │ ├── packs
│ │ │ │ ├── application.js
│ │ │ │ ├── styles
│ │ │ │ │ ├── application.scss
│ │ │ │ │ ├── top.scss
今後作成したscssファイルは全て application.scss ファイルにimportします。
それでは、application.scssファイルにTOPページの装飾をするtop.scssファイルをimportします。
以下になるように追記して下さい。
1
@import 'top';
これでtop.scssのスタイルの読み込みが完了しました。
続いて、top.scssファイルに文字の色を赤色にするスタイルを記述します。以下の内容を追記して下さい。
1
2
3
p {
color: red;
}
次に application.html.erb ファイルを開いてstylesheet_link_tag と記述している部分を、stylesheet_pack_tag に変更して下さい。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<title>Wakatter</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
何でstylesheet_link_tagのままじゃいけないの？
stylesheet_link_tagの記述のままでは、webpackerでコンパイルしたcssファイルを読み込むことができないからだよ。
記述を変更した後に、ブラウザをリロードしてみましょう！
赤文字に変更されると思いきや変更されていません。
エントリファイルである application.js ファイルに application.scss ファイルを読み込む設定を書いていないのでscssファイルをコンパイルできていないのが原因です。
なので、app/javascript/packs/application.js ファイルにapplication.scss ファイルを読み込む記述を追加しましょう。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
Rails.start()
Turbolinks.start()
ActiveStorage.start()
import './styles/application'
ターミナルで以下の動画のように ./bin/webpack というコマンドを実行して下さい。
実行すると、public/packs ディレクトリ配下にコンパイルされた scssファイルが作成されます。
このコンパイルされたscssファイルを読み込んで、スタイルが適用されます。
ブラウザをリロードして、以下の画像のように文字が赤色になっているか確認しましょう。
次に こちら のファイルから画像のzipファイルをダウンロードして下さい。
以下のようにenvironmentディレクトリ直下に、images.zipファイルをアップロードしましょう。
1
2
├── environment
│ ├── images.zip
ダウンロードが完了すれば、zipファイルを解凍しましょう。
以下のコマンドを打ってzipファイルを解凍して下さい。（質問には全て 「y」を打つようにして下さい。）
1
unzip images.zip
解凍できたimagesディレクトリをapp/javascript/packs/imagesディレクトリにコピーします。
以下のコマンドを打ってコピーして下さい。
1
cp -r images wakatter/app/javascript/images
これでimagesディレクトリに使用する画像ファイルをコピーできました。
以下の画像のようにコピーできているかを確認しましょう。
画像も読み込めるように application.js ファイルでimportさせる必要がありますが、scssファイルの読み込みの時とは違い、 import という記述は使いません。
代わりに require.context を使用します。以下のように application.js ファイルにコードを追記しましょう。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
Rails.start()
Turbolinks.start()
ActiveStorage.start()
import './styles/application'
require.context('../images', true)
require.context('../images', true) は、カレントディレクトリの親ディレクトリと同じ階層にある images ディレクトリの中身を全てimportし、 bundle.js にまとめるという意味になります。
それではターミナルで ./bin/webpack というコマンドを実行してコンパイルします。
1
./bin/webpack
以下の画像のように、 public/packs/media/images ディレクトリに imageファイルが作成されていればコンパイルできています。
それではコンパイルした logo.svg ファイルを TOPページに表示してみましょう。
以下のように記述して下さい。
1
2
<p>Hello Wakatter</p>
<%= image_pack_tag 'logo.svg', size: '230x40', alt: 'ロゴ' %>
image_pack_tag の後ろに表示したい画像ファイル名を記述することによって webpackerによってコンパイルされた画像ファイルを表示することができます。
トップページをリロードして画像ファイルの表示を確認しましょう。
logoの表示が大きすぎるので、サイズを調整しましょう。
以下のように sizeオプションを使ってサイズを指定しましょう。
1
2
<p>Hello Wakatter</p>
<%= image_pack_tag 'logo.svg', size: '230x40', alt: 'ロゴ' %>
トップページをリロードして、以下の画像のようにサイズが小さくなっていることを確認しましょう。
今まではスタイルを変更するたびに先ほども実行した ./bin/webpack を実行していましたが、スタイルを変える度に毎度 ./bin/webpack を実行するのも大変です。
またブラウザをリロードすることでスタイルを反映することもできるのですが、コンパイルしてからの表示になるのでリロードに時間がかかります。
そこでスタイルを変更するたびにwebpackのコンパイルを自動実行されるようにしましょう。
ターミナルで別タブを開いて以下のコマンドを実行して下さい。
1
./bin/webpack-dev-server
以下の画像のように 別タブで ./bin/webpack-dev-server と実行されていることを確認しましょう。（windowを分ける必要はありません。同じwindowで別タブで実行確認できていれば大丈夫です）
以下の動画のように赤文字を青文字に変えてみましょう。自動でコンパイルが実行されます。コンパイル済みなのでリロードするのにも時間がかかりません。
これから Wakatterの開発を進めるときは、別タブで ./bin/webpack-dev-server を実行していると開発がスムーズに進むので、実行しておくようにしましょう。
top.scss ファイルは利用しないので、削除するようにしましょう。
1
rm ~/environment/wakatter/app/javascript/packs/styles/top.scss
FLOCSS
FLOCSSとは
wakatterでは、CSSを効率的に管理できるようにするために FLOCSS というCSSの設計を用いてスタイルを適用していきます。
FLOCSSがどういうものか動画を見て理解を深めましょう。
FLOCSSの設定
それではFLOCSSのCSS設計になるようにディレクトリを作成していきましょう。
以下のディレクトリ構造になるようにして下さい。
1
2
3
4
5
6
7
8
9
10
11
12
├── wakatter
│ ├── app
│ │ ├── javascript
│ │ │ ├── packs
│ │ │ │ ├── application.js
│ │ │ │ ├── styles
│ │ │ │ │ ├── Foundation
│ │ │ │ │ ├── Layout
│ │ │ │ │ ├── Object
│ │ │ │ │ │ ├── Component
│ │ │ │ │ │ ├── Project
│ │ │ │ │ │ ├── Utility
Foundation
Wakatterアプリケーションの見た目を作るために、FLOCSSのディレクトリにファイルを追加していきます。
chrome・safari等のそれぞれのブラウザにデフォルトで当たっているスタイルの初期化や、Wakatterアプリケーション全体で利用できる設定ファイルを追加します。
こちら のファイルからFoundationに関するファイルをまとめているzipファイルをダウンロードして下さい。
以下のようにenvironmentディレクトリ直下に、Foundation.zipファイルをアップロードしましょう。
1
2
├── environment
│ ├── Foundation.zip
ダウンロードしたFoundation.zipを解凍します。以下のコマンドを打って下さい。
1
unzip Foundation.zip
ダウンロードしたFoundationディレクトリ以下のファイルを、wakatter/app/javascript/styles/Foundation ディレクトリ以下にコピーします。以下のコマンドを打って下さい。
1
cp -r Foundation/ ~/environment/wakatter/app/javascript/packs/styles/
wakatter/app/javascript/styles/Foundation/ 以下にファイルが作成できていることを確認しましょう。
FoundationディレクトリではWakatterで利用するブラウザの初期化、カラーコードの定義、mixin関数の定義などをしているファイルをダウンロードしました。以下の表はダウンロードしたファイルの役割について説明している表になります。
| ファイル名 | 説明 |
|---|---|
| _base.scss | Wakatterアプリケーション全体でどのフォントファミリーを使うかやタグのデフォルトのスタイルを定義しています。 |
| _mixin.scss | レスポンシブを簡単に実現する関数や並び替えを簡単に実現する関数を定義しています。mixinの関数については、次の動画で実際に関数をincludeして使用するので、関数についてはその際に詳しく解説します。 |
| _reset.scss | chrome・safari等のそれぞれのブラウザにデフォルトで当たっているスタイルの初期化をしているファイルになります。 |
| _variable.scss | Wakatterで利用するカラーコードを設定するファイルになります。 |
Foundation以下のファイルを application.scss からimportしましょう。
以下の記述を加えて下さい。
1
2
3
4
5
// Foundation
@import './Foundation/reset';
@import './Foundation/variable';
@import './Foundation/base';
@import './Foundation/mixin';
トップページをリロードして表示されれば、Foundationディレクトリの読み込みが完了です。
headタグの設定
head要素に文書に関する情報を指定していきましょう。
application.html.erb のheadタグに文字コードの設定とフォントを読み込むように記述を追加しましょう。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<title>Wakatter</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
文字コードは、文字化けを起こさないようにするために指定する必要があると学びましたね。
フォントの読み込みについては、CDNを利用してGoogleFontsを読み込みます。
CDNとは 「Content Delivery Network」を略した言葉で、ユーザーにインターネットを通して高速にコンテンツを提供する仕組みのことです。CDNを利用してGoogleFontsを読み込むと、localにGoogleFontsファイルを置いて読み込むよりもキャッシュサーバーを使ってサーバーの負荷を下げてレスポンスが早くなります。
ここまででWakatterアプリケーションを作る上での土台が出来上がりました。
次のカリキュラムからはWakatterアプリケーションの中身を作っていきます。
この記事のまとめ
- Webpackerとは、CSSファイル、JSファイル、画像ファイルなど見た目を構成するのに必要なファイルを一つにまとめられるWebpackというフロントエンドのライブラリをRailsで使えるようにgem化したものです。
- FLOCSSとは、CSSの管理を効率的に行うためのCSS設計のことです。
この記事で学んだことをTwitterに投稿して、アウトプットしよう！
Twitterの投稿画面に遷移します