【この記事を読むのに必要な時間は約 10 分です。】
ドットインストールでPHPの勉強をしている。ドットインストールのPHP関連で用意されている動画レッスンを終えた後に、DEMOを見ただけでスクリプトが書けるようになるための練習。今回は、ドットインストールの動画レッスン「PHPで作る簡単おみくじ」-PHP(2)に続き3回目。
最初にDEMOと考え方のヒントを提示し、それだけで実際にスクリプトを書いてみよう。スクリプトを書き終わったら、完成版と見比べて答え合わせができるようにした。
今回は、「PHPで作るビンゴシート」(全6回)から。
目次
Step1
今回は最初にDEMOを見るのではなく、2ステップで作っていこう。まずは、html / CSS の知識で次の画像の通り作ってみよう。
ポイント
- html5でひな形作成。
- table / thead / tbody / tr / th, td
- スタイリングを整えよう。
Step1の答え
<!DOCTYPE html>
<html lan="ja">
<head>
<meta charset="utf-8">
<title>BINGO SHEET</title>
<style>
th, td {
width: 72px;
height: 36px;
border: 1px solid #eee;
font-size: 32px;
text-align: center;
}
th {
color : red;
}
</style>
</head>
<body>
<h1>BINGO SHEET</h1>
<table>
<thead>
<tr>
<th>B</th><th>I</th><th>N</th><th>G</th><th>O</th>
</tr>
</thead>
<tbody>
<tr>
<td>1-1</td><td>1-2</td><td>1-3</td><td>1-4</td><td>1-5</td>
</tr>
<tr>
<td>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td><td>2-5</td>
</tr><tr>
<td>3-1</td><td>3-2</td><td>3-3</td><td>3-4</td><td>3-5</td>
</tr><tr>
<td>4-1</td><td>4-2</td><td>4-3</td><td>4-4</td><td>4-5</td>
</tr><tr>
<td>5-1</td><td>5-2</td><td>5-3</td><td>5-4</td><td>5-5</td>
</tr>
</tbody>
</table>
</body>
</html>
Step2-DEMO
ポイント
- BINGOのルールを確認しよう。
- B:1-15 / I:16-30 / N:31-45 / G:46-60 / O:61-75
- それぞれ任意の5つ。
- 真ん中は空白。
- range() / shuffle() / array_slice()関数を使って1列の配列を作ろう。
- for文を使って2次元配列で全ての数字を格納しよう。
- 縦の列と横の列を変換しよう。
- 「.=」を使ってどんどんセルを生成しよう。
- 真ん中は2-2。3項演算子で空セルを1つ作ろう。
ヒント
1)BINGO用の数字を格納した配列を見てみると
array(5) {
[0]=> array(5) {
[0]=> int(9) [1]=> int(3) [2]=> int(2) [3]=> int(7) [4]=> int(8) }
[1]=> array(5) {
[0]=> int(21) [1]=> int(25) [2]=> int(22) [3]=> int(24) [4]=> int(26) }
[2]=> array(5) {
[0]=> int(34) [1]=> int(35) [2]=> int(39) [3]=> int(43) [4]=> int(42) }
[3]=> array(5) {
[0]=> int(55) [1]=> int(60) [2]=> int(52) [3]=> int(48) [4]=> int(53) }
[4]=> array(5) {
[0]=> int(70) [1]=> int(74) [2]=> int(73) [3]=> int(75) [4]=> int(72) }
}
2) for文を使って5列全部配列に格納しよう。
3)「縦横変換」はa-bで入れていったものをb-aで取り出すことを考えよう。
Step2-DEMOの完成スクリプト
<?php
// 初期化処理
$bingo = array();
$s = '';
// BINGO用ナンバーの格納
for( $i = 0 ; $i < 5; $i++) {
$numbers = range($i*15+1, $i*15+15);
shuffle($numbers);
$bingo[$i] = array_slice($numbers, 0, 5);
}
// テーブルへの書き出し
for ($j = 0; $j < 5; $j++) {
$s .= '<tr>';
for($k =0; $k < 5; $k++) {
// 3項演算子で真ん中を空白にする
$s .= ($j == 2 && $k ==2) ? '<td></td>' : sprintf('<td>%s</td>', $bingo[$k][$j]);
}
$s .= '</tr>';
}
?>
<!DOCTYPE html>
<html lan="ja">
<head>
<meta charset="utf-8">
<title>BINGO SHEET</title>
<style>
th, td {
width: 72px;
height: 36px;
border: 1px solid #eee;
font-size: 32px;
text-align: center;
}
th {
color : red;
}
</style>
</head>
<body>
<h1>BINGO SHEET</h1>
<table>
<thead>
<tr>
<th>B</th><th>I</th><th>N</th><th>G</th><th>O</th>
</tr>
</thead>
<tbody>
<!-- テーブルへの書き出し -->
<?php echo $s; ?>
</tbody>
</table>
</body>
</html>
PHPマニュアルを見よう
最初は何を書いているかわからないけど、とにかく疑問点があったらPHPマニュアルを見る癖をつけよう。
range()
array range ( mixed $start , mixed $end [, number $step = 1 ] )
==ある範囲の整数を有する配列を作成します。
パラメータ
start : シーケンスの最初の値。
end : 値が end に達するまでシーケンスが続きます。
step : step が指定されている場合、それは 要素毎の増加数となります。step は正の数でなければなりません。デフォルトは1です。
返り値 : start から end までの整数の配列を返します。
shuffle()
bool shuffle ( array &$array )
==この関数は、配列をシャッフル (要素の順番をランダムに) します。
パラメータ
array : 配列
返り値 : 成功した場合に TRUE を、失敗した場合に FALSE を返します。
array_slice()
array array_slice ( array $array , int $offset [, int $length = NULL [, bool $preserve_keys = false ]] )
== 配列の一部を展開する
array_slice()は、array から引数 offset および length で指定された連続する要素を返します。
パラメータ
array : 入力の配列
offset :offset が負の値ではない場合、要素位置の計算は、 配列 array の offset から始められます。offset が負の場合、要素位置の計算は array の最後から行われます。
length : lengthが指定され、正の場合、 配列の要素の中から最大でその数までの要素を返します。配列の要素数が length より少ない場合は、 配列から取得できる要素だけを返します。(略)。
返り値 : 切り取った部分を返します。
以上