常連

以下のサイトでアコーディオンメニューを作ったのですが、アコーディオンが開いた状態で始まります。 
http://liginc.co.jp/web/js/jquery/34048 

閉じた状態で始まるようにするにはどうすればよいでしょうか？

スライドトグルで最初は閉じた状態にしたい。

###前提・実現したいこと
eclipseでjava開発(Framework:spring)をしています。
xhtml、xmlソースコードで以下の警告が発生しました。

###発生している問題・警告メッセージ
・文書に対する文法制約（DTDまたはXMLスキーマ）の参照がありません 
・タグのロケーション(p)が無効です。

###補足・試したこと
・ネットなどで調べたところ、実装上問題はないため無視(警告がでないように設定)してよい
と書いているのですが、同じ環境(ソースも同じ)で開発している他の方の環境では上記警告が発生しないため困っています。
・同じ環境で開発している他の方の設定(クラスパスの見直し)確認などをしましたが
特に差分を発見できませんでした。
・開発初心者のため記載など不備があると思いますが、ご教授お願いいたします。

eclipse　警告　文書に対する文法制約（DTDまたはXMLスキーマ）の参照がありません 

電子書籍の原稿として使用しているepub（縦書き）ファイルを縦書きのままPDFに変換しようとしています。「Calibre」という電子書籍編集ツールで変換自体はできたのですが、ページ端で文字が見切れてしまう現象が起きて、このままでは使えません。
　
　
### 概要
**変換したPDF上で発生する現象**
- 現象１：ページの端で文字が見切れる（毎回）（画像参照）
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-04-20/fb9b2f01-a5eb-4599-8b67-bed8520b8319.jpeg)
　
**試したこと**
- 出力時の余白の設定や、EPUB内の縦書き用のコード等を変えてみても解決できませんでした。**そもそもCalibreの仕様の問題ではないかと疑っています。**　それなら諦めもつくのですが…。
- 横書きのEPUBでは発生していません。
　
**やりたいこと**
- KDP出版で使用しているepubデータを使ってペーパーバック出版がしたい（PDF形式のみなので変換する必要がある）（他の方法があるなら知りたい）
- 縦書きEPUBデータをそのまま使って縦書きPDFを作る方法を探しています
　
### 現象の確認方法
0. テスト用文章として、[青空文庫（芥川龍之介 桃太郎）](https://www.aozora.gr.jp/cards/000879/files/100_15253.html)　の文章をコピペしてtxtで保存する（ファイル名は「test.txt」とします）
0. [calibre（窓の杜）](https://forest.watch.impress.co.jp/library/software/calibre/)に１のtest.txtを追加する（「本を追加」）
0. タイトル上で右クリックから「本を変換→個別に変換→出力フォーマット（EPUB)→OK」と操作する。
0. タイトル上で右クリックから「書籍編集」する。
0. 「stylesheet.css」内の最下部に縦読み用コードの「html { -epub-writing-mode: vertical-rl; }」を書き加える。（下部のコード参照）
0. 「content.opf」内の「<spin toc="ncx">」を「  <spine page-progression-direction="rtl" toc="ncx">」と書き換える。（下部のコード参照）
0. 「保存」する。
0. メイン画面に戻り、タイトル上で右クリックから「本を変換→個別に変換→入力フォーマット（EPUB)→出力フォーマット（PDF)→OK」と操作する。
0. 生成されたPDFをプレイビューなどで確認する。（右側の所持フォーマットから確認できる）
　
```stylesheet.css
.calibre {
    display: block;
    font-size: 1em;
    padding-left: 0;
    padding-right: 0;
    margin: 0 5pt
    }
.calibre1 {
    display: block;
    margin: 1em 0
    }
.softbreak {
    display: block;
    page-break-before: avoid;
    text-align: center;
    margin: 0.5em 0 1em
    }
.whitespace {
    display: block;
    text-align: center;
    margin: 0
    }
html {
    -epub-writing-mode: vertical-rl;
    }
```

```content.opf
<?xml version="1.0"  encoding="UTF-8"?>
<package xmlns="http://www.idpf.org/2007/opf" version="2.0" unique-identifier="uuid_id">
  <metadata xmlns:opf="http://www.idpf.org/2007/opf" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:dcterms="http://purl.org/dc/terms/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:calibre="http://calibre.kovidgoyal.net/2009/metadata">
    <dc:title>test</dc:title>
    <dc:creator opf:role="aut" opf:file-as="不明">不明</dc:creator>
    <dc:identifier id="uuid_id" opf:scheme="uuid">9b4fb56f-4741-4a8e-b943-96e4c39e45b3</dc:identifier>
    <dc:contributor opf:role="bkp">calibre (5.40.0) [https://calibre-ebook.com]</dc:contributor>
    <dc:date>0101-01-01T00:00:00+00:00</dc:date>
    <dc:identifier opf:scheme="calibre">9b4fb56f-4741-4a8e-b943-96e4c39e45b3</dc:identifier>
    <meta name="calibre:timestamp" content="2022-04-20T04:39:19.876016+00:00"/>
    <meta name="calibre:title_sort" content="test"/>
    <meta name="cover" content="cover"/>
    <meta name="calibre:author_link_map" content="{&quot;不明&quot;: &quot;&quot;}"/>
  </metadata>
  <manifest>
    <item id="titlepage" href="titlepage.xhtml" media-type="application/xhtml+xml"/>
    <item id="html" href="index.html" media-type="application/xhtml+xml"/>
    <item id="ncx" href="toc.ncx" media-type="application/x-dtbncx+xml"/>
    <item id="page_css" href="page_styles.css" media-type="text/css"/>
    <item id="css" href="stylesheet.css" media-type="text/css"/>
    <item id="cover" href="cover_image.jpg" media-type="image/jpeg"/>
  </manifest>
  <spine page-progression-direction="rtl" toc="ncx">
    <itemref idref="titlepage"/>
    <itemref idref="html"/>
  </spine>
  <guide>
    <reference type="cover" href="titlepage.xhtml" title="Title page"/>
  </guide>
</package>

```
　
**簡単に確認する方法（コードコピペが面倒な方）**

0. テスト用文章として、[青空文庫（芥川龍之介 桃太郎）](https://www.aozora.gr.jp/cards/000879/files/100_15253.html)　の文章を「.txt」にコピペする。
0. [でんでんコンバーター](https://conv.denshochan.com/)に「右から左 縦書き」にチェックを入れてEPUB出力する。（タイトルと作者名は適当な文字で）
0. [calibre（窓の杜）](https://forest.watch.impress.co.jp/library/software/calibre/)に２で生成した縦書きEPUBを読み込み、「本を変換→個別に変換→出力フォーマット（PDF)→OK」と操作する。
0. 生成された縦書きPDFをプレイビュー等で確認する。

「Calibre」で「epub（縦書き）」を「PDF」変換するとページ端で文字が見切れてしまう。

会社で作っているウェブサイトをいくつか引き継いで運営しているのですが、すべてXHTML1.0で作られています。
今はそれで問題なく動いていますし、今後も変更の予定はないのですが、

現在の主流はやっぱりHTML5なのでしょうか？

正直XHTMLとHTML5の明確な違いっていうものが分かっておらず、HTML5がどういうものかもよくわかっておりません。
SEO的に有利不利があるのか、みなさんはどちらで作っているのかを知りたいです。

よろしくお願いいたします。

XHTMLとHTML5の違いについて

ありがとうございました
解決しましたので質問内容を編集しました。
回答助かりました。

JSFでの文字列表示について

### chat gpt apiを利用して、困りごとに関する相談に的確に応答できるようにしたい
チャットgptが日本語に対応していて、従来の想定質問による選択ではなくて、少しの特徴を踏まえた入力が必要になるものの、システムを構築する手間が少なくなり、ユーザーエクスペリエンスを強化できると考えています。
基本的なスクリプトをネットで探して、それにエラー処理などを追加していきました。
チャットgptのことはチャットgptに聞けということで、頑張ってきましたが、とうとうちゃっとgptも問題がないと言い始めてしまいました。
もともと、curl関数やJavascriptに長けていないので、想定されたエラーメッセージも返されず、待機中にもならないということで、質問させていただきます。
### 前提
ユーザーがチャットgptに問いかけたら、カウンセラーのように寄り添いながら、ユーザーの困りごとを聞き取り、困りごとの改善に向けた制度や連絡先を提供できるようにと考えています。
従来の選択式よりも、利便性を増したものができると期待しています。困りごとが解決しなくても、話してユーザー自身が状況を整理することもできたりということも期待しています。
複数のユーザーが同時に利用できるように、8桁のファイルナンバーを生成し、そこに履歴を蓄える仕組みにしています。
スクリプトも履歴も含めてAPIに送信するものを選びました。
APIキーは確実に正しいのですが（基本のテストでは動作していた）、エラー処理を追加していく段階でどこかでおかしくなってしまったようです。
### フォームにメッセージを入力して、送信ボタンを押すと、何も表示されなくなります
私のあまりあてにならない感では、Javascriptに問題があるのではないかと思っています。
想定されたエラーメッセージも表示されず、強制停止と言った感じです。


### 以下がソースコードです
関係ないかもしれないなぁと思うファイルも関連を示すために提示します。
index.php
```
<?
$fname=mt_rand(0,99999999);
$fp=fopen("data/".$fname.".txt","w");
fwrite($fp,"");
fclose($fp);
print <<<output

<!DOCTYPE html>
<html>
<head>
<title>ChatGPT API</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="js/chatapi.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

<header>
<h1>チャットで相談</h1>
</header>

<section>
<form autocomplete="off">
<label for="message">何でも話してみてね:</label><br>
<input type="text" id="message" name="message" required>
<input type="hidden" id="fname" name="fname" value="{$fname}">
<input type="submit" value="入力内容を送信" onclick="showLoadingAnimation()"><br>
<a href="php/reset.php">会話をリセット</a>
</form>

<div id="loading">
<img src="img/loading.gif" alt="Loading..." /> 読み込み中...
</div>

<div id="chat-history"></div>
</section>

</body>
</html>
output;
?>
```
chatapi.js
```
$(document).ready(function() {
	
	// アクセス時にチャットを読み込む
	$.ajax({
    url: "./php/get-history.php?fn="+$("#fname").val(),
    type: "GET",
    dataType: "html",
    success: function(data) {
        $("#chat-history").html(data);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.log(textStatus, errorThrown);
    }
});

// 以降1秒おきにチャットを読み込む
setInterval(function() {
    $.get("./php/get-history.php?fn="+$("#fname").val(), function(data) {
        $("#chat-history").html(data);
    });
}, 1000);

    // フォームが送信されたときの処理
    $("form").submit(function(event) {
        event.preventDefault(); // フォームの通常の動作をキャンセル

        // Ajaxでchatapi.phpにフォームデータを送信
        $.ajax({
            url: "./php/chatapi.php",
            type: "POST",
            data: {message:$(this).serialize(),fname:$("#fname").val()},
            success: function(response) {
            	hideLoadingAnimation();
            	
                // フォームの入力内容を取得
                var message = $("#message").val();

                // フォームをクリア
                $("#message").val("");

                // サーバーからのレスポンスを表示
                $("#output").html(response);

                // チャット履歴を更新
                var history = "" + message + "|" + response.trim();
                $.post("./php/save.php", {data: history,fname:$("#fname").val()}); // サーバーに履歴を保存
            }
        });
    });
});
// ローディングアニメーションの表示・非表示
function showLoadingAnimation() {
	var loading = document.getElementById("loading");
	loading.style.display = "block";
}
function hideLoadingAnimation() {
	var loading = document.getElementById("loading");
	loading.style.display = "none";
}```
get-history.php
```
<?php
	
	// チャット履歴表示

	$history = array();
	$file = fopen("../data/".$_GET["fn"].".txt", "r");
	if ($file) {
	    while (($line = fgets($file)) !== false) {
	        $data = explode("|", $line);
	        $history[] = array(
	            '<div class="question">入力： ' . $data[0] . '</div>',
	            '<div class="answer">提案： ' . $data[1] . '</div>'
	        );
	    }
	    fclose($file);
	}

	// 配列の順序を新しい順にする。したくない場合はコメントアウト
	$history = array_reverse($history); 
	
	$output = "";
	foreach ($history as $item) {
	    $item = highlight_code_blocks($item);
	    $output .= implode("", $item)."<div class=\"spacer\"></div>";
	}

	echo $output;

	// コードが含まれる場合はタグ
	function highlight_code_blocks($string) {
	    return preg_replace_callback('/```([^`]*)```/s', function($matches) {
	        return '<pre><code>' . htmlentities(str_replace('<br>', "\n", $matches[1]), ENT_QUOTES) . '</code></pre>';
	    }, $string);
	}

?>
```ここに言語名を入力
save.php
```
<?php

	// チャット記録

	// POSTをdata.txtに書き込む
	if ($_SERVER["REQUEST_METHOD"] == "POST") {

		$data = $_POST["data"];
		$fname=$_POST["fname"];
		$file = fopen("../data/".$fname.".txt", "a");
		fwrite($file, $data . "\n");
		fclose($file);

	}

?>
```
chatapi.php
```
<?php
date_default_timezone_set('Asia/Tokyo');

	// ChatGPT APIレスポンス処理

	// API_KEYをセット
	define(API_KEY, 'my_api_key');

	// ----------------------------------------------------------------------------------------------

	// data.txtから履歴を取り出す
	$previous_messages = array();
	$file = fopen("../data/".$_POST["fname"].".txt", "r");
	if ($file) {
	    while (($line = fgets($file)) !== false) {
	        $data = explode("|", $line);
	        $previous_messages[] = array(
	            array('role' => 'user', 'content' => $data[0]),
	            array('role' => 'assistant', 'content' => $data[1])
	        );
	    }
	    fclose($file);
	}
	

// ここにChatGPTに送信するオプションを設定
$data = array(
  'model' => 'gpt-3.5-turbo',
  'temperature' => 1,
  'n' => 1,
  'stream' => false,
'stop' => ['。', '？', '\n'],
  'frequency_penalty' => 0.5,
  'presence_penalty' => 0.3
);

$data["messages"] = array();
// キャラクター設定を修正
$data["messages"][] = array(
'role' => 'system',
'content' => "
居住地: 日本
職業: ソーシャルワーカー・カウンセラー
特徴: 
的確な質問で問題点を把握し、様々な背景やニーズに対応し、簡潔かつ正確な情報を伝え、適切なアドバイスを提供する聞き上手である。
温和で優しく思いやりがあり、冷静で客観的であり、判断力があり、柔軟性があり、変化に対応できる性格である。
多岐にわたる資格を持っているため、幅広い問題に対応することができる。また、ユーザーの自治体を適切に特定し、適切な連絡先を伝えることができる。
行動指針: 
1. 日本の法令を遵守し、国内の情報を提供する。
2. 明瞭で簡潔な回答を提供し、取るべき行動の順序を明確に示す。
3. ユーザーの希望を尊重して、社会参加を支援する。
");

    // 履歴を登録
    foreach ($previous_messages as $message) {
    	$data["messages"][] = $message[0];
    	$data["messages"][] = $message[1];
    }
    
	// $_POST["message"]を処理
	$message = htmlspecialchars($_POST["message"], ENT_QUOTES);
	$data["messages"][] = array('role' => 'user', 'content' => $_POST["message"]);
$count = 0;
$res = '';
 while ($count <= 5 && empty($res)) {
	// ChatGPT APIへのリクエスト構築
	$ch = curl_init();
	curl_setopt($ch, CURLOPT_URL, "https://api.openai.com/v1/chat/completions");
	curl_setopt($ch, CURLOPT_RETURNTRANSFER,1);
	curl_setopt($ch, CURLOPT_POST,1);
	curl_setopt($ch,CURLOPT_SSL_VERIFYPEER, false);
	curl_setopt($ch,CURLOPT_SSL_VERIFYHOST, false);
	curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json', 'Authorization: Bearer '. API_KEY));
	curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));

    $result = curl_exec($ch);
    if ($result === false) {
    print 'Curl error: ' . curl_error($ch).' Curl error code: ' . curl_errno($ch);
    curl_close($ch);
    exit();
    } else {
	$response = json_decode($result, true);
	curl_close($ch);
if(isset($response['error'])){
    print "API Error: " . $response['error']['code'] . " - " . $response['error']['message'];
exit();
} else {
if($response["choices"][0]["message"]["content"]===""){
print "返信を受け取れませんでした。時間を空けてから再度質問してみてください。<br>";
exit();
}else{
	$res = str_replace("\n","<br>",$response["choices"][0]["message"]["content"]);
$res = preg_replace('/(おはようございます|こんにちは|こんばんは)(、|。|！|？|・|,|\.)+/u', '', $res);
$res = preg_replace('/\d{8}さん(、|。|！|？|・|,|\.)*/u', '', $res);
}
}
}
    $count++;
}
if (empty($res)) {
    print "処理が中断しました。メッセージを変えてもう一度送ってください。retry:".$count;
} else {
    print $res;
}
?>```

### 試したこと
カンマの間違いなど思い当たるところは修正しました。
今まではローディングイメージが表示されたままで非表示になったり、サーバー側が500を出してきたりしたので、エラーを解決できました。
入力した文字も表示されないのは、体験したことがありません。
APIの応答を待たずに、PHPスクリプトが強制終了しているような感じもします。

何卒ご指導ご鞭撻のほどお願いします。


chat gpt apiを利用したスクリプトを組んでいます。今まではうまくいっていたのに、応答が帰らなくなりました。

HTMLのonClickで複数の処理を実行したいとき、
```HTML
<input type="button" value="abc" onclick="functionA();functionB">
```
のようにすると関数Aと関数Bが実行されると思うのですが、この関数Bのところでlocation.hrefを使いたい場合はどのような書き方になるのでしょうか。

```HTML
<input type="button" value="abc" onclick="functionA;location.href='./index.html'">
```

で試してみましたがうまくいかず、調べてもわからなかったので質問させていただきます。

onClickでの複数の処理を実行したい

以下のような変数を持っていたとして、それをＪＳＦで表示するにはどうすれば良いでしょうか。
```java
ArrayList<TestMstForm> form
```

単純にそのまま出すだけならprime facesのdatalistを使うなり、ui:repeatを使うなり、方法はあるかと思いますが。
今回教えて頂きたいことは以下のような場合です。
例えばデータが
日付    曜日
20150901  火
20150902  水
20150903  木
と、このような感じで２０１５年９月の日付を持っているとします。
それを出力した結果として
日    月    火               水               木              金    土
               20150901  20150902  20150903
のような感じで出力したいです。

<tr>タグをrenderedで表示、非表示判定をして一定のタイミングで次行にいこうとしても、
renderedを使うと<tr>タグの終わりをちゃんと判定してもらえないみたいで、
エラーが出てしまいます。
（今回の例であれば日曜のデータであれば<tr>を表示、土曜のデータであれば最後に</tr>を出そうとしていました。Strutsであればこのようなことが出来たので。）
そのため、現段階では該当する曜日の列に出力する判断のみなので、<tr>タグの判断が出来ず、１行に１レコードを分を出力してしまいます。

datalistを使っていますが、現在ではこんな感じでロジックを書いています。
```java
<table>
    <tr>
        <td>日</td>
        <td>月</td>
        <td>火</td>
        <td>水</td>
        <td>木</td>
        <td>金</td>
        <td>土</td>
    </tr>
    <p:dataList value="#{testAction.form}" var="calendarForm">
    <tr>
        <td><h:outputText value="#{calendarForm.ymd}" rendered="#{calendarForm.youbiCd == '1'}"/></td>
        <td><h:outputText value="#{calendarForm.ymd}" rendered="#{calendarForm.youbiCd == '2'}"/></td>
        <td><h:outputText value="#{calendarForm.ymd}" rendered="#{calendarForm.youbiCd == '3'}"/></td>
        <td><h:outputText value="#{calendarForm.ymd}" rendered="#{calendarForm.youbiCd == '4'}"/></td>
        <td><h:outputText value="#{calendarForm.ymd}" rendered="#{calendarForm.youbiCd == '5'}"/></td>
        <td><h:outputText value="#{calendarForm.ymd}" rendered="#{calendarForm.youbiCd == '6'}"/></td>
        <td><h:outputText value="#{calendarForm.ymd}" rendered="#{calendarForm.youbiCd == '7'}"/></td>
    </tr>
    </p:dataList>
</table>
```
どなたか、出したい表示内容でのロジックを教えて頂けないでしょうか。