学生向けプログラミング入門

学生向けにプログラミングを解説。Java、C++、Ruby、PHP、データベース、Ruby on Rails

Bulma

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 60 | 本番環境の構築 | 秘密情報

[59]本番環境の構築 | Herokuデータベースへの接続[ホームに戻る] 秘密情報を暗号化します。 今回はストライプのキーを秘密情報に設定します。 「Settings」タブから設定変数を編集します。 「Reveal Config Vars」ボタンをクリックして下さい。Reveal Con…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 51 | フルカレンダー

[50]通知[ホームに戻る] >> [52]本番環境の構築 | herokuアカウント作成 フルカレンダーをインストールします。 コマンド 一文です。 yarn add @fullcalendar/core@5.9.0 @fullcalendar/daygrid@5.9.0 @fullcalendar/interaction@5.9.0 @fullcalendar/li…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 50 | 通知

[49]メッセージと会話 | リアルタイムメッセージ[ホームに戻る] >> [51]フルカレンダー コマンド rails g model Notification content user:references コマンド rails g migration AddUnreadToUser unread:bigint 記述追加 db\migrate\20200729003608_a…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 49 | メッセージと会話 | リアルタイムメッセージ

[48]メッセージと会話 | 会話表示[ホームに戻る] >> [50]通知 メッセージをリアルタイムで送りあうことができるようにします。 コマンド rails g channel Message ルートの設定をします。 記述追加 config\routes.rb 6行目に「mount ActionCable.server …

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 48 | メッセージと会話 | 会話表示

[47]メッセージと会話 | コントローラとビュー作成[ホームに戻る] >> [49]メッセージと会話 | リアルタイムメッセージ 会話表示できるようにします。 「app\controllers」フォルダに「conversations_controller.rb」ファイルを新規作成して下さい。 app\…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 47 | メッセージと会話 | コントローラとビュー作成

[46]メッセージと会話 | モデル作成[ホームに戻る] >> [48]メッセージと会話 | 会話表示 メッセージコントローラを作成します。 コマンド rails g controller messages create 「app\controllers\messages_controller.rb」ファイルを以下のように変更し…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 46 | メッセージと会話 | モデル作成

[45]予約確認電子メール[ホームに戻る] >> [47]メッセージと会話 | コントローラとビュー作成 メッセージと会話のモデルを作成していきます。 コマンド rails g model Conversation sender:references receiver:references コマンド rails g model Messa…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 45 | 予約確認電子メール

[44]ページネーション[ホームに戻る] >> [46]メッセージと会話 | モデル作成 「app\mailers」フォルダに「reservation_mailer.rb」ファイルを新規作成してください。 app\mailers\reservation_mailer.rb(新規作成したファイル) class ReservationMailer …

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 44 | ページネーション

[43]クレジットカード決済の実装[ホームに戻る] >> [45]予約確認電子メール 検索ページにページング機能をつけます。 「GemFile」に以下の記述を追加します。 記述追加 GemFile(92行目) gem 'kaminari' GemFile source 'https://rubygems.org' git_sourc…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 43 | クレジットカード決済の実装

[42]クレジットカード決済 | Stripe(ストライプ)コネクト[ホームに戻る] >> [44]ページネーション 「app\controllers\reservations_controller.rb」ファイルの記述を更新します。 1.5行目の「create()」メソッドの記述を以下のように更新します。 de…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 42 | クレジットカード決済 | Stripe(ストライプ)コネクト

[41]クレジットカード決済 | Stripe(ストライプ)[ホームに戻る] >> [43]クレジットカード決済の実装 お部屋を登録したホストに宿泊料金の80%が自動で支払われるように設定します。 これにはStripeコネクトというサービスを使いますが、プランに「ス…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 41 | クレジットカード決済 | Stripe(ストライプ)

[40]承認予約[ホームに戻る] >> [42]クレジットカード決済 | Stripe(ストライプ)コネクト Stripe(ストライプ)を使ってでクレジット決済ができるようにします。 まずは以下の手順でStripeのアカウントを取得してください。 mrradiology.hatenablog.jp…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 40 | 承認予約

[39]ステータス表示[ホームに戻る] >> [41]クレジットカード決済 | Stripe(ストライプ) コマンド rails g migration AddInstantToRooms instant:bigint 記述追加 db\migrate\20200728030209_add_instant_to_rooms.rb 3行目に「, default: 1」の記述追…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 39 | ステータス表示

[38]jQueryスライダー[ホームに戻る] >> [40]承認予約 ナビゲーションバーのアイコンにステータス表示が出るようにします。 「app\views\shared\_navbar.html.erb」ファイルの記述を更新します。 記述更新 app\views\shared\_navbar.html.erb 35行目の記…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 38 | jQueryスライダー

[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…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 37 | AJAX検索

[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…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 36 | ホームページ

[35]レビュー[ホームに戻る] >> [37]AJAX検索 「app\assets\images」フォルダに「home」フォルダを新規作成してください。作成した「home」フォルダの中に何でも良いのでホームページの背景画像となる「background01.jpg」ファイルをコピーして下さい。 …

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 35 | レビュー

[34]ページ修正[ホームに戻る] >> [36]ホームページ 「raty-js」をインストールします。 コマンド yarn add raty-js@2.9.0 「app\assets\stylesheets\application.scss」ファイルに以下の記述を追加します。 記述追加 app\assets\stylesheets\applicatio…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 34 | ページ修正

[33]予約確認ページ[ホームに戻る] >> [35]レビュー プロフィールページを修正していきます。 記述追加 app\controllers\users_controller.rb 「show()」メソッドに「@rooms = @user.rooms」の記述を追加してます。(10行目) class UsersController < App…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 33 | 予約確認ページ

[32]予約フォーム[ホームに戻る] >> [34]ページ修正 宿泊者(ゲスト)の予約確認ページを作成します。 記述追加 app\controllers\reservations_controller.rb(26行目) def your_trips @trips = current_user.reservations.order(start_date: :asc) end a…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 32 | 予約フォーム

[31]jQuery日付ピッカー[ホームに戻る] >> [33]予約確認ページ 「app\controllers\rooms_controller.rb」ファイルを編集します。 1.記述追加 app\controllers\rooms_controller.rb(71行目) # 予約 開始日のAJAX def preload today = Date.today reserv…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 31 | jQuery日付ピッカー

[30]予約コントローラとビュー[ホームに戻る] >> [32]予約フォーム jqueryはすでにインストールされているので、「jquery-ui」をインストールします。 コマンド yarn add jquery-ui 記述追加 config\webpack\environment.js(14行目) environment.toWebpa…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 30 | 予約コントローラとビュー

[29]予約モデル[ホームに戻る] >> [31]jQuery日付ピッカー 「app\controllers」フォルダに「reservations_controller.rb」ファイルを新規作成します。 app\controllers\reservations_controller.rb(新規作成したファイル) class ReservationsController …

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 29 | 予約モデル

[28]アカウント連携表示[ホームに戻る] >> [30]予約コントローラとビュー コマンド 1文です。 rails g model Reservation user:references room:references start_date:datetime end_date:datetime price:bigint total:bigint コマンド マイグレーショ…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 28 | アカウント連携表示

[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>…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 27 | Google認証

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

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 26 | Facebook認証

[25]Googleマップ[ホームに戻る] >> [27]Google認証 まずはFacebook for Developersでアカウントを作成しなければなりません。 developers.facebook.com アカウント、アプリの作成は以下の手順でお願いします。 mrradiology.hatenablog.jp GemFileに以下…

Facebook for Developers | アカウント作成手順【2021年7月更新】

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

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 25 | Googleマップ

[24]写真カルーセル表示[ホームに戻る] >> [26]Facebook認証 Google Cloud PlatformにGoogleアカウントでログインしてAPIキーを取得してください。 手順は以下の通りにお願いします。 mrradiology.hatenablog.jp 記述追加 GemFile(73行目) #googleマッ…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 24 | 写真カルーセル表示

[23]写真アップロード(dropzone)[ホームに戻る] >> [25]Googleマップ 写真をカルーセル表示できるようにします。 「yarn」コマンドで「bulma-extensions」をインストールします。 コマンド yarn add bulma-extensions 「app\javascript\packs\applicatio…