はじめに
こんにちは！スパイラル株式会社インターン生です。
この記事では、ローコード開発ツール「SPIRALver.1」のテンプレートを活用してお問い合わせフォームを作成し、そのお問い合わせフォームを生成AIであるChatGPTを使ってより便利にします。
こんな方に向けて書いてます
- ローコード開発ツールとAIの組み合わせについて知りたい方
お問い合わせフォームの作成
まずはSPIRALver.1のテンプレートを使用してお問い合わせフォームを作成します。
手順はこちらのサポートサイトをご確認ください。
設定が完了すると以下のようにアプリにお問い合わせフォームが追加されます。
通常のお問い合わせフォームはこんな感じです。
通販サイトっぽくしてみる
このままでも十分使えますが、今回は通販サイトのお問い合わせフォームっぽく変えてみます。
お問い合わせ内容の入力補完をしてくれるコードをChatGPTに書いてもらいました。
プロンプトは「inputではなくtextareaを使用してhtmlで問い合わせフォームの入力補完をするコードを書いてください。」です。
すると、以下のようなコードが生成されました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>問い合わせ内容の自動補完</title>
<style>
.autocomplete-suggestions {
border: 1px solid #ccc;
max-height: 150px;
overflow-y: auto;
position: absolute;
background-color: white;
z-index: 100;
}
.autocomplete-suggestion {
padding: 8px;
cursor: pointer;
}
.autocomplete-suggestion:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<h1>お問い合わせフォーム</h1>
<form action="#" method="POST">
<label for="query">問い合わせ内容:</label>
<textarea id="query" name="query" rows="4" cols="50" placeholder="問い合わせ内容を入力してください"></textarea>
<div id="autocomplete-suggestions" class="autocomplete-suggestions"></div>
<br><br>
<input type="submit" value="送信">
</form>
<script>
const textarea = document.getElementById('query');
const suggestionBox = document.getElementById('autocomplete-suggestions');
const suggestions = [
'商品について',
'注文について',
'配送について',
'返品・交換について',
'会員登録について',
'その他'
];
textarea.addEventListener('input', function() {
const query = textarea.value.trim().toLowerCase();
suggestionBox.innerHTML = ''; // 以前の候補をクリア
if (query.length > 0) {
const filteredSuggestions = suggestions.filter(item =>
item.toLowerCase().includes(query)
);
filteredSuggestions.forEach(suggestion => {
const div = document.createElement('div');
div.classList.add('autocomplete-suggestion');
div.textContent = suggestion;
div.addEventListener('click', function() {
textarea.value = suggestion;
suggestionBox.innerHTML = ''; // 候補をクリア
});
suggestionBox.appendChild(div);
});
}
});
document.addEventListener('click', function(event) {
// テキストエリアと候補ボックス外をクリックしたら候補を非表示にする
if (!suggestionBox.contains(event.target) && event.target !== textarea) {
suggestionBox.innerHTML = '';
}
});
</script>
</body>
</html>
このコードを基に入力フォームのhtmlを変更していきます。
変更前
<textarea class="$errorInputColor:inquiry$" name="inquiry" rows="4" wrap="soft" placeholder="※全角1000文字まで">$inquiry$</textarea><br>
変更後
<textarea id="query" class="$errorInputColor:inquiry$" name="inquiry" rows="4" wrap="soft" placeholder="※全角1000文字まで">$inquiry$</textarea><br>
「textarea」の直後に「id="query"」を追加しています。
さらに、ChatGPTが生成してくれたコードを基に
<style>
.autocomplete-suggestions {
border: 1px solid #ccc;
max-height: 150px;
overflow-y: auto;
position: absolute;
background-color: white;
z-index: 100;
}
.autocomplete-suggestion {
padding: 8px;
cursor: pointer;
}
.autocomplete-suggestion:hover {
background-color: #ddd;
}
</style>
と
<script>
const textarea = document.getElementById('query');
const suggestionBox = document.getElementById('autocomplete-suggestions');
const suggestions = [
'商品について知りたい',
'商品に不備があった',
'注文を変更したい',
'商品が届かない',
'商品を返品したい',
'商品を交換したい',
'身に覚えのない注文がある',
'会員登録の方法が分からない',
'退会方法が分からない',
];
textarea.addEventListener('input', function() {
const query = textarea.value.trim().toLowerCase();
suggestionBox.innerHTML = ''; // 以前の候補をクリア
if (query.length > 0) {
const filteredSuggestions = suggestions.filter(item =>
item.toLowerCase().includes(query)
);
filteredSuggestions.forEach(suggestion => {
const div = document.createElement('div');
div.classList.add('autocomplete-suggestion');
div.textContent = suggestion;
div.addEventListener('click', function() {
textarea.value = suggestion;
suggestionBox.innerHTML = ''; // 候補をクリア
});
suggestionBox.appendChild(div);
});
}
});
document.addEventListener('click', function(event) {
// テキストエリアと候補ボックス外をクリックしたら候補を非表示にする
if (!suggestionBox.contains(event.target) && event.target !== textarea) {
suggestionBox.innerHTML = '';
}
});
</script>
をhtmlにそれぞれ追加します。
すると、こんな感じでお問い合わせ内容が自動補完されるようになりました！
☟
☟
問い合わせ内容もしっかりDBに保存されています！
感想
今回はChatGPTにコードを生成してもらいました。私はプロンプトを書いて生成されたコードをただ写すだけだったので、こんな簡単にできちゃうのかと驚きでした。
ですが、生成AIが必ず正しく動くコードを生成してくれるわけではありません。そのため、プログラミング知識の必要性は今後も変わらないのではないかと考えました。
まとめ
今回はローコード開発プラットフォーム「SPIRAL」とChatGPTを組み合わせて、問い合わせ内容が自動で補完できるようにしてみました。皆さんもローコード開発ツールと生成AIの組み合わせを試してみてください！
参考にしたサイト
テンプレート「お問い合わせフォーム」をインポートする
基本テンプレートから選んでインポートする
ChatGPT
私がインターンしているスパイラル株式会社は、ローコードプラットフォーム、SPIRAL ver.1のトライアルアカウントを無償提供しています。このアカウントの記事でも紹介するように、たくさんの機能ございます。
▶︎ フォーム
▶︎ 認証エリア
▶︎ ログイン
▶︎ メール送信
▶︎ カスタムプログラム
などの作成できますので、ぜひ試してみてください!!
そして、今チームでトライアル登録者向けに、オンボーディングコンテンツを作成しています。SPIRAL ver.1にご興味のある方、ぜひこちらもご覧ください👇