[35]ページネーション << [ホームに戻る] >> [37]ステータスの表示
ホームページを作成していきます。
- 「app\assets\images」フォルダに「home」フォルダを新規作成して下さい。
- 作成した「home」フォルダに「background01.jpg」「category_1.jpg」「category_2.jpg」「category_3.jpg」「category_4.jpg」「category_5.jpg」「category_6.jpg」「category_7.jpg」ファイルを入れて下さい。何でも良いです。
「app\views\pages\home.html.erb」ファイルを以下のように編集します。
記述編集 app\views\pages\home.html.erb
<% content_for :head do %> <meta name="turbolinks-cache-control" content="no-cache"> <% end %> <section class="hero is-medium has-bg-img"> <div class="hero-body"> <div class="container"> <h1 class="title has-text-white"> あなたのために<br> フリーランスのお仕事探し </h1> <%= form_tag search_path, method: :get, class: "field has-addons" do %> <div class="control has-icons-left"> <span class="icon is-small is-left"> <i class="fa fa-search"></i> </span> <%= text_field_tag 'q', '', class: "input", placeholder: "どんなお仕事をお探し?" %> </div> <div class="control"> <button class="button is-success" type="submit">検索する</button> </div> <% end %> </div> </div> </section> <section class="m-t-100"> <div class="container"> <h1 class="title is-4 p-l-10">人気のカテゴリー</h1> <div id="carousel-category" class="hero-carousel"> <div class="carousel-item"> <div class="p-10"> <%= link_to search_path(category: 1) do %> <div class="card-image"> <%= image_tag "home/category_1.jpg", class: "is-background", width: "100%", height: "100%" %> <div class="card-content is-overlay is-clipped"> <span class="subtitle f-15 has-text-white">カテゴリー１</span><br> <span class="title is-4 has-text-white">テスト１</span> </div> </div> <% end %> </div> </div> <div class="carousel-item"> <div class="p-10"> <%= link_to search_path(category: 2) do %> <div class="card-image"> <%= image_tag "home/category_2.jpg", class: "is-background", width: "100%", height: "100%" %> <div class="card-content is-overlay is-clipped"> <span class="subtitle f-15 has-text-white">カテゴリー２</span><br> <span class="title is-4 has-text-white">テスト２</span> </div> </div> <% end %> </div> </div> <div class="carousel-item"> <div class="p-10"> <%= link_to search_path(category: 3) do %> <div class="card-image"> <%= image_tag "home/category_3.jpg", class: "is-background", width: "100%", height: "100%" %> <div class="card-content is-overlay is-clipped"> <span class="subtitle f-15 has-text-white">カテゴリー３</span><br> <span class="title is-4 has-text-white">テスト３</span> </div> </div> <% end %> </div> </div> <div class="carousel-item"> <div class="p-10"> <%= link_to search_path(category: 4) do %> <div class="card-image"> <%= image_tag "home/category_4.jpg", class: "is-background", width: "100%", height: "100%" %> <div class="card-content is-overlay is-clipped"> <span class="subtitle f-15 has-text-white">カテゴリー４</span><br> <span class="title is-4 has-text-white">テスト４</span> </div> </div> <% end %> </div> </div> <div class="carousel-item"> <div class="p-10"> <%= link_to search_path(category: 5) do %> <div class="card-image"> <%= image_tag "home/category_5.jpg", class: "is-background", width: "100%", height: "100%" %> <div class="card-content is-overlay is-clipped"> <span class="subtitle f-15 has-text-white">カテゴリー５</span><br> <span class="title is-4 has-text-white">テスト５</span> </div> </div> <% end %> </div> </div> <div class="carousel-item"> <div class="p-10"> <%= link_to search_path(category: 6) do %> <div class="card-image"> <%= image_tag "home/category_6.jpg", class: "is-background", width: "100%", height: "100%" %> <div class="card-content is-overlay is-clipped"> <span class="subtitle f-15 has-text-white">カテゴリー６</span><br> <span class="title is-4 has-text-white">テスト６</span> </div> </div> <% end %> </div> </div> <div class="carousel-item"> <div class="p-10"> <%= link_to search_path(category: 7) do %> <div class="card-image"> <%= image_tag "home/category_7.jpg", class: "is-background", width: "100%", height: "100%" %> <div class="card-content is-overlay is-clipped"> <span class="subtitle f-15 has-text-white">カテゴリー７</span><br> <span class="title is-4 has-text-white">テスト７</span> </div> </div> <% end %> </div> </div> </div> </div> </section> <script> BulmaCarousel.attach('#carousel-category', { slidesToScroll: 1, slidesToShow: 4, infinite: true, pagination: false }); </script>
「app\views\layouts\application.html.erb」ファイルに以下の記述を追加します。
記述追加 app\views\layouts\application.html.erb(15行目)
<% if content_for?(:head) %> <%= yield(:head) %> <% end %>
app\views\layouts\application.html.erb
<!DOCTYPE html> <html> <head> <title>Oshigoto</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> <!-- Googleフォント --> <link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet"> <!-- アイコン Font Awesome --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"> <% if content_for?(:head) %> <%= yield(:head) %> <% end %> </head> <body> <!-- ナビゲーションバー --> <%= render "shared/navbar" %> <!-- noty --> <%= render 'shared/notification' %> <%= yield %> </body> </html>
「app\views\gigs\show.html.erb」ファイルに以下の記述を追加します。
記述追加 app\views\gigs\show.html.erb(1行目)
<% content_for :head do %> <meta name="turbolinks-cache-control" content="no-cache"> <% end %>
app\views\gigs\show.html.erb
<% content_for :head do %> <meta name="turbolinks-cache-control" content="no-cache"> <% end %> <%= render 'shared/categories' %> <section class="section"> <div class="container"> <div class="columns"> <!-- 左側 --> <div class="column is-two-thirds"> <div class="columns is-multiline"> <!-- 画像カルーセル表示 --> <div class="column is-full"> <div class="card"> <div class="card-content"> <div class="content"> <p class="title is-4"><%= @gig.title %></p> </div> <hr> <div class="hero-carousel" id="carousel-photo"> <% @gig.photos.each do |photo| %> <div class="carousel-item has-background image is-16by9"> <%= image_tag url_for(photo), class: "is-background", width: "100%" %> </div> <% end %> <% if @gig.video.present? %> <div class="video-container"> <iframe src="https://www.youtube.com/embed/<%= @gig.video %>" allowfullscreen></iframe> </div> <% end %> </div> </div> </div> </div> <!-- お仕事の内容 --> <div class="column"> <div class="card"> <div class="card-content"> <article class="media"> <div class="media-content"> <p><strong>このお仕事について</strong></p> <hr> <%= @gig.description %> </div> </article> </div> </div> </div> </div> </div> <!-- 右側 --> <div class="column"> <div class="columns is-multiline"> <!-- 価格プラン --> <div class="column is-full"> <div class="tabs is-fullwidth" id="tabs"> <ul> <% Pricing.pricing_types.each do |key, value| %> <li class="tab <%= 'is-active' if value == 0 %> " data-tab="<%= key %>" style="<%= 'display: none' if @gig.has_single_pricing && value != 0 %>"> <a> <% if value == 0 %> ベーシック <% elsif value == 1 %> スタンダード <% else %> プレミアム <% end %> </a> </li> <% end %> </ul> </div> <div class="tabs-content"> <% @gig.pricings.each do |p| %> <div class="tab-content" id="tab-<%= p.pricing_type %>" style="<%= 'display: none' if !p.basic? %>"> <div class="card"> <div class="card-content"> <div class="media"> <div class="media-content"> <strong><%= p.title %></strong> </div> <div class="media-right"> <p class="title is-4"><%= number_to_currency(p.price) %></p> </div> </div> <div class="content f-15"> <p class="m-t-30"><%= p.description %></p> <p class="m-t-30"> <strong><i class="far fa-clock"></i> 期日： <%= p.delivery_time %>日</strong> </p> </div> <% if (!user_signed_in? && @gig.active) || (user_signed_in? && @gig.active && @gig.user_id != current_user.id) %> <%= form_for([@gig, @gig.orders.new]) do |f| %> <%= hidden_field_tag 'pricing_type', p.pricing_type %> <%= f.submit "購入する (#{number_to_currency(p.price)})", class: "button is-fullwidth is-danger", data: {confirm: "本当によろしいですか?"} %> <% end %> <% else %> <button class="button is-fullwidth is-danger" disabled>ご利用できません</button> <% end %> </div> </div> </div> <% end %> </div> </div> <!-- プロフィール --> <div class="column"> <div class="card"> <div class="card-content is-horizontal-center is-flex"> <figure class="image is-256x256"> <%= image_tag avatar_url(@gig.user), class: "is-rounded" %> </figure> </div> <div class="card-content f-15"> <div class="content has-text-centered"> <p class="title is-5"><%= @gig.user.full_name %></p> <button class="button is-black is-outlined is-fullwidth">メッセージを送る</button> </div> <article class="media"> <div class="media-content"> <i class="fas fa-user m-r-5"></i> アカウント登録日 </div> <div class="media-right"> <%= I18n.l(@gig.user.created_at, format: :full_date) %> </div> </article> <article class="media"> <div class="media-content"> <i class="fas fa-map-marker-alt m-r-5"></i> 出身地 </div> <div class="media-right"> <%= @gig.user.from %> </div> </article> <article class="media"> <div class="media-content"> <%= @gig.user.about %> </div> </article> </div> </div> </div> </div> </div> </div> </div> </section> <script> BulmaCarousel.attach('#carousel-photo', { slidesToScroll: 1, slidesToShow: 1 }); $(document).ready(function() { $('#tabs li').on('click', function() { var type = $(this).data('tab'); $('#tabs li').removeClass('is-active'); $(this).addClass('is-active'); $('.tab-content').hide(); $('#tab-' + type).show(); }) }) </script>
ナビゲーションバーを更新します。
記述追加 app\views\shared\_navbar.html.erb(18行目)
<%= form_tag search_path, method: :get do %> <div class="field has-addons <%= 'is-hidden' if current_page?(root_path) %>"> <div class="control has-icons-left"> <span class="icon is-small is-left"> <i class="fa fa-search"></i> </span> <%= text_field_tag 'q', '', class: "input", placeholder: "どんなお仕事を?" %> </div> <div class="control"> <button class="button is-success" type="submit">検索</button> </div> </div> <% end %>
app\views\shared\_navbar.html.erb
コードをコピーしてファイルの内容を置き換えて下さい。
<nav class="navbar is-danger" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> <a class="navbar-item" href="/"> <h1>テストサイトOshigoto</h1> </a> <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </a> </div> <div id="navbarBasicExample" class="navbar-menu"> <div class="navbar-start"> <div class="navbar-item"> <%= form_tag search_path, method: :get do %> <div class="field has-addons <%= 'is-hidden' if current_page?(root_path) %>"> <div class="control has-icons-left"> <span class="icon is-small is-left"> <i class="fa fa-search"></i> </span> <%= text_field_tag 'q', '', class: "input", placeholder: "どんなお仕事を?" %> </div> <div class="control"> <button class="button is-success" type="submit">検索</button> </div> </div> <% end %> </div> </div> <div class="navbar-end"> <a class="navbar-item"></a> <a class="navbar-item"></a> <!-- もしログインしていなかったら--> <% if (!user_signed_in?) %> <div class="navbar-item"> <div class="buttons"> <%= link_to "新規ユーザ登録", new_user_registration_path, class: "button is-primary" %> <%= link_to "ログイン", new_user_session_path, class: "button is-light" %> </div> </div> <!-- ログインしていたら --> <% else %> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link"> <figure class="image is-48x48 m-r-5"> <div style="margin-top: 0.6rem;"> <%= image_tag avatar_url(current_user), class: "is-rounded" %> </div> </figure> <%= current_user.full_name %> </a> <div class="navbar-dropdown"> <%= link_to 'ダッシュボード', dashboard_path, class: "navbar-item" %> <%= link_to "ユーザ登録情報編集", edit_user_registration_path, class: "navbar-item" %> <hr class="navbar-divider"> <%= link_to "ログアウト", destroy_user_session_path, method: :delete, class: "navbar-item" %> </div> </div> <% end %> </div> </div> </nav> <% if (user_signed_in?) && !current_page?(root_path) && !current_page?(search_path) && !current_page?("/gigs/#{params[:id]}") && !current_page?("/users/#{params[:id]}") %> <nav class="navbar has-shadow" style="z-index: 5;"> <div class="container"> <div class="navbar"> <%= link_to 'ダッシュボード', dashboard_path, class: "navbar-item" %> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link">お仕事を売る人</a> <div class="navbar-dropdown"> <%= link_to 'お仕事を登録する', new_gig_path, class: "navbar-item" %> <%= link_to '売れた注文の確認', selling_orders_path, class: "navbar-item" %> <%= link_to 'リクエストを見る', all_requests_path, class: "navbar-item" %> <%= link_to '申込みの確認', my_offers_path, class: "navbar-item" %> </div> </div> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link">お仕事を買う人</a> <div class="navbar-dropdown"> <%= link_to '買った注文の確認', buying_orders_path, class: "navbar-item" %> <%= link_to 'お仕事をリクエストする', new_request_path, class: "navbar-item" %> <%= link_to 'リクエストの確認', requests_path, class: "navbar-item" %> </div> </div> </div> </div> </nav> <% end %> <script> $(document).ready(function() { // navbar burgerアイコンでクリックイベントを確認する $(".navbar-burger").click(function() { // 「navbar-burger」と「navbar-menu」の両方で「is-active」クラスを切り替える $(".navbar-burger").toggleClass("is-active"); $(".navbar-menu").toggleClass("is-active"); }); }); </script>
「config\routes.rb」ファイルに記述追加します。
記述追加 config\routes.rb
13行目に「, as: 'users'」の記述を追加しています。
Rails.application.routes.draw do # ルートを app\views\pages\home.html.erb に設定 root 'pages#home' devise_for :users, path: '', path_names: {sign_up: 'register', sign_in: 'login', edit: 'profile', sign_out: 'logout'}, controllers: {omniauth_callbacks: 'omniauth_callbacks', registrations: 'registrations'} get 'pages/home' get '/dashboard', to: 'users#dashboard' get '/users/:id', to: 'users#show', as: 'users' get '/selling_orders', to: 'orders#selling_orders' get '/buying_orders', to: 'orders#buying_orders' get '/all_requests', to: 'requests#list' get '/request_offers/:id', to: 'requests#offers', as: 'request_offers' get '/my_offers', to: 'requests#my_offers' get '/search', to: 'pages#search' post '/users/edit', to: 'users#update' post '/offers', to: 'offers#create' post '/reviews', to: 'reviews#create' put '/orders/:id/complete', to: 'orders#complete', as: 'complete_order' put '/offers/:id/accept', to: 'offers#accept', as: 'accept_offer' put '/offers/:id/reject', to: 'offers#reject', as: 'reject_offer' resources :gigs do member do delete :delete_photo post :upload_photo end resources :orders, only: [:create] end resources :requests # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html end
ブラウザ確認
http://localhost:3000/
ホームページが更新されました。
↓↓クリックして頂けると励みになります。
[35]ページネーション << [ホームに戻る] >> [37]ステータスの表示
