香川大学SLPからお届け！（Vol.92掲載）

著者：池内稜來斗

各都道府県の都道府県庁所在地を尋ねるクイズを出題するWebサイトをPHPで作成しました。今回は、そのWebサイトの概要や作成手順などを紹介します。PHPの実行環境や、各種サーバーソフトウエアは、「XAMPP」（https://www.apachefriends.org/）を使ってインストールします。

シェルスクリプトマガジン Vol.92は以下のリンク先でご購入できます。

図2　「db.sql」ファイルに記述するSQL文

use pref_capitals_quiz;
insert into pref_capitals
  (id, name_p, name_c, image_p) values
(1, '北海道', '札幌市', 'img/hokkaidou.png'),
(2, '青森県', '青森市', 'img/aomori.png'),
(3, '岩手県', '盛岡市', 'img/iwate.png'),
(4, '秋田県', '秋田市', 'img/akita.png'),
(5, '宮城県', '仙台市', 'img/miyagi.png'),
(6, '山形県', '山形市', 'img/yamagata.png'),
(7, '福島県', '福島市', 'img/fukushima.png'),
(8, '茨城県', '水戸市', 'img/ibaraki.png'),
(9, '栃木県', '宇都宮市', 'img/tochigi.png'),
(10, '群馬県', '前橋市', 'img/gunma.png'),
(11, '埼玉県', 'さいたま市', 'img/saitama.png'),
(12, '千葉県', '千葉市', 'img/chiba.png'),
(13, '東京都', '東京', 'img/tokyo.png'),
（略）
(47, '沖縄県', '那覇市', 'img/okinawa.png');
commit;

use pref_capitals_quiz;

insert into pref_capitals

(id, name_p, name_c, image_p) values

(1, '北海道', '札幌市', 'img/hokkaidou.png'),

(2, '青森県', '青森市', 'img/aomori.png'),

(3, '岩手県', '盛岡市', 'img/iwate.png'),

(4, '秋田県', '秋田市', 'img/akita.png'),

(5, '宮城県', '仙台市', 'img/miyagi.png'),

(6, '山形県', '山形市', 'img/yamagata.png'),

(7, '福島県', '福島市', 'img/fukushima.png'),

(8, '茨城県', '水戸市', 'img/ibaraki.png'),

(9, '栃木県', '宇都宮市', 'img/tochigi.png'),

(10, '群馬県', '前橋市', 'img/gunma.png'),

(11, '埼玉県', 'さいたま市', 'img/saitama.png'),

(12, '千葉県', '千葉市', 'img/chiba.png'),

(13, '東京都', '東京', 'img/tokyo.png'),

（略）

(47, '沖縄県', '那覇市', 'img/okinawa.png');

commit;

図3　「index.html」ファイルに記述するコード

<html lang=ja>
<head>
  <meta charset="utf-8">
  <title>都道府県庁所在地クイズ!!</title>
</head>
<body>
  <h1>都道府県庁所在地クイズ!!</h1>
  <p>表示された都道府県の都道府県庁所在地を回答してください。<br>
  東京都の場合は、区名と地域名のどちらで回答しても構いません。<br>
  すべての都道府県について回答したら終了です。
  </p>
  <button type="button"
          onclick="location.href='question.php'">
  クイズを始める
  </button>
</body>
</html>

<head>

<title>都道府県庁所在地クイズ!!</title>

</head>

<body>

<h1>都道府県庁所在地クイズ!!</h1>

<p>表示された都道府県の都道府県庁所在地を回答してください。<br>

東京都の場合は、区名と地域名のどちらで回答しても構いません。<br>

すべての都道府県について回答したら終了です。

</p>

<button type="button"

onclick="location.href='question.php'">

クイズを始める

</button>

</body>

</html>

図4　「question.php」ファイルに記述するコード

<?php
  session_start();
  if (!isset($_SESSION['times'])) {
    $_SESSION['times'] = 0;
    $_SESSION['right'] = 0;
  }
  if ($_SESSION['times'] == 0) {
    $r = new \Random\Randomizer();
    $order = $r->shuffleArray(range(1, 47));
    $_SESSION['order'] = $order;
  }
  $order = $_SESSION['order'];
  $times = $_SESSION['times'];
  $pref = $order[$times];
?>

<html lang=ja>
<head>
  <meta charset="UTF-8">
  <title>都道府県庁所在地クイズ!!</title>
</head>
<body>

<?php
  $link = mysqli_connect('localhost','root','',
                         'pref_capitals_quiz');
  mysqli_set_charset($link,'utf8');
  $sql = "SELECT id, name_p, name_c, image_p " .
         "FROM pref_capitals WHERE id = $pref";
  $result = mysqli_query($link, $sql);
  $row = mysqli_fetch_assoc($result);
  $path = $row['image_p'];
  echo "<br>";
  echo "問題", $times + 1;
  echo '<img src="' . $path .
       '" alt="' . $row['name_p'] . 'の地図">';
  print('  '.$row['name_p']);
?>

<form method="POST" class="form" action="answer.php">
  <input type="text" name="Answer" class="input">
  <p>
    <input type="submit" value="回答" class="submit">
  </p>
</form>
</body>
</html>

<?php

session_start();

if (!isset($_SESSION['times'])) {

$_SESSION['times'] = 0;

$_SESSION['right'] = 0;

}

if ($_SESSION['times'] == 0) {

$r = new \Random\Randomizer();

$order = $r->shuffleArray(range(1, 47));

$_SESSION['order'] = $order;

}

$order = $_SESSION['order'];

$times = $_SESSION['times'];

$pref = $order[$times];

<head>

<title>都道府県庁所在地クイズ!!</title>

</head>

<body>

<?php

$link = mysqli_connect('localhost','root','',

'pref_capitals_quiz');

mysqli_set_charset($link,'utf8');

$sql = "SELECT id, name_p, name_c, image_p " .

"FROM pref_capitals WHERE id = $pref";

$result = mysqli_query($link, $sql);

$row = mysqli_fetch_assoc($result);

$path = $row['image_p'];

echo "<br>";

echo "問題", $times + 1;

echo '<img src="' . $path .

'" alt="' . $row['name_p'] . 'の地図">';

print(' '.$row['name_p']);

<p>

</p>

</form>

</body>

</html>

図5　「answer.php」ファイルに記述するコード

<?php
  session_start();
  $times = $_SESSION['times'];
  $order = $_SESSION['order'];
  $right = $_SESSION['right'];
  $pref = $order[$times];
?>

<html lang=ja>
<head>
  <meta charset="UTF-8">
  <title>都道府県庁所在地クイズ!!</title>
</head>
<body>

<?php
  $received_Answer = $_POST['Answer'];
  $link = mysqli_connect('localhost','root','',
                         'pref_capitals_quiz');
  mysqli_set_charset($link,'utf8');
  $sql = "SELECT id, name_p, name_c, image_p " .
         "FROM pref_capitals WHERE id = $pref";
  $result = mysqli_query($link, $sql);
  $row = mysqli_fetch_assoc($result);
  // 東京都かどうか
  if ($row['id'] == 13) {
    if (($received_Answer == $row['name_c']) ||
      ($received_Answer == '新宿区')) {
      echo "正解\n";
      $right++;
    }
  } else if (($received_Answer == $row['name_c']) ||
    (($received_Answer . "市") == $row['name_c'])) {
    echo "正解\n";
    $right++;
  } else {
    echo "不正解\n";
  }
  $_SESSION['times'] = ++$times;
  $_SESSION['right'] = $right;
  echo "<br>";
  echo "問題{$times} {$row['name_p']} の答え";
  echo "<br>";
  echo $row['name_c'];

  if ($times != 47) {
    echo '
    <form method="POST" class="form" action="question.php">
      <button type="submit">次の問題</button>
    </form>';
  }
?>

  <form method="POST" class="form" action="result.php">
    <button type="submit">回答終了</button>
  </form>
</body>
</html>

<?php

session_start();

$times = $_SESSION['times'];

$order = $_SESSION['order'];

$right = $_SESSION['right'];

$pref = $order[$times];

<head>

<title>都道府県庁所在地クイズ!!</title>

</head>

<body>

<?php

$received_Answer = $_POST['Answer'];

$link = mysqli_connect('localhost','root','',

'pref_capitals_quiz');

mysqli_set_charset($link,'utf8');

$sql = "SELECT id, name_p, name_c, image_p " .

"FROM pref_capitals WHERE id = $pref";

$result = mysqli_query($link, $sql);

$row = mysqli_fetch_assoc($result);

// 東京都かどうか

if ($row['id'] == 13) {

if (($received_Answer == $row['name_c']) ||

($received_Answer == '新宿区')) {

echo "正解\n";

$right++;

}

} else if (($received_Answer == $row['name_c']) ||

(($received_Answer . "市") == $row['name_c'])) {

echo "正解\n";

$right++;

} else {

echo "不正解\n";

}

$_SESSION['times'] = ++$times;

$_SESSION['right'] = $right;

echo "<br>";

echo "問題{$times} {$row['name_p']} の答え";

echo "<br>";

echo $row['name_c'];

if ($times != 47) {

echo '

</form>';

}

</form>

</body>

</html>

図6　「result.php」ファイルに記述するコード

<?php
  session_start();
  if (isset($_POST['reset'])) {
    $_SESSION['times'] = 0;
    $_SESSION['right'] = 0;
    header("Location: index.html");
  }
?>

<html lang=ja>
<head>
  <meta charset="UTF-8">
  <title>都道府県庁所在地クイズ!!</title>
</head>
<body>

<?php
  echo "今回の正答数は<br>";
  echo $_SESSION['times'], "問中",
       $_SESSION['right'], "問";
  echo "<br>";
  echo "お疲れさまでした<br>";
?>

  <form method="POST" action="result.php">
    <input type="submit"
           value="トップページに戻る"
           name="reset">
  </form>
</body>
</html>

<?php

session_start();

if (isset($_POST['reset'])) {

$_SESSION['times'] = 0;

$_SESSION['right'] = 0;

header("Location: index.html");

}

<head>

<title>都道府県庁所在地クイズ!!</title>

</head>

<body>

<?php

echo "今回の正答数は<br>";

echo $_SESSION['times'], "問中",

$_SESSION['right'], "問";

echo "<br>";

echo "お疲れさまでした<br>";

<input type="submit"

value="トップページに戻る"

name="reset">

</form>

</body>

</html>