StringChecker-answer/stringCheckAnswer2.php

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<link rel=stylesheet type="text/css" href="css/bootstrap.min.css">
	<link rel=stylesheet type="text/css" href="css/bootstrap-theme.min.css">
	<link rel=stylesheet type="text/css" href="css/styleSheet.css">
	<link
		href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css"
		rel="stylesheet">
	<link href="css/pnotify.custom.min.css" media="all" rel="stylesheet"
		type="text/css" />
	<title>StringCheck</title>
	<style>
		/* テキストエリアがパネルをはみ出さないようにする */
		.panel-body .form-control {
			max-width: 100%;
			box-sizing: border-box;
		}
	</style>
</head>

<body>
	<?php
	// ノルマ以降の問題になります　５段階目
	$messages = [];

	function inputCheck($checkValue)
	{
		$errorMessage = "";
		$inputValue = null;

		// 入力が空かどうかをチェック
		if (empty($checkValue)) {
			$errorMessage = "入力がありません。";
		} else {
			// スペースや改行で単語に分割
			$words = preg_split('/\s+/', $checkValue);
			$valid = true;

			// 各単語をチェック
			foreach ($words as $word) {
				if (mb_strlen($word) > 20) {
					$valid = false;
					$errorMessage = "単語が長すぎます: " . htmlspecialchars($word);
					break;
				}
			}

			if ($valid) {
				$inputValue = nl2br(htmlspecialchars($checkValue)); // 改行を <br> に変換
			}
		}

		return ["error" => $errorMessage, "input" => $inputValue];
	}

	function uploadImage()
	{
		if (!isset($_FILES["imageToUpload"]) || $_FILES["imageToUpload"]["error"] == UPLOAD_ERR_NO_FILE) {
			// ファイルが選択されていない場合はエラーなしで処理をスキップ
			return ["error" => "", "success" => "", "image" => null];
		}

		$targetDir = "image/";
		$targetFile = $targetDir . basename($_FILES["imageToUpload"]["name"]);
		$uploadOk = 1;
		$imageFileType = strtolower(pathinfo($targetFile, PATHINFO_EXTENSION));
		$message = ["error" => "", "success" => "", "image" => null];

		// 画像ファイルが実際の画像かどうかをチェック（空でない場合のみ）
		if (!empty($_FILES["imageToUpload"]["tmp_name"])) {
			$check = getimagesize($_FILES["imageToUpload"]["tmp_name"]);
			if ($check === false) {
				$message["error"] = "ファイルは画像ではありません。";
				$uploadOk = 0;
			}
		} else {
			$uploadOk = 0;
		}

		// ファイルが既に存在するかどうかをチェック
		if ($uploadOk && file_exists($targetFile)) {
			$message["error"] = "ファイルは既に存在します。";
			$uploadOk = 0;
		}

		// ファイルサイズをチェック
		if ($uploadOk && $_FILES["imageToUpload"]["size"] > 500000) {
			$message["error"] = "ファイルが大きすぎます。";
			$uploadOk = 0;
		}

		// 画像ファイル形式をチェック
		if ($uploadOk && !in_array($imageFileType, ["jpg", "png", "jpeg", "gif"])) {
			$message["error"] = "許可されているファイル形式は JPG, JPEG, PNG, GIF のみです。";
			$uploadOk = 0;
		}

		// エラーがない場合、ファイルをアップロード
		if ($uploadOk) {
			if (move_uploaded_file($_FILES["imageToUpload"]["tmp_name"], $targetFile)) {
				$message["success"] = "ファイル " . htmlspecialchars(basename($_FILES["imageToUpload"]["name"])) . " がアップロードされました。";
				$message["image"] = $targetFile;
			} else {
				$message["error"] = "ファイルのアップロード中にエラーが発生しました。";
			}
		} else {
			$message["error"] = "ファイルはアップロードされませんでした。";
		}

		return $message;
	}

	// POSTリクエストがあった場合に処理を実行
	$errorMessage = "";
	$successMessage = "";
	if ($_SERVER['REQUEST_METHOD'] === 'POST') {
		$inputResult = inputCheck($_POST['topic']);
		$errorMessage = $inputResult["error"];

		if (empty($errorMessage)) {
			$uploadResult = uploadImage();
			if (!empty($uploadResult["error"])) {
				$errorMessage = $uploadResult["error"];
			} else {
				$successMessage = $uploadResult["success"];
				$messages[] = [
					"text" => $inputResult["input"],
					"image" => $uploadResult["image"]
				];
			}
		}
	}
	?>

	<!-- main -->
	<div class="container">
		<div class="row">
			<!-- 投稿 -->
			<div class="col-xs-offset-3 col-xs-6">
				<div class="panel panel-info">
					<div class="panel-heading">
						<h3 class="panel-title">投稿フォーム</h3>
					</div>
					<div class="panel-body">
						<form action="stringCheckAnswer2.php" name="topicForm" id="topicForm"
							class="form-horizontal" method="POST" enctype="multipart/form-data">
							<div class="form-group">
								<label class="col-xs-2 control-label"><img class="img"
										src="image/itc.png" width="40" height="40"></label>
								<div class="col-xs-10">
									<textarea name="topic" id="topic" rows="2"
										placeholder="いまなにしてる？" class="form-control"></textarea>
								</div>
							</div>
							<div class="form-group">
								<label class="col-xs-2 control-label">画像アップロード</label>
								<div class="col-xs-10">
									<input type="file" name="imageToUpload" id="imageToUpload" class="form-control">
								</div>
							</div>
							<div class="form-group">
								<div class="col-xs-offset-2 col-xs-10">
									<button type="submit" class="btn btn-info">投稿</button>
								</div>
							</div>
						</form>
						<?php if (!empty($errorMessage)): ?>
							<div class="alert alert-danger"><?php echo $errorMessage; ?></div>
						<?php endif; ?>
						<?php if (!empty($successMessage)): ?>
							<div class="alert alert-success"><?php echo $successMessage; ?></div>
						<?php endif; ?>
					</div>
				</div>
			</div>
		</div>
		<!-- 投稿メッセージの表示 -->
		<div class="row">
			<div class="col-xs-offset-3 col-xs-6">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">投稿メッセージ</h3>
					</div>
					<div class="panel-body">
						<?php if (!empty($messages)): ?>
							<?php foreach ($messages as $message): ?>
								<div class="list-group-item">
									<?php echo $message['text']; ?>
									<?php if (!empty($message['image'])): ?>
										<br>
										<img src="<?php echo htmlspecialchars($message['image']); ?>" alt="投稿画像" class="img-responsive">
									<?php endif; ?>
									<hr>
								</div>
							<?php endforeach; ?>
						<?php else: ?>
							<p>まだ投稿はありません。</p>
						<?php endif; ?>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script src="js/jquery-1.11.2.min.js"></script>
	<script src="js/jquery.uploadThumbs.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/pnotify.custom.min.js"></script>
	<script type="text/javascript">
		// 各ダイアログサブミット
		function executeTopic() {
			$("#topicForm").submit();
		}
	</script>
</body>

</html>