【Ruby on Rails】簡単なメモアプリの作成｜シンプルなデザインに画像を表示したトップページを作成
開発環境
- Ruby:version 3.1.2
- Ruby on Rails:version 7.0.4
- Visual Studio Code:version 1.73.0
- OS:Windows10
Ruby on Railsでトップページの作成手順
Ruby on RailsでWebアプリケーションを作成するうえで欠かせないのが、ユーザーが一番最初にみるトップページです。 今回はメモアプリの作成で使用した「トップページの作成」のコードを用いて解説していきます。
トップページのコントローラーの作成
まずはトップページのコントローラーを作成していきます。
1rails g controller homes
Ruby on Railsでトップページのコントローラ名は「homes」とされることが多いため、今回の実装でもコントローラー名は「homes」としています。
1# memo_app\app\controllers\homes_controller.rb 2class HomesController < ApplicationController 3 before_action :logged_in?, only: [:top] 4 5 def top 6 end 7 8end
トップページ用のtopアクションを追加しておき、before_actionでログインしている状態かを確認するメソッドが実行されるように記述しておきます。 このあたりの仕様はWebアプリケーションによって調整しましょう。
トップページのルーティングの作成
次にトップページのルーティングを作成していきます。
1# memo_app\config\routes.rb 2Rails.application.routes.draw do 3+ root :to => 'homes#top' 4 resource :users, only: [:new, :show, :edit, :create, :update]
前回までは「root :to => 'memos#index'」としていましたが、今回はトップページを作成したので「root :to => 'homes#top'」へ変更しています。 トップページを変更したい場合は、ルーティングの「root :to => 'コントローラー名#アクション名'」を変更しましょう。
トップページの画像を準備する
次にトップページの画像を準備します。 今回は「memo_app\app\assets\images」フォルダ内に「mv.jpg」というファイル名でファイルを追加しています。 画像保存場所については、ユーザーがファイルを投稿して表示するような場合は「memo_app\public」に保存されるような処理が推奨されています。 今回はアプリケーション側で事前に準備している画像なので「memo_app\app\assets\images」フォルダ内に保存しています。
トップページのビューとレイアウトの作成
次にトップページのビューとレイアウトを作成します。
1# memo_app\app\views\homes\top.html.erb 2<div class="wrapper"> 3 <div class="container mv-image"> 4 <div class="mv-imag-transparent"> 5 <div class="top-container"> 6 <div class="col-box-1"> 7 <h2>ようこそMemoAppへ!</h2> 8 </div> 9 <div class="col-box-1"> 10 <p>MemoAppは、無料で利用できるメモアプリです。</p> 11 <br> 12 <p>いつでも、どこでも、思いついたらすぐに記録することができるシンプルな機能を提供しています。</p> 13 <br> 14 <p>ぜひ、ご活用ください。</p> 15 </div> 16 <div class="col-box-1"> 17 <%= link_to "新規登録", new_users_path, method: :get, class: "btn-100 green-color" %> 18 <%= link_to "ログイン", new_sessions_path, method: :get, class: "btn-100 blue-color" %> 19 </div> 20 </div> 21 </div> 22 </div> 23</div>
CSSのclassについては事項でご紹介します。 ポイントとしてはメインビジュアルに背景画像を使用するため、containerの中に背景画像を指定している形です。 その後のレイアウトとしては背景画像を透過するためのレイアウト「mv-imag-transparent」、その中にテキストを表示するためのレイアウト「top-container」という構成にしているところです。
1# memo_app\app\views\layouts\application.html.erb 2 3 <body> 4 <div class="wrapper header-color"> 5 <div class="container flex-between"> 6 <div class="header-left"> 7+ <h1><%= link_to "MemoApp", root_path, method: :get %></h1> 8 </div> 9 10 <div class="header-right"> 11 <% if @current_user.nil? %> 12 <%= link_to "新規登録", new_users_path, method: :get %> 13 <%= link_to "ログイン", new_sessions_path, method: :get %> 14 <% else %> 15 ログインユーザー：<%= @current_user.name %>さん 16 <%= link_to "登録情報", users_path, method: :get %> 17 <%= link_to "ログアウト", destroy_sessions_path, method: :delete %> 18 <% end %> 19 </div> 20 </div> 21 </div>
また、ヘッダーのロゴにあたる部分もリンクになるように調整しておきましょう。
トップページのデザインの調整
次にトップページのデザインの調整をしていきます。
1# memo_app\app\assets\stylesheets\application.css 2 3 * { 4 padding: 0; 5 margin: 0; 6 box-sizing: border-box; 7 color: #696969; 8 font-size: 16px; 9 font-family: sans-serif; 10 list-style-position: inside; 11} 12 13+ /* トップページ用のCSS */ 14+ 15+ .mv-image { 16+ background-image: url("mv.jpg"); 17+ background-position: center; 18+ background-size: cover; 19+ height: 600px; 20+ } 21+ 22+ .mv-imag-transparent{ 23+ background-color: rgba(255, 255, 255, 0.4); 24+ width: 100%; 25+ height: 100%; 26+ } 27+ 28+ .top-container { 29+ margin: 0 auto; 30+ width: 100%; 31+ max-width: 760px; 32+ } 33+ 34+ 35/* ヘッダー用のCSS */ 36.header-color { 37 background-color: #4169e1; 38} 39 40.header-left { 41 color: #ffffff; 42 display: inline-block; 43 line-height: 60px; 44} 45.header-left a{ 46 text-decoration: none; 47 color: inherit; 48 font-size: 36px; 49} 50 51.header-right { 52 color: #ffffff; 53 display: inline-block; 54 line-height: 60px; 55} 56.header-right a{ 57 text-decoration: none; 58 color: inherit; 59} 60 61 62.green-color{ 63 background-color: green; 64} 65 66+ .blue-color{ 67+ background-color: blue; 68+ } 69 70.red-color{ 71 background-color: red; 72} 73 74.notice-text { 75 color: #ffffff; 76 font-weight: bold; 77 text-align: center; 78 padding: 10px 0; 79} 80 81h1 { 82 font-size: 36px; 83 color: #ffffff; 84} 85 86h2 { 87 font-size: 24px; 88} 89 90h3 { 91 font-size: 24px; 92} 93 94.wrapper { 95 width: 100%; 96} 97 98.container { 99 margin: 0 auto; 100 width: 100%; 101 max-width: 1170px; 102} 103 104.col-box-1{ 105 width: 100%; 106 padding: 6px; 107} 108 109.col-box-2{ 110 width: 50%; 111 padding: 6px; 112} 113 114.col-box-3{ 115 width: 33.3%; 116 padding: 6px; 117} 118 119.col-box-4{ 120 width: 25%; 121 padding: 6px; 122} 123 124.flex-start { 125 display: flex; 126 flex-wrap: wrap; 127 justify-content: start; 128} 129 130.flex-between { 131 display: flex; 132 flex-wrap: wrap; 133 justify-content: space-between; 134} 135 136 137.memo-header { 138 width: 100%; 139 padding: 6px; 140 min-height: 40px; 141 background-color: #ffd700; 142 border-radius: 6px 6px 0 0; 143} 144 145.memo-center { 146 width: 100%; 147 padding: 6px; 148 min-height: 100px; 149 background-color: #fffacd; 150} 151 152.memo-footer { 153 width: 100%; 154 padding: 6px; 155 background-color: #ffd700; 156 border-radius: 0 0 6px 6px; 157 text-align: center; 158} 159 160.memo-other { 161 width: 100%; 162 padding: 6px; 163 text-align: right; 164} 165 166.form-box { 167 background-color: transparent; 168 border: 1px solid #d3d3d3; 169 border-radius: 6px; 170 padding: 6px; 171 width: 100%; 172} 173 174.search-box { 175 background-color: transparent; 176 border: 1px solid #d3d3d3; 177 border-radius: 6px; 178 padding: 6px; 179 width: 30%; 180} 181 182textarea { 183 min-height: 80px; 184} 185 186.btn { 187 border: 1px solid #d3d3d3; 188 border-radius: 6px; 189 padding: 3px 12px; 190} 191 192+ .btn-100 { 193+ color: #ffffff; 194+ border-radius: 6px; 195+ padding: 12px 12px; 196+ display: inline-block; 197+ width: 100%; 198+ font-size: 1.2em; 199+ text-align: center; 200+ text-decoration: none; 201+ margin: 10px 0; 202+ } 203 204 205.field_with_errors { 206 display: contents; 207}
今回は「memo_app\app\assets\images」フォルダ内に画像をファイルを保存しているため、「background-image: url("mv.jpg");」で画像のURLを指定しています。 画像を保存する場所によって画像ファイルのURLは異なるため、画像の保存場所によって適切なURLを読むこむようにしておかないと画像が表示されないということになる点は注意が必要です。
メモコントローラーのリダイレクト先を修正
最後にメモコントローラーのリダイレクト先を修正しておきます。
1# memo_app\app\controllers\memos_controller.rb 2 3 def create 4 @memo_new = Memo.new(memos_params) 5 @memos = Memo.all 6 if @memo_new.save 7+ redirect_to memos_path 8 else 9 render action: "index" 10 end 11 end 12 13 def update 14 @memo = Memo.find(params[:id]) 15 @memo.update(memos_params) 16+ redirect_to memos_path 17 end 18 19 def destroy 20 @memo = Memo.find(params[:id]) 21 @memo.destroy 22+ redirect_to memos_path 23 end
今回、トップページを作成したので、メモの作成、メモの更新、メモの削除で指定していたリダイレクト先も整えておきます。
おわりに
Ruby on Railsでトップページの作成について解説してきましたが、いかがだったでしょうか。 ユーザーがどのようなWebサービスなのかを理解しやすくするためにも、Webアプリケーションだけに限らずトップページの作成は重要なページとなります。 是非、トップページだけに限らずユーザーにとって有益な情報となるページの作成に挑戦してみてください。