常連

### 実現したいこと

ログイン機能が動くようにしたいです
入力欄に名前,passが入力され、loginボタンを押すとflaskアプリケーションにjsでpostリクエストを送りpassと名前が正しいかの判断をする、という機能です。pass,名前が正しい場合はリダイレクト、正しくない場合はログインボタンの下にエラー文を表示させたいです。
flaskアプリケーションへの名前とpassの受け渡しがうまくいきません

### 前提

flaskアプリケーションへの名前とpassの受け渡しがうまくいきません



### 該当のソースコード
```html
            <div class="sign-up-htm">
              <div class="group">
                <label for="user2" class="label">ユーザー名</label>
                <input id="user2" type="text" class="input" name="loginname"> 
            </div>
              <div class="group">
                <label for="pass" class="label">パスワード</label>
                <input id="pass" type="password" class="input" data-type="password" name="password"> 
              </div>
              <div class="group">
                <form id="signup-form" action="/log-in" method="POST">
                <input type="submit" class="button" value="Sign Up">
              </form>
              <div id="error-message" class="error-message" style="color: red;"></div> 
              </div>
              <div class="hr"></div>
              <div class="foot-lnk">
                <label for="tab-1">登録がまだの方はこちら</a>
              </div>
```


```javascript
document.addEventListener("DOMContentLoaded", function () {
    const form = document.getElementById("signup-form");
    const errorMessage = document.getElementById("error-message");

    form.addEventListener("submit", function (event) {
        event.preventDefault(); // Prevent the default form submission

        // Get form data
        const formData = new FormData(form);

        // Convert form data to an object
        const formObject = {};
        formData.forEach((value, key) => {
            formObject[key] = value;
        });

        // Send data to the server as JSON
        fetch("/logincheck", {
            method: "POST",
            body: JSON.stringify(formObject),
            headers: {
                'Content-Type': 'application/json',
            },
        })
        .then((response) => response.json())
        .then((data) => {
            if (data.error) {
                errorMessage.textContent = "エラー: ユーザー名またはパスワードが違います";
            } else {
                errorMessage.textContent = "";
                // Handle success or continue with further processing
            }
        })
        .catch((error) => {
            console.error("エラー:", error);
        });
    });
});

```

```python

@app.route('/logincheck', methods=['POST'])
def login_check():
    data = request.get_json()
    print (data)


    
    # ここで username をデータベースなどと照合し、重複があるかどうかを確認するロジックを実装
    
    #if 正しくない場合　
    return jsonify({"error": True, "message": "."})
    #正しい場合
    return jsonify({"error": False, "message": "."})

```


### 補足情報（FW/ツールのバージョンなど）

vscode
flask
python3

js html でのログイン機能が動作しません

以下のサイトでアコーディオンメニューを作ったのですが、アコーディオンが開いた状態で始まります。 
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」変換するとページ端で文字が見切れてしまう。

コーディングについて初心者での質問で…失礼いたします。

①背景画像(cta）の上にボタン画像（botton）を指定の位置に設置したいのですが…どうしてもできません。
背景画像の下に配置されてしまいます。
relative,absoluteを使用するのはわかったのですが…設置されません。

②また全体を中央に配置したいのですが…左端に全体が表示されてしまいます。
HTMLで<body></body>の間に＜center＞</center＞を使用して中央揃えにするのは間違っていますか？

初心者でよくわかっていませんが…教えて頂ける方よろしくお願いいたします。

★出来上がりイメージ
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-05-30/5ccfe63e-a278-4701-b075-4f0134ac5dd7.jpeg)
★背景画像ーcta
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-05-30/ae4720ab-348e-4550-bbdb-e509117e3da8.jpeg)
★ボタンーbotton
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-05-30/c49e9dd2-62fe-44c7-8b5d-71e9f04d6234.png)

★HTML
```<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div class="cva">
    <div class="cta">
        <p>
            <img src="img/cta.jpg"alt>
        </p>
    </div>
    <div class="botton">
        <a href="https://www.google.com/"target="_blank">
            <p>
                <img src="img/botton.png"alt>
            </p>
        </a>
    </div>
</div>
</body>
</html>

```
★style.css
```@charset "utf-8";

body {
    width: 100%;
    background-color: #fff;
  }
  
  .wrapper {
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
  }

 .cta {
      margin-top: -5px;
  }


  img {
    width: 100%;
    margin: 0;
  }

  /*これをrelativeにしないとbuttonがどこを基準にして移動したらいいかわからない*/
  .cva {
    position: relative;
  }
  
  .cva .botton {
    position:absolute;
    bottom: 18%;
    left: 0;
    right: 0;
    margin: auto;
  }
  
  .cva .botton img{
    max-width: 90%;
  }



```


画像背景の上にボタン画像を指定の位置に設置したい

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

XHTMLとHTML5の違いについて

WordPressで作成したページの一部を、全く別のHTMLのみで作成したサイトに埋め込みたいと考えています。
初心者ですので、無知な質問かもしれませんが、教えて下さい。


▼埋め込んだHTMLコード
```ここに言語を入力
<div id="contents">
        <div class="haisou_w">
	
        <div class="haisou">
        <iframe src="＃"  allow="fullscreen" allowfullscreen  frameborder="0">
        </iframe>
        </div>
        
        </div>
	</div>
```

▼CSS
```ここに言語を入力
.haisou_w{
    width: 620px;
    margin: 0 auto;
}

.haisou{
     margin: 0px auto;
     overflow: hidden;
    
}


.haisou iframe{
    width: 1200px;
    height: 800px; 
    margin-left:-292px;
    margin-top:-230px;
}
```

といった風に制作しました。
iframe src="＃"のURLは公開中のWordPressの絶対パスです。


ローカル上ではHTML内に一部のワードプレスが表示されて問題ないのですが、FTPでアップロードしてHTMLサイトで確認するとwordpressが表示されなくなってしまいます。

原因がわかる方教えてくださいm(_ _)m

WordPressで作成したページをHTMLで1から作成したサイトに埋め込みたい

### 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スクリプトが強制終了しているような感じもします。

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