ランキング参加中プログラミング[２２]写真アップロード(dropzone)[ホームに戻る] >> [２４]写真カルーセル表示 アクションテキストをインストールします。 コマンド rails action_text:install マイグレーション適用 rails db:migrate 「app\models\room.rb…

ランキング参加中プログラミング[２１]部屋ビュー作成[ホームに戻る] >> [２３]アクションテキスト 複数の画像をアップロードできるようにします。 まずは「doropzone」のインストールをします。 コマンド yarn add dropzone@5.5.1 「app\assets\stylesheets…

ランキング参加中プログラミング[２０]部屋コントローラ作成[ホームに戻る] >> [２２]写真アップロード app\views\room\new.html.erb <section class="section"> <div class="container"> <article class="panel"> <div class="panel-heading"> お部屋の登録 </div> <div class="card"> <div class="card-content"> <div class="media"> <%= form_for @room do |f| %> </div></div></div></article></div></section>

ランキング参加中プログラミング[１９]部屋モデル作成[ホームに戻る] >> [２１]部屋ビュー作成 コマンド １文です。 rails g controller Rooms index new create listing pricing description photo_upload amenities location update app\controllers\rooms…

ランキング参加中プログラミング[１８]プロフィールページ作成[ホームに戻る] >> [２０]部屋コントローラ作成 コマンド 長いですが全部つながっています。１文です。 rails g model Room home_type:string room_type:string accommodate:bigint bed_room:big…

ランキング参加中プログラミング[１７]電話番号カラム追加[ホームに戻る] >> [１９]部屋モデル作成 ユーザープロフィールページを作成します。 「app\controllers\users_controller.rb」ファイルに以下のメソッドを追加します。 記述追加 app\controllers\us…

ランキング参加中プログラミング[１６]アマゾンS3[ホームに戻る] >> [１８]プロフィールページ作成 コマンド rails g migration AddExtraFieldsToUser phone_number:string コマンド マイグレーション rails db:migrate 電話番号カラムが追加されました。 電…

ランキング参加中プログラミング[１５]画像アップロード[ホームに戻る] >> [１７]電話番号カラム追加 herokuにアプリケーションをデプロイすると画像をローカルに保存することができません。 それに対応するため、アップロードした画像を全てアマゾンS3に保…

ランキング参加中プログラミング[１４]Gitにコミット[ホームに戻る] >> [１６]アマゾンS3 アバター画像をアップロードできるようにします。 コマンド rails g migration AddImageColumsToUser image コマンド rails active_storage:install コマンド マイグ…

ランキング参加中プログラミング[１３]アイコン[ホームに戻る] >> [１５]画像アップロード(ActiveStorage) 今まで行なった変更をGitにファイル送信してコミットします。 Gitにコミットしておけば好きなバージョンに巻き戻したり出来ますし、バックアップにも…

ランキング参加中プログラミング[１２]Googleフォント[ホームに戻る] >> [１４]Gitにコミット 「Font Awesome」のアイコンを使えるようにします。 fontawesome.com 「app\views\layouts\application.html.erb」ファイルに以下の記述を追加します。 記述追加 …

ランキング参加中プログラミング[１１]ダッシュボード[ホームに戻る] >> [１３]アイコン サイト fonts.google.com 上記のサイトで選んだフォントをサイトに適用することができます。 今回は「Kosugi Maru」というフォントを適用してみます。 https://fonts.g…

ランキング参加中プログラミング[１０]デバイス認証設定の修正[ホームに戻る] >> [１２]Googleフォント ユーザーモデルに項目を追加します。 コマンド rails g migration AddColumsToUser about:text status:boolean 「db\migrate\20200723123617_add_colums…

ランキング参加中プログラミング[０９]Gメール[ホームに戻る] >> [１１]ダッシュボード 「app\controllers」フォルダに「registrations_controller.rb」ファイルを新規作成します。 app\controllers\registrations_controller.rb(新規作成したファイル) clas…

ランキング参加中プログラミング[０８]フラッシュメッセージ[ホームに戻る] >> [１０]デバイス認証設定の修正 Gmailを使ってメールの送信をできるようにします。 以下の手順でGmailのセキュリティを２段階認証プロセスに変更し、アプリパスワードを生成して…

ランキング参加中プログラミング[０７]氏名認証[ホームに戻る] >> [０９]Gメール notyのデザインについては以下を参照して下さい。 ned.im notyはyarnを使ってインストールします。 コマンド yarn add noty 「app\javascript\packs\application.js」に以下の…

ランキング参加中プログラミング[０６]デバイス(devise)[ホームに戻る] >> [０８]フラッシュメッセージ ユーザーモデルに氏名の項目を追加します。 コマンド rails g migration AddFullnameToUser full_name:string コマンド マイグレーション適用 rails db:…

ランキング参加中プログラミング[０５]ナビゲーションバー(Bulma)[ホームに戻る] >> [０７]氏名認証 「devise」を利用してメールとパスワードでの認証ができるように実装します。 記述追加 GemFile(61行目) gem 'devise' GemFile source 'https://rubygems.o…

ランキング参加中プログラミング[０４]Windowsスタートアップ[ホームに戻る] >> [０６]デバイス(devise) Bulmaを利用してナビゲーションバーを構築します。 Bulmaの詳細については下記を参照してください。 bulma.io GemFileに以下の記述を追加します。 記述…