概要
これまでのトップページは、仮にユーザーの一覧を表示していた。新規投稿機能が実装されたので、投稿記事を表示するようトップページを変更する。
- 新しい記事から順に表示
- 投稿ユーザー名を表示
- メッセージと画像は存在する場合に表示
- プレースホルダーとして”like it”、”設定”、”記事削除”のアイコンメニューを記事ごとに表示
- 設定と削除については、他ユーザーの記事の場合はリンクが機能しないようにしてグレーアウト
pages#topアクション
topアクションにルーティングされると、すべての投稿記事をデータベースからインスタンス変数@postに読み込む(all)。読み込む順序は降順、すなわち新しい順(order("id desc"))。
app/controllers/pages.controller.rb
|
1 2 3 4 5 6 7 |
class PagesController < ApplicationController before_action :authorize def top @posts = Post.all.order("id desc") end end |
post_image_urlヘルパー
topビューで投稿画像を表示するのにpost_image_urlヘルパーを使っている。このヘルパーはPostに関して使うので、PostsHelperモジュールに書いている。
画像ファイルのパスについては画像ファイルの配置とパス指定を参照
app/helpers/posts_helper.rb
|
1 2 3 4 5 6 7 |
module PostsHelper # post_imageオブジェクトを与えてファイルのURLを返すヘルパー # ビューのimage_tag用 def post_image_url(post_image) "/post_images/#{post_image.file_name}" end end |
ヘルパー関数を含むモジュールをApplicationControllerでインクルードする。
app/controllers/application_controller.rb
|
1 2 3 4 5 6 7 8 9 10 |
class ApplicationController < ActionController::Base protect_from_forgery with: :exception # 共通で使われるヘルパー include ApplicationHelper # ユーザーセッションの管理やプロフィール画像のURL取得 include UsersHelper # 投稿画像のURL取得 include PostsHelper end |
topビュー
メニューアイコンにはCDNのFont Awesomeを利用している。サインイン中のユーザーが操作可能なメニュー以外を抑止するため、link_toに動的にクラスを設定している。
app/views/pages/top.html.erb
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<div class="top_page"> <h2>登録記事一覧</h2> <!-- 投稿記事が存在する場合 --> <% if @posts.any? %> <div class="posts"> <!-- @postsにセットされた記事全てを表示 --> <% @posts.each do |post| %> <!-- 記事投稿ユーザーのみ操作可能なメニューのクラス設定用 --> <% menu_availability = (post.user_id == user_in_session.id ? "enabled" : "disabled") %> <!-- 記事の投稿ユーザー名 --> <p class="user_name"> <%= User.find(post.user_id).name %>さんの投稿 </p> <!-- 記事に対するlike it、編集、削除メニュー --> <ul class="post_menu"> <li> <%= link_to("#") do %> <i class="fas fa-thumbs-up", title="「いいね」ダミー"></i> <% end %> </li> <li> <%= link_to("#", class: "#{menu_availability}") do %> <i class="fas fa-cog", title="「記事編集」ダミー"></i> <% end %> </li> <li> <%= link_to("#", class: "#{menu_availability}") do %> <i class="fas fa-trash-alt", title="記事削除"></i> <% end %> </li> </ul> <!-- 記事メッセージ --> <p class="message"> <%= post.message %> </p> <!-- 画像 --> <% if post.post_images.any? %> <div class="image_frame"> <%= image_tag post_image_url(post.post_images[0]) %> </div> <% end %> <% end %> </div> <!-- 記事が投稿されていない場合 --> <% else %> <p class="no_posts">投稿記事がありません</p> <% end %> </main> |
スタイル
リストの横並び、画像のフィッティング・センタリング、link_toの動的なスタイル設定などを参照。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
.top_page { --text-color: #666; width: 75%; height: auto; margin: auto; background-color: #f8f8ff; h2 { padding: 20px 0; font-size: 24px; color: var(--text-color); text-align: center; } // 投稿記事がある場合 .posts { padding-bottom: 15px; .user_name { padding-top: 20px; border-top: 1px solid #ccc; text-align: center; } .post_menu { margin: 0 0 0 auto; padding: 5px; width: 80px; display: flex; justify-content: space-between; list-style-type: none; li { font-size: 20px; a { color: #0085f2; &.enabled { color: #0085f2; } &.disabled { color: #ccc; pointer-events: none; } } } } .message { margin: 0 auto 10px auto; width: 400px; } .image_frame { margin: 0 auto 20px auto; display: flex; justify-content: center; align-items: center; width: 400px; height: auto; img { width: auto; height: auto; max-width: 100%; max-height: 100%; } } } // 投稿記事がない場合 .no_posts { margin-top: 20px; text-align: center; } } |