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