2023年10月31日
XMLベースのアプローチ
XMLベースのアプローチ
前回の記事「手書き要素とAI自動化 - ブログ記事作成の挑戦」で取り上げた「XMLベースのアプローチ」について、HTMLの中にXMLデータを埋め込んで、それをJavaScriptで処理し表示するといった手順がおおよそできたので、それについて紹介したいと思います。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XML Processing</title>
</head>
<body>
<!-- XMLデータを含むコンテナ。非表示になっています。 -->
<div id="container" style="display: none;">
<conversation>
<qa order="1">
<question>明確な質問をする</question>
<answer>ChatGPTに（略）</answer>
</qa>
<!-- 他の qa 要素も続く -->
</conversation>
</div>
<!-- 質問と回答が表示されるコンテナ -->
<div id="output">
</div>
<script>
// ページが読み込まれたら以下の関数を実行
document.addEventListener("DOMContentLoaded", function () {
// XMLデータを含むコンテナを取得
var qaContainer = document.getElementById("container");
// 質問と回答を表示するコンテナを取得
var opContainer = document.getElementById("output");
// XMLデータを正しく取得
var xmlData = qaContainer.innerHTML;
// XMLデータを解析
// DOMParserを使用してXMLデータを解析するオブジェクトを作成
var parser = new DOMParser();
// XMLデータを解析し、XML文書を生成
var xmlDoc = parser.parseFromString(xmlData, "text/xml");
// XMLデータから qa 要素を取得
var qaPairs = xmlDoc.getElementsByTagName("qa");
// XML文書からすべての "qa" 要素を取得
for (var i = 0; i < qaPairs.length; i++) {
// "qa" 要素内から "question" 要素を取得
var questionElement = qaPairs[i].getElementsByTagName("question")[0];
// "qa" 要素内から "answer" 要素を取得
var answerElement = qaPairs[i].getElementsByTagName("answer")[0];
// 質問のテキストを取得
var question = questionElement.textContent;
// 回答のテキストを取得
var answer = answerElement.textContent;
// 新しい <div> 要素を作成
var qaElement = document.createElement("div");
// 質問と回答のペアを区別するためのクラスを設定
qaElement.className = "qa-pair";
// 質問と回答を表示するHTMLを生成
qaElement.innerHTML = "<strong>質問:</strong> " + question + "<br><strong>回答:</strong> " + answer;
// 質問と回答のペアを表示コンテナに追加
opContainer.appendChild(qaElement);
}
});
</script>
</body>
</html>
【このカテゴリーの最新記事】
-
no image
-
no image
-
no image
-
no image
この記事へのコメント
コメントを書く
この記事へのトラックバックURL
https://fanblogs.jp/tb/12282238
※ブログオーナーが承認したトラックバックのみ表示されます。
この記事へのトラックバック
