ランキング参加中プログラミング[52] デプロイ| データベース [ホームに戻る] 秘密情報を暗号化します。 今回はストライプのキーを秘密情報に設定します。 「Settings」タブから設定変数を編集します。 「Reveal Config Vars」ボタンをクリックして下さい。R…

ランキング参加中プログラミング[51] デプロイ|Connect to GitHub [ホームに戻る] >> [53] デプロイ| 秘密情報 右上のメニューから「Data」を選択します。Data データベースが表示されるので選択します。 データベース 「Setting」の「View Credentials」を…

ランキング参加中プログラミング[50] デプロイ|コンパイル [ホームに戻る] >> [52] デプロイ| データベース まず、HerokuのダッシュボードページでRubyよりも先にnodeをインストールするよう指定をします。 「Setting」に移動します。 Setting 下部にある「B…

ランキング参加中プログラミング[49] デプロイ| 動画（Wistia）設定 [ホームに戻る] >> [51] デプロイ|Connect to GitHub Webページで画像を表示するにはコンパイルする必要があります。 以下のコマンドを実行してコンパイルを行います。 コマンド rails ass…

ランキング参加中プログラミング[48] デプロイ| Google認証 [ホームに戻る] >> [50] デプロイ|コンパイル Herokuにデプロイすると「https」通信となりますので動画Wistiaのスクリプトリンクを変更しなければなりません。 「app\views\task\show.html.erb」フ…

ランキング参加中プログラミング[47] デプロイ| 設定ファイル [ホームに戻る] >> [49] デプロイ| 動画（Wistia）設定 Google認証の本番設定をします。 まずご自分のGoogleアカウントで「google cloud platform」にログインします。 console.cloud.google.com…

ランキング参加中プログラミング[46] デプロイ| herokuアカウント [ホームに戻る] >> [48] デプロイ| Google認証 「config\environments\production.rb」ファイルを編集していきます。 httpsの設定 47行目のコメントアウトを外します。 config.force_ssl = t…

ランキング参加中プログラミング[45] ページ修正 [ホームに戻る] >> [47] デプロイ| 設定ファイル まずherokuアカウントを作成します。 signup.heroku.com herokuアカウントの作成手順は以下の手順でお願いします。 mrradiology.hatenablog.jp アプリケーシ…

ランキング参加中プログラミング[44] ページネーション [ホームに戻る] >> [46] デプロイ| herokuアカウント ダッシュボードに購入したプロジェクトを表示させるよう変更します。 「app\controllers\users_controller.rb」ファイルに以下の記述を追加します…

ランキング参加中プログラミング[43] 通知 [ホームに戻る] >> [45] ページ修正 通知ページにページング機能をつけます。 「GemFile」に以下の記述を追加します。 記述追加 GemFile(96行目) gem 'kaminari' GemFile source 'https://rubygems.org' git_source…

ランキング参加中プログラミング[42] リアルタイムメッセージ [ホームに戻る] >> [44] ページネーション コマンド rails g model Notification content user:references コマンド rails g migration AddUnreadToUser unread:bigint 記述追加 db\migrate\2020…

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

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

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

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

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

ランキング参加中プログラミング[36]レビュー表示 [ホームに戻る] >> [38]購入確認電子メール ホームページを作成します。 「app\assets\images」フォルダに「home」フォルダを新規作成し、何でも良いので「background01.jpg」ファイルを入れて下さい。 「ap…

ランキング参加中プログラミング[35]レビューフォーム [ホームに戻る] >> [37]ホームページ 「app\views\project\show.html.erb」ファイルにレビューを表示させる記述を追加します。 １．記述追加 app\views\project\show.html.erb(13行目) <span class="star-review"><i class="fa fa-star"></i> <%= @project.av</span>…

ランキング参加中プログラミング[34]レビューコントローラ [ホームに戻る] >> [36]レビュー表示 「app\views\project\show.html.erb」ファイルに以下の記述を追加します。 １．記述追加 app\views\project\show.html.erb（135行目） <span style="margin-left: 20px;"> <a class="button is-medium is-outlined is-danger toggle-modal" aria-control="<%= @project.id %>">レビューする</a> </span> …

ランキング参加中プログラミング[33]レビューモデル [ホームに戻る] >> [35]レビューフォーム 「app\controllers」フォルダに「reviews_controller.rb」ファイルを新規作成してください。 app\controllers\reviews_controller.rb(新規作成したファイル) clas…

ランキング参加中プログラミング[32]クレジットカード決済の実装 [ホームに戻る] >> [34]レビューコントローラ 「raty-js」をインストールします。 コマンド yarn add raty-js@2.9.0 「app\assets\stylesheets\application.scss」ファイルに以下の記述を追加…

ランキング参加中プログラミング[31]Stripe（ストライプ） [ホームに戻る] >> [33]レビューモデル 登録したクレジットカードで決済できるようにします。 「app\controllers\charge_controller.rb」ファイルを以下のように編集して下さい。 記述更新 app\cont…

ランキング参加中プログラミング[30]マイプロジェクトページ [ホームに戻る] >> [32]クレジットカード決済の実装 まずは以下の手順でStripeのアカウントを取得してください。 mrradiology.hatenablog.jp ダッシュボードで「公開可能キー」と「シークレットキ…

ランキング参加中プログラミング[29]サブスクリプション [ホームに戻る] >> [31]Stripe（ストライプ） 購入したプロジェクトを表示するページを作成します。 「app\controllers\project_controller.rb」ファイルに以下の記述を追加します。 記述追加 app\con…

ランキング参加中プログラミング[28]動画（Wistia） [ホームに戻る] >> [30]マイプロジェクトページ モデルを作成していきます。 コマンド rails g model Subscription project:references user:references 「db\migrate\20200804060608_create_subscription…

ランキング参加中プログラミング[27]Markdown関数 [ホームに戻る] >> [29]サブスクリプション 動画プレイヤーにWistiaを導入します。 wistia.com Freeのアカウントを作成してログインします。 Try for free ログインしたら「create」ボタンを押してサンプル…

ランキング参加中プログラミング[26]プロジェクトビュー [ホームに戻る] >> [28]動画（Wistia） Markdown関数を利用できるように実装していきます。 Markdown関数の詳しい使用方法は下記のページを参照して下さい。 guides.github.com 記述追加 GemFile(89行…

ランキング参加中プログラミング[25]プロジェクトコントローラー [ホームに戻る] >> [27]Markdown関数 写真をカルーセル表示できるようにします。 コマンド yarn add bulma-extensions 「app\javascript\packs\application.js」ファイルを以下のように書き換…

ランキング参加中プログラミング[24]タスク管理 [ホームに戻る] >> [26]プロジェクトビュー プロジェクトコントローラを作成します。 コマンド rails g controller Project index show app\controllers\project_controller.rb class ProjectController < App…

ランキング参加中プログラミング[23]プロジェクト管理 [ホームに戻る] >> [25]プロジェクトコントローラー タスクの管理モデルを作成します。 コマンド rails g trestle:resource Task タスクモデルに「有効化」「無効化」を格納するカラムを作成します。 コ…