2020-02-22に投稿

素のPHPでシンプルで小さなアプリを作る

PHP

フレームワークなどを使わない、素のPHPでシンプルなアプリを作ってみます。下記が全体図です。具体的には、最初のボタンを押してから次のボタンを押すまでの時間が10秒に近ければ成功、というミニゲームです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>PHPサンプルアプリケーション</title>
  </head>
  <body>
    <?php if (empty($_POST['mode'])): ?>

    <form method="post">
      <p>このボタンを押してから丁度10秒後に次のボタンを押せるかな!?</p>
      <input type="hidden" name="mode" value="start">
      <button type="submit">スタート!</button>
    </form>

    <?php elseif ($_POST['mode'] === 'start'): ?>

    <form method="post">
      <p>10秒丁度に押してね!</p>
      <input type="hidden" name="mode" value="end">
      <input type="hidden" name="time" value="<?= microtime(true) ?>">
      <button type="submit">今だ!</button>
    </form>

    <?php elseif ($_POST['mode'] === 'end'): ?>

      <?php $diff = microtime(true) - $_POST['time'] - 10; ?>
      <?php if ($diff == 0): ?>
        <p>ぴったし!!! 奇跡!!!!</p>
      <?php elseif (abs($diff) <= 0.5): ?>
        <p>ほぼ同時! 奇跡!!</p>
      <?php elseif (abs($diff) < 1): ?>
        <p>まあまあ</p>
      <?php else: ?>
        <p>1秒以上違います</p>
      <?php endif ?>
      <p>差:<?= $diff ?>秒

    <?php endif ?>
  </body>
</html>

modeという値をformでPOSTすることで分岐させています。最初のif文はmodeがまだPOSTされていないので、説明文とスタートボタンを表示させます。ここで使っているformの中にmode=startのhiddenタグを入れておきます。

次のmodeがstartの時は終了ボタンを表示します。合わせてstartが実行された時の時間もhiddenタグに保存しておきます。

終了ボタンが押されたら計算して結果を表示します。

下記で実際に試せます。(レンタルサーバーに配置しているだけです)

https://mokumoku.alphabrend.com/sample.php

ローカルテスト

PHPは組み込みサーバーがあります。

php -S localhost:8000

と実行すると、そのフォルダで http://localhost:8000 としてアクセスすることが出来ます。とりあえずサーバーが無くてもこれで簡単に開発もできます。

まとめ

JavaScriptを使わないためリアルタイムで動きを出すことは出来ませんが、このようにデータベースを使ったりしなくても画面遷移だけでちょっとしたアプリケーションを作ることが出来ます。

ツイッターでシェア
みんなに共有、忘れないようにメモ

だら@Crieit開発者

Crieitの開発者です。 主にLAMPで開発しているWebエンジニアです(在宅)。大体10年ちょい。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel, Vue.js, RoR 趣味:Elixir, Phoenix, Node, Nuxt, Express, React等色々

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント