Railsで簡単にブログを作る2(初心者向け)

今回は見た目の部分を作っていきます

途中の方はこちらから進めてください
Railsで簡単にブログを作る(初心者向け)

1.管理画面を作る
2.post model　と　post_image model　を作る
3.管理画面で作業できるようにする
4.viewについては別の記事でまとめていきます

Bootstrapの導入

それでは初めていきます
まずはルートに root ‘posts#index’を追加します

Rails.application.routes.draw do
  root 'posts#index'
  resources :posts
  devise_for :admin_users, ActiveAdmin::Devise.config
  ActiveAdmin.routes(self)
end

localhost:4000 にアクセスすると以下の画像のような画面になると思います

このままだと見た目があんまり良くないので、bootstrapを導入して見ましょう

gem 'bootstrap-sass'

次はbundle installします

$ bundle install

次は assets/stylesheets/application.css を application.css.scss に名前を変更して、中身を少し修正します

@import "bootstrap-sprockets";
@import "bootstrap";

/*
 * 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, vendor/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 styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_tree .
 *= require_self
 */

assets/javascripts/application.jsも編集します

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require jquery
//= require bootstrap-sprockets

これでbootstrapが使えるようになりました！
サーバーを再起動して確認してみます

無事に導入できていたらこんな画面になっていると思います

メニューバーの作成

次はメニューバーに以下の項目を加えていきます

• プロフィール
• ブログ
• お問い合わせ

まずはメニューバーを作ります

<!--ここから-->
<nav class="navbar navbar-default">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#gnavi">
      <span class="sr-only">メニュー</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>

  <div id="gnavi" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li><a href="">Link1</a></li>
      <li><a href="">Link2</a></li>
      <li><a href="">Link3</a></li>
    </ul>
  </div>
</nav>
<!--ここまでが追加分です！-->

    <p id="notice"><%= notice %></p>

    <h1>Listing Posts</h1>
    <table>
      <thead>
      <tr>
        <th>Title</th>
        <th>Brief</th>
        <th>Body</th>
        <th colspan="3"></th>
      </tr>
      </thead>
      <tbody>
      <% @posts.each do |post| %>
          <tr>
            <td><%= post.title %></td>
            <td><%= post.brief %></td>
            <td><%= post.body %></td>
            <td><%= link_to 'Show', post %></td>
            <td><%= link_to 'Edit', edit_post_path(post) %></td>
            <td><%= link_to 'Destroy', post, method: :delete, data: {confirm: 'Are you sure?'} %></td>
          </tr>
      <% end %>
      </tbody>
    </table>
    <br>
    <%= link_to 'New Post', new_post_path %>

localhost:3000で確認するとこんな画面になっています

画面を狭くしてみてください
bootstrapを使えばスマホ対応も簡単です

日本語だとちょっとかっこ悪いので、英語でメニューバーを書きましょう

<!--ここから-->
<nav class="navbar navbar-default">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#gnavi">
      <span class="sr-only">メニュー</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>

  <div id="gnavi" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li><a href="">Profile</a></li>
      <li><a href="">Blog</a></li>
      <li><a href="">Contacts</a></li>
    </ul>
  </div>
</nav>
<!--ここまでが追加分です！-->

次はブログの一覧を出力できるようにしていきます

<!--ここから-->
<nav class="navbar navbar-default">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#gnavi">
      <span class="sr-only">メニュー</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>

  <div id="gnavi" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li><a href="">Profile</a></li>
      <li><a href="">Blog</a></li>
      <li><a href="">Contacts</a></li>
    </ul>
  </div>
</nav>
<!--ここまでが追加分です！-->

<!-- コンテンツの内容 -->
<div class="container-fluid">
  <div class="container">
    <h1>Blog</h1>
    <div class="row">
      <% @posts.each do |post| %>
          <div class="col-md-4">
            <%= image_tag(post.post_images[0].image.thumb, {:style => 'width:100%; height:45;'}) %>
            <h2><%= post.title %></h2>
            <p><%= post.brief %></p>
            <p><%= link_to 'Show', post %></p>

          </div>
      <% end %>
    </div>
  </div>
</div>
<!--ここまで-->

htmlページの編集

Post modelの body ですが、こちらは show ページで出力するようにします

こちらがshowページのコードです

<div class="container-fluid">
  <div class="container">
    <%= image_tag(@post.post_images[0].image) %>
    <h2><%= @post.title %></h2>
    <h3><%= @post.brief %></h3>
    <p><%= @post.body.html_safe %></p>
    <%= link_to 'Back', posts_path %>
  </div>
</div>

記事を書く際にWordpressみたいなマークダウンを入れてもいいのですが、ちょっとめんどくさいので、
body には html で書いていってください
ちなみに、 @post.body の後に html_safe メソッドなしだとうまく表示されないので、気をつけてください

とりあえず、適当に投稿してみます

showページで確認してみると

こんな感じで、タグが効いてます

ひとまずはこれで完成です！

cssに関してはほとんど触れていないので、見た目はアレですが、機能面に関しては十分だと思います
次回はプロフィール画面の作り方かコンタクトフォームあたりをやろうかと思います