Rails6.0
ランキング参加中プログラミング | 26 | Facebook認証の実装 ホーム] >> | 28 | 予約モデルの実装 Google Cloud PlatformにGoogleアカウントでログインしてAPIキーを取得してください。 手順は以下の通りにお願いします。 mrradiology.hatenablog.jp GemFile…
ランキング参加中プログラミング | 25 | Googleマップ ホーム] >> | 27 | Google認証の実装 まずはFacebook for Developersでアカウントを作成しなければなりません。 developers.facebook.com アカウント、アプリの作成は以下の手順でお願いします。 mrradi…
ランキング参加中プログラミング | 24 | 写真カルーセル表示 ホーム] >> | 26 | Facebook認証の実装 Google Cloud PlatformにGoogleアカウントでログインしてAPIキーを取得してください。 手順は以下の通りにお願いします。 mrradiology.hatenablog.jp 記述…
ランキング参加中プログラミング | 23 | アクションテキスト ホーム] >> | 25 | Googleマップ 「app\assets\images」フォルダに「blank.jpg」「icon_add.png」ファイルを保存しておいてください。 記述追加 app\helpers\application_helper.rb（13行目） def…
ランキング参加中プログラミング | 22 | AmazonS3 ホーム] >> | 24 | 写真カルーセル表示 アクションテキストをインストールします。 コマンド rails action_text:install マイグレーション適用 rails db:migrate 「app\models\room.rb」ファイルを以下の内…
ランキング参加中プログラミング | 21 | 複数の写真をアップロード ホーム] >> | 23 | アクションテキスト herokuにアプリケーションをデプロイすると画像をローカルに保存することができません。 それに対応するため、アップロードした画像を全てアマゾンS3…
ランキング参加中プログラミング | 20 | 部屋ビューの作成 ホーム] >> | 22 | AmazonS3 複数の写真をアップロードできるようにします。 まずは「doropzone」のインストールをします。 コマンド yarn add dropzone@5.5.1 「app/javascript/stylesheets/applic…
ランキング参加中プログラミング | 19 | 部屋コントローラーの作成 ホーム] >> | 21 | 複数の写真をアップロード app\views\room\new.html.erb <br/> <br/> <div class="row"> <div class="col-sm-9" style="margin:0 auto;"> <div class="card text-center"> <h4 class="card-header text-center text-light bg-primary">部屋の新規登録</h4> </div></div></div></br/></br/>
ランキング参加中プログラミング | 18 | 部屋モデルの作成 ホーム] >> | 20 | 部屋ビューの作成 コマンド １文です。 rails g controller Rooms index new create listing pricing description photo_upload amenities location update app\controllers\room…
ランキング参加中プログラミング | 17 | プロフィールページ ホーム] >> | 19 | 部屋コントローラーの作成 コマンド 長いですが全部つながっています。１文です。 rails g model Room home_type:string room_type:string accommodate:bigint bed_room:bigint…
ランキング参加中プログラミング | 16 | 電話番号カラム追加 ホーム] >> | 18 | 部屋モデルの作成 ユーザープロフィールページを作成します。 「app\controllers\users_controller.rb」ファイルに以下のメソッドを追加します。 記述追加 app\controllers\use…
ランキング参加中プログラミング | 15 | 画像アップロード ホーム] >> | 17 | プロフィールページ コマンド rails g migration AddExtraFieldsToUser phone_number:string コマンド マイグレーション rails db:migrate 電話番号カラムが追加されました。 電…
ランキング参加中プログラミング | 14 | Githubにコミットする用 ホーム] >> | 16 | 電話番号カラム追加 アバター画像をアップロードできるようにします。 コマンド rails g migration AddImageColumsToUser image コマンド rails active_storage:install コ…
ランキング参加中プログラミング | 13 | アイコン(Font Awesome)の利用 ホーム] >> | 15 | 画像アップロード 今まで行なった変更をGithubにファイル送信してコミットします。 Githubにコミットしておけば、好きなバージョンに巻き戻したり出来ますし、バック…
ランキング参加中プログラミング | 12 | Googleフォント ホーム] >> | 14 | Githubにコミットする 「Font Awesome」のアイコンを使えるようにします。 fontawesome.com 「app\views\layouts\application.html.erb」ファイルに以下の記述を追加します。 記述…
ランキング参加中プログラミング | 11 | ダッシュボードの追加 ホーム] >> | 13 | アイコン(Font Awesome)の利用 サイト fonts.google.com 上記のサイトで選んだフォントをサイトに適用することができます。 今回は「Kosugi Maru」というフォントを適用して…
ランキング参加中プログラミング | 10 | パスワード確認の省略 ホーム] >> | 12 | Googleフォント ユーザーモデルに項目を追加します。 コマンド rails g migration AddColumsToUser about:text status:boolean 「db\migrate\20200723123617_add_colums_to_u…
ランキング参加中プログラミング | 09 | Gmailの設定 ホーム] >> | 11 | ダッシュボードの追加 ユーザー編集ページを更新してパスワードのフィールドを減らします。 ユーザ情報を更新する際に今までは現在のパスワードを入力していましたが、今回の変更によ…
ランキング参加中プログラミング | 08 | フラッシュメッセージ(noty) ホーム] >> | 10 | パスワード確認の省略 Gmailを使ってメールの送信をできるようにします。 以下の手順でGmailのセキュリティを２段階認証プロセスに変更し、アプリパスワードを生成して…
ランキング参加中プログラミング | 07 | ログイン機能の実装 ホーム] >> | 09 | Gmailの設定 notyのデザインについては以下を参照して下さい。 ned.im notyはyarnを使ってインストールします。 コマンド yarn add noty 「app\javascript\packs\application.j…
ランキング参加中プログラミング | 06 | ナビゲーションバーの実装 ホーム] >> | 08 | フラッシュメッセージ(noty) ユーザーモデルに氏名の項目を追加します。 コマンド rails g migration AddFullnameToUser full_name:string コマンド マイグレーション適…
ランキング参加中プログラミング | 05 | deviceの利用| ホーム] >> | 07 | ログイン機能の実装 まずはホームページのコントローラ作成です。 コマンド rails g controller Pages home ナビゲーションバーを作成していきます。 「app\views」フォルダに「shar…
ランキング参加中プログラミング | 04 | Bootstrapの利用 ホーム] >> | 06 | ナビゲーションバーの実装 「devise」を利用してメールとパスワードでの認証ができるように実装します。 記述追加 GemFile(56行目) gem 'devise' GemFile source 'https://rubygem…
ランキング参加中プログラミング | 03 | アプリケーションの作成 ホーム] >> | 05 | deviceの利用 Bootstrapを利用する準備をします。 Yarnで必要なパッケージ「Bootstrap」「jquery」「popper.js」をインストールします。 コマンド yarn add jquery@3.6.0 b…
ランキング参加中プログラミング | 02 | Railsをインストール ホーム] >> | 04 | Bootstrapの利用 アプリケーション名「Minpaku2」を作成 コマンド rails _6.0.4.7_ new Minpaku2 -d postgresql アプリケーションの作成 ターミナルで作成された「Minpaku2」…
ランキング参加中プログラミング | 01 | 開発環境を整える ホーム] >> | 03 | アプリケーションの作成 「Visual Studio Code」を開き、「ターミナル」の「新しいターミナル」を選択してターミナルを開きます。 新しいターミナル 下に起動したターミナルでデ…
ランキング参加中プログラミング [ホーム] >> | 02 | Railsをインストール 民泊施設の登録、編集、予約など、民泊を行うために必要な機能を備えたサイトをRuby on Railsバージョン6で構築するための手順を書いていきます。 今回は、MacOSXのみで開発を進めて…
ランキング参加中プログラミング11 | モデルからデータを抽出して表示 ＜＜ [ホーム] 写真ボタンを押すと、それぞれの写真詳細ページにジャンプするようにします。 ビューに写真の詳細ページ用の新しいメソッドを追加します。 「testapp/views.py」ファイル…
ランキング参加中プログラミング10 | ビューの編集 ＜＜ [ホーム] ＞＞ 12 | 写真詳細ページ作成 ビューに写真モデルの読み込みを定義します。 from .models import Picture 「testapp/views.py」ファイルを以下のように編集します。 記述追加 【testapp/vie…
ランキング参加中プログラミング09 | 管理ダッシュボードのカスタマイズ ＜＜ [ホーム] ＞＞ 11 | モデルからデータを抽出して表示 ビューの編集方法を解説していきます。 まずは「testapp/views.py」ファイルを編集します。 picture_data変数に格納した文字…
