フリーランスの仕事を登録・購入できるWebサイトを作成する
ランキング参加中プログラミング[29]申し込み [ホームに戻る] >> [31]仕事完了 申込みの確認が出来るようにします。 「app\controllers\requests_controller.rb」ファイルに以下の記述を追加します。 １．記述追加 app\controllers\requests_controller.rb(4…
ランキング参加中プログラミング[28]仕事のリクエスト [ホームに戻る] >> [30]仕事を受ける お仕事を売る人がリクエストに申し込み出来るようにします。 オファーモデルを作成します。 コマンド 一文です。 rails g model Offer note:text amount:bigint day…
ランキング参加中プログラミング [27]注文の確認 [ホームに戻る] >> [29]申し込み 買い主が仕事をリクエストできるようにします。 リクエストモデルを作成します。 コマンド 一文です。 rails g model Request description:text title budget:bigint deliver…
ランキング参加中プログラミング [26]注文コントローラとビュー [ホームに戻る] >> [28]仕事のリクエスト ルートの設定をします。 記述追加 config\routes.rb(14,15行目) get '/selling_orders', to: 'orders#selling_orders' get '/buying_orders', to: 'or…
ランキング参加中プログラミング [25]注文モデル [ホームに戻る] >> [27]注文の確認 注文コントローラを作成していきます。 「app\controllers」フォルダに「orders_controller.rb」ファイルを新規作成してください。 app\controllers\orders_controller.rb(…
ランキング参加中プログラミング [24]仕事の表示 [ホームに戻る] >> [26]注文コントローラとビュー 注文のモデルを作成していきます。 まずは「uuid」を使えるように設定します。 コマンド rails generate migration enable_pgcrypto_extension 作成された「…
ランキング参加中プログラミング [23]dropzone [ホームに戻る] >> [25]注文モデル ナビゲーションバーにリンクを追加します。 記述追加 app\views\shared\_navbar.html.erb 72行目に「」のリンクを追加しています。 <nav class="navbar is-danger" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> <a class="navbar-item" href="/"> <h1>テストサイトOshigoto</h1> </a> <…</div></nav>
ランキング参加中プログラミング [22]仕事登録 [ホームに戻る] >> [24]仕事の表示 複数の画像をアップロードできるようにします。 コマンド yarn add dropzone@5.5.1 「app\assets\stylesheets\application.scss」ファイルに以下の記述を追加します。 記述追…
ランキング参加中プログラミング [21]仕事ビュー [ホームに戻る] >> [23]dropzone 仕事の内容を登録できるようにします。 実際に登録して試すことはまだできません。 「app\views\gigs\edit.html.erb」ファイルを以下のように編集します。 app\views\gigs\ed…
ランキング参加中プログラミング [20]仕事コントローラ [ホームに戻る] >> [22]仕事登録 仕事ビューを作成していきます。 「app\views\gigs\new.html.erb」ファイルの記述を以下の内容に変更します。 app\views\gigs\new.html.erb <section class="section"> <div class="container"> <div class="steps" id="stepsDemo"> <div class="step-item is-active is-primary"> </div></div></div></section>
ランキング参加中プログラミング [19]仕事モデル [ホームに戻る] >> [21]仕事ビュー 仕事コントローラを作成していきます。 コマンド rails g controller Gigs new create edit update show --no-test-framework ルートの設定をします。 自動で書かれた記述…
ランキング参加中プログラミング [18]プロフィールページ [ホームに戻る] >> [20]仕事コントローラ 仕事のモデルを作成します。 コマンド（４つ） rails g model Category name --no-test-framework 一文です。 rails g model Gig title video active:boolea…
ランキング参加中プログラミング [17]アカウント連携の表示 [ホームに戻る] >> [19]仕事モデル ユーザープロフィールページを作成します。 「app\controllers\users_controller.rb」ファイルに以下のメソッドを追加します。 記述追加 app\controllers\users_…
ランキング参加中プログラミング [16]アマゾンS3 [ホームに戻る] >> [18]プロフィールページ ダッシュボードビューに以下の記述を追加します。 記述追加 app\views\users\dashboard.html.erb(145行目) <div class="content"> <p> <strong>アカウント連携</strong><br/> <% if current_user.provider %> <span class="has-text-success">Face</span></br/></p></div>…
ランキング参加中プログラミング [15]画像アップロード(ActiveStorage) [ホームに戻る] >> [17]アカウント連携の表示 herokuにアプリケーションをデプロイすると画像をローカルに保存することができません。 それに対応するため、アップロードした画像を全て…
ランキング参加中プログラミング [14]GitHubとの同期 [ホームに戻る] >> [16]アマゾンS3 アバター画像をアップロードできるようにします。 コマンド rails active_storage:install コマンド マイグレーションの適用 rails db:migrate 「app\models\user.rb」…
ランキング参加中プログラミング [13]アイコン(Font Awesome) [ホームに戻る] >> [15]画像アップロード(ActiveStorage) 今まで行なってきた変更内容をGithubに送信して同期します。 ソース管理を選択します。 ソース管理 「＋」をクリックして全ての変更をス…
ランキング参加中プログラミング [12]Googleフォント [ホームに戻る] >> [14]GitHubとの同期 「Font Awesome」のアイコンを使えるようにします。 fontawesome.com 「app\views\layouts\application.html.erb」ファイルに以下の記述を追加します。 記述追加 a…
ランキング参加中プログラミング [11]ダッシュボード [ホームに戻る] >> [13]アイコン(Font Awesome) サイト fonts.google.com 上記のサイトで選んだフォントをサイトに適用することができます。 今回は「Kosugi Maru」というフォントを適用してみます。 htt…
ランキング参加中プログラミング [10]Gメール [ホームに戻る] >> [12]Googleフォント ユーザコントローラーを作成します。 コマンド rails g controller Users dashboard 作成したユーザコントローラの内容を更新します。 記述更新 app\controllers\users_co…
ランキング参加中プログラミング [09]Facebook認証 [ホームに戻る] >> [11]ダッシュボード Gmailを使ってメールの送信をできるようにします。 以下の手順でGmailのセキュリティを２段階認証プロセスに変更し、アプリパスワードを生成してください。 mrradiol…
ランキング参加中プログラミング [08]フラッシュメッセージ(noty) [ホームに戻る] >> [10]Gメール まずはFACEBOOK for Developmentでアカウントを作成しなければなりません。 developers.facebook.com アカウント、アプリの作成は以下の手順でお願いします。…
ランキング参加中プログラミング [07]氏名認証 [ホームに戻る] >> [09]Facebook認証 notyのデザインについては以下を参照して下さい。 ned.im notyはyarnを使ってインストールします。 コマンド yarn add noty 「app\javascript\packs\application.js」に以…
ランキング参加中プログラミング [06]デバイス（device） [ホームに戻る] >> [08]フラッシュメッセージ(noty) ユーザーモデルに氏名等の項目を追加します。 コマンド rails g migration AddColumsToUser full_name from about:text language status:boolean …
ランキング参加中プログラミング [05]ナビゲーションバー(Bulma) [ホームに戻る] >> [07]氏名認証 メールとパスワードでの認証を作成します。 記述追加 GemFile(60行目) gem 'devise' GemFile source 'https://rubygems.org' git_source(:github) { |repo| "…
ランキング参加中プログラミング [04]MacOSXでのスタートアップ [ホームに戻る] >> [06]デバイス（device） ナビゲーションバーを使えるようにBulmaの設定をします。 bulma.io GemFileに以下の記述を追加します。 記述追加 GemFile(56行目) gem 'bulma-rails…
ランキング参加中プログラミング [03]Windowsでのスタートアップ [ホームに戻る] >> [05]ナビゲーションバー(Bulma) 「Visual Studio Code」を開き、「ターミナル」の「新しいターミナル」を選択してターミナルを開きます。 新しいターミナル 下に起動したタ…
ランキング参加中プログラミング [02]MacOSXで必要なインストール [ホームに戻る] >> [04]MacOSXでのスタートアップ 「Visual Studio Code」を開き、「ターミナル」の「新しいターミナル」を選択してターミナルを開きます。新しいターミナル「C」ドライブに…
ランキング参加中プログラミング [01]Windowsで必要なインストール [ホームに戻る] >> [03]Windowsでのスタートアップ Postgresqlのインストール バージョン11.8( postgresql-11.8-2-osx) 以下の手順でインストールしてください。 mrradiology.hatenablog.jp…
ランキング参加中プログラミング[ホームに戻る] >> [02]MacOSXで必要なインストール Postgresqlのインストール バージョン11.8( postgresql-11.8-1-windows-x64.exe) https://www.enterprisedb.com/downloads/postgres-postgresql-downloads以下の手順でイン…
