常連

自己紹介

PHPでメールフォームを作成したので、脆弱性がないかアドバイスいただけないでしょうか。
エンジニアでもなければ、PHPもろくに書けない雑魚ですが、「[php メールフォーム 作り方](https://www.google.co.jp/search?q=php+%E3%83%A1%E3%83%BC%E3%83%AB%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0+%E4%BD%9C%E3%82%8A%E6%96%B9&ie=utf-8&oe=utf-8&client=firefox-b-ab&gfe_rd=cr&ei=6NrkWKWOBuzZ8AfguCs)」でググって表示されるサイトを見ると、「んんんんん？？？」と思うところがあります。
これらを参考にしたり、コピペする方は、記述されているコードの良し悪しは判断できないかと思います。
そのような方々が参考にできるメールフォームを作りたいという思いで、調べて作りました。
周りに書いたコードを確認してもらえる人もいないので、皆様からのアドバイスがほしいです((_ _ (´ω｀ )ﾍﾟｺ

このメールフォームは、下記を対象者としています。

- php メールフォーム 作り方 でググってコピペする方
- コピペして動けばいいと考えている方
- if文や関数など基本的な記述はわかるけど、クラスとか理解していない方
- 脆弱性？なにそれ？という方

そのために、このメールフォームは下記の点を意識して作成しました。

- **コピペしたら動く**
- **なるべく難しい記述はしない、記述量を減らす**
- 処理を中断する die を使っていないので、表示したい箇所にコピペすれば動く
- PHP5.2.xまで想定し、環境（magic_quotes_gpc、セーフモード）に依存しない
- 肝心の脆弱性対策はクリックジャッキング、CSRF、XSS、メールヘッダインジェクションを考慮

最終的にはコード＋説明した記事を作成してQittaに投稿する予定です。
問題があれば、詳しい方々からアドバイスやご指摘があるはずなので...

**皆様から見て、脆弱性や気になる点などあれば、アドバイスもらえると嬉しいです((_ _ (´ω｀ )ﾍﾟｺ**
至らないところがあれば、調べますので、ご指摘だけでも頂けると嬉しいです。
お願いします。

入力（`index.php`） → 確認（`confirm.php`） → 送信（`send.php`） と画面を遷移してメールを送ります。

```php
<?php
// 他のサイトでインラインフレーム表示を禁止する（クリックジャッキング対策）
header('X-FRAME-OPTIONS: SAMEORIGIN');

// セッション開始
session_start();

// HTML特殊文字をエスケープする関数
function h($str) {
	return htmlspecialchars($str,ENT_QUOTES,'UTF-8');
}

/* --------------------------------------------------
	トークンの作成（CSRF対策）

	※使用しているPHPのバージョン・環境にあわせて
	 トークンを選んでね。不要なトークは削除してね。
-------------------------------------------------- */

// PHP 7.0 以降
if(!isset($_SESSION['token'])) {
	$_SESSION['token'] = bin2hex(random_bytes(32));
}

// PHP 5.3 ～ 5.x ※OPENSSL導入済
if(!isset($_SESSION['token'])) {
	$_SESSION['token'] = bin2hex(openssl_random_pseudo_bytes(32));
}

// PHP 5.3 未満
if(!isset($_SESSION['token'])) {
	$_SESSION['token'] = hash('sha256', session_id());
}

// トークンを代入
$token = $_SESSION['token'];

?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>入力画面</title>
</head>
<body>

<h1>お問い合わせ（入力画面）</h1>

<form method="post" action="confirm.php">
<table>
	<tr>
		<th>お名前（必須）</th>
		<td><input type="text" name="name"></td>
	</tr>
	<tr>
		<th>ふりがな（必須）</th>
		<td><input type="text" name="ruby"></td>
	</tr>
	<tr>
		<th>メールアドレス（必須）</th>
		<td><input type="text" name="mail"></td>
	</tr>
	<tr>
		<th>内容（必須）</th>
		<td><textarea name="content"></textarea></td>
	</tr>
</table>
<input type="hidden" name="token" value="<?php echo h($token); ?>">
<button>送信内容確認</button>
</form>
</body>
</html>
```

```php
<?php
// 他のサイトでインラインフレーム表示を禁止する（クリックジャッキング対策）
header('X-FRAME-OPTIONS: SAMEORIGIN');

// セッション開始
session_start();

// HTML特殊文字をエスケープする関数
function h($str) {
    return htmlspecialchars($str,ENT_QUOTES,'UTF-8');
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>確認画面</title>
</head>
<body>

<h1>お問い合わせ（確認画面）</h1>

<?php

// セッション変数がなければ、空文字を代入
if(!isset($_SESSION['token'])) {
    $_SESSION['token'] = '';
}

// POSTされたデータを変数に代入（magic_quotes_gpc = On ＋ NULLバイト 対策）
foreach (array('token','name','ruby','mail','content') as $v) {
    $$v = filter_input(INPUT_POST, $v, FILTER_DEFAULT, FILTER_FLAG_STRIP_LOW);
}

// トークンを確認し、確認画面を表示
if($token !== $_SESSION['token']) {

    echo '<p>お問い合わせの手順に誤りがあります。<br>お手数ですが、最初からやり直してください。</p>';

} else {

    $error_flag = 0;

    // 必須項目は未入力をチェック
    if ($name === '') {
        echo '<p>お名前をご入力してください。</p>';
        $error_flag = 1;
    } elseif (mb_strlen($name) > 50) {
        echo '<p>お名前は 50 文字以内で入力してください。</p>';
        $error_flag = 1;
    }

    if ($ruby === '') {
        echo '<p>ふりがなをご入力してください。</p>';
        $error_flag = 1;
    } elseif (mb_strlen($ruby) > 50) {
        echo '<p>ふりがなは 50 文字以内で入力してください。</p>';
        $error_flag = 1;
    }

    if ($mail === '') {
        echo '<p>メールアドレスをご入力してください。</p>';
        $error_flag = 1;
    } elseif (mb_strlen($mail) > 100) {
        echo '<p>メールアドレスは 100 文字以内で入力してください。</p>';
        $error_flag = 1;
    } elseif (!filter_var($mail, FILTER_VALIDATE_EMAIL)) {
        echo '<p>メールアドレスの形式が正しくありません。</p>';
        $error_flag = 1;
    }

    if ($content === '') {
        echo '<p>内容をご入力してください。</p>';
        $error_flag = 1;
    } elseif (mb_strlen($content) > 500) {
        echo '<p>内容は 500 文字以内で入力してください。</p>';
        $error_flag = 1;
    }

    // エラーがある場合は、戻るボタンを表示し、エラーがない場合は、確認画面を表示
    if ($error_flag === 1) {
        echo '<button onClick="history.back(); return false;">戻る</button>';
    } else {
        // セッション変数に代入
        $_SESSION['name'] = $name;
        $_SESSION['ruby'] = $ruby;
        $_SESSION['mail'] = $mail;
        $_SESSION['content'] = $content;

        // 確認用画面の表示
    ?>

        <form method="post" action="send.php">
            <table>
                <tr>
                    <th>お名前</th>
                    <td><?php echo h($name); ?></td>
                </tr>
                <tr>
                    <th>ふりがな</th>
                    <td><?php echo h($ruby); ?></td>
                </tr>
                <tr>
                    <th>メールアドレス</th>
                    <td><?php echo h($mail); ?></td>
                </tr>
                <tr>
                    <th>内容</th>
                    <td><?php echo nl2br(h($content)); ?></td>
                </tr>
            </table>
            <input type="hidden" name="token" value="<?php echo h($token); ?>">
            <button>送信</button>
        </form>

<?php
    }
}
?>
</body>
</html>
```

```php
<?php
// 他のサイトでインラインフレーム表示を禁止する（クリックジャッキング対策）
header('X-FRAME-OPTIONS: SAMEORIGIN');

// セッション開始
session_start();

// mb_send_mail のエンコーディング
mb_language('ja');

// 内部文字エンコーディングを設定
mb_internal_encoding('UTF-8');
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>送信画面</title>
</head>
<body>

<h1>お問い合わせ（送信画面）</h1>

<?php

// セッション変数がなければ、空文字を代入
if(!isset($_SESSION['token'])) {
    $_SESSION['token'] = '';
}

// POST['token']の値をtoken変数に代入
$token = filter_input(INPUT_POST, 'token', FILTER_DEFAULT, FILTER_FLAG_STRIP_LOW);

// 各セッション変数を各変数に代入
$name = isset($_SESSION['name']) && is_string($_SESSION['name']) ? $_SESSION['name'] : '';
$ruby = isset($_SESSION['ruby']) && is_string($_SESSION['ruby']) ? $_SESSION['ruby'] : '';
$mail = isset($_SESSION['mail']) && is_string($_SESSION['mail']) ? $_SESSION['mail'] : '';
$content = isset($_SESSION['content']) && is_string($_SESSION['content']) ? $_SESSION['content'] : '';

// トークンの値が一致しない場合は、エラー文を表示し、一致する場合は送信する
if($token !== $_SESSION['token']) {

    echo '<p>送信後に再度アクセスされたか、お問い合わせの手順に誤りがあります。<br>お手数ですが、最初の画面からご入力ください。<p>';

} else {

    /*  運営側へ送信するメールの設定  */

    // 送信先のメールアドレス
    $to      = 'xxxxxx@xxxxx.xxxx';
    // 件名
    $subject = '【お問い合わせからの送信】○○○○○○○○○○';
    // 本文
    $message = "◆お名前\n$name\n\n◆フリガナ\n$ruby\n\n◆メールアドレス\n$mail\n\n◆内容\n$content";
    // オプション
    $option = '-f'. $to;


    /*  問い合わせされた方へ自動返信するメールの設定  */

    // 件名
    $auto_subject = '【お問い合わせ】○○○○○○○○○○';
    // 送信元のメールアドレス
    $auto_from    = 'From:' . $to;
    // 本文
    $auto_message = "
※このメールは自動返信によるものです。

$name 様

このたびは、お問合せいただき、誠にありがとうございました。

お送りいただきました内容を確認の上、担当者より折り返しご連絡させていただきます。
    ";

    /* セーフモードがONの場合は、mb_send_mailの第5引数が使えないため、処理を分岐して送信 */
    if(ini_get('safe_mode')) {

        /*  運営側と自動返信のメールの送信が完了したら、送信完了の文章を表示する  */
        if(mb_send_mail($to, $subject, $message, "From:$mail") && mb_send_mail($mail, $auto_subject, $auto_message, $auto_from)) {
            echo '<p>このたびは、お問合せいただき、誠にありがとうございました。<br>お送りいただきました内容を確認の上、担当者より折り返しご連絡させていただきます。</p>';
        } else {
            echo '<p>大変申し訳ございませんが、メールの送信に失敗しました。<br>お手数ですが最初からやり直してください。</p>';
        }

    } else {

        /*  運営側と自動返信のメールの送信が完了したら、送信完了の文章を表示する  */
        if(mb_send_mail($to, $subject, $message, "From:$mail", $option) && mb_send_mail($mail, $auto_subject, $auto_message, $auto_from, $option)) {
            echo '<p>このたびは、お問合せいただき、誠にありがとうございました。<br>お送りいただきました内容を確認の上、担当者より折り返しご連絡させていただきます。</p>';
        } else {
            echo '<p>大変申し訳ございませんが、メールの送信に失敗しました。<br>お手数ですが最初からやり直してください。</p>';
        }

    }

}

// セッションの破棄
$_SESSION = array();
session_destroy();

?>
</body>
</html>
```

## **2017.04.11 追記**

徳丸氏による、脆弱性の解説です。

- [teratailに投稿されたメールフォームにCSRF脆弱性が残存した理由 | 徳丸浩の日記](http://blog.tokumaru.org/2017/04/teratailcsrf.html)

ありがとうございます((_ _ (´ω｀ )ﾍﾟｺ

【PHP】作成したメールフォームに脆弱性がないか、アドバイスもらえないでしょうか。

はじめまして。
いつもお世話になっていますm(_ _)m

とても初歩的な質問かもしれませんが、どなたかお力添えいただけますと幸いです。

<table></table>の中のテキストを取得し、
別の要素（例えば<div></div>）の中に再出力する、ということをしたいのですが、
テキストは取得できているものの、<tr></tr>ごとに改行して出力することができず
カンマ区切りでズラリと横並びに表示されてしまいます。

テーブル内は動的に変化するので、for文等で処理できると助かります。
イベントハンドラ等は無視していただいて問題ありません。

```JavaScript

var data = [];
var tr = $("table tr");
  for( var i=0,l=tr.length;i<l;i++ ){
    var cells = tr.eq(i).children();
    for( var j=0,m=cells.length;j<m;j++ ){
     if(typeof data[i]=="undefined")
      data[i] = [];
     data[i][j] = cells.eq(j).text();
   }
  }
  $(".here").text(data);
```

```HTML

<table>
   <tbody>
      <tr>
         <td>A</td>
         <td>B</td>
         <td>C</td>
      </tr>
      <tr>
         <td>1</td>
         <td>2</td>
         <td>3</td>
      </tr>
   </tbody>
</table>

<div class="here">
</div>
```

表示させたい内容
**A,B,C
1,2,3**

現在
**A,B,C,1,2,3**

すっかり頭が凝り固まってしまっているので、
アドバイスでもかまいません、皆様のご回答お待ちしております。

【HTML】<tr></tr>ごとに改行して出力させたい【JavaScript】

質問を投稿し直しました
https://teratail.com/questions/33700

投稿し直しました

こんにちは、google Analyticsの設定について、カスタムディメンションをやりたいため、サイト内に30秒以上いる人の行動を取りたい及び30秒以上いる人のIPアドレスを取りたい場合、タグマネージャーにjavascripのコードをどう追加していけばよろしいでしょうか？

どなた方が分かれば教えてお願い致します。

Google　Analyticsの設定

https://teratail.com/questions/1607
こちらの質問へのベストアンサーのソースに対して削除フォームを付けようとしているのですが、上手く動作しないで困っています。

方法としては、元のソースに加えて削除用のプログラムimg.delete.phpを作り、
```PHP
if(file_exists($_POST['delFile'])){
    unlink($_POST['delFile']);
}
```

./imglist.phpのこの行の後に
```PHP
echo "<img src='{$fl}' class='img_list' title='クリックして追加' />";

```
このようなフォームを追加して一度アップロードした画像一つ一つに削除ボタンを付けてクリックしたらその画像が削除されるようにしたいのですが、HTMLフォームの画面で出てきたボタンをクリックしたらimg.delete.phpに飛ばされてしまいます。
```PHP
echo <<<EOM
<form id="imgForm" method="post" action="img.delete.php">
<input type="hidden" name="delFile" id="sendFile" value="{$fl}">
<input id="imgDelete" type="submit" value="削除">
</form>
EOM;

```

img.delete.phpに飛ばされた後にHTMLのフォームに戻ったら目的の画像は消えているのですが、画面遷移を起こさずに画面上の画像が消えるようにしたいです。

Ajaxで読み込んだhtmlのフォームに対してはadd.jsは効いていないのでしょうか？
こういう場合はどういう方法で実装するのが最良か、お知恵をお貸し頂ければ幸いです。

Ajaxでアップロードした画像に削除フォームを付けるには

プログラミング入門で JavaScriptのじゃんけんゲームをつくっております。

これまでコンピュータの出す手は、ランダム関数を利用してきました。

これをコンピュータが過去の戦績を参照して、出す手を考える、とすることは可能でしょうか。

たとえば、
・全3回対戦
・1,2回戦はランダムで
・3回戦は、過去2回で人間が出さなかった手に勝てる手を出す
（過去に出さなかったので3回戦で出す可能性が高い..はず）

などです。

JavaScriptに、
sessionStorageやlocalStorageという機能があり
データをローカル環境に保存することまでは調べました。

この機能を使って、上記のような戦績分析型（？）は作れるものでしょうか。

機能の理解で初歩的なところから間違っておりましたらすみません。

よろしくお願い申し上げます。

JavaScript ランダムではない"じゃんけん"について

初めまして。
ご覧頂きありがとうございます。

images>works というフォルダの中に50枚以上の画像がありますが、
この画像をひとつずつ毎月1日に切り替えて表示させたいです。

何かいい方法はありますでしょうか？

宜しくお願いします。

-------------------------------
追記：
希望する仕様は以下のとおりです。


作品画像を一つだけ置くページがあります。

<img src="">

画像は55枚あり、表示させる順番が決まっています。
ランダムではなく1,2,3,4...と順番を守って切り替え表示させたいです。
これを月ごとに切り替えていきたいと思っております。

例）
4月1日に1番目の画像を表示させたとします。
8月1日には5番目の画像を、11月1日には8番目の画像を表示。
という具合で、毎月画像を順番に切り替えることは可能でしょうか？

画像枚数が55枚だと仮定した場合に、55枚目が表示されたのが6月1日だとしたら、7月1日には1番目の画像にもどるようなイメージです。


WordPressを使ったサイトで実装を考えておりますのでWordPressの機能を使って実装可能な場合はヒントでも教えて頂けるとすごく嬉しく思います。

初めての質問で至らぬ部分がございますが... m(__)m

宜しくお願いします。

50枚程の画像を毎月自動で切り替わるようにしたい

WordPressで最近の投稿（５件くらい）のIDを取得したいです。
そしてpost__not_inで省きたいのですが、、
以下だと一番新しいもののみ取得できるのですが、
新着５件くらいのIDをすべて取得するにはどのように書けばいいのでしょうか。

```php
$postid = wp_get_recent_posts('5');
$hoge = absint( $postid[0]["ID"] );
```

WordPress最新の投稿（５件くらい）のID取得について

WPのカスタム投稿の記事内に別のカスタム投稿の任意のカテゴリの記事一覧を表示させる方法はありますでしょうか？

例えば美容室のサイトで、スタッフ詳細ページをカスタム投稿の記事で制作して、そこにその方が手がけたスタイルのみを一覧で表示するなど。

おそらくスタッフの記事とスタイルのカテゴリを紐付けれたらできると思うのですが、そのやり方がどうしてもわかりません...。

お分かりの方がいらっしゃいましたらご回答の程よろしくお願いいたします。

記事にカスタム投稿の任意のカテゴリの記事一覧を表示させたい

投稿内のh2見出しを全て取得して記事の頭にリンクをはり、クリックするとその見出しに飛ぶようにしたいのですが、取得する方法がわかりません。どのようにすれば取得できるのでしょうか。ご教授いただけると幸いです。

以下途中のコードを記載しておきます。

<nav class="article_nav">
			<ul>
				<li><a href="">見出し１</a></li>
				<li><a href="">見出し２</a></li>
				<li><a href="">見出し３</a></li>
			</ul>
</nav>

<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
		<?php the_content(); ?>
	<?php endwhile; ?>
	<?php else : ?>
		<section>お探しのページがみつかりません</section>
<?php endif; ?>

投稿内のh2見出しを全て取得して記事の頭にリンクをはり、クリックするとその見出しに飛ぶようにしたい

###前提・実現したいこと
phpでwebで表示する検索フォームからデータベースに書き込むまでの画面を作っています。

検索フォームからデータベースに書き込まれるまでの流れですが、
①検索画面
文字を検索すると、検索結果が表示されます。
入力ボタンを押すと、
②入力画面に飛びます。
検索した文字を編集し、入力を終え、次へボタンを押すと
③エラーチェック画面に行きます。
このページは、エラーがあればエラーと共に入力画面を再表示し、エラーがなければブラウザには表示せずに次の画面に移ります。
④入力確認画面
ユーザーが入力を確認する画面です。登録ボタンが押されるとデータベースへ書き込まれます。
⑤ブラウザには表示されませんが、データベースに書き込むファイル
⑥登録完了画面
データベースに書き込んだ後にブラウザに表示される画面です。

###発生している問題・エラーメッセージ
このページを複数タブで表示した時、セッションが上書きされてしまうので、タブごとに一意の値を作り、ページ間でその値をやり取りし、セッションが上書きされないようにしたいと考えています。

例えば、１つ目のタブで、ぶどうについて調べ、２つ目のタブでさつまいもについて調べます。さつまいものタブで入力画面に飛び、それからぶどうのタブの方でも入力画面に飛ぶと、内容がさつまいもになってしまいます。これをタブごとにセッションの内容がかぶらないようにしたいのです。

調べたところ、ワンタイムセッションやURL Rewriting、hiddenパラメータ、マルチステージセッションなどやり方が見つかったのですが、自分には出来そうになかったので、ワンタイムセッションに似たやり方にしようと考え、プログラムを書き換え始めたところでした。

①の検索画面で一意の値を作り、それを各ページのボタンが押されるごとに移動するページにPOSTを使って送っています。しかし③のエラーチェック画面では、エラーがあった場合は、POSTで値を送ることができますが、なかった場合は、③は表示されずに④入力確認画面にリダイレクトされるので、POSTで値を送ることができません。

⑤データベースに書き込みから⑥登録完了画面の流れも、⑤でボタンを押さないのでPOSTでデータを送ることができません。

セッションでは、上書きされてしまいます。GETでは、URLから見えますし。file_get_contents関数というものも見つけたのですが、うまく使えませんでした。

長くなってしまいましたが、タブごとにセッションを区別するために、一意の値（変数）を画面ごと（プログラムのファイル間で）でやり取りする方法を教えて下さい。

phpで変数を他のページ（ファイル）に送りたい

WordPressでサイトを制作しているのですが、サイドバーにアクセスランキングを設置しています。ですが、その部分がとても重いので自動でhtmlを生成してそれを読み込む事は出来ないのかなと考えたのですが、そういった事は可能なのでしょうか？

●一週間に一回など、定期的な生成を自動的に行う

キャッシュと同じ事になるような気がしますが、もし方法があれば勉強のために教えてください。よろしくお願い致します。

phpで定期的に自動でhtmlを生成する方法

■ 環境
さくらvps
OS ubuntu
php5-fpm
nginx
mysql
wordpress

はじめまして
サイトを運営していましたが、
昨晩突然、504の表示がされてサイトがアクセスできなくなっています。

nginxのエラーログを確認した所

2015/09/22 19:30:00 [error] 1793#0: *13920 connect() to unix:/var/run/php5-fpm.sock failed (11: Resource temporarily unavailable) while connecting to upstream, client: xxx.xxx.xx.xxx, server: hoge.com, request: "GET /hoge/id HTTP/1.1", upstream: "fastcgi://unix:/var/run/php5-fpm.sock:", host: "hoge.com", referrer: "hogehoge.com"

との表記がありました。

原因は不明で、なにかをしたから起きたのではなく突然、504 or 502 が宣告されました。
永続的にサイトが表示されないのではなく、
3時間くらい落ちて、1時間くらいつながってを繰り返しています。

プラグインを止めたり
php、nginxの設定を見なおしたが変わらず。

そこで新サーバー（以降devと表記します。）で環境を作って504が表示されてる
サイトの（以降mainと表記します。） wp-content 以降をdevに移植し
mainのmysqlをdevにdumpしてみましたが状況はかわらず。

試しに、databaseを新規で作って見たところ
問題なく表示され、databaseに問題があるように感じました。

CPUの圧迫や
トラフィックの集中に関係なくサーバーが
504 or 502 が宣告されます。

今後自分がやっていく手段としてなにが最適でしょうか？
まるで勉強不足で情けないのですが、八方ふさがりなので
ご存知の方いましたら、指導していただきたいです。

よろしくお願いします。

やったこと
・keepalive_timeout 伸ばす
・mysql の エラー改善
・worker_connections増やす
・ulimit 増やす
・プラグインを消す

wordpressで作ったサイトが504で見れないので助けてください。

JavaScript(jQuery),HTML,CSSで３桁の数当てゲーム(Hit&Blow)を作成したいと考えております。

まず、プレイヤーが決めた３桁数字を順番に入力させ、入力された数字を順番に表示し、３桁の値を保存するところまでを実装したいと考えていますが、

1桁目の数字入力、表示まではできたのですが、2桁目以降の表示や、一度入力した数字の再利用不可化が実現できておらず（考え方だけでも結構ですので）ご教示いただきたい次第です。
よろしくお願いいたします。
###実現したいこと
1)0〜9までの数字をひとつクリックさせる。(tableで入力欄作成）
 １桁目（百の位）にクリックした数字を表示する。
 一度クリックした数字は以降クリック不可にし、背景色をグレー色にする。

2)1)でクリックした以外の数値をクリックさせる。
 ２桁目（十の位）のにクリックした数字を表示する。
 一度クリックした数字は同上

3)1),2)でクリックした以外の数値をクリックさせる。
 3桁目（一の位）のにクリックした数字を表示する。
 一度クリックした数字は同上

4)3桁入力後「OK」ボタンを押下後に、3桁の数字を保存（記憶）する。

※途中で「Del」ボタンを押下した場合は直近入力した数値を削除して、再入力可能状態とする。
###作成中のコード
```lang-html
	
	<div id="message">3桁の設定ナンバーを決定してください
	</div>

	
	<div id="youcard">
		<ul id="youcards">
			<li id="youNum1"></li>
			<li id="youNum2"></li>
			<li id="youNum3"></li>
		</ul>
	</div>

	
	<div id="inputnumber">
		<table id="inputtable">
			<tbody>
				<tr>
					<td id="1" class="onNum">1</td>
					<td id="2" class="onNum">2</td>
					<td id="3" class="onNum">3</td>
				</tr>
				<tr>
					<td id="4" class="onNum">4</td>
					<td id="5" class="onNum">5</td>
					<td id="6" class="onNum">6</td>
				</tr>
				<tr>
					<td id="7" class="onNum">7</td>
					<td id="8" class="onNum">8</td>
					<td id="9" class="onNum">9</td>
				</tr>
				<tr>
					<td id="del">Del</td>
					<td id="0" class="onNum">&nbsp;0&nbsp;</td>
					<td id="ok">OK</td>
				</tr>
			</tbody>
		</table>
	</div>

```
```lang-javascript
//3桁の数字を設定する
$(".onNum").on("click",function(){
	$("#youNum1").html(this.id);
	$(this).css("background","#919191");
});
```
###修正したコード
```lang-javascript
	var youNums = []; //プレイヤーが設定した3桁数字の変数（配列）
	var progress; //進行管理用の変数
	//console.log(progress, youNums);
	
	$(".onNum").on("click", function () { //数字0〜9をクリックした時
		if (progress == undefined) { //変数progressがundefinedの場合
			$("#youNum1").html(this.id); //youNum1にクリックした数字を表示
			$(this).css("background", "#919191"); //クリックした数字をグレー色に変更
			progress = 1; //変数progressに1を代入
			youNums[0] = $("#youNum1").html();
		//console.log(progress, youNums);
			
		} else if (progress == 1) { //変数progressが1場合
			if (equal_youNum(this.id) == true) return; //利用済みの数字の場合処理を中断
			$("#youNum2").html(this.id);
			$(this).css("background", "#919191");
			progress = 2;
			youNums[1] = $("#youNum2").html();
		//console.log(progress, youNums);
			
		} else if (progress == 2) {
			if (equal_youNum(this.id) == true) return;
			$("#youNum3").html(this.id);
			$(this).css("background", "#919191");
			$("#ok").css("background", "#da5758"); //OKボタンを赤色を変更
			progress = 3;
			youNums[2] = $("#youNum3").html();
		//console.log(progress, youNums);
			
		} else {
		}
	});

	function equal_youNum(val) { //onNum1,onNum2の数字利用済み判定
		if (val == $("#youNum1").html()) { //youNum1の数字と入力した数字がと一致するかのチェック
			return true; //一致した場合true
		} else if (val == $("#youNum2").html()) { //youNum2の数字と入力した数字がと一致するかのチェック
			return true; //一致した場合true
		} else {
			return false; //いずれも一致しない場合false
		}
	}
	
	$("#del").on("click", function () { //DELをクリックしたとき
		if (progress == 3) { //進行管理が3の場合
			$("#youNum3").empty(); //3桁目に表示していた数字を削除
			$("#" + youNums[2]).css("background", "#fff"); //削除した数字の入力ボタンを白色に戻す
			progress = 2; //変更管理を2に変更
			youNums.splice(2); //プレイヤー設定番号の変数（配列）を削除
		//console.log(progress, youNums);
		
		} else if (progress == 2) {
			$("#youNum2").empty();
			$("#" + youNums[1]).css("background", "#fff");
			progress = 1;
			youNums.splice(1);
		//console.log(progress, youNums);
			
		} else if (progress == 1) {
			$("#youNum1").empty();
			$("#" + youNums[0]).css("background", "#fff");
			progress = undefined;
			youNums.splice(0);
		//console.log(progress, youNums);
			
		} else {
			
		}
	});
	
	$("#ok").on("click", function () { //OKをクリックしたとき
		if (progress == 3) { //変数progressが3の場合
			//youNums = [$("#youNum1").html(), $("#youNum2").html(), $("#youNum3").html()];
			$("#message").text(youNums[0] + " " + youNums[1] + " " + youNums[2] + " を設定しました");
			progress = 10;
		} else { //変数progressが3以外の場合
		}
	//console.log(progress, youNums);
	});
```