一週間のカリキュラム １週間で、Ruby 〜 Ruby on Railsまでを学ぶ
シリーズの４日目、見た目の調整をしていきます。
４日目
- Ruby on Rails でのアプリケーション・サービスの作成
見た目のデザイン
一通り機能を追加してきましたので、今回からは見た目を触っていきます。 前回やれなかったページング部分をまずは実装して、デザインに移りたいと思います。
- 1 ページングの追加
- 2 見た目のデザイン変更の為にSCSSを追加
- 3 jsを利用する。
1 ページングの追加
gem 'kaminari'
bundleインストールとコンフィグを設定
$ bundle install
$ bin/rails g kaminari:config
app/controllers/articles_controller.rb
def index
if params[:category_id] then
@articles = Article.where(category_id: params[:category_id])
elsif params[:search_word] then
@articles = Article.where("title LIKE ?", "%#{params[:search_word]}%")
else
@articles = Article.all
end
# これ追加
@articles = @articles.page(params[:page]).per(2)
#記事が少ない場合 per(2)などでページング状態にあるか確認
end
ページングの内容を変えたい場合はここを適宜、コメントアウト config/initializers/kaminari_config.rb
# frozen_string_literal: true
Kaminari.configure do |config|
# config.default_per_page = 25
# config.max_per_page = nil
# config.window = 4
# config.outer_window = 0
# config.left = 0
# config.right = 0
# config.page_method_name = :page
# config.param_name = :page
# config.max_pages = nil
# config.params_on_first_page = false
end
config変更した場合はサーバーを再起動してください。
２ 見た目のデザイン変更の為にSCSSを追加
Railsに限らず、デザイン装飾方法は色々あります。 自身でスタイリングしても良いですし、CSSフレームワークを利用するのも良いでしょう。
今回は、他のフロントでも利用するwebpackを使います。
2-1 SCSSの記載と変換
app/assets/stylesheets/application.css こちらにCSSを書けばスタイリングができますが、cssをそのまま使わず、SCSSで記載できるようにしましょう。
gemパッケージを追加
gem sass-rails
$ bundle install
app/assets/stylesheets/article.scss
例としてh1の色を変えたり・・・・
body {
h1 {
color: #fff000;
}
}
Railsによって、特にインポート統合などせずにSCSSファイルを追加した分、反映されます。
2-2 bootstrap を利用する。
スタイリングをさらに楽にする為にbootstrapを入れる事もできます。
gem 'bootstrap-sass'
gem "jquery-rails"
bundle installを忘れずに
bootstrapを利用できるようにimportしておきます。
app/assets/stylesheets/application.css ↓ファイル名をscssに変更 app/assets/stylesheets/application.scss
で、こちらを追加しましょう。
@import "bootstrap-sprockets";
@import "bootstrap";
また、この時点ではstylesheetsにあるscss,css系のファイルを全て読み込みますので @importスタイルで進めたい場合は app/assets/stylesheets/application.scssの中の一部を削除しましょう。 ↓これ
*= require_tree .
*= require_self
jqueryとsprocketsが必要ですので下記を追加しておきます。 app/javascript/application.js
//= require jquery
//= require bootstrap-sprockets
このGemでインストールされるbootstrapは2022年の時点では３．４のようです。 下記のドキュメントを参考にレイアウトを進めましょう。
これで、一通り、スタイリングできる環境が整いました。 次の３の部分はjsを利用できる環境の確認、構築になりますので、一旦飛ばしても問題ありません。
3 jsを利用する。
※スタイリングのみであれば、ここは一旦とばしても問題ありません。
3-1 stimulusを利用する。
初期の段階でstimulusが使えるようになっています。 stimulusはHtmlタグに data-**** などの要素を加えてjsからコントロールをするフレームワークになります。
初期の段階でHello world! を表示するjsが仕込んであるので app/javascript/controllers/index.js
テンプレートのどこかに
<div data-controller="hello"></div>
と設定してみましょう。 Hello・・・と表示されると思います。
VueやReactを利用しないのであれば、このままstimulusはコード記述量の意味でも そのまま利用しても良いかもしません。
3-2 別手段、webpackのインストールとjsパックの確認
Railsでもwebpackを便利に利用できます。
※nodeが入ってる前提。 yarnをインストール
$ brew install yarn
webpackerを追加し
gem 'webpacker'
インストール
$ bin/rails webpacker:install
適当なテストjsを作り app/javascript/packs/article.js
console.log("test");
テンプレートに追加、先程のファイル名がインポート指定する名前です。 app/views/layouts/application.html.erb
<%= javascript_pack_tag "article" %>
webpackサーバーを起動、(rails serverと別に起動します。)
$ bin/webpack-dev-server
これでjsがパックされます。
3-3 補足
reails-webpackに合わせて、その他、フロントフレームワークを利用する方法
補足
今回は取り扱いませんが、bootstrap5を使って開発を進める場合は下記をご確認ください。
- ※補足：bootstrap5対応のGemを使う