Bulma
[５９]本番環境の構築 | Herokuデータベースへの接続[ホームに戻る] 秘密情報を暗号化します。 今回はストライプのキーを秘密情報に設定します。 「Settings」タブから設定変数を編集します。 「Reveal Config Vars」ボタンをクリックして下さい。Reveal Con…
[５０]通知[ホームに戻る] >> [５２]本番環境の構築 | herokuアカウント作成 フルカレンダーをインストールします。 コマンド 一文です。 yarn add @fullcalendar/core@5.9.0 @fullcalendar/daygrid@5.9.0 @fullcalendar/interaction@5.9.0 @fullcalendar/li…
[４９]メッセージと会話 | リアルタイムメッセージ[ホームに戻る] >> [５１]フルカレンダー コマンド rails g model Notification content user:references コマンド rails g migration AddUnreadToUser unread:bigint 記述追加 db\migrate\20200729003608_a…
[４８]メッセージと会話 | 会話表示[ホームに戻る] >> [５０]通知 メッセージをリアルタイムで送りあうことができるようにします。 コマンド rails g channel Message ルートの設定をします。 記述追加 config\routes.rb 6行目に「mount ActionCable.server …
[４７]メッセージと会話 | コントローラとビュー作成[ホームに戻る] >> [４９]メッセージと会話 | リアルタイムメッセージ 会話表示できるようにします。 「app\controllers」フォルダに「conversations_controller.rb」ファイルを新規作成して下さい。 app\…
[４６]メッセージと会話 | モデル作成[ホームに戻る] >> [４８]メッセージと会話 | 会話表示 メッセージコントローラを作成します。 コマンド rails g controller messages create 「app\controllers\messages_controller.rb」ファイルを以下のように変更し…
[４５]予約確認電子メール[ホームに戻る] >> [４７]メッセージと会話 | コントローラとビュー作成 メッセージと会話のモデルを作成していきます。 コマンド rails g model Conversation sender:references receiver:references コマンド rails g model Messa…
[４４]ページネーション[ホームに戻る] >> [４６]メッセージと会話 | モデル作成 「app\mailers」フォルダに「reservation_mailer.rb」ファイルを新規作成してください。 app\mailers\reservation_mailer.rb(新規作成したファイル) class ReservationMailer …
[４３]クレジットカード決済の実装[ホームに戻る] >> [４５]予約確認電子メール 検索ページにページング機能をつけます。 「GemFile」に以下の記述を追加します。 記述追加 GemFile(92行目) gem 'kaminari' GemFile source 'https://rubygems.org' git_sourc…
[４２]クレジットカード決済 | Stripe（ストライプ）コネクト[ホームに戻る] >> [４４]ページネーション 「app\controllers\reservations_controller.rb」ファイルの記述を更新します。 １．5行目の「create()」メソッドの記述を以下のように更新します。 de…
[４１]クレジットカード決済 | Stripe（ストライプ）[ホームに戻る] >> [４３]クレジットカード決済の実装 お部屋を登録したホストに宿泊料金の８０％が自動で支払われるように設定します。 これにはStripeコネクトというサービスを使いますが、プランに「ス…
[４０]承認予約[ホームに戻る] >> [４２]クレジットカード決済 | Stripe（ストライプ）コネクト Stripe（ストライプ）を使ってでクレジット決済ができるようにします。 まずは以下の手順でStripeのアカウントを取得してください。 mrradiology.hatenablog.jp…
[３９]ステータス表示[ホームに戻る] >> [４１]クレジットカード決済 | Stripe（ストライプ） コマンド rails g migration AddInstantToRooms instant:bigint 記述追加 db\migrate\20200728030209_add_instant_to_rooms.rb 3行目に「, default: 1」の記述追…
[３８]jQueryスライダー[ホームに戻る] >> [４０]承認予約 ナビゲーションバーのアイコンにステータス表示が出るようにします。 「app\views\shared\_navbar.html.erb」ファイルの記述を更新します。 記述更新 app\views\shared\_navbar.html.erb 35行目の記…
[３７]AJAX検索[ホームに戻る] >> [３９]ステータス表示 記述追加 app\javascript\packs\application.js 「require("jquery-ui/ui/widgets/slider");」の記述を13行目に追加 // This file is automatically compiled by Webpack, along with any other files…
[３６]ホームページ[ホームに戻る] >> [３８]jQueryスライダー 記述追加 GemFile 「gem 'ransack', '~> 2.3'」の記述追加（83行目） source 'https://rubygems.org' git_source(:github) { |repo| "https://github.com/#{repo}.git" } ruby '2.6.6' # Bundle…
[３５]レビュー[ホームに戻る] >> [３７]AJAX検索 「app\assets\images」フォルダに「home」フォルダを新規作成してください。作成した「home」フォルダの中に何でも良いのでホームページの背景画像となる「background01.jpg」ファイルをコピーして下さい。 …
[３４]ページ修正[ホームに戻る] >> [３６]ホームページ 「raty-js」をインストールします。 コマンド yarn add raty-js@2.9.0 「app\assets\stylesheets\application.scss」ファイルに以下の記述を追加します。 記述追加 app\assets\stylesheets\applicatio…
[３３]予約確認ページ[ホームに戻る] >> [３５]レビュー プロフィールページを修正していきます。 記述追加 app\controllers\users_controller.rb 「show()」メソッドに「@rooms = @user.rooms」の記述を追加してます。(10行目) class UsersController < App…
[３２]予約フォーム[ホームに戻る] >> [３４]ページ修正 宿泊者（ゲスト）の予約確認ページを作成します。 記述追加 app\controllers\reservations_controller.rb(26行目) def your_trips @trips = current_user.reservations.order(start_date: :asc) end a…
[３１]jQuery日付ピッカー[ホームに戻る] >> [３３]予約確認ページ 「app\controllers\rooms_controller.rb」ファイルを編集します。 １．記述追加 app\controllers\rooms_controller.rb(71行目) # 予約 開始日のAJAX def preload today = Date.today reserv…
[３０]予約コントローラとビュー[ホームに戻る] >> [３２]予約フォーム jqueryはすでにインストールされているので、「jquery-ui」をインストールします。 コマンド yarn add jquery-ui 記述追加 config\webpack\environment.js(14行目) environment.toWebpa…
[２９]予約モデル[ホームに戻る] >> [３１]jQuery日付ピッカー 「app\controllers」フォルダに「reservations_controller.rb」ファイルを新規作成します。 app\controllers\reservations_controller.rb(新規作成したファイル) class ReservationsController …
[２８]アカウント連携表示[ホームに戻る] >> [３０]予約コントローラとビュー コマンド １文です。 rails g model Reservation user:references room:references start_date:datetime end_date:datetime price:bigint total:bigint コマンド マイグレーショ…
[２７]Google認証[ホームに戻る] >> [２９]予約モデル ダッシュボードビューに以下の記述を追加します。 記述追加 app\views\users\dashboard.html.erb(63行目) <div class="content"> <p> <strong>アカウント連携</strong><br/> <% if current_user.provider == 'facebook' %> <span class="has-text-success">Facebookアカウントでログイ</span></br/></p></div>…
[２６]Facebook認証[ホームに戻る] >> [２８]アカウント連携表示 Google Cloud PlatformにGoogleアカウントでログインしてAPIキーを取得してください。 手順は以下の通りにお願いします。 mrradiology.hatenablog.jp GemFileに以下の記述を追加します。 記述…
[２５]Googleマップ[ホームに戻る] >> [２７]Google認証 まずはFacebook for Developersでアカウントを作成しなければなりません。 developers.facebook.com アカウント、アプリの作成は以下の手順でお願いします。 mrradiology.hatenablog.jp GemFileに以下…
まずは「Facebook for Developers」のトップページに移動します。 developers.facebook.com 「利用を開始する」をクリックします。 利用を開始する 次へ進みます。 次へ進む 携帯電話を入力し、SMSを送信することでアカウント認証を行います。 アカウント認…
[２４]写真カルーセル表示[ホームに戻る] >> [２６]Facebook認証 Google Cloud PlatformにGoogleアカウントでログインしてAPIキーを取得してください。 手順は以下の通りにお願いします。 mrradiology.hatenablog.jp 記述追加 GemFile（73行目） #googleマッ…
[２３]写真アップロード(dropzone)[ホームに戻る] >> [２５]Googleマップ 写真をカルーセル表示できるようにします。 「yarn」コマンドで「bulma-extensions」をインストールします。 コマンド yarn add bulma-extensions 「app\javascript\packs\applicatio…
