お問合せページの実装～ChatGPTと一緒に一問一答アプリを開発した話⑧～ - コトゼニ～学習塾とボクと、時々プログラミング〜

【PR】この記事には広告を含む場合があります。

記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

「一問一答アプリ × ChatGPT」

先日、ChatGPTを活用して一問一答アプリケーション「情報1 一問一答トレーニングGYM」を開発したことをお伝えしました。

▶︎こちらの記事で紹介しています。

2023年6月2日【ChatGPTと開発】高校「情報1」一問一答アプリ

私が開発したこのアプリは、ChatGPTの力を借りながら、実装していきました。

この記事では、一問一答アプリ × ChatGPTの開発の舞台裏や、実際の活用方法について詳しく解説します。

今回は

お問合せページの実装

にあたって、どのように役立ったのか、その様子を紹介します！

1 目的
2 手順1：ビューファイルを作成
3 手順2：コントローラー、ルーティングを作成
4 まとめ

目的

作成には万全を期しているものの、誤植などはユーザーの方が見つけやすいもの。そういったコンタクトをいただくために、お問合せページを実装しようと考えました。

コトゼニ

お問合せはオーソドックスなもので問題ないので、chatGPTに土台を作ってもらおう

手順1：ビューファイルを作成

お問い合わせページに余分な機能は必要ないので、必要最小限なものだけを実装しようと考えました。そのため、オーソドックスなものであればchatGPTはどれだけ「そのまま流用できるコード」を返してくれるのか、非常に興味があったので、プロンプトを投げました。

コトゼニ

お問い合わせページで必要な情報です。以下の要件を満たすビューファイルを作ってください。

▼要件：

①ページURLは/contactとする。HTTPメソッドはget②h2タグで「お問い合わせ」と表記③h2タグの下にお問い合わせページに関する簡易説明文を50字程度で作る④フォームの内容は上から順に「氏名（必須）」「メールアドレス（必須）」「題名（必須）」「メッセージ本文」とする。また、送信ボタンと「メッセージ本文」の間に、個人情報に関する規約に同意するのチェックボタンを設置する。個人情報に関する規約についてはスクロールボックスにする

chatGPT

以下は、要件を満たすビューファイルの例です。

<!-- app/views/contact/index.html.erb -->

<h2>お問い合わせ</h2>

<p>お問い合わせページに関する簡易説明文をここに記述してください（50字程度）。</p>

<%= form_with url: "/contact", method: "get" do |form| %>
  <div>
    <%= form.label :name, "氏名（必須）" %>
    <%= form.text_field :name, required: true %>
  </div>
  
  <div>
    <%= form.label :email, "メールアドレス（必須）" %>
    <%= form.email_field :email, required: true %>
  </div>
  
  <div>
    <%= form.label :subject, "題名（必須）" %>
    <%= form.text_field :subject, required: true %>
  </div>
  
  <div>
    <%= form.label :message, "メッセージ本文" %>
    <%= form.text_area :message %>
  </div>
  
  <div>
    <%= form.check_box :agree_to_privacy_policy %>
    <%= form.label :agree_to_privacy_policy, "個人情報に関する規約に同意する" %>
    
    <div class="privacy-policy-modal">
      <div class="scroll-box">
        <p>ここに個人情報利用規約の文章を記載します。</p>
        <p>ここに個人情報利用規約の文章を記載します。</p>
        <p>ここに個人情報利用規約の文章を記載します。</p>
        <p>ここに個人情報利用規約の文章を記載します。</p>
        <p>ここに個人情報利用規約の文章を記載します。</p>
        <p>ここに個人情報利用規約の文章を記載します。</p>
        <p>ここに個人情報利用規約の文章を記載します。</p>
        <p>ここに個人情報利用規約の文章を記載します。</p>
        <p>ここに個人情報利用規約の文章を記載します。</p>
        <p>ここに個人情報利用規約の文章を記載します。</p>
      </div>
    </div>
  </div>
  
  <div>
    <%= form.submit "送信" %>
  </div>
<% end %>

手順2：コントローラー、ルーティングを作成

コトゼニ

すごい…この調子でルーティングやコントローラーも土台を作ってもらおう

ということで、ビューファイルを呼び出すために、ルーティングとコントローラーを設定する必要がありますので、プロンプトを投げました。

コトゼニ

それでは、お問い合わせフォームに対応し、かつ自動返信機能を備えたコントローラーのコード例を書いてください。また、もし必要ならルーティングのコードも書いてください。

chatGPT

以下は、要件を満たすビューファイルの例です。

class ContactsController < ApplicationController
  def new
    @contact = Contact.new
  end

  def create
    @contact = Contact.new(contact_params)
    if @contact.save
      # お問い合わせフォームの入力内容を自動返信メールに記載
      ContactMailer.send_when_create(@contact).deliver_now
      # 送信完了ページへリダイレクト
      redirect_to thanks_path
    else
      render :new
    end
  end

  private

  def contact_params
    params.require(:contact).permit(:name, :email, :title, :message, :confirming)
  end
end

Rails.application.routes.draw do
  get '/contact', to: 'contacts#new'
  post '/contact', to: 'contacts#create'
  get '/thanks', to: 'contacts#thanks'
end

という回答をもらいました。

コトゼニ

ほぼほぼ使えますやん…！

ということで、一部加筆修正しましたが実装したプロトタイプがこちら