超初心者がスクールの教材やネット検索を駆使して、不格好なブログアプリを作成する道のり その1
環境
まず前提として
・Ruby 2.7.1
・Rails 6.0.3.4
・Gem 3.1.4
・bundler 2.1.4
はインストールしてあります。
使用するパソコン
・Mac Catalina
使用するテキストエディタ
プロジェクトの作成
まず、Vscodeのターミナルを開いて、
mkdir todo_app
でディレクトリを作成します。
ちなみにディレクトリはファイルを保管しておくフォルダのようなイメージを持っていればいいと思います。
cd todo_app
で作成したディレクトリに入ります。
rails new .
でrailsでのプロジェクト生成。
git add .
git commit -m "Rails new"
でインデックスに追加する。
初期設定とレイアウトファイルの作成
gemを利用したbootstrapの導入・不要なgemのコメントアウトします。
教材ではjbuilderを削除して、Bootstrapを使う流れに。。でも
そもそもjbuilderやBootstrapって…何？
JSONのレスポンスを返す際などに使用するgemのこと
Bootstrap
ウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。
というザックリな理解でとりあえず前に進むことにします。
また、下記サイトでの導入するメリットデメリット読んだ上で、教材に準じて使うことにしました。
Bootstrapとは ～メリット・デメリット～ | WEBSAS
Gemfileの
gem 'jbuilder', '~>2.5'
をコメントアウトして
一番最後に
# Bootstrap4 and jQuery
gem 'bootstrap', '~>4.3.1'
を追記。
ターミナルにて
bundle install
でgemのインストール。
、、、が
Could not find gem 'boostrap (~> 4.3.1)' in any of the gem sources listed in your Gemfile.
というエラー文が！
どうやら、bootstrapが見つからない。と書いてあるので、もしやバージョンの問題？と思い教材に併記されていた下記のページを見にいく
https://github.com/twbs/bootstrap-rubygem
と、下記のように違うバージョンが指示されてました。
早速、先ほどの
gem 'bootstrap', '~>4.3.1'
を
gem 'bootstrap', '~>5.0.0.alpha1'
に打ち替え、再度
bundle install
見事成功しました。
Bootstrapの初期設定
scssを使うため
app/assets/stylesheets/application.cssのファイル名をapp/assets/stylesheets/application.scssに変更します。
そして、一番最後に
@import "boostrap" ;
を追記。
また、教材には指示がなかったのですがgithubには
Then, remove all the *= require and *= require_tree statements from the Sass file. Instead, use @import to import Sass files.
Do not use *= require in Sass or your other stylesheets will not be able to access the Bootstrap mixins and variables.
とあり、
*= require
*= require_tree
をapp/assets/stylesheets/application.scsskから削除するように。
と、あったので削除しておきます。
続いてapplication.jsの編集
bootstrapの設定をgithubの指示通りに追記する
app/assets/javascripts/application.jsの末尾に追記
// Bootstrap4
//= require jquery3
//= require popper
//= require boostrap-sprockets
レイアウトの設定
画面全体のレイアウトを記述する layouts.scss を読み込む設定を追加する
app/assets/stylesheets/application.scss の一番最後に
@import "layouts";
を追記。
app/assets/stylesheets/layouts.scss を作成し、下記のように記述する。
main {
height: calc(100vh - 50px);
min-height: calc(100vh - 50px);
padding-top: 60px;
}
footer {
height: 50px;
}
.bg-home {
background-color: #1e90ff;
}
上記の意味を１つ１つ解きほぐしていきます。
main 領域に関して
高さは画面の高さから50px(footerの高さ)を引いた数値に設定。
ただ、header は position: fixed で配置されてしまうので、paddingで60px を指定してheader の分だけ空ける。
背景に関しては色を指定。
そして、この教材ではなんの補足もないけど…
calc()ってなんぞ？
調べてみた結果からいうと、
calc() を使うと、プロパティの値を計算式で実行することができるメソッド。
特徴が２つあって
1. 異なる単位で計算できる。
例) 100vh + 50px のように
2. calc() で計算されるのは結果の値ではなく、計算式自体。
ちょっと、ピンとこない言い回しですね。
要は、上記の例のように calc(100vh + 50px) とあった場合、100vh + 50px を計算した値を calc() で処理するのでなく、計算式自体を処理する。というイメージを持てばいいかと。
自分は下記サイトを参考にしました。
[CSS]「calc()」を使うとスゴイ便利！ページのレイアウト、要素やフォントのサイズ指定など実装テクニックのまとめ | コリス
app/views/layouts/application.html.erb の内容を編集します。
ここを変更することによって、アプリ全体の見た目に反映されます。まず
・viewportの設定を入れる。これによりスマホなどで見た際にも対応できるように
・＜%= render "layouts/header" %＞ でこれから作っていくheaderを配置
・＜%= render "layouts/footer" %＞ でこれから作っていくfooterを配置
・<%= render "layouts/flash" %> でこれから作っていくflashを配置
・モーダル用のブロック要素も配置。モーダルはBootstrapで使える機能の一つとのことなんですが、今はとりあえず教材通りに進めていきます。
<head>要素に
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>要素に
<%= render "layouts/header" %>
<%= render "layouts/flash" %>
<div id="modalArea"></div>
<main>
<div class="contailner-fluid h-100 p-2 d-flex flex-column">
<%= yield%> (この1文は元から記述されている)
</div>
</main>
<%= render "layouts/footer" %>
を追記。
続いてapp/views/layouts/_header.html.erb を作成し、下記の内容を記述
・bootstrapのheaderから不要なボタンを取り除き、rootへのリンクをロゴへ追加
<header class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<%= link_to 'TODO App', root_path, class: "navbar-brand" %>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
</header>
正直、分からない記述がたくさんできてます。。
まず navbar とは…
navbarはヘッダーに表示させようとしている「ナビゲーションメニュー」のこと。
以下のページに詳しくまとまってました。
【Bootstrap】Navbarの使い方・カスタマイズ方法を徹底解説 | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト
date-toggle="collaspse" とはメニューバーを折り畳めるように。記述みたいですね。
教材でこの箇所について詳しい説明はありませんが、ここで折りたたみ式のメニューばをheaderに配置しようとしていることだけ分かりました。
app/views/layouts/_footer.html.erb を作成し、下記を記述します。
<footer class= "bg-light d-flex flex-column justify-content-end align-items-end">
<div class="text-muted small px-3">TODO App by Ruby on Rails & Bootstrap 4</div>
</footer>
ちなみに、 justify-conten-end は右寄せにする記述ですね。
app/views/layouts/_flash.html.erb を作成し、下記を記述。
<% flash.each do |key, value| %>
<div class="fixed-top mt-5 container">
<div class="alert <%= bs4_bgcolor_for(key) %> alert-dismissable fade show my-3">
<%= value %>
<button class="close" data-dismiss="alert">x</button>
</div>
</div>
<% end %>
renderで呼び出された際のパーシャルの内容ですね。
app/helpers/application_helper.rb の内容を編集
module ApplicationHelper
と
end
の間に
def bs4_bgcolor_for(flash_key)
case flash_key
when "success"
"alert-success"
when "error"
"alert-danger"
when "alert"
"alert-warning"
when "notice"
"akert-info"
else
flash_key. to-s
end
end
を記述。
そして、ここで
git add .
git commit -m "finish_first_setting"
とか打って、コミットしておきます。
ここで一区切り。
次のステップは別ページで。
また、超絶駆け出しエンジニアなので、突っ込みどころがあればご指導・ご鞭撻いただけると幸いです。
