Help us understand the problem. What is going on with this article?

Dockerを使用したRails開発⑥(ビュー)

More than 1 year has passed since last update.

やること

・CSSフレームワークの設定
・作成する画面ラインナップ整理

CSSフレームワークの設定

今回は、bootstrapを使用してみようと思います。

Gemfileに以下を追記後、docker-compose buildを実行

Gemfile
gem 'bootstrap'
gem 'jquery-rails'

あとは、application.scssとapplication.jsを修正します。

app/assets/stylesheets/application.cssの拡張子をscssに変更し、以下のように修正

application.scss
*= require_tree .  これは削除
*= require_self  これは削除
@import "bootstrap";

app/assets/javascripts/application.jsに以下を追記

application.js
//= require jquery3
//= require popper
//= require bootstrap-sprockets

これで設定完了!・・・と思いきや

Autoprefixer doesn’t support Node v4.8.2. Update it.
(=Autoprefixerはノードv4.8.2をサポートしていません。それを更新してください。)というエラーが出て画面が立ち上がりませんでした。

調べたらGemfileに以下を追記することで解決。
正直なんで解決したのか不明。。。

Gemfile
gem 'mini_racer'

作成する画面ラインナップ整理

今更ですが、ツーリング仲間募集サイト(よくある掲示板サイトを多少アレンジしたもの)をテーマに勉強しています。
なので、作る画面は以下の通りです。

  • 一覧画面(index.html.erb):新規作成・編集・詳細・削除ボタンを配置したよくある掲示板の投稿一覧画面。

  • 新規画面(new.html.erb):投稿を新規作成する画面。

  • 詳細画面(show.html.erb):投稿内容の詳細を表示する画面。コメント機能もここに実装。

  • 編集画面(edit.html.erb):投稿を編集する画面。

  • フォームパーシャル(_form.html.erb):新規画面と編集画面はレイアウトがほとんどが同じであるため、2つの画面に埋め込むための共通画面。

これらの画面は全て前回の記事で実行したpost用のジェネレーターコマンドで作成されます。

最終的にMap埋め込んでツーリングのルート表示させたり、投稿者が写真や動画を投稿できる機能も実装していきたいと思います。

最後に

これから画面ゴリゴリ作ったり、実務で使いそうなdockerとkubernetes勉強したりするのでこの記事は①〜⑥までで一旦終わり。
自分の理解用にまとめただけなので、大した内容ではありませんでしたが、読んだり編集リクエストくれた方ありがとうございました。
これからは小ネタを中心に役に立ちそうなこと頑張ってまとめていこうと思います!

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away