ランキング参加中プログラミング[５９]本番環境の構築 | Herokuデータベースへの接続[ホームに戻る] >> [６１] Bootstrap |導入編 秘密情報を暗号化します。 今回はストライプのキーを秘密情報に設定します。 「Settings」タブから設定変数を編集します。 「…

ランキング参加中プログラミング[５０]通知[ホームに戻る] >> [５２]本番環境の構築 | herokuアカウント作成 フルカレンダーをインストールします。 コマンド 一文です。 yarn add @fullcalendar/core@5.9.0 @fullcalendar/daygrid@5.9.0 @fullcalendar/inte…

ランキング参加中プログラミング[４９]メッセージと会話 | リアルタイムメッセージ[ホームに戻る] >> [５１]フルカレンダー コマンド rails g model Notification content user:references コマンド rails g migration AddUnreadToUser unread:bigint 記述追…

ランキング参加中プログラミング[４８]メッセージと会話 | 会話表示[ホームに戻る] >> [５０]通知 メッセージをリアルタイムで送りあうことができるようにします。 コマンド rails g channel Message ルートの設定をします。 記述追加 config\routes.rb 6行…

ランキング参加中プログラミング[４７]メッセージと会話 | コントローラとビュー作成[ホームに戻る] >> [４９]メッセージと会話 | リアルタイムメッセージ 会話表示できるようにします。 「app\controllers」フォルダに「conversations_controller.rb」ファ…

ランキング参加中プログラミング[４６]メッセージと会話 | モデル作成[ホームに戻る] >> [４８]メッセージと会話 | 会話表示 メッセージコントローラを作成します。 コマンド rails g controller messages create 「app\controllers\messages_controller.rb…

ランキング参加中プログラミング [４５]予約確認電子メール[ホームに戻る] >> [４７]メッセージと会話 | コントローラとビュー作成 メッセージと会話のモデルを作成していきます。 コマンド rails g model Conversation sender:references receiver:referenc…

ランキング参加中プログラミング[４４]ページネーション[ホームに戻る] >> [４６]メッセージと会話 | モデル作成 「app\mailers」フォルダに「reservation_mailer.rb」ファイルを新規作成してください。 app\mailers\reservation_mailer.rb(新規作成したファ…

ランキング参加中プログラミング[４３]クレジットカード決済の実装[ホームに戻る] >> [４５]予約確認電子メール 検索ページにページング機能をつけます。 「GemFile」に以下の記述を追加します。 記述追加 GemFile(92行目) gem 'kaminari' GemFile source 'h…

ランキング参加中プログラミング[４２]クレジットカード決済 | Stripe（ストライプ）コネクト[ホームに戻る] >> [４４]ページネーション 「app\controllers\reservations_controller.rb」ファイルの記述を更新します。 １．5行目の「create()」メソッドの記…

ランキング参加中プログラミング[４１]クレジットカード決済 | Stripe（ストライプ）[ホームに戻る] >> [４３]クレジットカード決済の実装 お部屋を登録したホストに宿泊料金の８０％が自動で支払われるように設定します。 これにはStripeコネクトというサー…

ランキング参加中プログラミング[４０]承認予約[ホームに戻る] >> [４２]クレジットカード決済 | Stripe（ストライプ）コネクト Stripe（ストライプ）を使ってでクレジット決済ができるようにします。 まずは以下の手順でStripeのアカウントを取得してくださ…

ランキング参加中プログラミング[３９]ステータス表示[ホームに戻る] >> [４１]クレジットカード決済 | Stripe（ストライプ） コマンド rails g migration AddInstantToRooms instant:bigint 記述追加 db\migrate\20200728030209_add_instant_to_rooms.rb 3…

ランキング参加中プログラミング[３８]jQueryスライダー[ホームに戻る] >> [４０]承認予約 ナビゲーションバーのアイコンにステータス表示が出るようにします。 「app\views\shared\_navbar.html.erb」ファイルの記述を更新します。 記述更新 app\views\shar…

ランキング参加中プログラミング[３７]AJAX検索[ホームに戻る] >> [３９]ステータス表示 記述追加 app\javascript\packs\application.js 「require("jquery-ui/ui/widgets/slider");」の記述を13行目に追加 // This file is automatically compiled by Webpa…

ランキング参加中プログラミング[３６]ホームページ[ホームに戻る] >> [３８]jQueryスライダー 記述追加 GemFile 「gem 'ransack', '~> 2.3'」の記述追加（83行目） source 'https://rubygems.org' git_source(:github) { |repo| "https://github.com/#{repo…

ランキング参加中プログラミング[３５]レビュー[ホームに戻る] >> [３７]AJAX検索 「app\assets\images」フォルダに「home」フォルダを新規作成してください。作成した「home」フォルダの中に何でも良いのでホームページの背景画像となる「background01.jpg…

ランキング参加中プログラミング[３４]ページ修正[ホームに戻る] >> [３６]ホームページ 「raty-js」をインストールします。 コマンド yarn add raty-js@2.9.0 「app\assets\stylesheets\application.scss」ファイルに以下の記述を追加します。 記述追加 app…

ランキング参加中プログラミング[３３]予約確認ページ[ホームに戻る] >> [３５]レビュー プロフィールページを修正していきます。 記述追加 app\controllers\users_controller.rb 「show()」メソッドに「@rooms = @user.rooms」の記述を追加してます。(10行…

ランキング参加中プログラミング[３２]予約フォーム[ホームに戻る] >> [３４]ページ修正 宿泊者（ゲスト）の予約確認ページを作成します。 記述追加 app\controllers\reservations_controller.rb(26行目) def your_trips @trips = current_user.reservations…

ランキング参加中プログラミング[３１]jQuery日付ピッカー[ホームに戻る] >> [３３]予約確認ページ 「app\controllers\rooms_controller.rb」ファイルを編集します。 １．記述追加 app\controllers\rooms_controller.rb(71行目) # 予約 開始日のAJAX def pre…

ランキング参加中プログラミング[３０]予約コントローラとビュー[ホームに戻る] >> [３２]予約フォーム jqueryはすでにインストールされているので、「jquery-ui」をインストールします。 コマンド yarn add jquery-ui 記述追加 config\webpack\environment.…

ランキング参加中プログラミング[２９]予約モデル[ホームに戻る] >> [３１]jQuery日付ピッカー 「app\controllers」フォルダに「reservations_controller.rb」ファイルを新規作成します。 app\controllers\reservations_controller.rb(新規作成したファイル)…

ランキング参加中プログラミング[２８]アカウント連携表示[ホームに戻る] >> [３０]予約コントローラとビュー コマンド １文です。 rails g model Reservation user:references room:references start_date:datetime end_date:datetime price:bigint total:b…

ランキング参加中プログラミング[２７]Google認証[ホームに戻る] >> [２９]予約モデル ダッシュボードビューに以下の記述を追加します。 記述追加 app\views\users\dashboard.html.erb(63行目) <div class="content"> <p> <strong>アカウント連携</strong><br/> <% if current_user.provider == 'facebook' </br/></p></div>…

ランキング参加中プログラミング[２６]Facebook認証[ホームに戻る] >> [２８]アカウント連携表示 Google Cloud PlatformにGoogleアカウントでログインしてAPIキーを取得してください。 手順は以下の通りにお願いします。 mrradiology.hatenablog.jp GemFile…

ランキング参加中プログラミング[２５]Googleマップ[ホームに戻る] >> [２７]Google認証 まずはFacebook for Developersでアカウントを作成しなければなりません。 developers.facebook.com アカウント、アプリの作成は以下の手順でお願いします。 mrradiolo…

まずは「Facebook for Developers」のトップページに移動します。 developers.facebook.com 「利用を開始する」をクリックします。 利用を開始する 次へ進みます。 次へ進む 携帯電話を入力し、SMSを送信することでアカウント認証を行います。 アカウント認…

ランキング参加中プログラミング[２４]写真カルーセル表示[ホームに戻る] >> [２６]Facebook認証 Google Cloud PlatformにGoogleアカウントでログインしてAPIキーを取得してください。 手順は以下の通りにお願いします。 mrradiology.hatenablog.jp 記述追加…

ランキング参加中プログラミング[２３]写真アップロード(dropzone)[ホームに戻る] >> [２５]Googleマップ 写真をカルーセル表示できるようにします。 「yarn」コマンドで「bulma-extensions」をインストールします。 コマンド yarn add bulma-extensions 「a…