④Bootstrapを使ってTOPページを実装しよう

この章のゴール

・Bootstrapを導入する。

・TOPページを完成させる。

Bootstrapによる見た目の装飾

Bootstrapとは

さて、この章では、Bootstrapを使って見た目の塗装をしていきましょう。

Progateのこちらの章で、基礎的なHTML、CSSについて学習してきましたが、毎回1からHTMLやCSSを作成して、Webアプリケーションを開発していくのは、なかなか大変です。

なので、できるだけCSSを記述せずに、デザイン部分を開発するためのフレームワークとしてBootstrapというものがあります。

Bootstrapを導入することで、CSSの記述量がかなり減り、あまり時間をかけずにボタン、メニュー、フォームなどを作成することができます。

Bootstrapの導入

では早速、実装を進めていきましょう。

この章での到達イメージは以下のページです。

まずは、今回の作業用に、新たなブランチを作成します。

$ cd ~/hello_world/

$ git checkout -b feature/introduce_bootstrap
Switched to a new branch 'feature/introduce_bootstrap'

 

 

Gemfileを開いて、gem ‘bootstrap-sass’を追加してください。

・
・
・

# Bootstrapを追加
gem 'bootstrap-sass'
# ↑これを追加

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

・
・
・

 

そして、bundle installします。

(少し時間がかかります。)

$ bundle install
The dependency tzinfo-data (>= 0) will be unused by any of the platforms Bundler is installing for. Bundler is installing for ruby but the dependency is only for x86-mingw32, x86-mswin32, x64-mingw32, java. To add those platforms to the bundle, run `bundle lock --add-platform x86-mingw32 x86-mswin32 x64-mingw32 java`.
Fetching gem metadata from https://rubygems.org/............
Fetching gem metadata from https://rubygems.org/.
Resolving dependencies...
Using rake 12.3.3
Using concurrent-ruby 1.1.5
・
・
・
Using uglifier 4.1.20
Using web-console 3.7.0
Bundle complete! 19 Gemfile dependencies, 81 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.

 

そして、app/assets/stylesheets/application.cssを開き、

@import “bootstrap”;@import “bootstrap-sprockets”;を追加して保存します。

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */
@import "bootstrap-sprockets";
@import "bootstrap";
/* ↑この2行数を追加 */

 

次に、app/assets/stylesheets/application.cssの名前を以下の通りに変更します。

application.css→application.scss

次に、javascriptの読み込みを行います。

app/assets/javascripts/application.jsを開きます。

//= require_tree .という記述があるので、その上の行に、

//= require bootstrap-sprocketsを追加します。

...
...
//= require bootstrap-sprockets
↑これを追加
//= require_tree .

 

それでは、サーバーを再起動(Control + Cで止めて、rails s)します。

$ rails s
=> Booting Puma
=> Rails 5.2.3 application starting in development 
=> Run `rails server -h` for more startup options
Puma starting in single mode...
* Version 3.12.1 (ruby 2.6.3-p62), codename: Llamas in Pajamas
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://localhost:8080
Use Ctrl-C to stop

 

TOPページを作成する

では、ここからはTOPページを作成していきましょう。

まず、今のTOPページは以下のようになっていますね。

まずは、このページに、「ログインページ」「会員登録ページ」へのボタンを配置しましょう。

まず、独自のCSSを追加できるように、app/assets/stylesheets/application.scssを開き、

 @import “custom”;を追加して保存します。
・
・
・
 *
 *= require_tree .
 *= require_self
 */
 @import "bootstrap-sprockets";
 @import "bootstrap";
 @import "custom";
↑一番下に追加

次に、app/assets/stylesheets/custom.scssを作成します。

$ touch app/assets/stylesheets/custom.scss

 

まずは、サーバーを再起動します。

サーバーの再起動

サーバーを起動しているターミナル上で、

Control + C

その後、再び「rails s

 

次に、app/views/pages/index.html.erbを開いてください。

以下の通りに記述して保存します。

<div class="container">
  <div class="row">
    <div class="login col-md-4 col-md-offset-4 text-center">
      <h3>TOPページ</h3>
      <p>以下から選択してください。</p>
      <%= link_to 'ログイン', '#', class: 'btn btn-primary btn-block btn-large' %>
      <%= link_to 'ユーザ登録','#', class: 'btn btn-default btn-block btn-large' %>
    </div>
  </div>
</div>

 

また、app/assets/stylesheets/custom.scssを開き、以下の通りに記述して保存します。

html {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  width: 100%;
  height: 100%;
  background-color: #EEEEEE;
}

.login {
  top: 200px;
  height: 200px;
  background-color: white;
}

 

ブラウザを開いて確認すると、以下のように描画されていることが確認できます。

ちなみに、「ログイン」「ユーザ登録」のボタンのレイアウトについては、特にCSSに追加していませんよね。

これは「btn-primary」「btn-default」というBootstrapで用意されているクラスを指定することで、自動的にデザインを整えてくれているからです。

Bootstrapで用意されているクラスについては、こちらも参考にしてください。

プルリクエストの作成

では、ここまでの内容をコミットして、githubへpushします。

まずは、gitのリポジトリのルートディレクトリに移動します。

$ cd ~/hello_world/

 

コミットします。

$ git add -A
$ git commit -m "Bootstrapを使って、TOPページを作成"
[feature/introduce_bootstrap ded4f5f] Bootstrapを使って、TOPページを作成
 Committer: EC2 Default User <ec2-user@ip-172-31-18-105.us-east-2.compute.internal>
Your name and email address were configured automatically based
on your username and hostname. Please check that they are accurate.
You can suppress this message by setting them explicitly:

    git config --global user.name "Your Name"
    git config --global user.email you@example.com

After doing this, you may fix the identity used for this commit with:

    git commit --amend --reset-author

 6 files changed, 39 insertions(+), 2 deletions(-)
 rename hello_world_app/app/assets/stylesheets/{application.css => application.scss} (91%)
 create mode 100644 hello_world_app/app/assets/stylesheets/custom.scss

 

pushします。

$ git push origin feature/introduce_bootstrap
Counting objects: 15, done.
Compressing objects: 100% (14/14), done.
Writing objects: 100% (15/15), 2.07 KiB | 529.00 KiB/s, done.
Total 15 (delta 6), reused 0 (delta 0)
remote: Resolving deltas: 100% (6/6), completed with 6 local objects.
To github.com:wakitakomure/hello_world.git
   2b58721..ded4f5f  feature/introduce_bootstrap -> feature/introduce_bootstrap

 

次に、githubを開いて、「Compare & pull request」をクリックします。

これで、リモートのmasterブランチにマージされました。

最後に、ローカルのmasterブランチにもプルしておきましょう。

まず、ブランチをmasterに切り替えます。

$ git checkout master
Switched to branch 'master'
Your branch is up-to-date with 'origin/master'.

 

次に、プルします。

$ git pull origin master
remote: Enumerating objects: 1, done.
remote: Counting objects: 100% (1/1), done.
remote: Total 1 (delta 0), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (1/1), done.
From github.com:wakitakomure/hello_world
 * branch            master     -> FETCH_HEAD
   2b58721..8d36b60  master     -> origin/master
Updating 2b58721..8d36b60
Fast-forward
 hello_world_app/Gemfile                                                      |  2 ++
 hello_world_app/Gemfile.lock                                                 |  8 ++++++++
 hello_world_app/app/assets/javascripts/application.js                        |  1 +
 hello_world_app/app/assets/stylesheets/{application.css => application.scss} |  3 +++
 hello_world_app/app/assets/stylesheets/custom.scss                           | 16 ++++++++++++++++
 hello_world_app/app/views/pages/index.html.erb                               | 11 +++++++++--
 6 files changed, 39 insertions(+), 2 deletions(-)
 rename hello_world_app/app/assets/stylesheets/{application.css => application.scss} (91%)
 create mode 100644 hello_world_app/app/assets/stylesheets/custom.scss

 

最後に、feature/introduce_bootstrapブランチを削除しておきましょう。

$ git branch -D feature/introduce_bootstrap
Deleted branch feature/introduce_bootstrap (was ded4f5f).

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA