仕事の内容を登録できるようにします。 実際に登録して試すことはまだできません。 「app\views\gigs\edit.html.erb」ファイルを以下のように編集します。 app\views\gigs\edit.html.erb <section class="section"> <div class="container"> <div class="steps" id="stepsDemo"> </div></div></section>

仕事ビューを作成していきます。 「app\views\gigs\new.html.erb」ファイルの記述を以下の内容に変更します。 app\views\gigs\new.html.erb <section class="section"> <div class="container"> <div class="steps" id="stepsDemo"> <div class="step-item is-active is-primary"> <div class="step-marker">1</div> <div class="step-details">…</div></div></div></div></section>

仕事コントローラを作成していきます。 コマンド rails g controller Gigs new create edit update show --no-test-framework ルートの設定をします。 自動で書かれた記述は削除します。 記述追加 config\routes.rb(17行目) resources :gigs config\routes.r…

仕事のモデルを作成します。 コマンド（４つ） rails g model Category name --no-test-framework 一文です。 rails g model Gig title video active:boolean has_single_pricing:boolean user:references category:references --no-test-framework 一文です…

ユーザープロフィールページを作成します。 「app\controllers\users_controller.rb」ファイルに以下のメソッドを追加します。 記述追加 app\controllers\users_controller.rb(8行目) def show @user = User.find(params[:id]) end app\controllers\users_co…

ダッシュボードビューに以下の記述を追加します。 記述追加 app\views\users\dashboard.html.erb(145行目) <div class="content"> <p> <strong>アカウント連携</strong><br/> <% if current_user.provider %> <span class="has-text-success">Facebookでログイン中</span> <% else %> <span class="has-text-danger">アカウント連携していません。</span> <% end %> </p> </div> app\…

herokuにアプリケーションをデプロイすると画像をローカルに保存することができません。 それに対応するため、アップロードした画像を全てアマゾンS3に保存するよう設定します。 アマゾンS3のキーの取得方法は以下の手順でお願いします。 mrradiology.hatena…

アバター画像をアップロードできるようにします。 コマンド rails active_storage:install コマンド マイグレーションの適用 rails db:migrate 「app\models\user.rb」ファイルに記述を追加します。 記述追加 app\models\user.rb 3行目に「has_one_attached …

タスク３で行なった変更をGitにコミットします。 ソース管理を選択します。 ソース管理 「＋」をクリックして全ての変更をステージします。 全ての変更をステージ コミットネームを入力します。 コミットネームを入力 チェックマークをクリックしてコミット…

アプリケーションをデプロイする場合レンタルサーバでは写真の保存ができません。 そのためアップロードした写真の保存先にアマゾンS3を利用する必要があります。 アマゾンS3のキーの取得方法は以下の手順でお願いします。 mrradiology.hatenablog.jp 記述追…

コントローラにデストロイメソッドを追加します。 記述追加 app\controllers\photos_controller.rb(17行目) def destroy @photo = Photo.find(params[:id]) @room = @photo.room @photo.destroy @photos = Photo.where(room_id: @room.id) respond_to :js en…

Google Cloud PlatformにGoogleアカウントでログインしてAPIキーを取得してください。 手順は以下の通りにお願いします。 mrradiology.hatenablog.jp 記述追加 GemFile（74行目） #googleマップ gem 'geocoder', '~> 1.4' GemFile source 'https://rubygems.…

写真がない場合「blank.jpg」を表示させる記述を追加します。 「app\assets\images」フォルダに「フルコード」の「サンプル画像」にある「blank.jpg」ファイルを保存しておいてください。 記述追加 app\models\room.rb（12行目） def cover_photo(size) if s…

以下のサイトのアイコンを使用します。 fontawesome.com ベーシックアイコンは「headタグ」に「link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"」の記述を追加すれば利用できます。 詳し…

HomebrewでImageMagickをインストールします。 ターミナルで以下のコマンドを実行してください。 brew install imagemagick 記述追加 GemFile（71行目） gem 'paperclip', '~> 5.1.0' GemFile source 'https://rubygems.org' git_source(:github) do |repo_n…

app\views\room\new.html.erb <div class="panel panel-default"> <div class="panel-heading"> お部屋の登録 </div> <div class="panel-body"> <div class="container"> <%= form_for @room do |f| %> <div class="row"> <div class="col-md-4 select"> <div class="form-group"> <label>お家のタイプ</label> <%= f.select :home_type…</div></div></div></div></div></div>

コマンド １文です。 rails g controller Rooms index new create listing pricing description photo_upload amenities location update app\controllers\rooms_controller.rb class RoomsController < ApplicationController before_action :set_room, exc…

コマンド 長いですが全部つながっています。１文です。 rails g model Room home_type:string room_type:string accommodate:bigint bed_room:bigint bath_room:bigint listing_name:string summary:text address:string is_tv:boolean is_kitchen:boolean i…

ユーザプロフィールページを作成します。 コマンド rails g migration AddExtraFieldsToUser phone_number:string description:text コマンド マイグレーション rails db:migrate 電話番号と詳細フィールドが追加されました。 フィールド追加 記述追加 confi…

タスク３で行なった変更をGitにコミットします。 ソース管理を選択します。ソース管理 「＋」をクリックして全ての変更をステージします。全ての変更をステージ コミットネームを入力します。コミットネームを入力 チェックマークをクリックしてコミットしま…

タスクの管理モデルを作成します。 コマンド rails g trestle:resource Task タスクモデルに「有効化」「無効化」を格納するカラムを作成します。 コマンド rails g migration AddActiveToTask active:boolean 記述追加 db\migrate\20200802105846_add_activ…

trestleでリッチテキストが使えるようにします。 記述追加 GemFile(82行目) gem 'trestle-tinymce', '~> 0.3.0' GemFile source 'https://rubygems.org' git_source(:github) { |repo| "https://github.com/#{repo}.git" } ruby '2.6.6' # Bundle edge Rails…

アクションテキストをインストールします。 コマンド rails action_text:install マイグレーション適用 rails db:migrate 「app\models\project.rb」ファイルを以下の内容に更新します。 １．5行目に以下の記述を追加します。 has_rich_text :description ha…

ユーザ管理が出来るようにします。 「GemFile」に以下の記述を追加します。 GemFile(74行目) gem 'trestle-search', '~> 0.4.2' gem 'trestle-active_storage', '~> 3.0' gem "mini_magick" gem 'image_processing', '~> 1.2' GemFile source 'https://rubyg…

trestle管理画面にダッシュボードを作成します。 「app\admin」フォルダに「dashboard_admin.rb」ファイルを新規作成して下さい。 app\admin\dashboard_admin.rb(新規作成したファイル) Trestle.admin(:dashboard) do menu do item :ダッシュボード, icon: "…

プロジェクトとタスクのモデルを作成していきます。 コマンド（２つ） rails g model Project name:string content:text price:bigint user:references rails g model Task title:string note:text video:string header:boolean tag:bigint project:referenc…

管理ダッシュボードを作成します。 記述追加 GemFile(72行目) gem 'trestle', '~> 0.9.3' gem 'trestle-auth', '~> 0.4.0' GemFile source 'https://rubygems.org' git_source(:github) { |repo| "https://github.com/#{repo}.git" } ruby '2.6.6' # Bundle …

タスク３で行なった変更をGitにコミットします。 ソース管理を選択します。ソース管理 「＋」をクリックして全ての変更をステージします。全ての変更をステージ コミットネームを入力します。コミットネームを入力 チェックマークをクリックしてコミットしま…

Google Cloud PlatformにGoogleアカウントでログインしてAPIキーを取得してください。 手順は以下の通りにお願いします。 mrradiology.hatenablog.jp 記述追加 GemFile（66行目） #googleマップ gem 'geocoder', '~> 1.4' GemFile source 'https://rubygems.…

写真をカルーセル表示できるようにします。 コマンド yarn add bulma-extensions 「app\javascript\packs\application.js」ファイルを以下のように書き換えます。 １．記述追加 app\javascript\packs\application.js(13行目) window.BulmaCarousel = require…