code – Party-Hearty https://creator-kid.com 人生なんて死ぬまでの暇つぶし。 Mon, 06 Jun 2022 04:01:35 +0000 ja hourly 1 https://creator-kid.com/wp-content/uploads/2022/06/favicon_pink.ico code – Party-Hearty https://creator-kid.com 32 32 【PHP】$_POSTと$_SESSIONを使ってフォームの値を送信する方法を解説 https://creator-kid.com/code/php-post_session/ Mon, 14 Feb 2022 14:52:55 +0000 https://creator-kid.com/?p=4419 $_POSTと$_SESSIONを使用して値を送る仕組み

今回用意された問題は、「ロジック」と「ビュー（HTML）」を別ファイル管理しています。実際の現場でもこのスタイルで仕事を進めていくことが多いそうです。

PHPはHTML内にプログラミングを書き込める利便性がある反面、ソースコードが複雑になりがちです。しかし、ファイルの読み込みを使用することでデザインとプログラムを分離することができます。

「ロジック」と「ビュー（HTML）」を別ファイル管理するメリットは、「ロジック担当者（プログラマー）」と「ビュー担当者（コーダー）」で作業内容が違うので、両者とも自分が担当している作業を分業しながらWebシステムを作成することができます。

デメリットは、画面に表示する値（変数）を「ロジック担当者」と「ビュー担当者」で共有しておかなければなりません。

  • ロジック担当者（プログラマー）：ロジック部分作成
  • ビュー担当者（コーダー）：各パーツをコーディング

ページ遷移図

この遷移図は理解しているとすごくわかりやすいのですが、理解できてないとチンプンカンプンだと思います。

この遷移図は、ユーザ入力画面からユーザ情報をフォーム（$_POST）と$_SESSIONで値を受け渡し、DB（データベース）に登録するまでの流れを表しています。

ポイント
  • $_POSTと$_SESSIONの使い所
  • $_SESSIONの動向

functions.php

<?php
function h($val)
{
  return htmlspecialchars($val, ENT_QUOTES, 'UTF-8');
}
function v($val)
{
  echo '<pre>';
  var_dump($val);
  echo '</pre>';
}

functions.phpによく使う関数を共通関数として登録しておく。

h関数：サニタイジング用関数を定義

ユーザーが入力した値を使用する場合は注意（セキュリティ対策）が必要です。なぜならば、悪意があるユーザーが悪意ある値を入力してくる場合があるからです。不正なJavaScriptコードを使用して他のサイト訪問者に攻撃を仕掛けることをクロスサイトスクリプティング(XSS)と呼びます。

こういったトラブルを防ぐには、htmlspecialchars()関数でHTMLで意味をもつ記号をエスケープします。

htmlspecialchars()関数：HTMLタグを無効化する関数

第１引数($val)：string変換対象文字列
第２引数(ENT_QUOTES)：ENT_QUOTES→シングルクォートとダブルクォートを共に変換
第３引数(‘UTF-8’)：stringエンコード

htmlspecialchars()関数を実行すると、HTMLで意味を持つ記号を実体参照に置き換えてくれます。(ex. 「<」 → 「&lt;」,「&」→「&amp;」)

このようなエスケープ操作のことをサニタイジングや無害化と呼びます。

v関数：デバッグ用関数を定義

デバック時に使用するvar_dump()関数をpreタグで囲んだ関数を定義しておく。preタグで囲むことでvar_dump()関数を表示した際に見えやすくしている。

form1.php

<?php
session_start();
session_regenerate_id(TRUE);

require_once __DIR__ . '/functions.php';


v($_SESSION);
$name    = isset($_SESSION['name'])    ? $_SESSION['name']    : NULL;
$subject = isset($_SESSION['subject']) ? $_SESSION['subject'] : NULL;
$body    = isset($_SESSION['body'])    ? $_SESSION['body']    : NULL;

require 'form1_view.php';

session_start()関数：セッション変数利用開始する関数

session_start()関数を呼び出すことで、サーバ側に値を保存するセッション変数「$_SESSION」を使用できるようになります。他のページと値を共有したいときに使用します。

セッションは、クッキーを使ってユーザを認識し必要なデータをサーバ側に保存して使用します。データがサーバ側に保存されるため、悪意あるユーザにデータを改ざんされる心配がありません。クッキーに比べて安全性が高く、データ量の制限も実質ありません。

session_regenerate_id()関数：セッションIDを再発行する関数

セッションハイジャック対策でPHPSESSIDの値を変更する。引数は常に「TRUE」を指定し、古いセッションファイルを削除する。ログイン時やセッション開始ページ、一定時間経過したときにセッションIDを新たに設定することで、セッションハイジャックの危険性を減らすことができます。

複数ページで処理する場合は、始点となるファイルでPHPSESSIDの値を変更することが多い。

require_once DIR . ‘/functions.php’：共通関数の読み込み

functions.phpに登録した共通関数のh関数とv関数を使用できるように、共通関数ファイルを読み込む。

三項方程式

今回ビューファイルで必要な値「名前」「件名」「本文」をロジックで用意している。

$name = isset($_SESSION[‘name’]) ? $_SESSION[‘name’] : NULL;

三項方程式を使用し、 isset($_SESSION[‘name’])は「$_SESSION[‘name’]」が存在するか調べます。初回アクセス時はまだ「$_SESSION[‘name’]」は存在しないので、変数にはfalseの「NULL」を代入します。

require ‘form1_view.php’;

reqiuireを使ってパーツ化したコンテンツを読み込みます。

form1.phpでは「form1_view.php」ファイルを読み込みます。

form1_view.php

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>入力画面｜フォーム</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="header">
    <div class="inner">
      <h1>入力画面</h1>
    </div>
  </div>
  <div class="content">
    <div class="inner">
      <?php if (isset($error)) : ?>
      <div class="error">
        <ul>
          <?php foreach ($error as $val) : ?>
          <li><?php echo $val; ?></li>
          <?php endforeach; ?>
        </ul>
      </div>
      <?php endif; ?>

      <form action="form2.php" method="post">
        <dl>
          <dt>名前</dt>
          <dd>
            <input type="text" name="name" value="<?php echo h($name); ?>" size="50">
          </dd>
          <dt>件名</dt>
          <dd>
            <input type="text" name="subject" value="<?php echo h($subject); ?>" size="50">
          </dd>
          <dt>内容</dt>
          <dd>
            <textarea name="body" cols="50" rows="10"><?php echo h($body); ?></textarea>
          </dd>
        </dl>
        <p>
          <input class="btn" type="submit" value="確認画面へ">
        </p>
      </form>
    </div>
  </div>
  <div class="footer">
    <div class="inner">
      <p class="copyright">© フォーム</p>
    </div>
  </div>
</body>
</html>
      <?php if (isset($error)) : ?>
      <div class="error">
        <ul>
          <?php foreach ($error as $val) : ?>
          <li><?php echo $val; ?></li>
          <?php endforeach; ?>
        </ul>
      </div>
      <?php endif; ?>

form1.phpでは$errorが存在しないので、エラー表示部分の利用はありません。
しかし、後々出てくる「form2.php」で活躍します。

      <form action="form2.php" method="post">
        <dl>
          <dt>名前</dt>
          <dd>
            <input type="text" name="name" value="<?php echo h($name); ?>" size="50">
          </dd>
          <dt>件名</dt>
          <dd>
            <input type="text" name="subject" value="<?php echo h($subject); ?>" size="50">
          </dd>
          <dt>内容</dt>
          <dd>
            <textarea name="body" cols="50" rows="10"><?php echo h($body); ?></textarea>
          </dd>
        </dl>
        <p>
          <input class="btn" type="submit" value="確認画面へ">
        </p>
      </form>

HTMLでフォームを作成します。
今回は「form2.php」にPOST形式で値を送るので、action=”form2.php” method=”POST”となります。

ユーザから情報を得る場合は、基本$_POSTを使用して値を取得します。

inputタグのvalueの部分がユーザ入力値としてform2.phpに送られるので、ユーザ入力値の部分をh関数のhtmlspecialchars()関数で入力値をサニタイジングします。

v($_SESSION);

ここでセッションをv()関数を使って確認します。

form1.php
form1.php

最初のform1.phpではまだ$_SESSIONに値が入ってないことが確認できます。

form2.php

form1.phpで確認画面へボタンをクリックするとform2.phpへ移ります。

<?php
session_start();
require_once __DIR__ . '/functions.php';

v($_POST);

$name    = isset($_POST['name'])    ? $_POST['name']    : NULL;
$subject = isset($_POST['subject']) ? $_POST['subject'] : NULL;
$body    = isset($_POST['body'])    ? $_POST['body']    : NULL;

$name    = trim($name);
$subject = trim($subject);
$body    = trim($body);

$error = [];

if ($name == '') {
  $error[] = 'お名前は必須項目です。';
} else if (mb_strlen($name) > 20) {
  $error[] = 'お名前は20文字以内でお願い致します。';
}

if ($subject == '') {
  $error[] = '件名は必須項目です。';
} else if (mb_strlen($subject) > 50) {
  $error[] = '件名は50文字以内でお願い致します。';
}

if ($body == '') {
  $error[] = '内容は必須項目です。';
} else if (mb_strlen($body) > 500) {
  $error[] = '内容は500文字以内でお願い致します。';
}

if (count($error) > 0) {
  require 'form1_view.php';
} else {
  $_SESSION['name']    = $name;
  $_SESSION['subject'] = $subject;
  $_SESSION['body']    = $body;
  require 'form2_view.php';
}

form2.phpではform1.phpから$_POSTで送った値を取得します。

form2.php
form2.php

form1.phpから$_POSTで送られた値はform2.phpに届いていることが確認できますが、この時点でも$_SESSIONにはまだ値がありません。

$name    = isset($_POST['name'])    ? $_POST['name']    : NULL;
$subject = isset($_POST['subject']) ? $_POST['subject'] : NULL;
$body    = isset($_POST['body'])    ? $_POST['body']    : NULL;

$name    = trim($name);
$subject = trim($subject);
$body    = trim($body);

三項方程式でそれぞれ変数にform1.phpから$_POSTで送られた値を代入します。
さらにtrim()関数で先頭・末尾にあるホワイトスペースを削除したものを変数へ再代入します。

$error = [];

if ($name == '') {
  $error[] = 'お名前は必須項目です。';
} else if (mb_strlen($name) > 20) {
  $error[] = 'お名前は20文字以内でお願い致します。';
}

if ($subject == '') {
  $error[] = '件名は必須項目です。';
} else if (mb_strlen($subject) > 50) {
  $error[] = '件名は50文字以内でお願い致します。';
}

if ($body == '') {
  $error[] = '内容は必須項目です。';
} else if (mb_strlen($body) > 500) {
  $error[] = '内容は500文字以内でお願い致します。';
}

$error = [];
エラー変数を配列化して、エラー時に出力するエラー文を配列管理します。

mb_strlen()関数で変数値の文字列の長さを取得します。
if分を使い、未入力時と文字数を超えた場合にエラー変数にエラー文を配列で管理していきます。

if (count($error) > 0) {
  require 'form1_view.php';
} else {
  $_SESSION['name']    = $name;
  $_SESSION['subject'] = $subject;
  $_SESSION['body']    = $body;
  require 'form2_view.php';
}

エラーがある場合は、「fomr1_view.php」を読み込みます。

エラーがない場合は、$_SESSIONに確定したユーザ入力値を代入し、他のページでも使えるようにします。そして「form2_view.php」を読み込みます。

form2_view.php

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>確認画面｜フォーム</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div class="header">
    <div class="inner">
      <h1>確認画面</h1>
    </div>
  </div>
  <div class="content">
    <div class="inner">

      <p>以下の内容でよろしければ送信ボタンを押してください。</p>

      <dl class="confirm">
        <dt>お名前：</dt>
        <dd><?php echo h($name); ?></dd>
        <dt>件名：</dt>
        <dd><?php echo h($subject); ?></dd>
        <dt>内容：</dt>
        <dd><?php echo nl2br(h($body)); ?></dd>
      </dl>

      <div class="confirm-btn">
        <p><a class="btn" href="form1.php">入力画面に戻る</a></p>
        <p><a class="btn" href="form3.php">送信する</a></p>
      </div>
    </div>
  </div>
  <div class="footer">
    <div class="inner">
      <p class="copyright">© フォーム</p>
    </div>
  </div>
</body>
</html>
      <dl class="confirm">
        <dt>お名前：</dt>
        <dd><?php echo h($name); ?></dd>
        <dt>件名：</dt>
        <dd><?php echo h($subject); ?></dd>
        <dt>内容：</dt>
        <dd><?php echo nl2br(h($body)); ?></dd>
      </dl>

ユーザ入力値を使用するので、h()関数を使ってエスケープします。

記述量が多い「内容」では「nl2br()」を使って見やすく表示します。

v($_SESSION);

ここでもセッションをv()関数を使って確認します。

form2.php
form2.php

上記で記述したように、form1.phpからページ移動してきたので$_POSTには値が入っていますが、$_SESSIONにはまだ値がありません。

form1.php
form1.php

その後「入力画面へ戻る」ボタンをクリックしform1.phpのページへ戻ると、最初に値が入ってなかった$_SESSIONに値が入っています。

これはform2.phpでエラーがなかった場合に$_SESSIONに値が代入されるからです。

form2.php
form2.php

再びform2.phpへ戻るとこちらの$_SESSIONにもちゃんと値が入っていることが確認できます。

form3.php

<?php
session_start();
require_once __DIR__ . '/functions.php';

$name    = isset($_SESSION['name'])    ? $_SESSION['name']    : NULL;
$subject = isset($_SESSION['subject']) ? $_SESSION['subject'] : NULL;
$body    = isset($_SESSION['body'])    ? $_SESSION['body']    : NULL;

unset($_SESSION['name']);
unset($_SESSION['subject']);
unset($_SESSION['body']);

$error = [];
if ($name === NULL) {
  $error[] = '名前の値なし';
}

if ($subject === NULL) {
  $error[] = '件名の値なし';
}

if ($body === NULL) {
  $error[] = '本文の値なし';
}

受け取った値を使った処理：例）データベースへの登録など

if (count($error) > 0) {
  require 'error_view.php';
} else {
  require 'form3_view.php';
}

form1.phpからform2.phpへ値を送信するときは、$_POSTを使用しましたが、form2.phpからform3.phpへの値の受け渡しは$_SESSIONを使用します。

$name    = isset($_SESSION['name'])    ? $_SESSION['name']    : NULL;
$subject = isset($_SESSION['subject']) ? $_SESSION['subject'] : NULL;
$body    = isset($_SESSION['body'])    ? $_SESSION['body']    : NULL;

$_SESSIONから値を取得し、それぞれ変数に値を代入したら$_SESSIONを削除します。

unset($_SESSION['name']);
unset($_SESSION['subject']);
unset($_SESSION['body']);

unset()関数：指定した変数の割り当てを解除・配列内の部屋を削除します。セッション変数の部屋は明示的に削除しないとずっと存在してしまうので、使用しなくなった部屋はunset()関数で削除しなければなりません。

$error = [];
if ($name === NULL) {
  $error[] = '名前の値なし';
}

if ($subject === NULL) {
  $error[] = '件名の値なし';
}

if ($body === NULL) {
  $error[] = '本文の値なし';
}

受け取った値を使った処理：例）データベースへの登録など

if (count($error) > 0) {
  require 'error_view.php';
} else {
  require 'form3_view.php';
}

エラーがあれば、エラー変数にエラーメッセージを代入します。

エラーがあるとき、「error_view.php」を読み込みます。
エラーがないときは、「form3_view.php」を読み込みます。

実際にデータベースに値を受け渡すには、この時点でロジックを組んでいくみたいです。

v($_SESSION);

ここでもセッションをv()関数を使って確認します。

form3.php
form3.php

unset($_SESSION)の前後でv()関数で$_SESSIONの動向を確認します。

unset前では$_SESSIONに値が入っているのに対し、unset後の$_SESSIONには値が入っていないことが確認できます。

form3_view.php

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>完了画面｜フォーム</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div class="header">
    <div class="inner">
      <h1>完了画面</h1>
    </div>
  </div>
  <div class="content">
    <div class="inner">

      <p>以下の値で処理をしました。</p>

      <dl class="confirm">
        <dt>お名前：</dt>
        <dd><?php echo h($name); ?></dd>
        <dt>件名：</dt>
        <dd><?php echo h($subject); ?></dd>
        <dt>内容：</dt>
        <dd><?php echo nl2br(h($body)); ?></dd>
      </dl>

      <div class="content-footer">
        <p><a href="form1.php">入力画面に戻る</a></p>
      </div>
    </div>
  </div>
  <div class="footer">
    <div class="inner">
      <p class="copyright">© フォーム</p>
    </div>
  </div>
</body>

</html>

ユーザ入力値を表示する際は毎回h()関数でエスケープしておきます。

error_view.php

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>エラー｜フォーム</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="header">
    <div class="inner">
      <h1>エラー</h1>
    </div>
  </div>
  <div class="content">
    <div class="inner">

      <?php /* ?>
      <?php if (isset($error)) : ?>
      <div class="error">
        <ul>
          <?php foreach ($error as $val) : ?>
          <li><?php echo $val; ?></li>
          <?php endforeach; ?>
        </ul>
      </div>
      <?php endif; ?>
      <?php */ ?>

      <p>セッションが切れました</p>
      <p><a href="form1.php">もう一度やり直してください。</a></p>
    </div>
  </div>
  <div class="footer">
    <div class="inner">
      <p class="copyright">© フォーム</p>
    </div>
  </div>
</body>
</html>
      <?php /* ?>
      <?php if (isset($error)) : ?>
      <div class="error">
        <ul>
          <?php foreach ($error as $val) : ?>
          <li><?php echo $val; ?></li>
          <?php endforeach; ?>
        </ul>
      </div>
      <?php endif; ?>
      <?php */ ?>

この部分はデバック用なので実際には表示されません。
エラーが出たときにどんなエラーが出たのか確認できます。

]]> 【PHP】登録フォームで$_POST形式で値を受け取る際のエラーチェックを例題と共に解説 https://creator-kid.com/code/php-form_post/ Tue, 01 Feb 2022 13:48:37 +0000 https://creator-kid.com/?p=4304 私がPHPを学んでいる中で一番理解するのに苦労したのが、「$_POST形式で値を受け取る際のエラーチェック」だったので、その例題と解答方法をまとめました。

なぜ苦労したかというと、アンケートフォームなどでユーザーが普通に入力して起こりうるエラーしか考えつかず、その他起こりうるエラーについて理解するのが困難だったためです。

POST形式の値の送受信の問題

フォームの作成

以下の内容のフォームを作成すること。

  • 名前
  • メールアドレス
  • 性別
  • 年代
  • お問い合わせ内容

送信について

送信先は「comfirm.php」とする。

送信方法は「POST」とする。

受信について

必須項目

  • 名前
  • お問い合わせ内容

上限値

  • 名前：20文字
  • メールアドレス：100文字
  • お問い合わせ内容：400文字

画面表示

ユーザー入力値に問題なければ 送られてきた値を表示。

ユーザー入力値に問題があるときは エラーメッセージを表示。

フォームパーツについて

名前は入力系パーツを使用しname属性「myname」とする。

メールアドレスは入力系パーツを使用しname属性「mail」とする。

性別は選択系パーツを使用しname属性「gender」とする。
送信する値は「選択しない」>「0」、 「男性」>「1」、 「女性」>「2」

年代はセレクトボックスを使用しname属性「age」とする。
送信する値は「選択しない」>「空文字」、 「10代」>「1」、 「20代」>「2」、 「30代」>「3」、 「40代」>「4」、 「50代以上」>「5」

お問い合わせ内容はテキストエリアを使用しname属性「body」とする。

「送信ボタン」と「リセットボタン」を下部に配置すること。

その他のルール

文章構成（divでグループ化や定義リストを使用する等）は自由に決めて構わない。

時間があればCSSで自由にデザインすること。

解答例

作成したお問い合わせフォーム

HTML

<h1>問題解答</h1>
<form action="comfirm.php" method="post">
  <fieldset>
    <legend>お問い合わせフォーム</legend>
    <dl>
      <dt>名前</dt>
      <dd>
        <input type="text" name="myname" required placeholder="例）山田 太郎">
      </dd>
      <dt>メールアドレス</dt>
      <dd>
        <input type="email" name="mail" placeholder="例）name@example.com">
      </dd>
      <dt>性別</dt>
      <dd>
        <label><input type="radio" name="gender" value="0">未選択</label>
        <label><input type="radio" name="gender" value="1">男性</label>
        <label><input type="radio" name="gender" value="2">女性</label>
      </dd>
      <dt>年代</dt>
      <dd>
        <select name="age">
          <option value="">選択してください</option>
          <option value="0">未回答</option>
          <option value="1">10代</option>
          <option value="2">20代</option>
          <option value="3">30代</option>
          <option value="4">40代</option>
          <option value="5">50代以上</option>
        </select>
      </dd>
      <dt>お問い合わせ内容</dt>
      <dd>
        <textarea name="body" cols="50" rows="10" required></textarea>
      </dd>
    </dl>
    <div class="button">
      <input class="btn" type="submit" value="送信">
      <input class="btn" type="reset" value="リセット">
    </div>
  </fieldset>
</form>

フォームパーツが多い場合は、fieldset要素を使ってグループを作成できる。
form要素内に入力パーツが少ない場合は、field要素とlegend要素は省略可能。

name属性はPHPの送受信には必須の属性で、値の送受信用の名前。
CSSでのclass属性、JSでのid属性のようなもの。

input要素をlabelタグで囲むと、クリック領域が広がりユーザーが使いやすくなる。

required属性を付与すると、必須項目になる。

placeholderを入力しておくと、名前やメールアドレスなどの入力欄に参考例をあらかじめ入力しておくことができ、ユーザーがわかりやすくなる。

CSS

fieldset{
  width: 50%;
  margin: 0 auto;
  background-color: aliceblue;
}

dt{
  background-color: #ccc;
}
dd{
  padding: 1em;
  margin: 0;
}

.btn{
  border-radius: 25px;
  background-color: #ccc;
  color: #000;
}

.button{
  text-align: right;
}

CSSは特に重要ではないですが、一応載せておきます。

PHP

<?php
echo '<pre>';
var_dump($_POST);
echo '</pre>';

$error = [];

echo '<pre>';
var_dump($error);
echo '</pre>';

$limit = 20;
if (isset($_POST['myname'])) {
  $myname = $_POST['myname'];
  if ($myname === '') {
    $error[] = '名前は必須項目です';
  } else if (mb_strlen($myname) > $limit) {
    $error[] = "名前は{$limit}文字以下で入力してください";
  }
} else {
  $error[] = '名前の値が届いていません';
}

$limit = 100;
if (isset($_POST['mail'])) {
  $mail = $_POST['mail'];
  if (mb_strlen($mail) > $limit) {
    $error[] = "メールアドレスは{$limit}文字以下で入力してください";
  }
} else {
  $error[] = 'メールアドレスの値が届いていません';
}

$limit = 400;
if (isset($_POST['body'])) {
  $body = $_POST['body'];
  if ($body === '') {
    $error[] = 'お問い合わせ内容は必須項目です';
  } else if (mb_strlen($body) > $limit) {
    $error[] = "お問い合わせ内容は{$limit}文字以下で入力してください";
  }
} else {
  $error[] = 'お問い合わせ内容の値が届いていません';
}

if (isset($_POST['gender'])) {
  $gender = $_POST['gender'];
  if (ctype_digit($gender)) {
    if ($gender < 0 || $gender > 2) {
      $error[] = '性別の値が不正です';
    }
  } else {
    $error[] = '性別の値が不正です';
  }
}

if (isset($_POST['age'])) {
  $age = $_POST['age'];
  if ($age !== '') {
    if (ctype_digit($age)) {
      if ($age < 0 || $age > 5) {
        $error[] = '年代の値が不正です:2';
      }
    } else {
      $error[] = '年代の値が不正です:1';
    }
  }
} else {
  $error[] = '年代の値が届いていません';
}

if (count($error) === 0) {
  $genderList = [
    0 => '選択してない',
    1 => '男性',
    2 => '女性',
  ];
  if (isset($gender)) {
    $genderStr = $genderList[$gender];
  } else {
    $genderStr = '選択していない';
  }

  if ($age === '') {
    $ageStr = '選択していない';
  } else if ($age === '0') {
    $ageStr = '未回答';
  } else if ($age === '5') {
    $ageStr = "{$age}0代以上";
  } else {
    $ageStr = "{$age}0代";
  }
}
?>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>POST形式で送信された値を取得</title>
</head>
<body>
  <div class="box">
    <div class="inner">
      <?php if (count($error) > 0) : ?>
        <h1>エラー</h1>
        <ul class="error">
          <?php foreach ($error as $val) : ?>
            <li><?php echo $val; ?></li>
          <?php endforeach; ?>
        </ul>
      <?php else : ?>
        <h1>確認</h1>
        <dl>
          <dt>名前</dt>
          <dd><?php echo $myname; ?></dd>
          <dt>メールアドレス</dt>
          <dd><?php echo $mail; ?></dd>
          <dt>性別</dt>
          <dd><?php echo $genderStr; ?></dd>
          <dt>年代</dt>
          <dd><?php echo $ageStr; ?></dd>
          <dt>お問い合わせ内容</dt>
          <dd><?php echo nl2br($body); ?></dd>
        </dl>
      <?php endif; ?>
      <p>
        <a href="form.html">フォームに戻る</a>
      </p>
    </div>
  </div>
</body>
</html>

これが解答例です。
わかりやすいように各パーツごと分解して解説していきます。

受信した値を確認

echo '<pre>';
var_dump($_POST);
echo '</pre>';

HTMLで作成したフォームからPOST形式で送られてきた値をvar_dumpして確認。

エラー変数

$error = [];

$error(変数宣言）して、エラーをこの$errorに配列として溜めていく。

名前チェック

  • 届いているかチェック
  • 必須チェック(空文字チェック)
  • 上限値チェック(20文字)
$limit = 20;
if (isset($_POST['myname'])) {
  $myname = $_POST['myname'];
  if ($myname === '') {
    ※ 必須エラー
    $error[] = '名前は必須項目です';
  } else if (mb_strlen($myname) > $limit) {
    ※ 上限値エラー
    $error[] = "名前は{$limit}文字以下で入力してください";
  } else {
    ※ OK
  }
} else {
  ※ 届いているかエラー
  $error[] = '名前の値が届いていません';
}

if (isset($_POST[‘myname’])) → 値が届いているかチェック

if ($myname === ”) → 空文字かチェック

else if (mb_strlen($myname) > $limit) → 文字数上限値(20文字)チェック

isset($_調べる変数名)：変数が定義されているか調べられる
定義されている場合はtrue、定義されていない場合はfalseを返す
値を受け取っていればtrueになる
→$_POSTの連想配列に箱があるかないかのチェック

※実際にフォームから値を送信してそのページに遷移した場合にはエラーは発生しません。しかし、直接そのページ（値を取得するページ）にアクセスした場合には$_POST[‘myname’]が未定義になるのでエラーが発生します。

mb_strlen(引数) ：引数で指定した文字列の文字数を返す
[multi byte_strings length]
※JSの文字列に対するlengthと同じような感じ

メールアドレスチェック

  • 届いているかチェック
  • 上限値チェック(100文字）
$limit = 100;
if (isset($_POST['mail'])) {
  $mail = $_POST['mail'];
  if (mb_strlen($mail) > $limit) {
    $error[] = "メールアドレスは{$limit}文字以下で入力してください";
  } else {
    ※ OK
  }
} else {
  $error[] = 'メールアドレスの値が届いていません';
}

if (isset($_POST[‘mail’])) → 値が届いているかチェック

if (mb_strlen($mail) > $limit) → 文字数上限値(100文字)チェック

メールアドレスは必須項目ではないので、空文字チェックはなし

お問い合わせ内容チェック

  • 届いているかチェック
  • 必須チェック(空文字チェック)
  • 上限値チェック(400文字)
$limit = 400;
if (isset($_POST['body'])) {
  $body = $_POST['body'];
  if ($body === '') {
    $error[] = 'お問い合わせ内容は必須項目です';
  } else if (mb_strlen($body) > $limit) {
    $error[] = "お問い合わせ内容は{$limit}文字以下で入力してください";
  } else {
    ※ OK
  }
} else {
  $error[] = 'お問い合わせ内容の値が届いていません';
}

if (isset($_POST[‘body’])) → 値が届いているかチェック

if ($body === ”) → 空文字かチェック

else if (mb_strlen($body) > $limit)→ 文字数上限値(400文字)チェック

性別チェック

◇未選択は値が届かない
◇「0」「1」「2」が届く
OKルート:「届いていない」or「範囲内の数字」

  • 届いているかチェック → 届いていなくてもエラーにせずOKでチェックぬける
  • 数字チェック
  • 範囲チェック
if (isset($_POST['gender'])) {
  $gender = $_POST['gender'];
  if (ctype_digit($gender)) {
    if ($gender < 0 || $gender > 2) {
      $error[] = '性別の値が不正です';
    } else {
      ※ OK
    }
  } else {
    $error[] = '性別の値が不正です';
  }
} else {
  ※ OK:値が届いていない（選択していない）
  ※ 表示するときに変数がないので
  　 表示用変数を別途用意しなければならない
}

if (isset($_POST[‘gender’]) → 値が届いているかチェック
値が届いていない場合でもOK

if (ctype_digit($gender)) → 値が数字かチェック

if ($gender < 0 || $gender > 2) → 値の範囲チェック

ctype_digit(引数)：引数が数字かどうかを調べる関数
→ 与えられた文字列textのすべての文字が 数字であるかどうかを調べる

trueの場合
①引数は文字列型
②文字列がすべて数字
③小数点をNGとして、整数かをチェック

例）
100 = false
‘100’ = true
0.5 = false
‘0.5’ = false

※ 表示するときに変数がないので、表示用変数を別途のちに用意する必要がある

年代チェック

◇未選択は空文字
◇「0」「1」「2」「3」「4」「5」が届く
OKルート:「空文字」or「範囲内の数字」

  • 届いているかチェック
  • 空文字じゃないかチェック → 空文字でもエラーにせずOKでチェックぬける
  • 数字チェック
  • 範囲チェック
if (isset($_POST['age'])) {
  $age = $_POST['age'];
  if ($age !== '') {
    ※ 範囲内数字のチェック
    if (ctype_digit($age)) {
      if ($age < 0 || $age > 5) {
        $error[] = '年代の値が不正です:2';
      } else {
        ※ OK:範囲内の数字
      }
    } else {
      $error[] = '年代の値が不正です:1';
    }
  } else {
    ※ OK:空文字の時（選択しなかった時）
  }
} else {
  $error[] = '年代の値が届いていません';
}

if (isset($_POST[‘age’])) → 値が届いているかチェック

if ($age !== ”) → 空文字じゃないかチェック
この場合、空文字のときにfalseとなる

if (ctype_digit($age)) → 値が数字かチェック

if ($age < 0 || $age > 5) → 値の範囲チェック

性別・年代の表示用変数を準備

if (count($error) === 0) {
  ※ エラーがないときは表示変数を整える
  ※ 選択項目表示用
  $genderList = [
    0 => '選択してない',
    1 => '男性',
    2 => '女性',
  ];
  if (isset($gender)) {
    ※ 性別の値が届いたとき
    $genderStr = $genderList[$gender];
  } else {
    ※ 性別の値が届いていないとき
    ※ $genderが存在しないとき
    $genderStr = '選択していない';
  }

  if ($age === '') {
    $ageStr = '選択していない';
  } else if ($age === '0') {
    $ageStr = '未回答';
  } else if ($age === '5') {
    $ageStr = "{$age}0代以上";
  } else {
    $ageStr = "{$age}0代";
  }
}

view画面

HTMLにPHPを組み込んで、view画面を作成

<body>
  <div class="box">
    <div class="inner">
      <?php if (count($error) > 0) : ?>
        <h1>エラー</h1>
        <ul class="error">
          <?php foreach ($error as $val) : ?>
            <li><?php echo $val; ?></li>
          <?php endforeach; ?>
        </ul>
      <?php else : ?>
        <h1>確認</h1>
        <dl>
          <dt>名前</dt>
          <dd><?php echo $myname; ?></dd>
          <dt>メールアドレス</dt>
          <dd><?php echo $mail; ?></dd>
          <dt>性別</dt>
          <dd><?php echo $genderStr; ?></dd>
          <dt>年代</dt>
          <dd><?php echo $ageStr; ?></dd>
          <dt>お問い合わせ内容</dt>
          <dd><?php echo nl2br($body); ?></dd>
        </dl>
      <?php endif; ?>
      <p>
        <a href="form.html">フォームに戻る</a>
      </p>
    </div>
  </div>
</body>

<?php if (count($error) > 0) : ?> → エラーがあればエラー文を表示

<?php else : ?> → エラーがない場合は、フォームからPOST形式で取得した値を各々表示

<?php endif; ?> → PHPのif文終了タグ

nl2br関数(new line to br)： 改行コード前にbr要素を挿入してくれる
ブラウザ画面上で改行をサポートしてくれる
→ テキストエリアの内容を表示する時によく使う

]]> 【2022年】W3Techsが発表した「2021年に躍進したWeb技術」まとめ https://creator-kid.com/code/w3techs-2022/ Thu, 06 Jan 2022 15:44:38 +0000 https://creator-kid.com/?p=4016
この記事を読むと
  • W3Techsの「Web Technologies of the Year 2021」を日本語で理解できます
  • 成長しているWeb技術の最新のトレンドがわかります

年が明けて2022年になりました。
今後の進路について考えていた時に、思い浮かぶ不安を解消しようとネットサーフィンしていると辿り着いたのがこのW3Techsのページ。

W3Techs(World Wide Web Technology Surveys)は、さまざまなWeb技術についての情報を提供しており、彼らのVisionは「”Provide the most reliable and most extensive source of information on web technology usage.” (最も信頼性が高く、最も広範なWeb技術使用に関する情報を提供する)」と掲げている。

Q-Successは2022年1月3日、W3Techsの一環として、さまざまなWeb技術カテゴリーについての調査結果を発表した。

調査対象となるのは人気ランキングの上位1000万サイトで、2021年1月1日と2022年1月1日の使用Webサイト数を比較し、最も増加幅が大きかった上位３つの技術を「Web Technologies of the Year 2021」として発表してます。このWeb Technologies of the Yearの調査は毎年実施されています。

Web Technologies of the Year 2021
Web Technologies of the Year 2021

2021年に躍進したWeb技術（ Web Technologies of the Year 2021 ）

参考ページ

https://w3techs.com/blog/entry/web_technologies_of_the_year_2021

コンテンツ管理システム（CMS）

  1. WordPress
  2. Shopify
  3. Wix

「もちろんまたWordPress」と言いたくなるくらい、WordPressは使用サイト数年間増加幅で12年連続で１位になっていて、Webサイトでの使用率は43.2%に達している。

Shopifyは去年と同様にコンテンツ管理システム(CMS)で２番目の速さで成長している。Webサイトでの使用率は、去年の3.2%から4.4%にまで増加している。

Joomla や Drupalを退けて３位にランクインしたのはWixで、Shopifyとともにホスト型CMSのトレンドの代表的な例です。

ホスト型CMSを使用するとWebサイトをより迅速に作成できますが、セルフホスト型CMSを使用するとより詳細な制御が可能になります。

セルフホスト型CMS

WordPressやJoomla、Drupalなどのセルフホスト型CMSを使用する場合、ブログもしくはウェブサイトの作成の際に、別途サーバーとドメインを用意しなければならないことを意味します。

ホスト型CMS

ホスト型CMSにはSquarespaceやWixなどが含まれ、ブログやウェブサイトの作成に別途ドメイン名やホスティングサービスを用意する必要がなく、アカウントを登録するだけで始められます。

サーバーサイドプログラミング言語

  1. Ruby
  2. JavaScript
  3. Java

Rubyが4年連続１位となりました。たくさんの新しいウェブサイトでは、Ruby(Ruby on Rails)がベースとなっている「Shopify」が使用されています。
２番目はJavaScriptで、2021年にユーザーベースが55%も増加しました。
３番目にランクインしたのはJavaで、何年にも渡り使用率の増減が見られましたが2021年は続伸しました。

JavaScriptライブラリ

  1. Underscore
  2. React
  3. Lodash

今回初めてJavaScriptライブラリーオブザイヤーに輝いたUnderscoreは、極めて多くの使い勝手の良い関数型プログラミングヘルパーを、彼らのウェブサイトで提供していると主張しています。ますます多くの人々がそれらを好んでいるようです。

2番目にランク付けされたReactと3番目のLodashのどちらとも、人気のあるWebサイトビルダー「Wix」に使用された恩恵を受けた形となった。

Webサーバー

  1. Cloudflare Server
  2. LiteSpeed
  3. Node.js

Nginxは2021年5月にApacheを追い抜いて「最も人気のあるWebサーバー」になるという大きな瞬間を迎えました。ただし、他のツールの成長率はさらに高かった。
CloudFlareのサーバーは、CloudFlareのCDNサービスの力強い成長により、昨年に続き勝利しました。

LiteSpeedは昨年と同じ2番目で、次にNode.jsが続きます。

(New!) Webパネル

  1. RunCloud
  2. GridPane

これは私たち(W3techs)の調査の新しいカテゴリーです。PleskとcPanelは最も人気のある競合他社ですが、2021年に最も力強い成長を遂げたのはRunCloudで、今回のWebパネルオブザイヤーです。
2番目はGridPaneです。他のWebパネルプロバイダーの人気が高まっていないため、3番目のランクはなし。

OS（オペレーティングシステム）

  1. Linux
  2. Debian
  3. Ubuntu

Linuxは、今回初めてオペレーティングシステムオブザイヤーを獲得しました。Linuxは近年急速に成長していますが、今年はLinuxサーバーの成長が不均衡に高く、特定のLinuxディストリビューションに割り当てることができません。
2位と3位にランクインしているDebianとUbuntuが、ほとんどのWebサイトを獲得したディストリビューションです。

Linux とは？

Linuxとは、本来OSのコアであるカーネルといわれるものをさす言葉です。しかし、普段目にしているOSはOSのコア以外のものも含まれており、それを普段OSとして認識しているといえます。

通常Linuxを利用する場合、カーネル以外にも様々なソフトウェアが組み合わされた状態で利用します。このカーネル以外のその他のソフトウェアを一式含んだ状態が広義のLinuxです。つまり、一般的にいうLinuxとはこの広義の意味でのLinuxをさします。

Linux ディストリビューションとは？

LinuxカーネルとOSを構成するその他のソフトウェアを組み合わせた形で配布する、という形がディストリビューションです。つまり、ディストリビューションとは、カーネル・シェル・各種ドライバー・アプリケーションソフトなどひとまとめにしてパッケージ化したもの。
通常Linuxといった場合、このディストリビューションを指していることがほとんどです。

Webホスティングプロバイダー

  1. Shopify
  2. Hostinger
  3. Wix

Shopifyは、専用のホスティングプロバイダーよりも速くホスト型eコマースプラットフォームを成長させることにより、Webホスティングカテゴリーでのタイトルを守りました。
2番目はHostingerで、2021年にマーケットシェアを0.4％から1.2％に増やしました 。
3番目はホスト型CMSプロバイダーであるWixです。

(New!) データセンタープロバイダー

  1. Amazon
  2. Hostinger
  3. DigitalOcean

データセンタープロバイダーは、私たち(W3techs)の調査の新しいカテゴリーです。Amazonは最も人気のあるプロバイダーであるだけでなく、2021年に最も急速に成長しているため、最初のデータセンタープロバイダーオブザイヤーです。
Hostingerは非常に成功した年であり、2位にランクインしています。 
DigitalOceanは3番目です。

リバースプロキシプロバイダー

  1. Cloudflare
  2. Fastly
  3. Amazon CloudFront

Cloudflareは、6年連続でリバースプロキシプロバイダーオブザイヤーです。ウェブサイトの19.4％がCloudflareを使用しており、1年前の15.4％から増加しています。これは非常に印象的な増加です。
FastlyとAmazon CloudFrontは、昨年と同様に２番目と３番目です。

DNSサーバプロバイダー

  1. Cloudflare
  2. Newfold Digital Group
  3. Hostinger

Cloudflareは、このカテゴリーでのリードをさらに拡大することにより、今回もDNSサーバープロバイダーオブザイヤーの称号を獲得しています。 Newfold Digital Group（前Endurance）は2番目であり、Hostingerはこのカテゴリでもトップ3にランクインしています。

電子メールサーバプロバイダー

  1. Microsoft
  2. Gmail
  3. Hostinger

電子メールサーバー分野でのMicrosoftとGmailの成長率は2021年とほぼ同じでしたが、Microsoftが少し先を行っており、昨年の優勝者であるGmailからタイトルを獲得しています。 
Hostingerはもう1つのカテゴリーでも3番目にランクインしました。

SSL認証局（CA）

  1. Let’s Encrypt
  2. Sectigo
  3. DigiCert Group

Let’s Encryptはすでにここ数年で非常に成功していますが、ほとんどの場合、ルート証明書として「IdenTrust」を使用していました。しかし現在、独自のルート証明書が確立されたことが2021年の彼らの力強い成長を説明するものであり、今回初めてタイトルを獲得しました。
Comodoと呼ばれていた頃に2度タイトルを獲得したSectigo(前Comodo)が2位、DigiCertGroupが3位です。

JavaScript CDN

  1. CDNJS
  2. jsDelivr
  3. unpkg

JavaScriptコンテンツ配信ネットワークカテゴリーの結果は、過去3年間とまったく同じです 。CDNJSは6回連続で優勝しています。CDNJSは、2021年8月に最も人気のあるJavaScript CDNとしてGoogle Hosted Librariesに取って代わりました 。
２番目のjsDelivrは、RawGitを取得したことで恩恵を受けています。 unpkgは3番目。

トラフィック分析ツール

  1. Google Analytics
  2. Facebook Pixel
  3. Hotjar

Google Analyticsは過去7回の優勝を経て、今回2位のFacebookPixelからタイトルを取り戻しました 。 Hotjarは過去2年間と同様に3番目です。

広告ネットワーク

  1. Google Ads
  2. Xandr
  3. Amazon Associates

Googleはウェブ広告市場での優位性をさらに高めることに成功している。何年も前に別々のネットワークとして数えた「DoubleClick」と「Google AdSense」を含めると、これで8回目となる最も急速に成長している広告ネットワークです。 
マイクロソフトに買収されようとしているXandrは、この市場で2番目に速い成長率を示しました。2017年の勝者であるAmazon Associatesは、今年は第3位。

タグマネージャー

  1. Google Tag Manager
  2. Tealium
  3. Ensighten

タグマネージャー市場は、99.6％という驚くべきマーケットシェアを持つGoogle Tag Managerによって完全に支配されています。Google Tag Managerは成長を続けており、8年連続でタグマネージャーオブザイヤーです。
タグマネージャー界で最も急成長している競合他社は、TealiumとEnsightenです。

ソーシャルウィジェット

  1. Twitter
  2. Facebook
  3. LinkedIn

Twitterは2021年8月に最も人気のあるソーシャルウィジェットになりました。これは2014年と2015年にタイトルを獲得して以来のソーシャルウィジェットオブイヤーです 。
２番目はFacebook、LinkedInは３番目です。

まとめ

今回の記事を作成してよかったことが３点ありました。

１つ目は、Web技術についてのトレンドを知れたことです。Web制作の勉強を始めて3ヶ月が経った現時点で「今勉強していることは時代遅れなんじゃないか？」などの不安が巡っていました。行動を起こすことにより、W3Techsの2021年Web技術の調査結果のページに巡り合え、トレンドを知ることで自分が勉強しているプログラミング言語の立ち位置を知ることができました。

２つ目は、Web技術についての知見が広がったことです。プログラミングの勉強を始めてから間もなくわからないことばかりなので、 W3Techsの2021年Web技術の調査結果を読んだときは、英語を理解できても文章を理解できませんでした。その都度わからないIT用語を調べることで、理解が深まり知見が広がりました。

そして３つ目は、久しぶりに英語に触れたことです。普段日本で生活していると自分で意識しない限りなかなか英語に触れる機会がありません。しかし、世界中のいろんな大多数の情報は英語で発信されています。特にIT関係の情報は英語で発信されていることが多い（英語の方が情報量が多い）ので、継続するべきだと感じました。

]]>