記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
「一問一答アプリ × ChatGPT」
先日、ChatGPTを活用して一問一答アプリケーション「情報1 一問一答トレーニングGYM」を開発したことをお伝えしました。
▶︎こちらの記事で紹介しています。
![iqatlogo2](https://kotozeni.com/wp-content/uploads/2023/06/iqatlogo2-160x160.jpg)
私が開発したこのアプリは、ChatGPTの力を借りながら、実装していきました。
この記事では、一問一答アプリ × ChatGPTの開発の舞台裏や、実際の活用方法について詳しく解説します。
今回は
- JavaScriptを使った画面遷移
という機能を実装するにあたって、どのように役立ったのか、その様子を紹介します!
ぜひこのシリーズの記事をチェックして、一問一答アプリの新たな魅力とChatGPTとの相乗効果を体感してください!
![img-4372v2](https://kotozeni.com/wp-content/uploads/2023/06/img-4372v2-1024x576.jpg)
ユーザーが使用する一問一答画面を装飾していくにあたって、選択肢を設置する位置と、正解不正解が表示される位置に少し距離があると感じ、わざわざユーザーが画面をスクロールするのは申し訳ない、自動で正解不正解が表示される位置まで画面が遷移するようにしたいと考えました。
この機能はJavaScriptを使えば実装できそうです。
この機能自体は珍しいものでもなく、驚くようなものでもありません。
ただ、どのように実装するのかを少し忘れていたため、chatGPTに相談しました。
![対話履歴7(jsの画面遷移)](https://kotozeni.com/wp-content/uploads/2023/05/1f36d928f5fce98a0956806803138250.png)
![コトゼニ](https://kotozeni.com/wp-content/uploads/2022/06/face_20220627_144328.png)
<%= button_to ” エ “, “/questions/result”, {method: :post, params: {choice_id: @choices[3].id, question_id: @question.id}, class: “btn btn-outline-secondary buttons” }%>というコードをクリックしたとき、同じページの中の「 <div id=”result” class=”h4″></div> 」 という箇所まで画面が遷移するコードを教えてください
【プロンプト】
<%= button_to ” エ “, “/questions/result”, {method: :post, params: {choice_id: @choices[3].id, question_id: @question.id}, class: “btn btn-outline-secondary buttons” }%>
というコードをクリックしたとき、同じページの中の「 <div id=”result” class=”h4″></div> 」 という箇所まで画面が遷移するコードを教えてください
![chatGPT](https://kotozeni.com/wp-content/uploads/2023/04/ChatGPT_logo.png)
以下はJavaScriptを使って、クリックされたときにページ内スクロールで「#result」まで移動する方法です
<%= button_to " エ ", "/questions/result", {method: :post, params: {choice_id: @choices[3].id, question_id: @question.id}, class: "btn btn-outline-secondary buttons", onclick: "scrollToResult()" }%>
...
<script>
function scrollToResult() {
// #result要素の位置を取得
var resultElement = document.querySelector('#result');
var resultPosition = resultElement.getBoundingClientRect().top + window.pageYOffset;
// スクロールする
window.scrollTo({ top: resultPosition, behavior: 'smooth' });
}
</script>
これを元に実装した結果がこちら▼
よくWebページやアプリケーションで見かけるような機能ですが、なによりも強調したいのは実装に要した時間です。
なんと、実装に5分もかかっていません。
chatGPTに相談し、適切にコードをコピペして挙動を確認したら、動画の通りとなりました。
何度も書いていますが、これまで検索に要していた時間・目的の回答にたどり着くまでに時間を圧縮できるので非常に開発が捗ります!
今回はまさにその最たる例だと言えるのではないでしょうか。
今回の開発作業で
- JavaScriptを使った画面遷移
を実装することができました。
ChatGPTを利用すると開発がグンと楽になりますね!ChatGPTの可能性を体験してみてはいかがでしょうか?
chatGPTを利用すると開発がグンと楽になりますね!
最後まで読んでいただきありがとうございました。
この記事が少しでも参考になれば幸いです。
それではまたここで会いましょう!
![ブログランキング・にほんブログ村へ](https://b.blogmura.com/88_31.gif)
ブログ村に参加中です。上のバナーをクリックいただくだけで当ブログにポイントが入ります。いつも応援クリックありがとうございます。
Twitter やってます。
新着記事のお知らせをしていますのでぜひフォローしてください!スポンサーリンク