ドットインストールで作るブログアプリその３（RubyonRails）

例のごとくドットインストールのRails5の動画を元に学んでいきます！
本日は10章からの部分です。

画面のカスタマイズ
詳細画面へのリンクの作成
showアクションの作成
showのビュー作成
画像にリンクを貼る

画面のカスタマイズ

アプリ全体のレイアウトの設定を行っているのが、下記ファイル
myblog/app/views/layouts/mailer.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Myblog</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <div class="container">
    <!-- ビューで記述したコードはこのyieldで読み込まれる -->
    <%= yield %>
    </div>
  </body>
</html>

今回は全体をcontainerクラスで囲って、中央揃えにしてみます。

次にcssに手を加えます。
下記ファイルにアプリケーション全体のスタイルシートが記述されています。
ここに追記していきます。
myblog/app/assets/stylesheets/application.css

.container {
  width: 400px;
  margin: 20px auto;
}

body {
  font-family: Verdana, sans-serif;
  font-size: 14px;
}

h2 {
  font-size: 16px;
  padding-bottom: 10px;
  margin-bottom: 15px;
  border-bottom: 1px solid #ddd;
}

ul > li {
  margin-bottom: 5px;
}

すると、見栄えが反映されたと思います。 f:id:taxa_program:20171125152200p:plain

詳細画面へのリンクの作成

ここでは記事タイトルをクリックしたときに、
記事詳細画面に遷移できるようにリンクの設定を行います。

改めてルーティングの確認をしてみると

   Prefix Verb   URI Pattern               Controller#Action
    posts GET    /posts(.:format)          posts#index
          POST   /posts(.:format)          posts#create
 new_post GET    /posts/new(.:format)      posts#new
edit_post GET    /posts/:id/edit(.:format) posts#edit
     post GET    /posts/:id(.:format)      posts#show
          PATCH  /posts/:id(.:format)      posts#update
          PUT    /posts/:id(.:format)      posts#update
          DELETE /posts/:id(.:format)      posts#destroy
     root GET    /                         posts#index

６行目のpostsにidを付けてGETでアクセスするURLがよく使用されるため、
今回はここに定義されているshowアクションを使用していきます。

まずはリンクの作成を行います。
myblog/app/views/posts/index.html.erb

<h2>My Posts</h2>
<ul>
<!-- rubyの命令を埋め込む場合は<% %>で括る -->
<!-- <%= %>は中に記入したrubyの式を評価して表示してくれる -->
<!-- Actionで指定したインスタンス変数を使用することができる -->
<% @posts.each do |post| %>
<li>
  <!-- リンクの作成
  link_to 'リンクの名前', 'リンクのURL' -->
  <%= link_to post.title, post_path(post) %>
  <!-- <%= post.title %> -->
</li>
<% end %>
</ul>

次にshowアクションを作成していきます。

showアクションの作成

下記コントローラファイルにアクションを追加します。

myblog/app/controllers/posts_controller.rb

def show
    #post変数に各Postの値を設定 :idを引数にすることにより、特定のデータが取得できる
    @post = Post.find(params[:id])
end

次はshowアクションに対応するビューを作成します。

showのビュー作成

下記ファイルを作成します。

myblog/app/views/posts/show.html.erb

<h2><%= @post.title %></h2>
<p><%= @post.body %></p>

ここでブラウザから再読み込みすると、各Postの詳細画面へ遷移できるようになっていると思います。

しかし、このままではTOP画面に戻るボタンがないため、画像にリンクを貼り、その画像をクリックすることによりTOP画面に戻れるような処理の実装を行いたいと思います。

画像にリンクを貼る

リンクを付けたい画像ファイルを用意し、下記フォルダに配置してください。
myblog/app/assets/images/logo.png

今回はアプリ全体に同じ画像を表示させつつリンクも設定するため、下記ファイルのコンテナクラス内に手を加えます。
myblog/app/views/layouts/application.html.erb

<!-- 画像にlogoクラスを設定し、cssでサイズ等を変更できるようにする -->
<h1><%= link_to image_tag('logo.png', class: 'logo'), root_path %></h1>

同じようにcssにもlogoクラスの属性を記述します。

.logo {
  width: 400px;
  height: 180px;
}

これでいい感じになりました。 f:id:taxa_program:20171125160523p:plain

次回は記事を追加できるようにしていきます。

ギークなエンジニアを目指す男

機械学習系の知識を蓄えようとするブログ