Railsにこれから初めて触れる方を対象にしたチュートリアルです
Comfortable Mexican SofaというCMSをRailsへ導入するチュートリアルです
まず、rails newを実行し、Railsアプリのひな型を作成します。
rails new cms
次に、作成したRailsアプリのディレクトリへと移動します。
cd cms
まず、Gemfileにgem "comfortable_mexican_sofa", "~> 2.0.0"を追加します
gem "comfortable_mexican_sofa", "~> 2.0.0"
その後、bundle installを実行します
bundle install
Comfortable Mexican Sofaをインストールします
rails generate comfy:cms
最後に、rails db:migrateを実行します
rails db:migrate
後は、rails sを実行してlocalhost:3000/adminにアクセスします
ユーザー名とパスワードを要求されるので以下のように入力します
ログインできればOKです！
これでComfortable Mexican Sofaの導入は完了です！
ログインするとサイトを作成する画面に切り替わります 以下の項目を入力して、「Create Site」をクリックします
クリック後、「新規レイアウト」作成画面に切り替わります 以下の項目を入力して、「レイアウトを作成」をクリックします
次に、画面左のメニュー内にある「ページ」を選択し、以下のように入力します
「ページを作成」をクリックしページを作成します
最後に、ページとレイアウトが作成できているか確認します
画面左側にある「サイト」をクリックし、localhost:3000/sampleにアクセスします
ブラウザに以下のように表示されていればページとレイアウトが作成されています
Hogehoge
Hello Comfortable Mexican Sofa!
このままではデザインなどが簡素すぎるのでBootstrapを使いたいと思います。
まず、Gemfileにgem 'bootstrap', '~> 4.2.1'とgem 'jquery-rails'を追加し、bundle installします。
gem 'bootstrap', '~> 4.2.1'
gem 'jquery-rails'
bundle install
もし、gemの依存関係でうまくいかない場合は、bundle updateを実行してからbundle installを実行してください
bundle update
bundle install
その後、app/assets/javascripts/application.jsとapp/assets/stylesheets/application.scssを下記のように変更します
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require rails-ujs
//= require activestorage
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
/*
* 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";
その後、config/boot.rbを以下のように修正します
ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../Gemfile', __dir__)
ENV['EXECJS_RUNTIME'] = 'Node'
require 'bundler/setup' # Set up gems listed in the Gemfile.
require 'bootsnap/setup' # Speed up boot time by caching expensive operations.
これでBootstrapが使用できるようになりました。
最後に、レイアウトからheaderレイアウトを下記のように編集します
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a href="/sample" class="navbar-brand">CMS</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a href="/sample" class="dropdown-item">Home</a>
</div>
</div>
</nav>
「レイアウトを更新」をクリックするとレイアウトが修正後の内容に更新されます
localhost:3000/sampleでナビゲーションバーが表示されていればOKです