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

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

Ruby on Rails

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 65 | Bootstrap | フラッシュメッセージ(noty)

フラッシュメッセージ(noty)をBootstrapで実装していきます。 インストール等については「08| フラッシュメッセージ(noty)」と同じなので省略します。 「app\javascript\packs\application.js」に以下の記述を追加します。 記述追加 app\javascript\packs\ap…

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

設定方法等は「07 | 氏名認証」と同じですので、Bootstrapによって変更になった部分のみを載せておきます。 認証ビューを更新します。 記述更新 app\views\devise\registrations\new.html.erb <br/> <br/> <div class="row"> <div class="col-sm-6" style="margin:0 auto;"> <div class="card text-center"> <h4 class="card-header text-center">新規ユーザ登録(無料)</h4> </div></div></div></br/></br/>

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 63 | Bootstrap | デバイス(devise)

デバイスの設定部分は「06 | デバイス(devise)」と同じです。 Bootstrap用に書き換えた部分を載せていきます。 ナビゲーションバーに「新規ユーザ登録」「ログイン」「ログアウト」のリンクを追加する変更です。 記述更新 app\views\shared\_navbar.html.erb <nav class="navbar navbar-expand-lg navbar-dark bg-info" style="z-index: 5;"></nav>…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 62 | Bootstrap | ナビゲーションバー

Bootstrapでの書き直しを行っていきます。 まずはホームページのコントローラ作成です。 コマンド rails g controller Pages home ナビゲーションバーを作成していきます。 「app\views」フォルダに「shared」フォルダを新規作成してください。 作成した「sh…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 61 | Bootstrap |導入編

「05 | ナビゲーションバー(Bulma)」で導入した「Bulma」の代わりに「Bootstrap」を導入します。 getbootstrap.jp Yarnで必要なパッケージ「Bootstrap」「jquery」「popper.js」をインストールします。 コマンド yarn add jquery@3.6.0 bootstrap@4.5.2 popp…

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

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

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 59 | 本番環境の構築 | Herokuデータベースへの接続

[58]本番環境の構築 | GithubとHerokuのコネクト | デプロイ[ホームに戻る] >> [60]本番環境の構築 | 秘密情報 右上のメニューから「Data」を選択します。Data データベースが表示されるので選択します。 データベース 「Setting」の「View Credentials…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 58 | 本番環境の構築 | GithubとHerokuのコネクト | デプロイ

[57]本番環境の構築 | コンパイル[ホームに戻る] >> [59]本番環境の構築 | Herokuデータベースへの接続 Herokuのページで「Deploy」の「Deployment method」欄にある「Connect to GitHub」をクリックします。Connect To GitHub 下に出た「Connect to Git…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 57 | 本番環境の構築 | コンパイル

[56]本番環境の構築 | Google認証の設定[ホームに戻る] >> [58]本番環境の構築 | GithubとHerokuのコネクト | デプロイ Webページで画像を表示するにはコンパイルする必要があります。 以下のコマンドを実行してコンパイルを行います。 コマンド rails a…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 56 | 本番環境の構築 | Google認証の設定

[55]本番環境の構築 | Facebook認証の設定[ホームに戻る] >> [57]本番環境の構築 | コンパイル Google認証の本番設定をします。 まずご自分のGoogleアカウントで「google cloud platform」にログインします。 console.cloud.google.com ダッシュボードで…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 55 | 本番環境の構築 | Facebook認証の設定

[54]本番環境の構築 | ストライプコネクトの設定[ホームに戻る] >> [56]本番環境の構築 | Google認証の設定 「Facebook for Developers」のダッシュボードに移動します。 developers.facebook.com 「設定」の「ベーシック」に移動します。 ベーシック 「…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 54 | 本番環境の構築 | ストライプコネクトの設定

[53]本番環境の構築 | 設定ファイル[ホームに戻る] >> [55]本番環境の構築 | Facebook認証の設定 ストライプのダッシュボード左の「設定」をクリックします。設定connectの設定をクリックします。connectの設定 リダイレクトで「URI追加」をクリックしま…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 53 | 本番環境の構築 | 設定ファイル

[52]本番環境の構築 | herokuアカウント作成[ホームに戻る] >> [54]本番環境の構築 | ストライプコネクトの設定 「config\environments\production.rb」ファイルを編集していきます。 httpsの設定 47行目のコメントアウトを外します。 config.force_ssl …

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 52 | 本番環境の構築 | herokuアカウント作成

[51]フルカレンダー[ホームに戻る] >> [53]本番環境の構築 | 設定ファイル まずherokuアカウントを作成します。 signup.heroku.com herokuアカウントの作成手順は以下の手順でお願いします。 mrradiology.hatenablog.jp アプリケーションを作成します。 …

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」ファイルをコピーして下さい。 …