戻る

Rails6.0


お仕事売買サイトの構築 Rails6.0

  (0)
3,000円

タスク3-1   画像アップロード(ActiveStorage)

このタスクについて


タスクの内容を一部抜粋します。
プロジェクトを購入していただくとこのタスクの内容の全てを読みやすい表示で見ることができます。
プログラムコードが色分けされて見やすくなります。
プログラムコードに行番号が付きます。
本文が色分けされて見やすくなります。
そしてこのアプリケーションのフルコードをダウンロードすることが可能になります。




アバター画像をアップロードできるようにします。


コマンド
rails active_storage:install


コマンド マイグレーションの適用
rails db:migrate


「app\models\user.rb」ファイルに記述を追加します。


記述追加 app\models\user.rb
3行目に「has_one_attached :avatar」の記述を追加しています。
 
class User < ApplicationRecord 

  has_one_attached :avatar 

  # Include default devise modules. Others available are: 
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable 
  devise :database_authenticatable, :registerable, 
         :recoverable, :rememberable, :validatable, 
         :omniauthable, :confirmable 

  validates :full_name, presence: true, length: {maximum: 50}      

  def self.from_omniauth(auth) 
    user = User.where(email: auth.info.email).first 
    if user 
      return user 
    else 
      where(provider: auth.provider, uid: auth.uid).first_or_create do |user| 
        user.email = auth.info.email 
        user.password = Devise.friendly_token[0, 20] 
        user.full_name = auth.info.name   # ユーザーモデルに名前があると仮定 
        user.image = auth.info.image # ユーザーモデルに画像があると仮定 
        user.uid = auth.uid 
        user.provider = auth.provider 
      end 
    end 
  end 
  
end 



ユーザーストロングパラメータに「, :avatar」の記述を追加します。


記述追加 app\controllers\users_controller.rb
19行目に「, :avatar」の記述を追加しています。
カンマを忘れないようにして下さい。
 
class UsersController < ApplicationController 

  before_action :authenticate_user! 

  def dashboard 
  end 

  def update 
    @user = current_user 
    if @user.update_attributes(current_user_params) 
      flash[:notice] = "保存しました" 
    else 
      flash[:alert] = "更新できません" 
    end 
    redirect_to dashboard_path 
  end 

  private 
  def current_user_params 
    params.require(:user).permit(:from, :about, :status, :language, :avatar) 
  end 
end 



アバター画像用のヘルパーを追加します。


記述更新 app\helpers\application_helper.rb
 
module ApplicationHelper 

    def avatar_url(user) 
        if user.avatar.attached? 
            url_for(user.avatar) 
        elsif user.image? 
            user.image 
        else 
            ActionController::Base.helpers.asset_path('icon_default_avatar.jpg') 
        end 
    end    
end 



ダッシュボードビューに記述を追加します。


1.記述削除 app\views\users\dashboard.html.erb(16行目)
<%= image_tag 'icon_default_avatar.jpg' %>



2.記述追加 app\views\users\dashboard.html.erb(16行目)
削除した場所に以下の記述を貼り付けます。
<%= image_tag avatar_url(current_user), class: "is-rounded" %>



3.記述削除 app\views\users\dashboard.html.erb(27行目)
<button class="button is-primary is-outlined is-fullwidth">アバター画像アップロード</button>



4.記述追加 app\views\users\dashboard.html.erb(27行目)
削除した場所に以下の記述を貼り付けます。
 <%= form_for :user, url: users_edit_url(@user), action: :update, method: :post do |f| %> 
	<div class="file"> 
		<label class="button is-primary is-outlined is-fullwidth"> 
			<%= f.file_field :avatar, class: "file-input", onchange: "this.form.submit();" %> 
			<i class="fas fa-upload"></i>&nbsp;&nbsp;&nbsp; アバター画像アップロード 
		</label> 
	</div> 
<% end %>   



記述更新 app\views\users\dashboard.html.erb
 
<section class="section"> 
    <div class="container"> 
        <div class="columns"> 
        
            <!-- 左パネル --> 
            <div class="column is-one-third"> 
                <div class="columns is-multiline"> 
                    <!-- 上部 --> 
                    <div class="column is-full"> 
                        <div class="card"> 
                            <!-- アバター --> 
                            <div class="card-content is-horizontal-center is-flex"> 
                                <figure class="image is-256x256"> 
                                    <%= image_tag avatar_url(current_user), class: "is-rounded" %> 
                                </figure> 
                            </div> 
                            
                            <div class="card-content"> 
                                <!-- 画像アップロードボタン --> 
                                <div class="content has-text-centered"> 
                                    <p class="title is-5"> 
                                        <%= current_user.full_name %> 
                                    </p> 
                                    <%= form_for :user, url: users_edit_url(@user), action: :update, method: :post do |f| %> 
                                        <div class="file"> 
                                            <label class="button is-primary is-outlined is-fullwidth"> 
                                                <%= f.file_field :avatar, class: "file-input", onchange: "this.form.submit();" %> 
                                                <i class="fas fa-upload"></i>&nbsp;&nbsp;&nbsp; アバター画像アップロード 
                                            </label> 
                                        </div> 
                                    <% end %>                               
                                </div> 
                                <hr class="h-10"> 
                                
                                <!-- アカウント情報 --> 
                                <article class="media"> 
                                    <div class="media-content">アカウント登録日</div> 
                                    <div class="media-right"> 
                                        <strong><%= I18n.l(current_user.created_at, format: :full_date) %></strong> 
                                    </div> 
                                </article> 
                                <hr class="h-10"> 
                                
                                <!-- 出身地 --> 
                                <article> 
                                    <div class="media"> 
                                        <div class="media-content">出身地</div> 
                                        <div class="media-right"> 
                                            <strong><%= current_user.from %></strong> <i class="toggle far fa-edit" aria-controls="user-from"></i> 
                                        </div> 
                                    </div> 
                                    <div class="content"> 
                                        <%= form_for :user, url: users_edit_url(@user), action: :update, method: :post, html: {id: 'user-from', class: 'is-hidden'} do |f| %> 
                                            <div class="field"> 
                                                <%= f.text_field :from, autofocus: true, autocomplete: 'form', class: 'input'%> 
                                            </div> 
                                            <a class="toggle button is-light" aria-controls="user-from">キャンセル</a> 
                                            <%= f.submit "保存", class: "button is-danger" %> 
                                        <% end %> 
                                    </div> 
                                </article>                                
                                <hr class="h-10"> 
                                <!-- オンラインステータス --> 
                                <article> 
                                    <div class="media"> 
                                        <div class="media-content">ステータス</div> 
                                        <div class="media-right"> 
                                            <strong><% if current_user.status %> オンライン <% else %> オフライン <% end %></strong> <i class="toggle far fa-edit" aria-controls="user-status"></i> 
                                        </div> 
                                    </div> 
                                    <div class="content"> 
                                        <%= form_for :user, url: users_edit_url(@user), action: :update, method: :post, html: {id: 'user-status', class: 'is-hidden'} do |f| %> 
                                            <div class="field"> 
                                                <%= f.select(:status, options_for_select([["オンライン", true], ["オフライン", false]]), {}, {class: "select is-fullwidth"}) %> 
                                            </div> 
                                            <a class="toggle button is-light" aria-controls="user-status">キャンセル</a> 
                                            <%= f.submit "保存", class: "button is-danger" %> 
                                        <% end %> 
                                    </div> 
                                </article> 
                            </div> 
                        </div> 
                    </div> 
                    <!-- 下部 --> 
                    <div class="column is-full"> 
                        <div class="card"> 
                            <div class="card-content"> 
                                <!-- アカウント詳細 --> 
                                <article> 
                                    <div class="media"> 
                                        <div class="media-content"> 
                                            <p> 
                                                <strong>自己紹介</strong> 
                                                <br> 
                                                <%= current_user.about %> 
                                            </p> 
                                        </div> 
                                        <div class="media-right"> 
                                            <i class="toggle far fa-edit" aria-controls="user-about"></i> 
                                        </div> 
                                    </div> 
                                    <div class="content"> 
                                        <%= form_for :user, url: users_edit_url(@user), action: :update, method: :post, html: {id: 'user-about', class: 'is-hidden'} do |f| %> 
                                            <div class="field"> 
                                                <%= f.text_area :about, autofocus: true, autocomplete: 'form', class: 'input'%> 
                                            </div> 
                                            <a class="toggle button is-light" aria-controls="user-about">キャンセル</a> 
                                            <%= f.submit "保存", class: "button is-danger" %> 
                                        <% end %> 
                                    </div> 
                                </article> 
                                <hr class="h-10"> 
                                <!-- 言語 --> 
                                <article> 
                                    <div class="media"> 
                                        <div class="media-content"> 
                                            <p> 
                                                <strong>言語</strong> 
                                                <br> 
                                                <%= current_user.language %> 
                                            </p> 
                                        </div> 
                                        <div class="media-right"> 
                                            <i class="toggle far fa-edit" aria-controls="user-language"></i> 
                                        </div> 
                                    </div> 
                                    <div class="content"> 
                                        <%= form_for :user, url: users_edit_url(@user), action: :update, method: :post, html: {id: 'user-language', class: 'is-hidden'} do |f| %> 
                                            <div class="field"> 
                                                <%= f.text_field :language, autofocus: true, autocomplete: 'form', class: 'input'%> 
                                            </div> 
                                            <a class="toggle button is-light" aria-controls="user-language">キャンセル</a> 
                                            <%= f.submit "保存", class: "button is-danger" %> 
                                        <% end %> 
                                    </div> 
                                </article> 
                                <hr class="h-10"> 
                                
                                <!-- アカウント連携 --> 
                                <article class="media"> 
                                </article> 
                            </div> 
                        </div> 
                    </div> 
                </div> 
            </div> 
            <!-- 右側 --> 
            <div class="column"> 
                <div class="columns is-multiline"> 
                    <!-- 新しいお仕事を登録 --> 
                    <div class="column is-one-third has-text-centered"></div> 
                    <!-- 登録したお仕事 --> 
                    <div class="column is-one-third has-text-centered"></div> 
                    
                </div> 
            </div> 
            
        </div> 
    </div> 
</section> 



ナビゲーションバーを更新します。


記述追加 app\views\shared\_navbar.html.erb(46行目)
 <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> 



この続きはプロジェクトを購入していただくことで見ることができます。
プロジェクトを購入していただくとこのタスクの内容の全てを読みやすい表示で見ることができます。
プログラムコードが色分けされて見やすくなります。
プログラムコードに行番号が付きます。
本文が色分けされて見やすくなります。
そしてプロジェクトを購入するとこのアプリケーションのフルコードをダウンロードすることができます。

まだレビューはありません。

お仕事売買サイトの構築 Rails6.0

3,000円

フリーランスの方がお仕事を登録し、仕事を探している人が探して買うことができます。
お仕事を探している人がリクエストを出してお仕事をしてくれる人を募集する事もできます。
お仕事が売れると売上の80%が自動で指定口座に振り込まれます。
お仕事の購入はクレジットカードで決済します。
質問があればメッセージを送ることができ、リアルタイムで会話表示することができます。
検索機能、写真のアップロード、レビュー機能の実装、Facebook認証、アマゾンS3の利用方法も解説。
HEROKUへのデプロイ方法を解説。
フルコードのダウンロード可能。

タスク数: 146