田端厚賢 
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OpenAI API フォーム</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script>
// 文章を変数として定義
const text1 = `以下のケーススタディにおける問題点と解決策を表にまとめて。
＜ケーススタディ＞
A社は自社の基幹システムを刷新するため、ITベンダーのB社にシステム開発を依頼しました。A社はB社に対して要件定義書と設計書を私、3か月後に納品を依頼しました。
しかし、3か月後にB社から納品されたシステムはA社の要件定義書や設計書とは異なる仕様となっていました。A社はB社に対して仕様の相違点を指摘・修正を依頼しました。
その後B社はA社からの指摘事項を修正し、再びシステムを納品しました。しかし今度はA社の要件定義書や設計書にはない機能が追加されていました。A社はB社に対して追加された機能を削除するよう依頼しました。
B社はA社からの依頼通り、追加した機能を削除し、システムを再び納品しました。しかし今度はA社の要件定義書や設計書に記載されている機能が一部実装されていませんでした。A社はB社に対し要件定義書や設計書に記載されている機能を全て実装するよう依頼しました。
このようなやりとりが続き、結果としてA社が想定していたスケジュールは後ろ倒しを余儀なくされ、B社に対するA社の信頼も失われてしまいました。`; // バックティックを使用
const text2 = 'ここに文章2の内容';
const text3 = 'ここに文章3の内容';
const text4 = 'ここに文章4の内容';
// ボタンがクリックされたときの関数（個別に定義）
function insertText1() {
document.getElementById("question").value = text1;
}
function insertText2() {
document.getElementById("question").value = text2;
}
function insertText3() {
document.getElementById("question").value = text3;
}
function insertText4() {
document.getElementById("question").value = text4;
}
</script>
</head>
<body>
<div class="container mt-5">
<h2 class="mb-4">OpenAI API テストフォーム</h2>
<label for="question">私は日本語に対応したAIアシスタントです。あなたの質問にチャット形式で回答します。:</label>
<!-- ボタンを追加、変数を使用 -->
<div class="mb-3">
<button onclick="insertText1()" class="btn btn-secondary">文章1</button>
<button onclick="insertText2()" class="btn btn-secondary">文章2</button>
<button onclick="insertText3()" class="btn btn-secondary">文章3</button>
<button onclick="insertText4()" class="btn btn-secondary">文章4</button>
</div>
<form method="post">
<div class="form-group">
<textarea class="form-control" id="question" name="question" required rows="10"></textarea>
</div>
<button type="submit" class="btn btn-primary">送信</button>
</form>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_POST["question"])) {
$apikey = "sk-〇〇〇"; // APIキーに置き換えてください
$url = "https://api.openai.com/v1/chat/completions";
// リクエストヘッダー
$headers = array(
'Content-Type: application/json',
'Authorization: Bearer ' . $apikey
);
// リクエストボディ
$data = array(
'model' => 'gpt-3.5-turbo',
'messages' => [
["role" => "system", "content" => "私は日本語に対応したAIアシスタントです。あなたの質問にチャット形式で回答します。"],
['role' => 'user', 'content' => $_POST["question"]],
],
'max_tokens' => 500,
);
// cURLを使用してAPIにリクエストを送信
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
$response = curl_exec($ch);
curl_close($ch);
// 結果をデコード
$result = json_decode($response, true);
if (isset($result["choices"][0]["message"]["content"])) {
$result_message = $result["choices"][0]["message"]["content"];
} else {
$result_message = "エラーが発生しました。";
}
// 結果を出力
echo '<div class="alert alert-success mt-4">レスポンス: ' . htmlspecialchars($result_message) . '</div>';
}
?>
</div>
<!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.0.7/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
テンプレートリテラルとは？
テンプレートリテラルは、ECMAScript 2015 (ES6) で導入されたJavaScriptの機能で、文字列を作成する新しい方法です。従来の文字列リテラル（シングルクオート'やダブルクオート"で囲まれた文字列）に代わるもので、バックティック（`）を使用して定義します。テンプレートリテラルは、複数行にわたる文字列や、埋め込み式（式の結果を文字列中に挿入する機能）を扱うことができるため、動的な文字列の生成が簡単に行えるようになります。
テンプレートリテラルの特徴
- 複数行の文字列: バックティックで囲まれた範囲内では、改行を直接入力できます。従来の方法では、文字列の途中で改行する場合に
\nを使用したり、文字列を連結する必要がありましたが、テンプレートリテラルではそのような手間が不要になります。 - 式の埋め込み:
${}構文を使用して、任意のJavaScript式を文字列中に埋め込むことができます。式の評価結果がその場に挿入されます。これにより、変数の値を文字列中に動的に組み込んだり、計算結果を直接文字列に反映させたりすることが簡単になります。
テンプレートリテラルの例
// 複数行の文字列
const greeting = `こんにちは、
世界！`;
console.log(greeting);
// 出力: こんにちは、
// 世界！
// 式の埋め込み
const name = "太郎";
const message = `こんにちは、${name}さん！`;
console.log(message); // 出力: こんにちは、太郎さん！
// 計算式の埋め込み
const price = 500;
const taxRate = 0.1;
const totalPrice = `合計金額は${price * (1 + taxRate)}円です。`;
console.log(totalPrice); // 出力: 合計金額は550円です。テンプレートリテラルは、従来の文字列操作に比べて直感的で読みやすいコードを書くことが可能になるため、JavaScriptで動的な文字列を扱う場合の推奨される方法です。