コピペだけで作れる@keyframesを使用したCSSアニメーションを３０個ご紹介します。

animation-duration、animation-timing-function、animation-direction、animation-iteration-countなどの@keyframesプロパティを要所要所で使い分けています。

コードには説明もわかりやすく書いてあるのでかなり参考になります

完全オリジナルでコピペだけで実装できてしまうお手軽なアニメーションとなっています

Webデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっています

Webデザイナー・フロントエンジニアに興味のある方はこちらも合わせてどうぞ↓

@keyframesのCSSアンイメーション３０選

１. 【@keyframes×filter】画像の色合いが変化するCSSアニメーション３選

@keyframesとfilterプロパティのfilter:blur、grayscale、brightness、contrast、saturateを使用して画像の色が徐々に変化していくアニメーションとなっています。

↓参考記事は下の記事です↓

２. 【@keyframes×filter】色が自由自在に変化するCSSアニメーション３選

@keyframesとfilterプロパティを使用して画像の色が徐々に変化していくアニメーションとなっています。

↓参考記事は下の記事です↓

３. 進行度合いが変化するCSSアニメーション４選【@keyframes×animation-timing-functionプロパティ】

animation-timing-function: linear, ease, ease-in-out, steps()の４つのプロパティを使用してアニメーションの進行度合い(タイミング)をカンタンに指定していきます。

↓参考記事は下の記事です↓

４. 【@keyframes×animation-direction】再生方向をカンタン指定！繰り返すCSSアニメーション４選

animation-direction:normal, reverse, alternate, alternate-reverseの４つを使用して再生方向をカンタンに指定していきます。

↓参考記事は下の記事です↓

５. 【@keyframes×translate】box-shadowが効いた3D画像が移動を繰り返すCSSアニメーション３選

@keyframesのプロパティのanimation-durationやanimation-timing-function、animation-iteration-count: infinite;など５種類を使用して、初めての方でも理解できるように@keyframesをわかりやすく解説しています。

↓参考記事は下の記事です↓

６. 【@keyframes×infinite×scale】拡大縮小を繰り返すCSSアニメーション３選【使い方も解説！】

@keyframesのプロパティのanimation-durationやanimation-timing-function、animation-iteration-count: infinite;など５種類を使用して、初めての方でも理解できるように@keyframesをわかりやすく解説しています。

↓参考記事は下の記事です↓

７. 【@keyframes×infinite×rotate3d】360°ずっと回り続けるCSSアニメーション３選【3Dアニメーション】

@keyframesのプロパティのanimation-durationやanimation-timing-function、animation-iteration-count: infinite;など５種類を使用して、初めての方でも理解できるように@keyframesをわかりやすく解説しています。

transform:rotate3dで立体的な回転エフェクトとinfiniteで永遠に回転し続けるCSSアニメーションを実現。

↓参考記事は下の記事です↓

８. 【@keyframes×infinite×rotate】永遠に回転し続けるCSSアニメーション３選【CSSの本気見せます】

@keyframesのプロパティのanimation-durationやanimation-timing-function、animation-iteration-count: infinite;など５種類を使用して、初めての方でも理解できるように@keyframesをわかりやすく解説しています。

transform:rotateの回転エフェクトとinfiniteで永遠に回転し続けるCSSアニメーションを実現しました。

↓参考記事は下の記事です↓

９. 【初心者】@keyframesを使ったシンプルなCSSアニメーション３選【@keyframesプロパティ解説】

@keyframesのプロパティのanimation-durationやanimation-timing-functionなど５種類を使用して、初めての方でも理解できるように@keyframesをわかりやすく解説しています。

↓参考記事は下の記事です↓

まとめ

@keyframesを使用したCSSアニメーションを３０個ご紹介しました。

エンジニアの情報発信はかなり有益なので副業でブログ運営をするのがオススメです。

特に昨今ですとフリーランス需要が増えたことに伴い、プログラミングへ興味を持つ方が急激に増えていることがGoogleのアクセスデータで明らかになっています。

技術系の情報はわかりやすく再現性の高いものが多くないため今がチャンスです。

下の記事ではエンジニアが技術ブログを始めるメリットと開設手順を徹底解説しています。

・エンジニアでもブログを始めるメリットってなんだろう？
・個人ブログってQiitaと何が違うのかな？
・エンジニアだけどブログで稼げるのかな？
・どれくらいの期間継続したら稼げるようになるのかな？
・ブログ開設でかかる費用っていくらだろう？
・エンジニアだけどブログ始めてみたいけど何から始めればいいんだろう？

こんなお悩みを全て解決しています。

コピペだけで作れる@keyframesを使用したCSSアニメーションを３０個ご紹介します。

animation-duration、animation-timing-function、animation-direction、animation-iteration-countなどの@keyframesプロパティを要所要所で使い分けています。

コードには説明もわかりやすく書いてあるのでかなり参考になります

完全オリジナルでコピペだけで実装できてしまうお手軽なアニメーションとなっています

Webデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっています

Webデザイナー・フロントエンジニアに興味のある方はこちらも合わせてどうぞ↓

@keyframesのCSSアンイメーション３０選

１. 【@keyframes×filter】画像の色合いが変化するCSSアニメーション３選

@keyframesとfilterプロパティのfilter:blur、grayscale、brightness、contrast、saturateを使用して画像の色が徐々に変化していくアニメーションとなっています。

↓参考記事は下の記事です↓

２. 【@keyframes×filter】色が自由自在に変化するCSSアニメーション３選

@keyframesとfilterプロパティを使用して画像の色が徐々に変化していくアニメーションとなっています。

↓参考記事は下の記事です↓

３. 進行度合いが変化するCSSアニメーション４選【@keyframes×animation-timing-functionプロパティ】

animation-timing-function: linear, ease, ease-in-out, steps()の４つのプロパティを使用してアニメーションの進行度合い(タイミング)をカンタンに指定していきます。

↓参考記事は下の記事です↓

４. 【@keyframes×animation-direction】再生方向をカンタン指定！繰り返すCSSアニメーション４選

animation-direction:normal, reverse, alternate, alternate-reverseの４つを使用して再生方向をカンタンに指定していきます。

↓参考記事は下の記事です↓

５. 【@keyframes×translate】box-shadowが効いた3D画像が移動を繰り返すCSSアニメーション３選

@keyframesのプロパティのanimation-durationやanimation-timing-function、animation-iteration-count: infinite;など５種類を使用して、初めての方でも理解できるように@keyframesをわかりやすく解説しています。

↓参考記事は下の記事です↓

６. 【@keyframes×infinite×scale】拡大縮小を繰り返すCSSアニメーション３選【使い方も解説！】

@keyframesのプロパティのanimation-durationやanimation-timing-function、animation-iteration-count: infinite;など５種類を使用して、初めての方でも理解できるように@keyframesをわかりやすく解説しています。

↓参考記事は下の記事です↓

７. 【@keyframes×infinite×rotate3d】360°ずっと回り続けるCSSアニメーション３選【3Dアニメーション】

@keyframesのプロパティのanimation-durationやanimation-timing-function、animation-iteration-count: infinite;など５種類を使用して、初めての方でも理解できるように@keyframesをわかりやすく解説しています。

transform:rotate3dで立体的な回転エフェクトとinfiniteで永遠に回転し続けるCSSアニメーションを実現。

↓参考記事は下の記事です↓

８. 【@keyframes×infinite×rotate】永遠に回転し続けるCSSアニメーション３選【CSSの本気見せます】

@keyframesのプロパティのanimation-durationやanimation-timing-function、animation-iteration-count: infinite;など５種類を使用して、初めての方でも理解できるように@keyframesをわかりやすく解説しています。

transform:rotateの回転エフェクトとinfiniteで永遠に回転し続けるCSSアニメーションを実現しました。

↓参考記事は下の記事です↓

９. 【初心者】@keyframesを使ったシンプルなCSSアニメーション３選【@keyframesプロパティ解説】

@keyframesのプロパティのanimation-durationやanimation-timing-functionなど５種類を使用して、初めての方でも理解できるように@keyframesをわかりやすく解説しています。

↓参考記事は下の記事です↓

まとめ

@keyframesを使用したCSSアニメーションを３０個ご紹介しました。

エンジニアの情報発信はかなり有益なので副業でブログ運営をするのがオススメです。

特に昨今ですとフリーランス需要が増えたことに伴い、プログラミングへ興味を持つ方が急激に増えていることがGoogleのアクセスデータで明らかになっています。

技術系の情報はわかりやすく再現性の高いものが多くないため今がチャンスです。

下の記事ではエンジニアが技術ブログを始めるメリットと開設手順を徹底解説しています。

・エンジニアでもブログを始めるメリットってなんだろう？
・個人ブログってQiitaと何が違うのかな？
・エンジニアだけどブログで稼げるのかな？
・どれくらいの期間継続したら稼げるようになるのかな？
・ブログ開設でかかる費用っていくらだろう？
・エンジニアだけどブログ始めてみたいけど何から始めればいいんだろう？

こんなお悩みを全て解決しています。

どうも、7noteです。検証記事です。

検証：ブロック要素に効かないCSSはあるのか

以前インライン要素に効かないCSSという記事（こちら）を書きましたが、それでふと思いました。

「ブロック要素に効かないCSSってあるのか？」

いや、フレックスボックスで子要素に指定しないと反映されないとかはあるかもしれないが、
実際効かないCSSってあるのかパッと思いつかなかったのでちゃんと検証してみました。

よく使われるCSSを検証してみた

フォント系、テキスト系

プロパティ	効く・効かない
font-size	効く
font-weight	効く
font-family	効く
text-align	効く
vertical-align	効かない
line-height	効く
text-decoration	効く
letter-spacing	効く

カラー系、背景系

プロパティ	効く・効かない
color	効く
background	効く

幅と高さと線

プロパティ	効く・効かない
width	効く
height	効く
border	効く

margin・paddingなどの余白系

プロパティ	効く・効かない
margin	効く
padding	効く

表示・配置系

プロパティ	効く・効かない
overflow	効く
display	効く
float	効く
position	効く

結論

ほぼ全部効く。上下の表示位置を調整するvertical-alignだけはインライン要素やth,tdにしか効かないので、注意が必要。
ブロック要素の上下の表示位置を指定したい場合は、フレックスボックスでalign-itemsを指定するか、position指定で調整する方法がある。

おそまつ！

（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）

ラジオボタンをデフォルトのものではなく独自でデザインしたものにしたいときは、before,afterで疑似的にラジオボタンを作成します。
（参考：https://shu-sait.com/input-label-id-for/#outline__1）

その際もとのラジオボタンの代わりになるlabelにしっかりとradioのinputタグを紐づけなければボタンとしては機能しません。

example.html

<input id="radio_button" type="radio">
<label for="radio_button">ラベルテキスト</label>

inputタグをlabelタグで囲むやり方でも良いようです。

example2.html

<label>ラベルテキスト
  <input type="radio">
</label>

なぜこのような基本的なことに詰まったかというと、あるコードを改修する形でこの問題に面したのですが、その元のコードではこの紐づけをしなくても動いていたのです。

調べたところ読み込んでいるjsファイルにこれらを紐づけている記述がありました。

html+cssでできることは極力jsではやらないようにしよう（私の上司より）。

反省したので記事に残します・・・。
これを初記事にする事で肝に銘じる

結論

@vue/cli で作成した index.html を放置すると痛い目見る

事の発端

顧客のとある要件で必要になったから、会社で開発しているシステムの一部を vue.js でリプレースし、納品した
納品後の検修の際に画面の表示がおかしいよと言われた（画面のどこがおかしいかは教えてくれなかったぴえん）

調査するも手持ちの Mac,windows,android,iOS のどれでみても再現できなかった

上司と二人で頭を抱えていると別の社員から再現できたと言われた・・・

謎めいた現象

• 謎の日表示

v-calendar（https://vcalendar.io/）を利用してカレンダーを表示している
なぜか 26、27、29 だけ日の表記がついていた

• 謎の年表示

本来金額を表示している部分（単位・変換なし）の 1000 以上の値がなぜか年表記になる

閃いた決定打

ふとタイトルを見ると
本来英語なはずが

例：coffee-latte

がカタカナに変換されていた

例：コーヒーラテ

もしかして、翻訳されてるのでは・・・？

ついに判明

結局のところ原因は凡ミス

index.html の lang が en になっていただけだった

<html lang="en"></html>

正しくは

<html lang="ja"></html>

一部の環境でしか再現しなかったのは
google の翻訳機能で常に日本語に翻訳に設定しているかいないかの違いだった

大反省・・・

自動生成された index.html を大して確認もせずそのまま放置していたのが原因でした

@vue/cli で作成した index.html を放置すると痛い目を見ます
良い子はちゃんと確認しようね

あとなんでカレンダーの26,27,29の部分のみ日がついたのか、調べてもよくわからなかったのでもしわかる方がいたら教えてください、、、

はじめに

前回の記事でログイン機能を実装しました。
https://qiita.com/N46_myHearter/items/ae4f776790c4c4666a66

この記事では、ログインする際に使用するアカウントをデータベースに登録する機能を実装してみたいと思います。

基本的な流れ
　1. 登録するユーザ情報(ID、パスワード、ユーザ名)を入力します。
　2. 入力値チェックを行う。
　3. ユーザ情報をDBに登録する。

簡易なので...笑笑

データベース

今回は、MySQLを使用しています。
データ項目は、ID、パスワード、ユーザ名の3つのみで構成しています。
プライマリーキーにIDを指定しています。
パスワードは、ハッシュ化で暗号化。(調べた時にハッシュ化だと簡単に出来たから笑笑)

該当ソースコード

1. register.php

アカウントを登録するための入力画面です。
入力項目は、ID、名前、パスワード(確認のため2回入力)です。
入力項目すべて入力されているか、2回入力したパスワードが一致しているか、
パスワードの強度は大丈夫か(強度が弱いと警告)を確認して、アカウント登録確認画面に遷移します。

パスワード強度チェックは以下のHPにあるオープンソースであるpasswordchecker.jsを利用しています。
出典 https://www.websec-room.com/passswordchecker

アカウント登録画面(register.php)

<?php
  session_start();
  header("Content-type: text/html; charset=utf-8");
?>

<!DOCTYPE html>
<html lang="ja">
<head>
  <link rel="stylesheet" type="text/css" href="style1.css"> 
  <meta charset="UTF-8">
  <script src="passwordchecker.js" type="text/javascript"></script>
  <script src="common.js" type="text/javascript"></script>
  <script type="text/javascript">

  /*
  * 登録前チェック  
  */
  function conrimMessage() {
    var id = document.getElementById("id").value;
    var name = document.getElementById("name").value;
    var pass = document.getElementById("password").value;
    var conf = document.getElementById("confirm_password").value;

    //必須チェック
    if((id == "") || (name == "") || (pass == "") || (conf == "")) {
      alert("必須項目が入力されていません。");
      return false;
    }

    //パスワードチェック
    if (pass != conf) {
      alert("パスワードが一致していません。");
      return false;
    }

    if (passwordLevel < 3) {
      return confirm("パスワード強度が弱いですがよいですか？");
    }

    return true;
    }

  </script>
</head>

<div class="form-wrapper">
  <h1>アカウント登録</h1>

  <?php
    if (isset($_SESSION["error_status"])) {
      if ($_SESSION["error_status"] == 1) {
        echo "<h2 style='color:red;'>入力内容に誤りがあります。</h2>";
      }
      if ($_SESSION["error_status"] == 2) {
        echo "<h2 style='color:red;'>IDは既に登録されています。</h2>";
      }
      if ($_SESSION["error_status"] == 3) {
        echo "<h2 style='color:red;'>タイムアウトか不正な URL です。</h2>";
      }
      if ($_SESSION["error_status"] == 4) {
        echo "<h2 style='color:red;'>登録に失敗しました。</h2>";
      }
      if ($_SESSION["error_status"] == 5) {
        echo "<h2 style='color:red;'>パスワードは既に登録されています。</h2>";
      }
    }
  ?>

  <form action="register_check.php" method="post" onsubmit="return conrimMessage();">
  <div class="form-item">
    <label for="ID"></label>
    <input type="text" name="id" id="id" required="required" placeholder="ID">
  </div>
  <div class="form-item">
    <label for="NAME"></label>
    <input type="text" name="name" id="name" required="required" placeholder="名前">
  </div>
  <div class="form-item">
    <label for="password"></label>
    <input type="password" name="password" required="required" placeholder="パスワード">
  </div>
  <div class="form-item">
    <label for="password"></label>
    <input type="password" name="confirm_password" id="confirm_password" required="required" placeholder="パスワード(確認)">
  </div>

  <div class="button-panel">
    <input type="submit" class="button" title="登録" value="登録">
  </div>
  </form>

  <div class="form-footer">
    <p><a href="/login.php">戻る</a></p>
  </div>
</div>
</html>

2. register_check.php

本当にアカウント登録していいのか再度確認する画面です。
また、入力したアカウント情報がDBに既に存在していないかをチェックします。
既に登録されていた場合はエラーを返します。

アカウント登録確認画面(register_check.php)

<?php
  require_once("function.php");
  session_start();
  header("Content-type: text/html; charset=utf-8");  

  $_SESSION['token']  = get_csrf_token();

  $id = $_POST['id'];
  $password = $_POST['password'];
  $name = $_POST['name'];
  $confirm_password = $_POST['confirm_password'];

  if ($password != $confirm_password) {
    //パスワード不一致 
    $_SESSION["error_status"] = 1;
    header("HTTP/1.1 301 Moved Permanently");
    header("Location: register.php");
    exit();
  }  

  //IDチェック

  //DB接続
  try {
    /*dbname: test
      host: localhost (DBをローカル環境に置いている)
      username: root
      password: '' (未設定)
    */
    $pdo = new PDO('mysql:dbname=test;host=localhost;charset=utf8mb4', 'root', '',
      [
      PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
      PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
      ]
      );

    $stmt = $pdo->query('SELECT id, password FROM USER');

    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
      $db_id = $row["id"];
      $db_password = $row["password"];

    //既にIDが登録されていた
    if ($db_id == $id) {
      $_SESSION["error_status"] = 2;
      header("HTTP/1.1 301 Moved Permanently");
      header("Location: register.php");
      exit();
    } 

    //エラー情報リセット
    $_SESSION["error_status"] = 0;
    }
    } catch (PDOException $e) {
      exit('データベース接続失敗。'.$e->getMessage());
    }

?>

<!DOCTYPE html>
<head>
  <link rel="stylesheet" type="text/css" href="style1.css">
  <meta charset="utf-8">
</head>

<html lang="ja">
<div class="form-wrapper">
  <h1>登録確認</h1>
  <h2>アカウント登録しますか？</h2>
  <form action="register_submit.php" method="post">
    <table border="0">

      <input type="hidden" name="id" value="<?php echo htmlspecialchars($id  , ENT_QUOTES, "UTF-8") ?>">
      <input type="hidden" name="name" value="<?php echo htmlspecialchars($name  , ENT_QUOTES, "UTF-8") ?>">
      <input type="hidden" name="password" value="<?php echo htmlspecialchars($password  , ENT_QUOTES, "UTF-8") ?>">
      <input type="hidden" name="token" value="<?php echo htmlspecialchars($_SESSION['token']  , ENT_QUOTES, "UTF-8") ?>">

      <div class="button-panel">
        <input type="submit" class="button" title="登録" value="登録">
      </div>
    </form>

    <div class="form-footer">
        <p><a href="/register.php">戻る</a></p>
    </div>
</div>
</html>

3. register_submit.php

実際にアカウント登録をして、登録完了を知らせる画面です。
DBに入力したユーザ情報を格納します。
その時、パスワードはハッシュ化で暗号化します。

アカウント登録完了画面(register_submit.php)

<?php
  require_once("function.php");
  session_start();
  header("Content-type: text/html; charset=utf-8");

  //CSRF チェック
  if ($_SESSION['token'] != $_POST['token']) {
      $_SESSION = array();
      session_destroy();
      session_start();

    $_SESSION["error_status"] = 2;
    header("HTTP/1.1 301 Moved Permanently");
    header("Location: login.php");
    exit();
  } 

  //エラー情報のリセット
  $_SESSION["error_status"] = 0;

  $id = $_POST['id'];
  $password = $_POST['password'];
  $name = $_POST['name'];

  // ハッシュを作る
  $hash = password_hash($password, PASSWORD_BCRYPT);

  //DB接続
  try {
    /*dbname: test
      host: localhost (DBをローカル環境に置いている)
      username: root
      password: '' (未設定)
    */
    $pdo = new PDO('mysql:dbname=test;host=localhost;charset=utf8mb4', 'root', '', 
    [
      PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
      PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    ]
    );

    //パラメーターの型を指定
    $stmt = $pdo->prepare('INSERT INTO USER (ID, NAME, PASSWORD) VALUES (:id, :name, :password)'); 
    $stmt->bindParam(':id', $id, PDO::PARAM_STR);
    $stmt->bindParam(':name', $name, PDO::PARAM_STR);
    $stmt->bindParam(':password', $hash, PDO::PARAM_STR);

    $stmt->execute();
  } catch (PDOException $e) {
    exit('データベース接続失敗。'.$e->getMessage());
  }

?>

<!DOCTYPE html>
<html lang="ja">
<head>
  <link rel="stylesheet" type="text/css" href="style1.css">
  <meta charset="utf-8">
</head>

<<div class="form-wrapper">
  <h1>アカウント登録完了</h1>
  アカウント登録が終了しました。<br>
  ログイン画面からログインしてください。<br><br>

    <div class="form-footer">
    <p><a href="/login.php">ログイン画面に戻る</a></p>
  </div>
</div>
</html>

4. function.php

以下の前回の記事に掲載済み。
https://qiita.com/N46_myHearter/items/ae4f776790c4c4666a66

環境

windows10 64bit
実行環境: xampp (mysql、php、apache等をまとめてインストールでき、インストールも簡単なので)

おわりに

抜けている箇所がありましたら、コメント欄で教えていただくとありがたいです。

かくれんぼしたい

皆さんは小学生の頃は何をして遊ぶ子供でしたか？
僕はかくれんぼ（with DSのピクトチャット）かドッジボールかデュエルマスターズをやっていました。
今考えると体力本当に無限大だったなあと懐かしい気分になります。

先日人生初のハッカソンに出場しまして（@Toshiki0324 さんありがとうございました！！）、あるチームがobnizとp5jsとを組み合わせたゲームを作っていました。
obnizで物理的な動作を検知しインタラクティブにp5jsで描画する、という発想に関心が沸き、今回は勉強もかねて自宅でも全力でかくれんぼできるゲームをp5jsで作ってみました。
ただのかくれんぼでもつまらないので、背景に隠れながら逃げるかくれんぼを作ってみました。

コードはGistに載せてありますので是非是非実装してみてくださいね。
アプリもデプロイしたのでURLから遊びに行ってみてください。
obnizがあっても無くても遊べるようにしてます。

コード全体は⇒こちら

光センサで遊ぶなら⇒こちら
超音波センサで遊ぶなら⇒こちら
obniz無しで遊ぶなら⇒こちら
※配線情報は後ほどの章で掲載しているので確認よろしくお願いします！

完成デモ

基本ルール

かくれんぼと同じく、鬼から隠れつつ逃げつつ生き延びていくゲームとなっています。
ゲームの特徴として、プレイヤーは自身の色を操作することができ、背景の色に隠れることができます。
何日まで生き延びたらクリアとかはなく、タッチされるまでの最長生存記録を目指すものとなっています。

影になりながら逃げるかくれんぼのゲーム作りました。
プレイヤーは影になり背景に隠れながら鬼から逃げます。
obniz光センサにつないで手で影を作れば色を変えられます。
もちろんobnizを使わなくても遊べます。
day5夜を越えられなかったので、超えられたら教えてください#obniz#p5js#javascript pic.twitter.com/S3Y1kzpjyq

— canonno (@canonno_blog) August 12, 2020

鬼はプレイヤーが近くにいたり、背景から浮いていたら全力で追いかけてきます。
鬼の色が真っ黒なので、夜の時間はプレイヤーも鬼もものすごく見にくくなります。
その間も鬼は動き回るので、夜の間につかまってしまうことが大多数だと思います。
いかに夜をうまく超えるか、という部分がポイントのゲームになっています。

また、一日過ぎるごとに鬼はスピードが上がっていきます。
一日目はゆるゆる動く鬼ですが、五日目ぐらいになると最初の二倍近い速さで動き回ることになります。
その鬼からいかに隠れて逃げ回るか戦略が試されるゲームとなっています。

プレイヤー操作

プレイヤー移動

プレイヤー移動はキーボードの十字キーとなってます。
右手はキーボードでプレイヤー移動、左手でプレイヤーの色操作が基本になっています。

プレイヤー色操作

プレイヤーの色操作はやり方が3通りありまして、
・光センサー
・超音波センサー
・キーボード操作
となっています。
それぞれ紹介していきますね。

光センサー

まずはコンセプトに沿うように光センサーで操作する方法です。
光センサーを手で覆うとプレイヤーが黒くなり、手を離すとプレイヤーが白くなります。
程よい色を維持する場合は、絶妙に光を入れ続ける必要があり、なかなか高難易度になっています。

光センサを使って操作するときのポジション
部屋が暗すぎるとプレイヤーが無限に黒くなって背景に隠れられなくなって詰みます。 pic.twitter.com/8nDpXnsMVQ

— canonno (@canonno_blog) August 12, 2020

今回使ったセンサーはCdSセル5mmタイプ、抵抗は330Ωを使っています。（参考：秋月電子)
写真のように配線をしてご利用下さい（赤：0へ、白：1へ、黒：2へ接続）。

光センサを利用したゲーム入り口は⇒こちら

超音波センサー

次に超音波センサーを利用した方法です。
なぜ超音波センサー？と思ったかもしれませんが、当初「obnizとp5jsのインタラクティブなゲーム」とだけ考えており、超音波センサーを使おうが最初に思い浮かびました。
その中で「あれ光センサー使ったほうがコンセプト通りじゃね？」となり、両方実装しました。
超音波センサーから物体への距離が小さくなるとプレイヤーは黒くなり、距離が大きくなるとプレイヤーは白くなります。

当初は超音波センサで実装してましたが、いや光の方がそれっぽくね？ということで途中で方向転換しました。
超音波センサでも一応操作できます。 pic.twitter.com/PxoaDvmGAl

— canonno (@canonno_blog) August 12, 2020

今回使った超音波センサーはHC-SR04です。(参考：秋月電子)
超音波センサーは配線というよりはそのままobnizに接続すると操作しやすかったです。

超音波センサーを利用したゲーム入り口は⇒こちら

キーボード操作

obniz持っていない方、このセンサー類を持っていない方に、obnizを使わないでキーボード操作のみでもできる設定を用意しています。
プレイヤーの色調整は
　Aキー：影に近づく(黒くなる)
　Fキー：光に近づく(白くなる)
となっております。

obnizでの色調整は結構繊細なので難しく、最初はこちらで要領をつかむのが良いかもしれません。
是非キーボードオンリーでも挑戦してみてくださいね。
キーボードオンリーのゲーム入り口は⇒こちら

実装こまごま

ブラウザとobnizの連携

node.jsでobnizと接続したことはありましたが、html中にjsとして埋め込むのは初めてでした。
html部分の実装はこちらです。
↓こちらをかなり参考にさせていただきました。
https://qiita.com/JINPLAYSGUITAR/items/3bcee02d8a612544c06e

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://unpkg.com/obniz/obniz.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/p5.js"></script>
</head>
<body>
<div id="obniz-debug"></div>
<script>

//ここに処理を書く

</script>
</body>
</html>

デプロイして他の人に自分自身のobnizで楽しんでもらいたいと思いました。
html側でinputとかbuttonとかいるのかな？と思っていたんですがobnizオブジェクトを作ったときに勝手にポップアップを表示してくれるようです。
もしかしたらobniz_idの一文すらいらないかも・・・？

    //obniz Idをインプットしてもらう
    var obniz_id = document.getElementsByName("obniz_id");
    var obniz = new Obniz(obniz_id);

    //照度の取得
    var hikari = 0.2;
    obniz.onconnect = async () => {
    obniz.io0.output(true); //io0を5vに(電気を流す)
    obniz.io2.output(false); //io2をGNDに(電気を逃がす)

    //io1をアナログピンに(センサーの値を取得)
    obniz.ad1.start((voltage) => {
        //センサーの値が変わるたびに実行される
        hikari = voltage;
    });
}

obnizとp5jsとの連携

最初はobnizと連携した後にp5jsを描画するので、obniz.onconnect = async () =>の後に描画処理をいれるのかな？と思っていました。
処理もobniz.onconnectのところで止まってしまうんじゃないか・・・？と思って色々試行錯誤しました。

    //obniz Idをインプットしてもらう
    var obniz_id = document.getElementsByName("obniz_id");
    var obniz = new Obniz(obniz_id);

    obniz.onconnect = async () => {
    //処理がここで止まって
    });
}

//ここから先の処理が進まないんじゃないか？と思ってました

試行錯誤の結果、どうもきちんとonconnect以降の処理も走ってくれるようです。
obnizの処理とゲーム側の処理を別々に書いても問題ない様子。
これはらくちんですね。

    //obniz Idをインプットしてもらう
    var obniz_id = document.getElementsByName("obniz_id");
    var obniz = new Obniz(obniz_id);

    //照度の取得
    obniz.onconnect = async () => {
      //ここを処理しつつ
    });
}
    //ここ以降も処理を走らせてくれるみたいです
    function setup(){
    //読み込み時の処理
    }
    function init(){
    //ゲームの初期化の処理
    }
    function draw(){
    //ゲーム中、常にここの処理が実行
    }

ただ変数のスコープで混乱しないように注意してくださいね。
今回色々試行錯誤する中で一番多かったのが変数のスコープの定義ミスでした。
もし思い通りの動作をしないなと思ったときは、今一度変数のスコープを確認してみてください！

コードの全体はGist(こちらから)に載せてあるので、是非ご覧になってくださいね。

今後やりたいこと

p5js面白い！色んな可能性を感じるライブラリですね。
最近ブラウザを利用すればスマホの各種センサ類にアクセスできることを勉強したので、スマホの加速度センサとか使いながら何かゲーム作れないかなとか考えています。

最後までご覧いただきありがとうございました！
LGTMつけていただけると励みになりますので、よろしくお願いいたします！

Edgeのみに適用

sample.css

@supports (-ms-ime-align: auto) {
  span {
    color:#c00;
  }
}

IEのみに適用

sample.css

@media all and (-ms-high-contrast: none) {
  span {
    color:#c00;
  }
}

Firefoxのみに適用

sample.css

@-moz-document url-prefix() {
  span {
    color:#0c0;
  }
}

Chromeのみに適用

sample.css

@media screen and (-webkit-min-device-pixel-ratio:0) {
  span {
    color:#00c;
  }
}

Safariのみに適用

sample.css

::-webkit-full-page-media, :future, :root
 span {
  color:#c0c;
}

スマートフォンなどのモバイル端末のブラウザでは、input要素をフォーカスするとキーボードが出現する。
このキーボードは、「英語」「日本語 - かな」などの種類があり、日本語利用者なら切り替えながら使っているだろう。

で、input要素をフォーカスした時に出てくるこのキーボードの種類を制御したい、という要望はままあるだろう。
たとえば、英数字のみからなる何らかのシリアルコードのようなものの入力欄は、日本語ではなく英語キーボードを表示させたいだろう。
結論からいうと、キーボードの種類は制御できない。
もう少し正確に言うと、日本語ではなく英語キーボードを常に表示させるようにすることはできない。

type属性で制御できるのではないか

巷の技術系ブログなどではよく書かれている。

<!-- email入力用だから、英語キーボードであるべき？ -->
<input type="email">

<!-- URL入力用だから、英語キーボードであるべき？ -->
<input type="url">

たしかに、多くのモバイルブラウザは、type属性をemailやurlに指定することによって、それに適したキーボードを表示する機能をサポートしてはいる。
iOS Safariの場合、type="email"のときは、スペーキーの隣に@や.など、メールアドレスによく使う文字キーが配置されている。（前掲のスクリーンショット画像がまさにそれだ）

一見すると、求めていた挙動が実現されているように思うが、ちょっと待って欲しい。

日本語キーボードに切り替えしてみる

type="email"をフォーカスしてキーボードを表示したら、わざと日本語に切り替えた上でinput要素のフォーカスをはずしてみよう。そして、再び同要素をフォーカスしてキーボードを表示させてみる。
このとき日本語キーボードが表示されるだろう。これはあなたの求めている挙動だろうか。

次にページをリロードしてみて、再び同要素をフォーカスする。やはり日本語キーボードが出るだろう。

同じページ内に、別要素のtype="email"があるならば、そちらにフォーカスを当ててみよう。やはり日本語キーボードが出るはずだ。これはあなたの求めている挙動だろうか。

なんなら、他のページのtype="email"要素でキーボードを日本語にした後、当該サイトのtype="email"にフォーカスしてみよう。iOS Safariでは日本語キーボードが出るだろう。（Androidでは英語キーボードが出る）
何度も言うが、これはあなたが求めている挙動だろうか。¹

あなたが求めているのは、当該要素をフォーカスしたときには常に英語キーボードが表示されることではないのか。²その要素に入力されるべきは英数字だけなのだから。

メールアドレスはマルチバイト文字が含まれ得る

なぜこんなことになるのか。
メールアドレス入力用のtype属性値ならば、英語キーボードだけ表示されればいいのではないのか。
現に、input[type="tel"]は数字キーボードのみ、input[type="password"]は英語キーボードのみであり、キーボードの種類を変更することはできない。
理由は、メールアドレスの入力には英語キーボードだけでは不十分だからだ。

RFCの定義によれば、メールアドレスに使われる文字には制限があり、マルチバイト文字は含まれないらしいのだが、Gmailではマルチバイト文字を含むメールアドレスへの受送信が可能だ。
本来の規格としてNGだったとしても、Gmailがサポートしている以上、マルチバイト文字を含むメールアドレスは存在する。存在する以上は、入力できなければならない。入力するためには、日本語キーボードに切り替え可能でなければならないのだ。
そして、ひとたびユーザがtype="email"要素で日本語キーボードに切り替えたならば、ブラウザは「ユーザーは日本語でemailを入力しようとしている」と解釈し、それ以後type="email"フォーカス時には日本語キーボードを表示するようになると考えられる。ユーザビリティとしては筋が通っている。

これは、input[type="url"]についても同様だ。
日本語ドメインは存在している。そうでなくても、ディレクトリ名やパラメータにマルチバイト文字が含まれることは普通にある。³
であるならば、日本語キーボードが表示されうる。

inputmodeという属性もあるが

inputmode="email" inputmode="url"とすることで、入力キーボードを指定できるという属性値だが、これとてもtype属性と同じ挙動だ。

入力値が英数字でなければならないtype属性は存在しない

ただし、パスワードtype="password"を除く。
type="password"は当然ながら伏字になるので、通常はパスワード以外には使えない。
というわけで、常に英語キーボードを表示させるようにする手段は、我々には与えられていない。

我々はどうすべきか

諦めよ。そして、ユーザを信頼せよ。
たとえ日本語キーボードが開いたとしても、英数字で書くべきことを理解すれば、ユーザーは自らの手で英語キーボードに切り替えて入力するであろう。

バリデーションと入力補助

通常は誤った値が入力された場合には、それと分かるエラー文言を表示するものだろう。ユーザに気づかせて軌道修正させればよい。
全角文字が入力された際には、JavaScriptで半角に自動変換する機能くらいは実装しておくと親切かもしれない。

なぜこの記事を書いたか

この入力欄に入力する値は英数字なので、英語キーボードが出るようにします。
その方がユーザに負担がかからないので。

あなたはこのように仕様を決めた手前、フォーカス時に日本語キーボードが出てしまう挙動を何とかしたいと思うかもしれない。
だが、立ち止まってよく考えてみて欲しい。これはそれほど問題なことなのか。
ユーザは自分でキーボードを切り替えることができ、適切に入力するのに何の支障もないではないか。

ユーザは自分がどうすべきか（英数字で入力）をきちんと理解できるようになっていれば、「英語キーボードを出す」などという些末な事象にとらわれる必要はどこにもない。

スマホで「英語キーボードを出す」ということについて、できる、できる、と書いてある記事ばかりなので、当然実装しなければならなくなってしまう。確かに概ね期待通りにできるのだが、重箱の角をつつくようなデバッグ⁴には耐えられず、不具合として報告されてしまう。報告された以上は、何とか対応しようとするものの、完璧に制御することはできないのだと理解した。
このことについて触れている記事がなく、とても困ったので書いた。⁵
実装を担当しているあなたが、クライアントやディレクターに、この記事を見せて、

ここに書いてある通り、表示するキーボードを完璧に制御することはできません。
type属性をemailにしておけば、初回フォーカス時には（100％ではないですが）概ね英語キーボードで開くようですので、このくらいの対応で手を打ちましょう。

と適当な妥結点を見出してくれることを期待する。

---

1. type="url"でも同様。 ↩

2. もちろん、ユーザ手動で英語キーボードに戻しておけば、再度フォーカス時には英語キーボードが出る。 ↩

3. Wikipediaを見よ。 ↩

4. これがデバッガーの仕事なので当然である。 ↩

5. 問題の性質上当然なのだが、検索しても英語の記事は全く出てこない。 ↩

create-xxx-app

作った。

• ブログ記事： https://sbfl.net/blog/2020/08/11/create-xxx-app/
• npm： https://www.npmjs.com/package/create-xxx-app

npx create-xxx-app プロジェクト名 --template react

でReact+TypeScriptのプロジェクト作られるはず。
インストールされるボイラープレート部分についてはいろいろ考え中なのでまだ中途半端です。後で大幅に変わる可能性があります。
でも一応動くReactのウェブアプリ作れるよ！

ちなみにxxxという文字の並びには英語圏ではエロい意味があるらしい。後で知った。

読みたくないから短くまとめろ

• create-react-appつらい
  • 縛りきついから入れた瞬間にejectしたくなる
  • eject後のファイルが意味不明すぎて解読するより自分で始めから構築した方が早い
• でもcreate-react-app捨てて生きていけない
  • 手動構築だるい！create-react-app無しの時代には戻れない！
• だから新しいツール作ったよ
  • わりとニッチ向け
  • ボイラープレートをコピーしてnpm installするだけ
  • create-react-appと手動構築の中間ぐらいの存在

create-react-appつらい問題

create-react-app（CRA）、最初は便利だなーって思うんですけど、だんだんとブラックボックス化された部分に不満が溜まってきます。
あれができないとかこれができないとか、変なところでエラー出るとか、やり方は存在するけど遠回りとか。重要な部分を隠蔽しないでほしい。
たまにならいいけどほぼ毎プロジェクトで不満出る。公式的には不満あるならejectすりゃいいじゃん的な雰囲気を放ってますが、ejectするとwebpackの闇を煮詰めたようなファイルが出力されます。
これを解析するよりも自分で初めから環境構築した方が早い。

それに加えて同梱されてる初期ファイルが邪魔。ServiceWorkerいらねえ場面とかCSS Module使いたくない場面とかいっぱいある。カスタムテンプレート作るの面倒だから毎回ちまちま削除してる。

じゃあお前はCRA無しで生きていけんのって言われたら生きていけない。webpackの設定ファイル書きたくないしnpm install なんちゃら かんちゃら @types/ほんにゃら を打ち込みまくるのもつらい。もう完全にCRAに飼い慣らされてる。

カスタムテンプレートという手もあるけど、それも結局はCRAの手の上で踊るだけ。同じ結末になる。

それならお前はどうしたいのって言われたら別にどうもしたくなく、白馬の王子様がなんかうまい感じに助けてくれるの期待してました。

結局何が欲しいんだよ

結局自分は何が欲しいのかよくわからんまま半年ぐらい経過しました。CRAには不満。じゃあどうしてほしいのって聞かれると答えられない。どうしようもねえ。

でもやっぱり npm install アレ コレ ソレ @types/ドレ を打ち続ける日々には辟易してましたし、CRA使うと後で死ぬほど苦労するという経験則だけはたまってます。単純なReactアプリにnext使うのはなんか違うという気分もある。

snowpackとかも使ってみたいんだけど、create-snowpack-appの公式テンプレートの出来がかなりアレ。変なところから設定をextendsしてるから設定ファイルの中身をサクっと追えない。自分はどこに向かえばいいんだ。

もうcpとnpm installだけでよくないか

自分がReactプロジェクトを作るときによくやってた作業について考えてみると、結局コピーとnpm installしかしてない気がしてきました。tsconfig.jsonをどっかからコピーしてきてちょっといじって、reactと@types/reactと入れて、みたいなのの繰り返し。

じゃあもうここの部分だけ自動化してあとは手動でやれば良くね？

シェルスクリプトだとどこに置くの問題とか発生するし、ボイラープレートリポジトリ作ってもいちいちcloneするのすら面倒。yarn createは好きではないし、じゃあもうここツール化しちゃえばいいんじゃね？って思いつきました。npxで叩きたいからどこからでも使えるようにnpm publishしました。

create-xxx-appの誕生です。

正直なところとしてはcpしてnpm installしてくれればあとは勝手にやるんですよ。jest欲しかったら自分で入れるしeslintの設定欲しかったら自分で書く。とりあえずプロジェクト作る最初のcpとnpm installだけしてくれればいい。一生面倒見てくれる献身的なreact-scriptsとか完全に不要で、コピーとインストールだけしてくればそれでよかった。プロジェクト構築ツールはプロジェクト構築終わったら存在が完全に消えていてほしいという願いです。痕跡を残さないでほしい。

cxa-template-react

--template react で使うテンプレートはこんな感じでpublishしてあります。

https://www.npmjs.com/package/cxa-template-react

中身はここ。

https://github.com/kotofurumiya/cxa-template-react

中身見ると（2020/08/12時点では）reactとesbuild入れてbrowser-syncでグルグル回してるだけ。
ブラックボックス化された部分は作られないし、令和にもなってbrowser-sync使ってるのが丸わかりだし、変更入るたびにフルビルドが走るtools/devserver.jsのクソコードがフルオープンになってます。
これだよこういうの求めてたんだよ（自画自賛）。

create-xxx-appで作られたプロジェクトは簡単にカスタマイズできます。だってフォルダ作ってnpm installしてるだけだもん。browser-syncいらなかったらuninstallすれば終わるし、prettierほしかったらinstallすれば動く。

カスタムテンプレート

cxa-template-templatename の命名規則でpublishすれば npx create-xxx-app prjname --template templatename で取ってこれます。テンプレートパッケージのフォルダ構造とかはcxa-template-reactを見てパクってください。

ちなみにReactには依存してないので任意のNode.jsプロジェクトを作れます。

さいごに

CRAは素晴らしいけど、現実で使おうとすると割と結構いろんな問題出てきます。CRAは目的にマッチしないけど手動でやるのは嫌って人向けのツールがcreate-xxx-appです。

「CRAつらいけど手動でやるのはな〜」みたいな人がいたらぜひ使ってみてください。まだエラーハンドリングとかもろくにできてないので環境によっては動かないとかもあるかもですが、よろしくお願いします。