ドットインストールの動画レッスン「PHPで作るビンゴシート」-PHP(3)

【この記事を読むのに必要な時間は約 10 分です。】

ドットインストールでPHPの勉強をしている。ドットインストールのPHP関連で用意されている動画レッスンを終えた後に、DEMOを見ただけでスクリプトが書けるようになるための練習。今回は、ドットインストールの動画レッスン「PHPで作る簡単おみくじ」-PHP(2)に続き3回目。

最初にDEMOと考え方のヒントを提示し、それだけで実際にスクリプトを書いてみよう。スクリプトを書き終わったら、完成版と見比べて答え合わせができるようにした。

今回は、「PHPで作るビンゴシート」（全6回）から。

1 Step1
2 ポイント
3 Step1の答え
4 Step2-DEMO
5 ポイント
6 ヒント
7 Step2-DEMOの完成スクリプト
8 PHPマニュアルを見よう

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
それぞれ任意の５つ。
真ん中は空白。

range() / shuffle() / array_slice()関数を使って1列の配列を作ろう。
for文を使って2次元配列で全ての数字を格納しよう。
縦の列と横の列を変換しよう。
「.=」を使ってどんどんセルを生成しよう。
真ん中は2－2。3項演算子で空セルを１つ作ろう。

ヒント

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 より少ない場合は、配列から取得できる要素だけを返します。(略)。
返り値 : 切り取った部分を返します。

以上