下記の記事をみてフロントエンドエンジニアになりたい気持ちが強くなったので、1選ずつコード見ていき素人ながらに分析しました。かいつまんで、こんな書き方してるんだーみたいな発見を書いていくだけなので、体系的な説明にはなっていないと思うので悪しからず。お願いします。

Object.keys

オブジェクトがもっているキー名を配列として返す。
このプロジェクトではサーバーにおいているSVGへのパスをオブジェクトにまとめてあり、それをObject.keysを用いて、img要素を作るために利用している。

const CONSTANTS = {
  assetPath: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/184729",
}

const ASSETS = {
  head: `${CONSTANTS.assetPath}/head.svg`,
  waiting: `${CONSTANTS.assetPath}/hand.svg`,
  stalking: `${CONSTANTS.assetPath}/hand-waiting.svg`,
  grabbing: `${CONSTANTS.assetPath}/hand.svg`,
  grabbed: `${CONSTANTS.assetPath}/hand-with-cursor.svg`,
  shaka: `${CONSTANTS.assetPath}/hand-surfs-up.svg`
}

// Preload images
Object.keys(ASSETS).forEach(key => {
  const img = new Image();
  img.src = ASSETS[key];
});

けど、Object.keysの部分を消しても正常に動作しているっぽいので、何のためにこれをやっているのかは理解できていない。

カスタムフック　Ref　addEventListener

戻り値としてrefとstate(真偽値を示すhoveredという変数)の2つの値配列を返すuseHoverというカスタムフックを作成している。
GrabZoneという関数コンポーネントでuseHoverを呼び出し、refをouterRef変数,innerRef変数に、stateをouterHovered変数,innerHovered変数にそれぞれ分割代入している。
outerRef変数,innerRef変数がref属性に指定されたReact要素に、useHover関数内で定義されたaddEventListenerが設定され、カーソルがそこにホバーするたびにuseHover関数内のenter関数が呼び出され、カーソルが範囲外に行くことでleave関数が実行される。
それによってsetHoverdが実行されhoverd変数の真偽値が切り替わり、if文の条件分岐により、UIに変化をもたらしている。

const useHover = () => {
  const ref = useRef();
  const [hovered, setHovered] = useState(false);

  const enter = () => setHovered(true);
  const leave = () => setHovered(false);

  useEffect(
    () => {
      ref.current.addEventListener("mouseenter", enter);
      ref.current.addEventListener("mouseleave", leave);
      return () => {
        ref.current.removeEventListener("mouseenter", enter);
        ref.current.removeEventListener("mouseleave", leave);
      };
    },
    [ref]
  );

  return [ref, hovered];
};

const GrabZone = ({ cursorGrabbed, gameOver, onCursorGrabbed }) => {
  const [outerRef, outerHovered] = useHover();
  const [innerRef, innerHovered] = useHover();
  const [isExtended, setExtendedArm] = useState(false);

  let state = "waiting";
  if (outerHovered) {
    state = "stalking";
  }
  if (innerHovered) {
    state = "grabbing";
  }
  if (cursorGrabbed) {
    state = "grabbed";
  }
  if (gameOver) {
    state = "shaka"
  }

  // If state is grabbing for a long time, they're being clever!
  useEffect(() => {
      let timer;
      if (state === "grabbing") {
        timer = setTimeout(() => {
          // Not so clever now, are they?
          setExtendedArm(true);
          timer = null;
        }, 2000);
      }
      return () => {
        setExtendedArm(false);
        if (timer) {
          clearTimeout(timer);
        }
      };
    },
    [state]
  );

  return (
    <div className="grab-zone" ref={outerRef}>
      <div className="grab-zone__debug">
        <strong>Debug info:</strong>
        <p>Current state: {state}</p>
        <p>Extended arm: {isExtended ? "Yes" : "No"}</p>
      </div>
      <div className="grab-zone__danger" ref={innerRef}>
        <Grabber
          state={state}
          gameOver={gameOver}
          extended={isExtended}
          onCursorGrabbed={onCursorGrabbed}
        />
      </div>
    </div>
  );
};

イベントハンドラー

このプロジェクトで扱われているイベントは下記の４つ。

mousemove

マウスなどのポインティングデバイスで、カーソルのホットスポットが要素内にある間に動いた時に発行されるイベントです。

ここではwindow内でカーソルが動くというイベントに対して、マウスの位置をプログラムが把握するために使用されている。

mouseenter

ポインティングデバイス (通常はマウス) のホットスポットが最初にイベントが発生した要素の中に移動したときに Element に発生します。

mouseleave

mouseleave イベントは、ポインティングデバイス (ふつうはマウス) のカーソルが Element 外に移動したときに発行されます。

mouseenterとmouseleaveはある要素内へのカーソルの出入りを検知し、stateの真偽値を更新するために使用されていた。

const useHover = () => {
  const ref = useRef();
  const [hovered, setHovered] = useState(false);

  const enter = () => setHovered(true);
  const leave = () => setHovered(false);

  useEffect(
    () => {
      ref.current.addEventListener("mouseenter", enter);
      ref.current.addEventListener("mouseleave", leave);
      return () => {
        ref.current.removeEventListener("mouseenter", enter);
        ref.current.removeEventListener("mouseleave", leave);
      };
    },
    [ref]
  );

  return [ref, hovered];
};

resize

windowサイズの変更を検知し、要素の寸法と位置を返すgetBoundingClientRectを呼び出している。

つづく

コードみたら何をしているのかは推測がつくのですが、このコードを作り上げる発想がすごいと思いました。
引き続きコード読み解いていきます。

はじめに

外部システム(異なるドメイン)とのデータの受け渡しを行う必要があり、
postMessageでデータの受け渡しが行えたので、忘れないように記載

実装

iframeを使用した例などがよく出てくるが、
諸事情により使用出来なかったため、別の方法で対応

データ送信側のHTML

<script type="text/javascript">
    // 初期処理
    $(function() {
        // 初期処理で受信側のサイトを開く
        window.open('値受信側のHTML.com', 'open');
    });

    window.addEventListener('message', function(event) {
        // postMessageを受け取った時の処理
        alert(event.data); // 出力結果 => 準備出来たよー

        if ('値受信側のHTML.comのorigin' == event.origin) {
            // 値受信側からのpostMessageだった場合データの送信を行う
            const jsonData = JSON.stringify({'dataA':'データA!!','dataB':'データB!!'});
            event.source.window.postMessage(jsonData, event.origin);
        }
    }, false);
</script>

データ受信側のHTML

<script type="text/javascript">
    // 初期処理
    $(function() {
        window.opener.postMessage('準備出来たよー', '*');
    });

    window.addEventListener('message', function(event) {
        // postMessageを受け取った時の処理
        const data = JSON.parse(event.data);
        alert(data.dataA) // 出力結果 => "データA!!"
        alert(data.dataB) // 出力結果 => "データB!!"
    }, false);
</script>

流れ

　・データ送信側の画面を表示
　・初期処理でデータ受信側の画面を別タブで表示
　・データ受信側の初期処理（postMessage）でデータ送信側の画面にメッセージを送信
　・データ送信側の画面でpostMessageを受信し、originチェック実施
　・複数データを送信したいので、Json形式のメッセージをpostMessageで送信
　・データ受信側の画面でpostMessageを受信し、やりたい放題実施

おわりに

　説明が上手くなりたい。。

参考

・window.postMessage
・[JavaScript] postMessageでクロスドメインメッセージ通信

「大吉です」とブラウザに表示

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>おみくじゲーム</title>
</head>
<body>
  大吉です。
</body>
</html>

JavaScriptで「大吉です！」とブラウザに表示

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>おみくじゲーム</title>
</head>
<body>
  <script>
    document.write('大吉です！')
  </script>
</body>
</html>

関数を使って「大吉です！！」とブラウザに表示

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>おみくじゲーム</title>
</head>
<body>
  <script>
    function omikuji() {
      document.write('大吉です！！')
    }
    omikuji()
  </script>
</body>
</html>

変数を定義して1/3の確率で「大吉です♪」とブラウザに表示

その他は、吉、小吉が出てくる。(仮)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>おみくじゲーム</title>
</head>
<body>
  <script>
    function omikuji() {
      const fortune = Math.floor(Math.random()*3) // 0~2の間でランダムで数字が変化する
      if (fortune == 2) {
        document.write('大吉です♪')
      } else if (fortune == 1) {
        document.write('吉です')
      } else {
        document.write('小吉です')
      }
    }
    omikuji()
  </script>
</body>
</html>

Math.random は0以上1未満の数字（小数点以下含む）が取得できます。これに3をかけると、0以上3未満の数字になります。それをさらに Math.floor で処理すると、小数点以下が削られて、0, 1, 2 のいずれかの整数になります。

文字の大きさとか色とかを変えたりしてみる

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>おみくじゲーム</title>
  <style>
    h1 { color: red; font-size: 200px;}
    h2 { color: green; font-size: 100px;}
    h3 { color: blue; }
  </style>
</head>
<body>
  <script>
    function omikuji() {
      const fortune = Math.floor(Math.random()*3)
      if (fortune == 2) {
        document.write('<h1>大吉です♪</h1>')
      } else if (fortune == 1) {
        document.write('<h2>吉です</h2>')
      } else if (fortune == 0){
        document.write('<h3>小吉です</h3>')
      }
    }
    omikuji()
  </script>
</body>
</html>

「大吉です」とブラウザに表示

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>おみくじゲーム</title>
</head>
<body>
  大吉です。
</body>
</html>

JavaScriptで「大吉です！」とブラウザに表示

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>おみくじゲーム</title>
</head>
<body>
  <script>
    document.write('大吉です！')
  </script>
</body>
</html>

関数を使って「大吉です！！」とブラウザに表示

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>おみくじゲーム</title>
</head>
<body>
  <script>
    function omikuji() {
      document.write('大吉です！！')
    }
    omikuji()
  </script>
</body>
</html>

変数を定義して1/3の確率で「大吉です♪」とブラウザに表示

その他は、吉、小吉が出てくる。(仮)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>おみくじゲーム</title>
</head>
<body>
  <script>
    function omikuji() {
      const fortune = Math.floor(Math.random()*3) // 0~2の間でランダムで数字が変化する
      if (fortune == 2) {
        document.write('大吉です♪')
      } else if (fortune == 1) {
        document.write('吉です')
      } else {
        document.write('小吉です')
      }
    }
    omikuji()
  </script>
</body>
</html>

Math.random は0以上1未満の数字（小数点以下含む）が取得できます。これに3をかけると、0以上3未満の数字になります。それをさらに Math.floor で処理すると、小数点以下が削られて、0, 1, 2 のいずれかの整数になります。

文字の大きさとか色とかを変えたりしてみる

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>おみくじゲーム</title>
  <style>
    h1 { color: red; font-size: 200px;}
    h2 { color: green; font-size: 100px;}
    h3 { color: blue; }
  </style>
</head>
<body>
  <script>
    function omikuji() {
      const fortune = Math.floor(Math.random()*3)
      if (fortune == 2) {
        document.write('<h1>大吉です♪</h1>')
      } else if (fortune == 1) {
        document.write('<h2>吉です</h2>')
      } else if (fortune == 0){
        document.write('<h3>小吉です</h3>')
      }
    }
    omikuji()
  </script>
</body>
</html>

JavaScriptの関数

メソッド定義

def index
  # 処理
end

Rubyでいうところのメソッドを、

関数定義

function 関数名(引数) {
  // 処理
}

JavaScriptでは関数と呼ぶ

---

今回はこの記述で何がどうなっているのかに関しては触れません。

デベロッパーツールで読み込んだら出てくるんだぜ？やべーだろ？

までで終わります。

---

早速出力してみる

エディターにあるindex.htmlファイルを
Chromeにドラック＆ドロップでポイッと…

index.html

<!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>Document</title>
</head>
<body>
  <script>
    // ここに書いていくよー
  </script>
</body>
</html>

コードを追記したらデベロッパーツールで出力結果を確認します

文字列の結合

Qiita投稿日は？

function hello(what) {
  return '火曜と木曜は' + what + '投稿日';
}
console.log( hello('Qiita') );

指定した「what」と文字列を組み合わせて作成し、その文字列をreturnで返す

実行結果

火曜と木曜はQiita投稿日

その結果
文字列が組み合わされ出力される

ちなみに「return」を使わなかったら…

Qiita投稿日

function hello(what) {
  '火曜と木曜は' + what + '投稿日';
}
console.log( hello('Qiita') );

実行結果

undefined

値は出力されない。

計算結果の出力

掛け算

const num1 = 3
const num2 = 4

function calc(num1,num2){
  return num1*num2
}
console.log(calc(num1,num2))

リロードしてデベロッパーツールを確認すると…

出力結果

12

抑えておきたい知識

• JavaScriptってのはこんな感じでブラウザ側で動作する言語
• HTMLとCSSはプログラミング言語ではなくてマークアップ言語
• javaとJavaScriptは別物
• 文字列として扱う場合は…
  • ''シングルコーテーションで囲う
  • ""ダブルコーテーションも可
• 数値同士の計算ではRuby同様こちらの代数演算子が使用される

実装のきっかけ

現在個人開発を行なっており、その際にGeolocation APIで現在地の緯度経度を取得する処理を実装していました。
現在地の取得まで最大で５秒ほどかかることがあり、従来だと以下のように何のアニメーションも表示されないので、ユーザーに不安感を抱かせてしまうと思いました。
そこで、「現在地の取得」をクリックした際にローディングアニメーションが実行されるようにすればユーザーの不安感を軽減できるのではないかと思い、実装することにしました。

この記事の対象となる方

• Geolocation APIで現在地を取得する機能を実装している方
• その上でローディングアニメーションを実装したい方

開発環境

• Ruby 2.6.6
• Rails 6.1.0

コード

app/views/layout/application.html.erb

  <body class="font-mono text-base sm:text-xl">
    <div class="loading_zone">
      <div class="spinner"></div>
    </div>
    <%= render  "layouts/header" %>
    <div>
      <p class="notice"><%= notice %></p>
      <p class="alert"><%= alert %></p>
      <%= yield %>
    </div>
    <%= render  "layouts/footer" %> 
  </body>

app/assets/stylesheets/application.scss

  // ローディング画面のcss

.loading_zone {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  color: #f5f5f5;
}
.spinner {
  margin: 300px auto;
  width: 200px;
  height: 200px;
  background-color: #fff;
  border-radius: 100%;
  animation: sk-scaleout 1.0s infinite ease-in-out;
  @media(max-width: 500px){
    margin: 200px auto;
  }
}
/* ローディングアニメーション */
@keyframes sk-scaleout {
  0% {
    transform: scale(0);
  } 100% {
    transform: scale(1.0);
    opacity: 0;
  }
}

.loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color:gray;
  opacity: 0.9;
  z-index: 9999;
  position: fixed;
}

app/javascript/packs/getcurrentlocation.js

  function geoFindMe() {
  const spinner = document.getElementsByClassName('loading_zone')[0];
  spinner.classList.add('loading')
  function success(position) {
    const latitude  = position.coords.latitude;
    const longitude = position.coords.longitude;
    document.getElementById('location').value = `${latitude},${longitude}`;
    spinner.classList.remove('loading'); 
  }

  function error() {
    alert('エラーが発生しました。')
  }

  if(!navigator.geolocation) {
     alert('Geolocation is not supported by your browser');
  } else {
    navigator.geolocation.getCurrentPosition(success, error);
  }
}

document.querySelector('#get_current_spot').addEventListener('click', geoFindMe);

何をやっているのか？

では一個づつ解説していきます。

app/views/layout/application.html.erb

  <body class="font-mono text-base sm:text-xl">
    <div class="loading_zone">
      <div class="spinner"></div>
    </div>
    <%= render  "layouts/header" %>
    <div>
      <p class="notice"><%= notice %></p>
      <p class="alert"><%= alert %></p>
      <%= yield %>
    </div>
    <%= render  "layouts/footer" %> 
  </body>

application.html.erbの中にローディングアニメーション用のdivを用意しています。

app/assets/stylesheets/application.scss

  // ローディング画面のcss

.loading_zone {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  color: #f5f5f5;
}
.spinner {
  margin: 300px auto;
  width: 200px;
  height: 200px;
  background-color: #fff;
  border-radius: 100%;
  animation: sk-scaleout 1.0s infinite ease-in-out;
  @media(max-width: 500px){
    margin: 200px auto;
  }
}
/* ローディングアニメーション */
@keyframes sk-scaleout {
  0% {
    transform: scale(0);
  } 100% {
    transform: scale(1.0);
    opacity: 0;
  }
}

.loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: gray;
  opacity: 0.9;
  z-index: 9999;
  position: fixed;
}

ここで見慣れない＠keyframesというコードが出てきたと思います。
＠keyframesはアニメーション開始から終了するまでどのようなアニメーションをするのか指定できるCSSの文法です。
0％を開始直後、100%を終了時としています。

＠keyframesについて詳しく知りたい場合はこちらを参照ください！

  .spinner {
  margin: 300px auto;
  width: 200px;
  height: 200px;
  background-color: #fff;
  border-radius: 100%;
  animation: sk-scaleout 1.0s infinite ease-in-out;
  @media(max-width: 500px){
    margin: 200px auto;
  }
}
/* ローディングアニメーション */
@keyframes sk-scaleout {
  0% {
    transform: scale(0);
  } 100% {
    transform: scale(1.0);
    opacity: 0;
  }
}

つまり、上のコードは

1.アニメーション開始時
→何も表示されない
2.アニメーション開始〜終了直前まで
→円を表示する（最大サイズは直径200px）
3.アニメーション終了時
→opacityがゼロなので、消える。

以降1~3を繰り返す。
というアニメーションになっています。

最後にJavaScriptで、クリックしたときにアニメーションが表示されるように処理を書きます。

app/javascript/packs/getcurrentlocation.js

  function geoFindMe() {
  const spinner = document.getElementsByClassName('loading_zone')[0];
  spinner.classList.add('loading')
  function success(position) {
    const latitude  = position.coords.latitude;
    const longitude = position.coords.longitude;
    document.getElementById('location').value = `${latitude},${longitude}`;
    spinner.classList.remove('loading'); 
  }

  function error() {
    alert('エラーが発生しました。')
    spinner.classList.remove('loading'); 
  }

  if(!navigator.geolocation) {
     alert('Geolocation is not supported by your browser');
  } else {
    navigator.geolocation.getCurrentPosition(success, error);
  }
}

document.querySelector('#get_current_spot').addEventListener('click', geoFindMe);

clickした後に走るgeoFindMeという関数の中に詳しい設定を書きます。
loading_zoneクラスを持つdivに対して、処理が走っている間はloadingクラスを付与、処理が終わった後はloadingクラスを削除するようにコードを書きました。

最後に

以上で、ローディングアイコンの実装が完了しました！
最後まで読んでいただき、誠にありがとうございます。

少しでも参考になったと思ったらLGTMを頂けますと幸いです！

概要

blobにランダムなファイル名をつけてアップロードしたい場合の処理をメモします。

実装

const imageName = Math.random().toString(32).substring(2)
const formData = new FormData()
formData.append('file', blob, imageName + '.jpg')
const config = {
    headers: {
      'content-type': 'multipart/form-data'
    }
}
await axios.post('/api/post_upload', formData, config).then(()=>{
      alert('画像アップロード完了')
})

1. Math.randomで0以上1未満の少数をランダムで生成
2. toString()で32進数に変換
3. substring(2)で3文字目以降を取得

まとめ

本格的にするならもっとセキュアな名前つけた方がいいかもしれません。

callback関数

関数を渡すことによって、その関数を受け取った側の関数内で実行することができる

function hello(callback) {
  console.log('hello' + callback);
}

function getName() {
  return 'Shun';
}

hello(getName);

これはどうなっているかというと

function hello(getName) {
  console.log('hello' + 'Shun');
}

function getName() {
  return 'Shun';
}

hello(getName);

まず最初のhelloの引数callbackにgetNameが入ります
次に２行目の+ callbackが+ 'Shun'に置換されます
そして結果は一緒です

---

関数として取り扱う

function hello(callback) {
  console.log(callback);
}

function getName() {
  return 'Shun';
}

function getFirstName() {
  return 'Sato';
}

hello(getFirstName);

---

変数として取り扱う

function hello(callback) {
  console.log(callback);
}

function getName() {
  return 'Shun';
}

const getFirstName = function () {
  return 'Sato';
}

hello(getFirstName);

---

無名関数をそのままcallback関数として渡す

function hello(callback) {
  console.log(callback);
}

function getName() {
  return 'Shun';
}

hello(function () {
  return 'Sato';
});

---

アロー関数をcallback関数として渡す

function hello(callback) {
  console.log(callback);
  console.log('hello' + callback());
}

function getName() {
  return 'Shun';
}

hello(() => 'Sato');

---

引数２つ

function hello(callback, lastname) {
  console.log(callback);
  console.log('hello' + callback(lastname));
}

function getName() {
  return 'Shun';
}

hello(function(name) {
  return 'Sato' + name;
}, 'Shun');

無名関数をcallback関数として渡しています
引数nameはどこから来てるか？　lastnameの値が入ります

---

計算

function doSomething(a, b, callback) {
  const result = callback(a, b);
  console.log(result);
}

function multiply(a, b) {
  return a * b;
}

function plus(a, b) {
  return a + b;
}

doSomething(3, 4, multiply); 
doSomething(11, 4, plus); 

Rubyでは定義したい変数名を記述するだけで変数定義が可能だが、JavaScriptでは変数定義の様式は、var、const、letと３つ存在する。

var

再定義、再代入可能

var 変数名 = "値"

変数名 = "再代入する値"

const

再代入、再定義ともに不可
再代入、再定義を行うとエラーが起こる

const 変数名 = "値"

let

再代入は可、再定義は不可
再定義を行うとエラーが起こる

let 変数名 = "値"

変数名 = "再代入する値"

letとconstの使い分け

再代入する予定のある変数を定義する際はletを使用する
再定義する予定のない変数を定義する際はconstを使用

変数と定数の違い

• const 定数。変更不可。
• let 変数。再代入○

はじめに

railsではよくbinding.pryを使用して値が入っているか確認する際によく使いますが、
jsはどうやって調べられるのか？
可能であれば動きをみた方が理解度も上がりますよね！
とても簡単です^^それでは行きましょう!

手順

1.検証ツールを開き。
Sourcesを選択します。

2.jsファイルを選択して開きます。

3.処理を止めたい行を選択します。

あとはbinding.pryの時と同じようにブラウザで操作します。

選択した場所で処理が止まり、

その状態で、検証ツールのコンソールで変数の中身を確認することもできます！

誰かの参考に慣れば幸いです^^

※ニコニコのユーザーブロマガサービス終了に合わせて、移動＆編集した記事です。
元記事(2019-03-06)
https://ch.nicovideo.jp/FlyingEchidna/blomaga/ar1708679

放送でも取り上げてたけども…

【過去放送】2019/03/02 雑談「SVGでアニメーションさせたいんじゃ」
https://www.nicovideo.jp/watch/sm34717013

放送内では語り切れないことについてクッソだらだら書いていくぅ～↑

安売りしてたとかでおとんが買ってくれた
Moho Pro12 と Poser Pro 11
のうち、今回使ったのはMohoだけ。

Poserの方は自作で3Dモデルを作る技術もツールもないので、いまいち使い道が思いつかないnow。
デッサン人形代わりにはなるかもね？ぐらい。
大量にプリセットがあるけども、リアルテイストすぎて上手く使いこなせる気がしない（白目）

Mohoに対するマニアックな感想

Mohoの方は2Dだから無茶ができる感。
ラスタ形式でもベクタ形式でも読み込めるし、ボーンを入れられるし、アニメーションを付けられるので、大体でOKができてありがたい。
フォトショ（psd）もイラレ（ai）もそのまま読み込める。
が、イラレはバージョン8までの形式しか対応してないらしく、CC2019を使っていようが、保存時にわざわざバージョンを落とさないといけない。
まあaiを読み込めるだけマシ？

Moho側で完結して作る場合はベクタ形式だから、パスの扱いに慣れてない人はキツいだろうけど、逆に言えばベクタ形式系の編集機能は付いてるわけで。
読み込んだデータも含め、パスの線の太さ・角度・塗りあたりもその場で編集＆アニメーションできるし、フレーム間で勝手にモーフィングしてくれる。
ただ、アンカーポイントの数の変更には弱く、途中で変形させるために無駄にアンカーポイントを増やす羽目になったり…
その辺も含め、AEのシェイプ機能みたいなもんなわけで。
シェイプ乱用に定評があるオレ歓喜。

Moho上でのアニメーションの概念についてだけども。
描画ツール系でよくあるレイヤーと、AEのコンポジション・キーフレームの概念にプラスして、ボーンを使って制御する感じ。
理解できるまでクソややこしかったけども、分かってしまえばクソ便利だなぁという印象。

表示時の重なり順はレイヤーパネル上の順になる…まあ描画ツールではよくある話で。
途中でレイヤーの表示順序を変更するようなアニメーションは、上位のグループ（フォルダ）のオプションで設定すればできるようになる。
AEだったら同じコンポのレイヤーを重ねて、切り替えたいタイミングでインポイントとアウトポイントを…
ってやるところを、アニメーションの再生途中でマジでレイヤー入れ替えちゃうあたり、かなり強引。
意図せず編集途中でレイヤーを増やしたり移動させたりすると、既存のレイヤー順序アニメーション設定がご乱心なさるのでマジ注意。

で、このレイヤーはAEで言うところのフッテージ…かと思いきや、コンポ的な扱いらしい。
つまり、レイヤーを増やせば増やすほどコンポが増えるようなもので、グループレイヤーは中に入れてるレイヤーのプリコンポみたいな感じ。
レイヤーの各々にタイムラインが存在し、各々にアニメーションの設定を入れる。
グループに移動・回転アニメーションを設定すると、中のレイヤーのアニメーションも再生しつつ、一括で移動・回転する。

単なるグループもあれば、機能を持ったグループっぽいものがあって…
特にMoho的に一番重要であろう『ボーンレイヤー』は、中のレイヤーに対してボーンを入れてグリグリ動かせる。
単純にボーンに追従させて動かすこともできるし、メッシュワープみたいな感じでグニグニ変形させながら動かすこともできる。
今回は使ってないけど『フレームバイフレームレイヤー』なら中のレイヤーをパラパラ漫画形式で再生、『スイッチレイヤー』なら口パクや目パチのような差分レイヤーとして管理＆切り替えられるようになる。
ラスタ形式だったらクソお世話になりそう。
ボーンの中にフレームバイフレームやスイッチを入れ子にすることも可能。
マスクの設定を入れることも可能。今回は目を顔でマスクしてるけど…作業画面では分からないね。動画出力時には反映される。
あとは使ってないけど、乗算やスクリーンのようなブレンドモードもある。
大体のことできるやん…

あと、めっちゃAE用語で喋っちゃうけど…
全コンポ（レイヤー）のタイムラインのインポイントは一律同時。つまり全部同時再生状態。
だからこのままだと再生開始タイミングの調整ができない。
特定アニメーションを含んだコンポを、インポイントをずらして設置して、再生速度はタイムリマップ入れて微調整！
…ってことは、できないofできない。

その代わりに使うのが『アクション』＆『スマートボーン』。
個人的にはこの機能が一番ヤベェと思っている。
アクションごとのタイムラインは孤立していて、アクション各々にコンポのアニメーション設定ができる感じ。
作ったアクションを別のアクションにそのまま読み込ませて再生させることも可能。
さらに、このアクションにスマートボーンを紐づける、ということも可能。
スマートボーンは、回転角度＝紐づけたアクションのタイムラインの再生位置、で…
別のアクションの中のスマートボーンを回転させると、紐づけたアクションを再生してくれる。
タイムリマップよりも断然直感的。つおい。

じゃあ、同じレイヤーに対してアニメーションを入れたアクション2つを、スマートボーンを使って再生したらどうなるのか。
なんとまあ、イイ感じにアニメーションをマージしてくれる。
今回だと、歩きのアクション中に、瞳の動き、瞬き、首振りのアクションのスマートボーンを操作してみてる。
歩きには体の揺れとかも入ってるけど、その辺も含めて全部マージされる。
立体っぽい動きもこれで表現できる。
なんやこれ…動作差分作り放題やないか…

あとはキーフレームだけども、ここについてはAEほどの自由度はない印象。
補間方法として、スムーズ、リニア、イーズイン、イーズアウトとかは設定できるけど、AEみたいにグラフエディターで速度を調整、みたいなことはできなさげ。
数値直打ちでの微調整もできないし、エクスプレッションも当然ない。
とはいえ、ループの設定は一応キーフレームに対してできて、次のキーフレームがくるまで指定した範囲のキーフレームをループ再生してくれる。
ただ、ループした瞬間の補間が効かない（そもそも補間とループの設定が同列扱い）ので、カクつくのがすっげー気になる。
今回は、足を下した瞬間の体の揺れでごまかしたけど、こんな苦労をするぐらいならループ設定を使わず、キーフレームコピペ乱打してやろうかと思ってしまうレベル。

その他、一応スクリプトも対応はしてるみたい。言語はLua。
Luaのコードはお遊びで買ったCodeaで見たことあるけども、組んだことはないなぁ…
まあJavaScriptと比べれば…いや、どっこいどっこいかな…ｗｗ

Mohoから吐き出したsvgを魔改造したった

mp4とかaviとかgifで出力できるのは、わかる。
しっかしsvg（サイトで表示できるベクタ形式画像）で出力できるとか…マジかよ…
やろうと思ったらサイト上で好きに配置＆配色＆変形できるし、JavaScriptで再生フレームいじれるんちゃうん…？
ってことで、実際にやってみた。

何パターンか試したけど…
つい昨日モンストにハブられかけた（強制終了バグ出ましたが何か？今日は無事）
Android4.4のブラウザでもそれなりに動作するのはこれっぽい。
20MBぐらいあるから気をつけろ！
http://dmrb.nobody.jp/walk/walk.html

で。
今回は260フレームってことで260個のsvgが出力された。
全部合わせて24MBでーす！ってゲロ重いわやめてくれｗｗ
いや、初回はもっと重かったんだけど、レイヤー名がそのまま出力されるから日本語から英語にしたり、今回は塗り設定だけで十分だから線を非表示にしたりしてケチった。

svgの中身を見てみる。
律儀に全ファイルにxml宣言とDOCTYPE宣言、svgのバージョンと名前空間宣言が入ってるのは、まあ分かる。
が。
いくらクラス名の衝突のリスクがあるとはいえ、各パスにデザインの属性を片っ端から付与するのはさすがにやめてくれ…
fill="none" stroke="#a60d3f" stroke-width="1" stroke-linecap="butt" stroke-linejoin="round"
ってだけで文字数どんだけあると思っとんねん…
ということで、さすがにクラス＆CSSでの指定に移行させたい。
あと、パスそのものの情報も一部空白を取っ払えそう。

いや、それより一番の問題は…
実際にsvgを表示したときに、設定していた一部のマスクが効いてない。
詳しく差分データを用意してタグを解読していくと…
どうやら、マスク設定を有効にしたグループ内にグループを入れ子で置いた場合、マスク設定が出力されない模様。
mp4で出力したときは問題なかったし、Moho側のバグっぽい。

オマケにタグをよく見ると、表示しているパスをそのままマスクとしても流用する設定を入れていた場合、内容が全く同じパスを表示用とマスク用として出力していることが発覚。
どうにかならんかとsvgの仕様を調べたところ、useタグを使うことでパス情報の使いまわしができることが発覚。
どうにかしてuseタグに移行させたい。

とにかく。
出力したsvgの内容がめっちゃ不服。どうにかしたい。
AEだったら速攻でスクリプト書いてただろうけど、今回はMoho。
今回のケースに留まらず、ローカルファイルをいじるという意味では、もうちょっと汎用的で楽な手段が欲しいところでもある。
Ruby on Railsも勉強したことだし…
ということで、Rubyでsvgタグをいじるプログラムを組むことにした。

マスクの設定が出力できてないレイヤーの名前に識別用の名前を付けてsvgを出力しなおす。
で、svgをRubyで読み込んで、その名前を見つけたら、マスクの設定を自動で付与。
マスクのパスが使いまわせそうだったらuseタグで参照するようにした。
あと、無くても動くからxml宣言とDOCTYPE宣言をごっそり削除。
デザインの属性も一旦ハッシュに登録して、同内容の設定だったら同じクラス名を付与。
全部パス走査し終わったらハッシュの中身を確認して、styleタグにクラス名とCSSを出力した。

他に、1個のファイルにする実験もやってみたんだけど、それだと今度はファイル1個が重すぎる問題が発生。
自分が使ってるレンタルサーバーはアップロードできるファイル1個の最大サイズは3MB。1個で20MBなんて論外of論外。
試しに3MB未満になるように適当に10個ほどに分割してみたけど…
オレのAndroidじゃキャッシュがうまく動かないのか、全く表示できず。
結局、最終版は260個のままなのであった。

あとはアニメーション。
svgファイルは各々1個で完結した静止画なので、html上ではこれをJavaScriptでパラパラ漫画の如く再生（切り替え）させる。
これ自体はよくあるimgタグの切り替え処理みたいなもんで、そんなに難しいことではないんだけども…
問題はロード時間と処理速度。ということで、読み込み方法あれこれ試した。

愚直なのは、htmlに最初から全フレームのimgタグを非表示設定付きで置いとくパターン。
JavaScriptで後から必要数分のimgタグをぶち込む汎用的な方法もあるけど、速度で言えば前者の方が早い。
先に結論をいっちゃうと、試した中でこれが最強だったよ（爆）
それでもオレのAndroidだと表示までに30秒ぐらい待たされるし、なぜか未だに1フレーム目だけ表示時のリサイズ処理が走らないんだけどね。なんだろね？

次にやったのは、読み込むファイルが多いからいけないんだ！的な発想で、最早別ファイルを読み込まない、svgをhtmlに埋め込むパターン。
「svgファイルを1個にしたら20MBになった」っていってんのに、それをhtmlに埋め込むってことはだな…まあアップロードできないわな。
一応GitHubの方で無理矢理試したけど、オレのAndroidはロードが終わらないどころか、ブラウザが死んだよ（爆）

さらに、ajaxを使って後でがっつりリクエスト＆ロードするパターン。
動かなくもないけど…オレのAndroidは1分ぐらい待たされた。うん。

あと別件で、imgタグじゃなくuseタグを使った表示もやってみた。
埋め込み式（ゲロ重htmlかajax）じゃないとダメなんだけど、一応表示＆アニメーションはできた。
ファイルパスの指定を省略できるし、ファイルアクセス的には早くなるかな？と思ったけど、速度の体感差は皆無だったね…
まあそういう方法もあると知れただけでもOKとしましょう。

報告は以上。

(書きはしたのですが、文章がとっちらかってしまいました…。まあ駄文の存在も許されるのがインターネットのいいところだよね？ということで)

時々ネットで「テストコードを書けばいいのだから(静的)型はいらない」という意見を見る。さすがに型はテストの代わりにならない、というのは自明に近いものがあるので、「型があるのでテストは要らない」はほとんど見ないが、ちょいちょいTypeScript不要論の文脈で前者の意見は見られる。なので、これに関して書く。えっ？タイトルの「型はテストの代わりにならない」はって？まあ自明だけど一応書いただけだ。

ちなみにここで言うテストはテストのパターンを用意して、それがpassするか検証するテストのことを指している。
また、「型」は静的型付け言語での型を指す。実行時型のことを指し示すときは、「実行時型」と書く。(単に書くのがめんどくさい。)

ここで一つの疑問を投げかけよう。

型がない言語でテストが書けますか？

題材とするテスト

題材はJavaScript系言語でメジャーなJESTのドキュメントの一番最初のコードとする。

まずはテスト対象とするコードを示す。

sum.js

function sum(a, b) {
  return a + b;
}
module.exports = sum;

次にこれをテストするコードを示す。

sum.test.js

const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

見ての通りだが、足し算を行う関数に、実際に1と2を入れて、3となることを確認している。単純で典型的でわかりやすいコードだ。

使ってみる

さて、別のコードから文字列を入れてみよう。

concat01.js

const sum = require('./sum');
let pyon = sum('Hoge', 'Pyon');

至極当然のように pyon の中身は"HogePyon"となる。

次に以下のコードを試す。

concat02.js

const sum = require('./sum');
let sanzyu = sum('10', '20');

sanzyu の中身は"1020"となる。

次に以下のコードを試す。

concat03.js

const sum = require('./sum');
let sanzyu = sum([10], [20]);

sanzyu の中身は"1020"となる。

次に以下のコードを試す。

concat04.js

const sum = require('./sum');
let sanzyu = sum({val: 10}, {val: 20});

sanzyu の中身は"[object Object][object Object]"となる。

次に以下のコードを試す。

concat05.js

const sum = require('./sum');
let nyan = sum(null, null);

nyan の中身は0となる。

次に以下のコードを試す。

concat06.js

const sum = require('./sum');
let nyan = sum(null, true);

nyan の中身は1となる。

次に以下のコードを試す。

concat07.js

const sum = require('./sum');
let nyan = sum(true, true);

nyan の中身は2となる。

次に以下のコードを試す。

concat08.js

const sum = require('./sum');
let nyan = sum(null, undefined);

nyan の中身はNaNとなる。

次に以下のコードを試す。

concat09.js

const sum = require('./sum');
let nyan = sum('', undefined);

nyan の中身は"undefined"となる。

次に以下のコードを試す。

concat10.js

const sum = require('./sum');
let num = {
  val: "100",
  [Symbol.toPrimitive](hint) {
    return parseInt(this.val); // 普通は hint で分岐する
  }
};
let nyan = sum(num, num);

nyan の中身は200となる。

テストはパスしている

ここで使われているsumの実装はsum.test.jsのテストをパスしている。テストコードというのは、それをすべてパスしていればテスト対象のコードが(ある程度)正しいと検証するためのコードである。実装とテスト、それぞれが正しいかどうかで4パターン考えられる。

1. sum.jsとsum.test.jsが間違っている。
2. sum.jsは間違っているが、sum.test.jsは正しい。
3. sum.jsは正しく、上の動作はすべて仕様どおりであるが、テストコードが足りない。
4. sum.jsは正しく、上の動作はすべて仕様どおりであり、sum.test.jsで十分に検証できている。

sum.jsが間違っているのだろうか？この場合はそれをpassしてしまったテストコードも間違っているといえる。それは本当だろうか？

それとも、上の動作はすべて仕様どおりであるが、テストコードが足りないのだろうか？

それとも、上の動作はすべて仕様どおりであり、かつ、その仕様はsum.test.jsで十分に検証できているのだろうか？

あらゆる製品には動かすための前提条件がある

ソフトウェアも含め、自動車や家電といったあらゆる製品にはその部品も含め動作させる前提条件がある。前提条件がない製品というのは私の知っている範囲ではない。最低でも未だ人類は太陽に突っ込ませることを許容した製品というのを作ったことがないはずである。だからマニュアルやデータシートには温度や湿度などの動作要件が書かれており、その範囲内でのみの動作を保証している。実際の製品試験も動作要件の範囲内での挙動を試験するので、例えば溶鉱炉の中に車を突っ込んで試験をするなどという意味不明なことはしない。溶鉱炉に突っ込んで車が壊れたなら、明らかに溶鉱炉に突っ込んだ人が、動作要件を守らなかったのが悪い。

ソフトウェアにおけるテストコードというのはこの動作要件の範囲内での挙動を検証するための試験に相当する。では、ソフトウェアにおける動作要件とはなんなのだろうか？今回のような関数記述であるなら、それは言語処理系と関数への引数であろう。(closureも考える必要があるが、ここでは無視する。)今回、の sum.js は数値同士の加算を想定したプログラムであり、そこに数値以外を代入されることは想定していない。だけど、先の sum.js の sum.test.js のどちらともに、その想定に関して一切記述していない。このままの状態では暗黙的に動作要件を設けているだけで、このプログラムを利用するものにそれが伝わらない。

どのように動作要件を伝え、守らせるか

では、どのように動作要件を利用者に伝えるべきだろうか？愚直な方法はコメントを記述する方法だろう。

sum.jdoc.js

/**
 * 2つの引数を受け取り、それらを加算します。
 * @param {number} a 1つ目の引数
 * @param {number} b 2つ目の引数
 */
function sum(a, b) {
  return a + b;
}
module.exports = sum;

せっかくなのでJDocで書いてみた。確かにこれで伝わるだろう。電子機器などの製品の部品であれば、データシートに動作要件の記載を記載しているので、ほぼ同程度に達しているように見える。開発者が片っ端からコメントを読んで、適切に守れているか検証すれば良い。(なお実際の回路設計ではCADの類にやらせることになるのだが。)

だが、膨大な数のソフトウェアコンポーネントに対してそんな作業をしていられるだろうか？不可能ではないが、とんでもなく高いコストが掛かることは目に見えている。これを可能な限り削減できることに越したことはないのは明らかである。

もう一つ実行時型を検証するという方法もありえるだろう。

sum.rtti.js

function sum(a, b) {
  if (typeof(a) != "number" || typeof(b) != "number") {
    throw new TypeError("Invalid type");
  }
  return a + b;
}
module.exports = sum;

この挙動そのものを仕様として、利用者側に渡すということである。だが、これを渡された利用者はどのようにして、自分たちのコードが sum を呼び出すときに必ず数値を与えているか検証するのだろうか？製品を外に出したあとにこの例外が発生してしまうのは大変困る以上、気合で検証をする必要がある。利用者側でもテストコードを書いて、この例外を踏み抜いていないことを確認することになるが、そのためのテストパターンを増強する必要が出てくる。その利用者側コードでは当然のように他の関数も使っているだろうから、このテストパターンは倍々ゲームで複雑化していくことになる。

型検査

そこで「型」の登場である。

sum.ts

function sum(a:number, b:number): number {
  return a + b;
}
module.exports = sum;

こう書けば、人間の目にも number 型を2つ与えればいいことが明らかな上に、言語処理系がそれを検査することができる。実行時型が number 型であることを、実行するより前、開発者の手元にある段階で保証することができる。(もちろん型検査に関する仕組みが適切に機能している前提はあるが。)こうすることで、開発者はテストパターンを用意するときにも数値型が入力に来ることを想定できるため、現実的な思考規模でテストパターンを用意することができる。あらゆる入力が来るかもしれない、なんてことを考えなくて済むのだ。

ソフトウェアに限らず大半の製品というのは開発者の手元を離れたところで活躍することで価値を生み出すことができる。そのため開発者は実行時環境というのを完全に制御することが難しい。車を太陽に突っ込むのはあまりに非現実的だが、スマートフォンを水中に入れたり、ソフトウェアに対してトンチンカンなデータを入れることはごく簡単にできてしまう。だからこそ、マニュアルを書いたり、データシートを用意したり、型を書いたりすることで、それを可能な限り制御して、その上で初めて製品仕様どおり動いているかが検証可能になる。そして、ソフトウェアの世界ではとても強力な「型」という助っ人がいる。床一面に並べられた設計図を片っ端から検算するなどということをしなくても、特定のコンポーネントに入るデータをある程度絞り込むことができる。

もちろん、型の能力の問題から完全に設計を記述、検証することはできない。(それこそ定理証明が必要である。)だが、検証コストを劇的に下げることは可能なのだ。これはテストコードでは困難である。だからテストは型の代わりにならない。

先日、以下のような記事を書いた。

実際、このようなコンポーネントを開発して、動かせる場所があるといいと思ったので、Github Pages でページを作成した。 なお、公開には gh-pages を利用した。

以下、記事執筆時点で記載している2コンポーネントについて簡単に説明

OneClickButton.vue

以下の記事の内容から名前を変えただけ。

EventMessageBoard.vue

メッセージを追加してから、一定時間後にメッセージが消えてくれるようなコンポーネント。
イベント（遅延処理やエラーなど）の完了後、これを一時的にユーザーに通達したいようなケースで利用することを想定している。

以下のような仕組みで実装した。

• 利用時に ref を使って、コンポーネント利用者が特定のオブジェクトを参照可能にする (あまり ref は使いたくなかったが...もっと良い方法があれば...)
• イベント発火時に this.$refs.__参照名__.add(message); のようにして通達すると、コンポーネント側で値を自動追加し、同時にTimeoutで一定時間後にメッセージを削除するイベントを追加する
• transition によってある程度アニメーション付きで消えるようにする

苦労した点としては単体テストで setTimeout をどう扱うかだったが、これは jest が setTimeout をテストするための仕組みを持っていたので、これをうまく使うことで解決できた。

※ニコニコのユーザーブロマガサービス終了に合わせて、移動＆編集した記事です。
元記事(2017-10-02)
https://ch.nicovideo.jp/FlyingEchidna/blomaga/ar1343181

さて。
生放送動画（配信映像＋コメントの動画）を投稿するにあたり、自分がやったことを、ログ残しがてら、ぶっちゃかす。
各々の細かいツールの仕様や操作等々は省くのであしからず。

なんでこんなややこしいことを…？

「生放送動画なんてタイムシフトの画面をキャプチャするんが手っ取り早いやん？」
「投コメでコメント再現した方が文字列データとしても残るで？」
「探したら確かそういう動画を出力するツールあったと思うんやけど…」
ごもっとも。
理由を挙げるとしたら…
「コメントの流し方（アニメーション）を制御したかった」になる。
「興味半分で作ってみたかった」とも言う。

具体的には、表示時間や配置位置をコントロールできるようにしたかった。
ニコニコのコメントは３秒で、画面右から左に、画面上から順に流れる仕様、とのこと。
これを少なからず、もっとゆっくり、動画へのコメントと被らないよう、画面の下から順に流れるようにしたかった。

あとは、今回はシステムコメント排除ぐらいしかしてないけども…
既存の配置や配色設定、あるいはこっちで定義した特定文字列やユーザーを検出して、表示方法を切り替えるってのも、できる状態にしておきたかった。
「自分のコメントは動画化するときには含めて欲しくない」とか要望があっても、一応対応できる。
他、お遊び定義を入れて遊んでもいいかな？とも思う。

ついでに自分でテロップ用の文字列情報作って流し込めば、別に生放送動画じゃなくても、テロップ機能として使える。
アニメーション方法の定義を自作でするわけだから、好きなようにできるし、まあ後々自作動画で何かしたいときに使えるでしょう。

ま。そんなかんじ。

動画投下までの手順＆解説

　1. NiconicoLiveEncoderで放送映像をローカル保存
　2. NiconamaCommentViewerでコメントをファイル保存
　3. AfterEffectsで動画とコメントを読み込んでエクスプレッションでコメントを合成＆必要あれば編集
　4. MediaEncoderでレンダリング
　5. ニコ動に投下

1. NiconicoLiveEncoderで放送映像をローカル保存

「配信時に録画を行う」設定を入れておけば、勝手に保存される。
ここで保存される映像は、実際に配信したタイムシフトのような映像…ではなく、ツール側が配信するために取り込んだ大元の映像なので、
例え放送準備中の段階であっても、ツールの「配信開始」ボタンを押した瞬間から、ぜーんぶ保存される。
ツール側の不良がない限りは、ニコ生側の配信関連サーバーエラーによる画面真っ暗期間も関係ない。
細かいところを気にしだすといろいろ融通は利かないのかもしれないが、便利。

2. NiconamaCommentViewerでコメントをファイル保存

接続して表示した生放送コメントを「名前を付けて保存」すれば、xml形式で保存化される。使うコメントのデータはこれ。
一応「テキスト形式で保存」もしておく。こっちの方が情報量は少なくて見やすいので、こっちでコメントされた再生時間を確認する。
最初はテキスト形式の方を元データとして読み込んで解析＆使ってたけども、１コメントの情報の区切り文字がタブだったり改行だったりで、コメントそのものにソレを使われたら１コメント分の解析ができなくなってアウトだなと思ったから、やめた。
細かい解析処理は３で。

3. AfterEffectsで動画とコメントを読み込んでエクスプレッションでコメントを合成＆必要あれば編集

本題はここ。
先に軽く説明すると『エクスプレッション』はAfterEffectsで使えるスクリプト（プログラム）のこと。
実際はJavaScriptだったりするけど…もうね。JavaScriptって環境によって言語使用変えたい放題だから、わけわかんないよね…
まあ、それはさておき。
処理の概要は…

1. 保存しておいたコメントのxmlデータをresouceという『テキストレイヤーに』貼り付ける
2. 処理本体となるエクスプレッションのソースコードをfunctionという『テキストレイヤーに』書く
3. intermediateというテキストレイヤーのソーステキストのエクスプレッションで、中間処理結果が出るように『functionレイヤーに書いた処理をeval()で実行』
4. 各種コメントを表示するためのテキストレイヤーのソーステキスト＆位置のエクスプレッションで『functionレイヤーに書いた処理をeval()で実行』してコメントとして表示

『テキストレイヤーにプログラムのソースコードを書いて実行する』という
「普段AfterEffectsを使ってる人でも、こんな使い方しないだろう！？」みたいな、実はとんでもないことをしている。
「テキストレイヤーをデータ格納場所として使う方法、かなり便利だよね」と言いつつ乱用した結果がこれだよ。
非表示にしてもデータは参照できるし、適当な位置に適当に書ける感じ。適当すぎる。

AfterEffectsらしからぬ画面のスクショも張っておこう。

resourceレイヤーには、以下のエクスプレッション制御エフェクトのスライダーもかけてある。
TEXT_HEIGHT ：コメント１行の高さ　※行間を開けたかったらここで設定
TEXT_WIDTH ：コメント１文字の幅　※下の方に余談あり
VIEW_DURATION：１コメントの表示時間
OFFSET_MINUTE：解析＆表示するコメントの時間のオフセット　※コンポジションMAX尺が3時間で、6時間分のコメントを表示切替するために用意

各種クソコードもぶっちゃかすんだぜ。ヒューきったねぇー。
なんでもいいけど『データ』ってレイヤー名…ってかコンポジション名、すげぇブサイクだなｗｗｗいいんだけどさ。
見返すと気になるところいろいろあるなぁ…まあいいんだけど（適当すぎ

functionレイヤーのソーステキスト（処理本体）

var TextData = function( lineIndex, viewTime, viewText ) {
  this.lineIndex = lineIndex;
  this.viewTime  = viewTime;
  this.viewText  = viewText;
};

var FUNCTION = {
  makeData: function()
  {
    resourceLayer = thisComp.layer("resource");
    originalStr = resourceLayer.text.sourceText.valueAtTime(0);
    liveStartTime = parseInt(originalStr.match(/<StartTime>(\d+)<\/StartTime>/)[1]);
    textStr = originalStr.match(/<chat.+<\/chat>/)[0];
    viewDuration = resourceLayer.effect("VIEW_DURATION")(1).valueAtTime(0);
    offsetTime = -resourceLayer.effect("OFFSET_MINUTE")(1).valueAtTime(0) * 60 - liveStartTime;
    result = Array();
    reg = RegExp("date=\"(\\d+?)\".*?>(.+?)<\/chat>", "g");
    while( (targetList = reg.exec(textStr)) !== null ) {
      if( targetList[2][0] == '\/' ) continue;
      viewStartTime = parseInt(targetList[1]) + offsetTime;
      if( viewStartTime < 0 ) continue;
      lineIndex = 0;
      if( result.length > 0 ) {
        dataIndex = result.length;
        isRewrite = false;
        for( i = result.length - 1; i >= 0; i-- ) {
          if( viewStartTime > result[i].viewTime + viewDuration ) break;
          dataIndex = i;
          lineIndex = Math.max(lineIndex, result[dataIndex].lineIndex + 1);
        }
        for( ; dataIndex < result.length; dataIndex++ ) {
          diffTimeRatio = (viewStartTime - result[dataIndex].viewTime) / viewDuration;
          textRatio = (result[dataIndex].viewText.length) / 40;
          if( diffTimeRatio - textRatio > 0.5 ) {
            lineIndex = Math.min(lineIndex, result[dataIndex].lineIndex);
            isRewrite = true;
            break;
          }
        }
        if( isRewrite && lineIndex > 0 ) lineIndex = 0;
      }
      result.push(new TextData(lineIndex, viewStartTime, targetList[2]));
    }
    resultStr = "";
    for( i = 0; i < result.length; i++ ) {
      if( result[i].lineIndex < 0 ) continue;
      resultStr += result[i].lineIndex.toString() + "," + result[i].viewTime.toString() + "," + result[i].viewText.toString() + "\r";
    }
    return resultStr;
  },

  getViewText: function()
  {
    dataComp = thisComp.layer("データ").source;
    textList = dataComp.layer("intermediate").text.sourceText.valueAtTime(0).split("\r");
    baseIndex = thisComp.layer("base").index;
    dataIndex = index - baseIndex - 1;

    if(textList == null || dataIndex >= textList.length) return "";

    viewDuration = dataComp.layer("resource").effect("VIEW_DURATION")(1).valueAtTime(0);
    maxLineNum = thisComp.numLayers - baseIndex;
    for( ; dataIndex < textList.length; dataIndex += maxLineNum ) {
      dataList = textList[dataIndex].match(/(\d+?),(\d+?),(.+)/);
      if( dataList == null ) return "";
      viewTime = parseInt(dataList[2]);
      if( time < viewTime ) break;
      if( time >= viewTime + viewDuration ) continue;
      return dataList[3];
    }
    return "";
  },

  getViewPos: function()
  {
    dataComp = thisComp.layer("データ").source;
    textList = dataComp.layer("intermediate").text.sourceText.valueAtTime(0).split("\r");
    baseIndex = thisComp.layer("base").index;
    dataIndex = index - baseIndex - 1;

    if(textList == null || dataIndex >= textList.length) return [0, 0];

    resourceLayer = dataComp.layer("resource");
    viewDuration = resourceLayer.effect("VIEW_DURATION")(1).valueAtTime(0);
    maxLineNum = thisComp.numLayers - baseIndex;
    for( ; dataIndex < textList.length; dataIndex += maxLineNum ) {
      dataList = textList[dataIndex].match(/(\d+?),(\d+?),(.+)/);
      if( dataList == null) return [0, 0];
      viewTime = parseInt(dataList[2]);
      if( time < viewTime ) break;
      if( time >= viewTime + viewDuration ) continue;
      targetIndex = parseInt(dataList[1]);
      viewRatio = 1 - (time - viewTime) / viewDuration;
      textWidth = dataList[3].length * resourceLayer.effect("TEXT_WIDTH")(1).valueAtTime(0);
      textHeight = resourceLayer.effect("TEXT_HEIGHT")(1).valueAtTime(0);

      return [viewRatio * (thisComp.width + textWidth) - textWidth, textHeight * (thisComp.numLayers - targetIndex - baseIndex)];
    }
    return [0, 0];
  }
};

intermediateレイヤーのソーステキストのエクスプレッション

eval(thisComp.layer("function").text.sourceText.value);
FUNCTION.makeData();

各種コメントを表示するためのテキストレイヤーのソーステキストのエクスプレッション

eval(thisComp.layer("データ").source.layer("function").text.sourceText.valueAtTime(0));
FUNCTION.getViewText();

各種コメントを表示するためのテキストレイヤーの位置のエクスプレッション

eval(thisComp.layer("データ").source.layer("function").text.sourceText.valueAtTime(0));
FUNCTION.getViewPos();

【余談】

テキストレイヤーの現在の高さ＆幅ってエクスプレッション側から取れないみたいね。
「sampleImage使ってピクセル走査して幅を調べたわ」って人がいて…おぉう…ってなった。
そこまですれば確かに厳密な幅が取れるだろうけど、今回レンダリング時間もそんなにかけたくないし、処理の軽量化かねて自分で幅を定義＆算出することにした。
とはいえ等幅フォントじゃないし、大体なんだけどね…

処理速度がレンダリング時間にダイレクトアタックなのも悩みどころだったね。
軽く検証してみたら、正規表現での字句解析がゲロ重だったから、極力軽くなるように解析対象文字列数を減らしたり実行回数を減らしたりした。
その関係で、実は途中で結構デカめのリファクタリングもした。
具体的には…
元々、中間データとして『現在表示するコメントを表示順で出力』していたんだけども、これだと毎時間元データを参照＆解析しなきゃいけない状態だった。
これを、1フレーム目の時点で全コメントを走査して『表示する時間と表示インデックスを出力』するようにした。
もひとつおまけに、プリコンポジット化してデュレーションを１にしたものを、レイヤーとして配置＆タイムリマップで１フレーム目で停止させる、まで徹底してみた。
一応これで毎フレーム中間データを出力する処理が走ることはなくなったし、軽くはなったっぽい。

他にあったことと言えば…
6時間の動画にもなってくると、読み込み時にAfterEffectsに
『After Effects エラー: オーバーフロー比分母変換( 17 ､ 18 )』
つって、怒られてね。
Media Encoderで、
音だけの6時間分aacファイル、
映像だけの1時間分mp4ファイル×複数、
を出力しなおして、それをAfterEffectsで編集した。
音ズレもしてたから映像側をタイムリマップで無理矢理調整したりもした。
結果的に時々映像にノイズが入っちゃってたので、それはそれで別途反省。

4. MediaEncoderでレンダリング

前までAfterEffectsからそのままmp4を出力できてたんだけどね。
CCになってからか、めんどくさいことに、できなくなってるんだよね。
ということで、あまり使ったことのないMediaEncoderのお世話になった。
AtferEffectsで作業しててもレンダリングを進めてくれるから、作業の手を止めなくて済んだね。
まあでも多分、ちゃんとした方法でレンダリングをマルチタスク化するとか、無理矢理別タスクのAfterEffectsを立ち上げて動かすとか、贅沢なので言えばレンダリングマシンを用意するとか、レンダリングの効率化自体はいろいろ方法があると思うから、自分がやった方法は微妙なんだろうなとも思う。
3Dバリバリでもないし、今のところそこまで苦労したことはないから、まあいいんだけど…

5. ニコ動に投下

そのまんま。出力結果をニコ動にダンクシュート。

ざっと、以上。
かなり概要すぎて、伝えるための情報になってないけど…まあ、自分用のメモって意味合いの方が強いから、いっか（酷

サンプル

See the Pen noise by pd_kosaka (@pd_kosaka) on CodePen.

解説

①canvas要素を作成

canvas#canvas

②ノイズを作成（size、interval、alphaの値を変更して見え方を調整する）

window.onload = function() {

    var size = 100,
        interval = 5, //再描画する間隔を設定
        alpha = 25; // 0〜255の間で設定

    var canvas = document.getElementById('canvas'),
        ctx = canvas.getContext('2d'),
        cw = ctx.canvas.width,
        ch = ctx.canvas.height,
        length = size * size * 4,
        noise,
        noiseCtx,
        noiseData,
        num = 0,
        value;


    noise = document.createElement('canvas');
    noise.width = size;
    noise.height = size;
    noiseCtx = noise.getContext('2d');
    noiseData = noiseCtx.createImageData(size, size);
    requestAnimationFrame(loop);


    function loop() {
        if (++num % interval === 0) {
            for (var i = 0; i < length; i += 4) {
                value = (Math.random() * 255) | 0;
                noiseData.data[i    ] = value;
                noiseData.data[i + 1] = value;
                noiseData.data[i + 2] = value;
                noiseData.data[i + 3] = alpha;
            }
            noiseCtx.putImageData(noiseData, 0, 0);
            ctx.clearRect(0, 0, cw, ch);
            ctx.fillStyle = ctx.createPattern(noise, 'repeat');
            ctx.fillRect(0, 0, cw, ch);
        }
        requestAnimationFrame(loop);
    }

};

どのような時に必要か

Yellowfinのダッシュボード構築中に、フィルターがたくさんある場合、どのフィルターの何の値で絞られた結果なのかを表示したい場合などに使えると便利だと思います。予めフィルターの状態を表示するテキストの箇所を配置してinnerHTMLで突っ込むイメージです。
YellowfinWikiに説明がありますが少し分かりづらいです。また、デフォルトの値も取得することができます。(同じページ内の記述参照)

各フィルターの種類によって取得の仕方が変わる

これが一番わかりにくいのですが、大きく分けて「一覧に含む」、「〜の間」、「単一入力」の3種類のフィルターの絞り込む種類によって適用されている値の取得法が変わります。

フィルターの種類が「一覧に含む」の場合(リスト・チェックボックスなど)

フィルターオブジェクトのappliedValues.valueListに値が格納されるのでこれをforやforeachで取得する。

inList.js

let comments = this.apis.canvas.select('current_filters');
let text_detail = '';
let filters = this.apis.dashboard.filters;
let filter1 = filters.getFilter('一覧に含むフィルター');

if (filter1.appliedValues.valueList.length > 0) {
    text_detail = '<b>一覧に含むフィルター：</b>';
    for (var i = 0; i < filter1.appliedValues.valueList.length; i++) {
        text_detail = text_detail + ' ' + filter1.appliedValues.valueList[i];
    }
    text_detail = text_detail + ' ';
}

フィルターの種類が「〜の間」の場合(日付や年齢など)

フィルターオブジェクトのappliedValueOneとappliedValueTwoにそれぞれの値が格納されるのでそれぞれのプロパティから取得する。

between.js

let comments = this.apis.canvas.select('current_filters');
let text_detail = '';
let filters = this.apis.dashboard.filters;
let filter2 = filters.getFilter('〜の間フィルター');

if (filter2.appliedValues) {
    text_detail = text_detail + '<b>〜の間フィルター：</b>';
    text_detail = text_detail + ' ' + filter2.appliedValueOne + '~' + filter2.appliedValueTwo + ' ';
}

フィルターの種類が「単一入力」の場合(名前など)

フィルターオブジェクトのappliedValueOneに値が格納されるのでそこから値を取得する。

textbox.js

let comments = this.apis.canvas.select('current_filters');
let text_detail = '';
let filters = this.apis.dashboard.filters;
let filter3 = filters.getFilter('単一入力フィルター');

if (filter3.appliedValues) {
    text_detail = text_detail + '<b>単一入力フィルター：</b>';
    text_detail = text_detail + ' ' + filter3.appliedValueOne + ' ';
}

値の表示について

current_filtersの名前がついたオブジェクトの文字列に取得したtext_detail変数を突っ込みます。

innnerHTML.js

comments.innerHTML = text_detail;

まとめ

複雑なフィルターを駆使している場合、ぱっと見でわかるような仕組みはすごく便利ですよね。
コードモードを使用することによってフィルターの表示の仕方も自由度が上がりましたね。

こんにちは！
今回は、開発で正規表現を少し利用したので、JavaScriptで正規表現を扱う方法について、簡単にまとめてみます！

正規表現って...?

「正規表現」って、なんかお堅いお名前ついてますが...

正規表現

文字と記号を使って、パターンを指定し、そのパターンに合った文字を検索をする。
文字列だけでなく、数字も検索対象に含まれる。
書き方には、「正規表現リテラル」と「RegExpのコンストラクターを経由する」の2種類がある。

正規表現を利用することで、検索する文字列が曖昧な状態でもパターンを使って、検索することができます！

パターン指定でよく使われる記号(正規表現パターン)

ABC	「ABC」と言う文字列
[ABC]	A、B、Cのいずれか1文字
[^ABC]	A、B、C以外のいずれか1文字
[A-Z]	A〜Zの間の1文字
A|B|C	A、B、Cのいずれか
[0-9]	0〜9のいずれか
X*	0文字以上のX
X?	0または1文字のX
X+	1文字以上のX
X{n}	Xとn回一致
X{n,}	Xとn回以上一致
X{m,n}	Xとm〜n回一致
^	行の先頭に一致
$	行の末尾に一致
.	任意の1文字に一致
\w	大文字/小文字の英字、数字、アンダースコアに一致。([A-Za-z0-9_]と同意。)
\W	文字以外に一致([^\w]と同意。)
\d	数字に一致([0-9]と同意。)
\D	数字以外に一致([^0-9]と同意。)
\n	改行に一致
\t	タブ文字に一致
\s	空白文字に一致([\n\r\t\v\f]と同意。)
\S	空白以外の文字に一致([^\s]と同意。)
\〜	「〜」で表される文字

正規表現の作り方

①正規表現リテラル

let 変数 = /パターン/フラグ

②RegExpのコンストラクターを経由する

let 変数 = new RegExp('パターン', 'フラグ');

コンストラクターとは、クラスをnew演算子で実行したときに呼び出され、オブジェクトのプロパティを初期化する関数です。

ここで、「フラグ」というものが出てきました。「フラグ」は、正規表現の挙動を決めるためのものです。検索範囲や、大文字・小文字の区別などを指定することができます。以下が、主な「フラグ」です。

g	文字列全体に対して処理を行う(無指定であれば、1度一致したらおわり)
i	大文字・小文字を区別しない
m	複数行に対応
u	Unicode対応

文字列検索をやってみよう！

それでは、ちょっと使ってみましょう！
正規表現リテラルを使ったver.と、RegExpのコンストラクター経由したver.の2種類の使って、実践してみます！

execメソッド

テキストの中に含まれている「数字」を検索してみます。

// 正規表現リテラルver.
let sample1 = /[0-9]/;
let txt = 'テレフォンショッピング!午後3時までにお電話頂いた方には、割引！お電話は、0120-123-456まで！'
let result = sample1.exec(txt);
console.log(result);
/* 実行結果
3
*/

// RegExpのコンストラクター経由ver.
let sample2 = new RegExp('[0-9]', 'gi');
let txt = 'テレフォンショッピング!午後3時までにお電話頂いた方には、割引！お電話は、0120-123-456まで！'
let result2 = sample2.exec(txt);
console.log(result2);
/* 実行結果
3
*/

execメソッドで、1度に得られる結果は、最初の1つだけです。

matchメソッド

こちらも、テキストの中に含まれている「数字」を検索してみます。

// 正規表現リテラルver.
let sample3 = /[0-9]/gi;
let txt = 'テレフォンショッピング!午後3時までにお電話頂いた方には、割引！お電話は、0120-123-456まで！'
let result3 = txt.match(sample3);
console.log(result3);
/* 実行結果
[3, 0, 1, 2, 0, 1, 2, 3, 4, 5, 6]
*/

// RegExpのコンストラクター経由ver.
let sample4 = new RegExp('[0-9]', 'gi');
let txt = 'テレフォンショッピング!午後3時までにお電話頂いた方には、割引！お電話は、0120-123-456まで！'
let result4 = txt.match(sample4);
console.log(result4);
/* 実行結果
[3, 0, 1, 2, 0, 1, 2, 3, 4, 5, 6]
*/

matchメソッドもexecメソッドと同じように、検索をしていますが、matchメソッドの場合は、検索した全ての結果を返します。

置き換えをやってみよう！

正規表現を使って文字列検索をし、一致した文字列・数字・記号などを、任意の文字列などに置き換えることができます。

// 正規表現リテラルver.
let sample5 = /。|$/;
let txt = 'こんにちは。';
let result5 = txt.replace(sample5, '、JavaScriptよ！');
console.log(result5);
/* 実行結果
こんにちは、JavaScriptよ！
*/

// RegExpのコンストラクター経由ver.
let sample6 = new RegExp('。', 'gi');
txt = 'こんにちは。';
let result6 = txt.replace(sample6, '、JavaScriptよ！');
console.log(result6);
/* 実行結果
こんにちは、JavaScriptよ！
*/

「こんにちは。」と言う文字列の中で、句点(。)を検索してきて、句点(。)を「、JavaScriptよ！」に置き換えています！

replaceメソッドについてちょこっと解説

上のコードで、「matchメソッドも使ってないし、どこで検索してるの？」と思ったかと思います。
replaceメソッドの解説をしてみます！

let 変数 = 検索する文字列.replace(正規表現(検索したいパターン), 置き換えたい文字列など);

第一引数に検索するパターンを渡し、そのパターンに一致した部分を第二引数に渡した文字列などに置き換えるのです！
もし、パターンに一致する部分がなければ、何も変化していない「検索する文字列」がそのまま返ってくるのみです！

まとめ

JavaScriptのテキストの正規表現の項目を初めて見たときは、「記号だらけでわけわからん！」と思い、少し勉強する気が失せそうだったのですが、実際に使ってみると、便利で、面白かったです！
開発の幅が広がった気がします！

お読みくださり、ありがとうございました！
もし、間違いや補足などございましたら、コメント頂けますと助かります！

参考文献

柳井政和著 『JavaScript[完全]入門』(2021)p.238〜p.248
山田祥寛著 『改訂新版 JavaScript本格入門~モダンスタイルによる基礎から現場での応用まで』(2018)p.151〜161

If you have been working on frontend development for quite some time, undoubtedly you will encounter cookies and storages at some point.

So, what are they?

Cookies

Cookies in terms of software development are information stored in a file or several files on your computer by websites that you visit.

A cookie...

• Is a pretty old technology dating back to 1994.
• Is used mainly for state management (it remembers your logins, shopping carts), personalization (user preferences), and tracking (might be used for recording and analyzing user behavior).
• Is small-sized, up to 4096 bytes (~4kb).
• Can be accessed server-side or client-side.
• Has a lifetime depending on its definition. Session cookies are deleted when the user's browsing session ends, while permanent cookies last until its Expires date attribute or Max-age attribute.
• Uses key-value pairings.

How to make secure cookies

Use Secure attribute

This ensures cookies to be sent only to the server on encrypted requests over HTTPS, never over HTTP. It's better to use this attribute in tandem with HttpOnly.

Use HttpOnly attribute

Despite its potentially confusing name (as it contradicts the above attribute!), this attribute prevents access of cookies using Document.cookie API by ensuring they are sent only to the server. This helps mitigating XSS (cross-site scripting) attacks.

Shorten the lifetime of sensitive cookies

If cookies are used to store user-related information such as authentication, it's better to set a short lifetime.

Combined all three together, we can set up a cookie like:

Set-Cookie: id=[value]; Expires=[date]; Max-Age=[age]; Secure; HttpOnly
Set-Cookie: id=cookie_id; Expires=Thu, 16 June 2020 06:30:00 GMT; Max-Age=2592000; Secure; HttpOnly

If both Expires and Max-Age exist, Max-Age has precedence.

Set SameSite attribute

Cookies misuse can lead to CSRF (cross-site request forgery). Let say you visited an e-commerce website (A). The website links to another website (B) that hosts some of the images for the product you are browsing. While sending request for images to B, cookies belong to that website might be sent along, thus potentially enabling B to know what are you doing in A.

We can, for instance, block all third-party websites` cookies to prevent CSRF, but that might lead to a poor browsing experience.

Instead, we should be setting SameSite attribute. By doing so, we can control whether to allow cookies to be sent along for requests initiated by third-party websites. For example:

Set-Cookie: SameSite=Lax; 
Set-Cookie: SameSite=Strict;

You can read a much complete explanation here.

Local storages

Local storages in terms of software development, as the name implies, are storages stored locally in your computer by websites that you visit. It might sound similar to cookies because, in a sense, they have a similar purpose! But here's the difference.

Local storage...

• Came into prominence around the early 2010s.
• Is usually used for personalization (user preferences, preferred theme) that is not sensitive data.
• Has max size up to 10MB depending on the browser that you use (much bigger than cookie).
• Has no expiration time.
• Can only be accessed on the client-side via window.localStorage. This means on each HTTP request, data in local storage is not sent to the server.
• Uses key-value pairings, always in UTF-16 format.

Note: Don't confuse local storage with cache storage. That's an entirely different storing method.

On security

Local storages store information as is, and it has no data protection. Period. So obviously we should never store in local storage sensitive data such as:

• User & sessions IDs
• JWTs (JSON Web Tokens)
• Personal information
• Any credit card related information
• API keys

And since local storages are pure JavaScript, there's no telling that a malicious script may access your storages and pull out all the information there since it's quite easy to loop over storage without knowing the keys.

Something like:

for (let i = 0; i < localStorage.length; i++) {
  let key = localStorage.key(i);
  console.log(`${key}: ${localStorage.getItem(key)}`);
}

What about session storage?

It's basically just local storage with a limited lifetime. Session storages exist as long as the webpages/browser tabs that initiated them are alive.

• If you open a site in several browser tabs, each browser tab will have different session storage.
• If you do a page refresh, the data stays. But closing the tab will remove the data.

I personally have never used session storage. Feel free to let me know what would be the optimum usage.

Closing

This short article (more like a memo) is nothing spectacular. Other people might have written something more comprehensive regarding this topic.

So why did I do this?

Because I'm a firm believer that if you want to remember something, write it down in your own words and you will remember it better. And it's been working great for me so far! ^^

JavaScriptの勉強のため、ババ抜きを作りました。
遊んでみるのもよし、自作して私のものと比較してみるのもよしだと思います。

本記事の環境

※PCに環境構築を行う必要はありません。
WEBブラウザ(Google Chome)
テキストエディタ

ババ抜きとは

ババ抜き（Old Maid、Lose with the Joker、Joker Game）とは、複数人で行うトランプの遊び方のひとつ。始めに同数のカードを人数分配り、一枚ずつ他者から抜き取り同じ札があれば捨て、最後にジョーカーを持っている人が負け。
https://ja.wikipedia.org/wiki/%E3%83%90%E3%83%90%E6%8A%9C%E3%81%8D

要件・仕様

• 言語の勉強が主目的なので、見た目はこだわらない。
• 言語の勉強が主目的なので、処理は小分けにするし、コメントも残す。
• フレームワークは使わない。
• 基本的なババ抜きのルールに準ずる。
• 4人対戦とする。
• 勝敗くらいは表示する。
• プレイヤー1人、CPU3人とする。
• プレイヤー01がプレイヤー02の手札を引くところから始める。(本来のルールは、一番手札が多い人からスタート。)
• CPUが引く手札の位置はランダムとする。
• 各プレイヤーが持っている手札は、ターンごとに手札内でシャッフルする。
• CPU同士の動きは処理だけ行って画面上ではスキップする。
• ジョーカー(以下、画像のJKR)を持っているプレイヤーは、一度だけ、プレイヤー同士の手札のシャッフルを行うことができる(シャッフルタイム)。どのようにシャッフルされるかはランダムとする。

成果物(画面)

所感

• ボタン、非同期での画面更新等、いくつか要素があるわりに、デザイン要素が少ないため言語学習に丁度よかった。
• CPUの実装は難しくなかった。
• シャッフルはオマケの機能だったが、データの入れ替え等、いい勉強になった。

成果物(ソースコード)

• 参考程度にしてください。軽くは動作確認済みです。
  

oldMaid.html

<!DOCTYPE html>
<html>
    <head>
        <title>ババ抜き</title>

        <style>
            body {
                background-color : #eee;
            }
            #start, #next, #shuffle {
                font-size : 15px;
                background-color : #fff;
                text-align : center;
            }
            #result {
                font-size : 15px;
                background-color : #fff;
            }
            #player00Info, #player01Info, #player02Info, #player03Info {
                font-size : 20px;
            }
            #card {
                font-family:'MS Gothic';
                font-size : 20px;
                text-align : center;
            }
        </style>
    </head>
    <body>
        <div>
            <div>
                <span id="button"></span>
                <p id="result"></p>
                <p id="turn"></p>
                <p id="player00Info"></p>
                <p id="player01Info"></p>
                <p id="player02Info"></p>
                <p id="player03Info"></p>
            </div>
        </div>
        <script language="JavaScript">

            // カード基本情報
            const MAX_NUM = 13;
            const MIN_NUM = 1;
            const CARD_JOKER = "JKR";
            const CARD_SPADE = "&#9824;";
            const CARD_CLUB  = "&#9827;";
            const CARD_HEART = "&#9829;";
            const CARD_DIA   = "&#9830;";
            const COLOR_01   = "black";
            const COLOR_02   = "red";
            const COLOR_03   = "white";

            // ババ抜き情報
            const MAX_PLAYER = 4;

            // その他
            const MAX_SHUFFLE = 6;
            //const FLAG_DEBUG = true;
            const FLAG_DEBUG = false;

            // カード
            function Card(mark, num) {
                // プロパティ
                this.mark = mark;
                this.num = num;
            }

            // デッキ
            function Deck() {
                // プロパティ
                this.deck = [];

                // 初期化処理
                this.init = function() {
                    this.deck = [];
                    return;
                };

                // デッキ作成処理
                this.make = function() {
                    let card;
                    //for (let num = MIN_NUM; num <= 5; num++) {
                    for (let num = MIN_NUM; num <= MAX_NUM; num++) {
                        card = new Card(CARD_SPADE, num);
                        this.deck.push(card);
                        card = new Card(CARD_CLUB, num);
                        this.deck.push(card);
                        card = new Card(CARD_HEART, num);
                        this.deck.push(card);
                        card = new Card(CARD_DIA, num);
                        this.deck.push(card);
                    }
                    card = new Card(CARD_JOKER, 0);
                    this.deck.push(card);
                    return;
                };

                // デッキシャッフル処理
                this.shuffle = function() {
                    for (let loop = 0; loop < this.deck.length; loop++) {
                        let random = Math.floor(Math.random() * this.deck.length);
                        let work = this.deck[0];
                        this.deck[0] = this.deck[random];
                        this.deck[random] = work;
                    }
                    return;
                };

                // ドロー処理
                this.draw = function() {
                    return this.deck.shift();
                };
            }

            // 手札
            function Hand() {
                // プロパティ
                this.hand = [];

                // 初期化処理
                this.init = function() {
                    this.hand = [];
                    return;
                };

                // 手札セット処理
                this.set = function(card) {
                    this.hand.push(card);
                    return;
                };

                // 手札全取得処理
                this.getAll = function() {
                    return this;
                };

                // 手札全整理処理
                this.checkPairAll = function() {
                    // ペアを探し、見つけたら捨てる。
                    let handInfo = this.getAll();
                    for (let baseIdx = 0; baseIdx < handInfo.hand.length; baseIdx++) {
                        for (let targetIdx = 0; targetIdx < handInfo.hand.length; targetIdx++) {
                            if ((targetIdx != baseIdx) &&
                                (handInfo.hand[targetIdx].num == handInfo.hand[baseIdx].num)) {
                                if (targetIdx < baseIdx) {
                                    handInfo.hand.splice(baseIdx, 1);
                                    handInfo.hand.splice(targetIdx, 1);
                                } else {
                                    handInfo.hand.splice(targetIdx, 1);
                                    handInfo.hand.splice(baseIdx, 1);
                                }
                                baseIdx--;
                                break;
                            }
                        }
                    }
                    return;
                };

                // 指定手札取得処理
                this.getTarget = function(index) {
                    // 引数で指定した手札を返す。
                    let handInfo = this.getAll();
                    let card;
                    //alert("len:" + handInfo.hand.length);
                    for (let loop = 0; loop < handInfo.hand.length; loop++) {
                        if (loop == index) {
                            card = handInfo.hand[loop];
                            handInfo.hand.splice(loop, 1);
                            break;
                        }
                    }
                    //alert("mark:" + card.mark + "  num:" + card.num);
                    return card;
                };

                // 手札シャッフル処理
                this.shuffle = function() {
                    let handInfo = this.getAll();
                    for (let loop = 0; loop < handInfo.hand.length; loop++) {
                        let random = Math.floor(Math.random() * handInfo.hand.length);
                        let work = handInfo.hand[0];
                        handInfo.hand[0] = handInfo.hand[random];
                        handInfo.hand[random] = work;
                    }
                    return;
                };
            }

            // 桁数整形処理
            function spacePadding(num){
                return (Array(2).join(" ") + num).slice(-2);
            }

            // 桁数整形処理
            function zeroPadding(num){
                return (Array(2).join("0") + num).slice(-2);
            }

            // プレイヤー
            function Player() {
                // プロパティ
                this.strWin = "";
                this.results = [];
                this.results["win1"] = 0;
                this.results["win2"] = 0;
                this.results["win3"] = 0;
                this.results["lose"] = 0;
                this.cpu = true;
                this.shuffle = false;

                // 初期化処理
                this.init = function() {
                    // 抜けた番目を初期化する。
                    this.strWin = "";

                    // シャッフルタイム使用フラグを初期化する。
                    this.shuffle = false;
                    return;
                };

                // CPUフラグ設定処理
                this.setCpu = function(flag) {
                    // CPUフラグを設定する。trueがCPU。
                    this.cpu = flag;
                    return;
                };
            }

            // ババ抜き
            function OldMaid () {
                // プロパティ
                let cntTurn = 0;
                let cntWin = 1;
                let players = [];
                players[0] = new Player();
                players[1] = new Player();
                players[2] = new Player();
                players[3] = new Player();
                let deck = new Deck();
                let hands = [];
                hands[0] = new Hand();
                hands[1] = new Hand();
                hands[2] = new Hand();
                hands[3] = new Hand();

                // 初期化処理
                this.init = function() {
                    // ターン数を初期化する。
                    cntTurn = 0;

                    // 抜けた番目を初期化する。
                    cntWin = 1;

                    // デッキの初期化処理を呼び出す。
                    deck.init();

                    // プレイヤーの初期化処理を呼び出す。
                    players[0].init();
                    players[1].init();
                    players[2].init();
                    players[3].init();

                    // 手札の初期化処理を呼び出す。
                    hands[0].init();
                    hands[1].init();
                    hands[2].init();
                    hands[3].init();

                    // CPUフラグ設定処理を呼び出す。
                    players[0].setCpu(false);
                    return;
                };

                // カードイメージ作成処理
                this.makeCardImg = function(card, playerId, index) {
                    // 黒色
                    let color = COLOR_01;
                    if ((card.mark == CARD_HEART) || (card.mark == CARD_DIA)) {
                        // 赤色
                        color = COLOR_02;
                    }

                    // カードイメージを作成する。
                    let cardImg = "";
                    if (card.mark != CARD_JOKER) {
                        // ジョーカー以外である場合
                        cardImg += "<span id='card' ";
                        cardImg += "name='" + String(playerId) + "_" + String(index) + "' ";
                        cardImg += "style='color:" + color + "; ";
                        cardImg += "background-color:" + COLOR_03 + ";'>";
                        cardImg += card.mark + String(spacePadding(card.num));
                        cardImg += "</span>";
                    } else {
                        // ジョーカーである場合
                        cardImg += "<span id='card' ";
                        cardImg += "name='" + String(playerId) + "_" + String(index) + "' ";
                        cardImg += "style='color:" + color + "; ";
                        cardImg += "background-color:" + COLOR_03 + ";'>";
                        cardImg += card.mark;
                        cardImg += "</span>";
                    }
                    return cardImg;
                };

                // 手札表示共通処理
                this.outputHandPCommon = function(playerId, handInfo) {
                    let detail = "";
                    if (handInfo.hand.length == 0) {
                        // 抜けたプレイヤーである場合
                        if (players[playerId].strWin == "") {
                            // 抜けた初回である場合
                            players[playerId].strWin = "<span id='card' ";
                            players[playerId].strWin += "style='color:" + COLOR_02 + "; ";
                            players[playerId].strWin += "background-color:" + COLOR_03 + ";'>";
                            players[playerId].strWin += "　　" + String(cntWin) + "抜け" + "　　";
                            players[playerId].strWin += "</span>";
                            players[playerId].results["win" + cntWin]++;
                            cntWin++;
                        }
                        detail = players[playerId].strWin;
                    } else {
                        // 抜けていないプレイヤーである場合
                        for (let loop = 0; loop < handInfo.hand.length; loop++) {
                            let card = handInfo.hand[loop];
                            if (FLAG_DEBUG == true) {
                                // カードイメージ作成処理を呼び出す。
                                //alert("outputHandPCommon card:" + card.mark + card.num + " playerId:" + playerId + " loop:" + loop);
                                detail += this.makeCardImg(card, playerId, loop);
                            } else {
                                //if ((playerId == cntTurn) && (players[playerId].cpu == false)) {
                                if (players[playerId].cpu == false) {
                                    // カードイメージ作成処理を呼び出す。
                                    detail += this.makeCardImg(card, playerId, loop);
                                } else {
                                    detail += "<span id='card' ";
                                    detail += "name='" + String(playerId) + "_" + String(loop) + "' ";
                                    detail += "style='color:" + COLOR_01 + "; ";
                                    detail += "background-color:" + COLOR_01 + ";'>";
                                    //detail += "&#92171;";
                                    detail += CARD_SPADE + "XX";
                                    detail += "</span>";
                                }
                            }
                            detail += "　";
                        }
                    }
                    return detail;
                };

                // 手札表示処理
                this.outputHandP = function() {
                    for (let loop = 0; loop < MAX_PLAYER; loop++) {
                        // 各プレーヤーごとに手札表示共通処理を呼び出す。
                        let handInfo = hands[loop].getAll();
                        let work = String(zeroPadding(loop + 1)) + "：" + this.outputHandPCommon(loop, handInfo);
                        if (loop != 3) {
                            work += "<br>↓";
                        }

                        // 処理結果を設定する。
                        let id = "player" + String(zeroPadding(loop)) + "Info";
                        document.getElementById(id).innerHTML = work;
                    }
                    return;
                };

                // 手札配布処理
                this.distribute = function() {
                    let loop = 0;
                    while(1) {
                        // デッキからカードをドローする。
                        let card = deck.draw();
                        if (card == undefined) {
                            //alert("手札配布終了！");
                            break;
                        }

                        // 手札セット処理を呼び出す。
                        hands[loop % MAX_PLAYER].set(card);
                        loop++;
                    }
                    return;
                };

                // ジョーカー探索処理
                this.searchJoker = function() {
                    let info = [];
                    for (let playerId = 0; playerId < MAX_PLAYER; playerId++) {
                        //alert("searchJoker playerId:" + playerId);
                        let handInfo = hands[playerId].getAll();
                        //alert("searchJoker len:" + handInfo.hand.length);
                        let index;
                        for (index = 0; index < handInfo.hand.length; index++) {
                            if (handInfo.hand[index].mark != CARD_JOKER) {
                                continue;
                            }
                            // プレイヤーと手札の情報を設定する。
                            info["id"] = playerId;
                            info["index"] = index;
                            break;
                        }
                        if (index < handInfo.hand.length) {
                            break;
                        }
                    }
                    //alert("searchJoker playerId:" + info["id"] + "  index:" + info["index"]);
                    return info;
                };

                // ゲーム終了判定処理
                this.isFin = function() {
                    let result;
                    if (cntWin >= MAX_PLAYER) {
                        // ゲーム終了
                        result = true;
                    } else {
                        // ゲーム続行
                        result = false;
                    }
                    return result;
                };

                // ゲーム終了処理
                this.fin = function() {
                    // ジョーカー探索処理を呼び出す。
                    let info = this.searchJoker();
                    //alert("fin playerId:" + info["id"] + "  index:" + info["index"]);

                    // 処理結果を設定する。
                    let playerName = "プレイヤー" + String(zeroPadding(info["id"] + 1));
                    let work = "<p id='turn' style='color:red'>勝敗：" + playerName + "の負け</p>";
                    document.getElementById("turn").innerHTML = work;

                    // 開始ボタンを活性に変更する。
                    document.getElementById("start").disabled = false;

                    // 次へボタンを活性に変更する。
                    document.getElementById("next").disabled = true;

                    // シャッフルボタンを活性に変更する。
                    document.getElementById("shuffle").disabled = true;

                    // 勝敗カウンタをインクリメントする。
                    for (let loop = 0; loop < MAX_PLAYER; loop++) {
                        if (loop == info["id"]) {
                            players[loop].results["lose"]++;
                        } else {
                            //let winindex = "win" + info["id"];
                            //alert("winindex"+winindex);
                            //players[loop].results[winindex]++;
                        }
                    }

                    // 結果表示処理を呼び出す。
                    this.outputResult();
                    return;
                };

                // シャッフルタイム実処理
                this.shuffleTimeCore = function(kind) {
                    let winPlayerId = -1;
                    if (kind <= 3) {
                        // 抜けているプレイヤーがいるか確認する。
                        // 2人以上抜けている場合は、本メソッドは呼ばれない想定。
                        for (let playerId = 0; playerId < MAX_PLAYER; playerId++) {
                            if (players[playerId].strWin != "") {
                                winPlayerId = playerId;
                                break;
                            }
                        }
                    }

                    // 手札をシャッフルする。
                    let work;
                    switch (kind) {
                        case 0  : alert("出目 : 右1(手札を右隣りに1つ移動。)");
                                  hands.unshift(hands.pop());
                                  if (winPlayerId >= 0) {
                                      work = hands[winPlayerId];
                                      hands[winPlayerId] = hands[(winPlayerId + 1) % MAX_PLAYER];
                                      hands[(winPlayerId + 1) % MAX_PLAYER] = work;
                                  }
                                  break;
                        case 1  : alert("出目 : 右2(手札を右隣りに2つ移動。)");
                                  hands.unshift(hands.pop());
                                  if (winPlayerId >= 0) {
                                      work = hands[winPlayerId];
                                      hands[winPlayerId] = hands[(winPlayerId + 1) % MAX_PLAYER];
                                      hands[(winPlayerId + 1) % MAX_PLAYER] = work;
                                  }
                                  hands.unshift(hands.pop());
                                  if (winPlayerId >= 0) {
                                      work = hands[winPlayerId];
                                      hands[winPlayerId] = hands[(winPlayerId + 1) % MAX_PLAYER];
                                      hands[(winPlayerId + 1) % MAX_PLAYER] = work;
                                  }
                                  break;
                        case 2  : alert("出目 : 左1(手札を左隣りに1つ移動。)");
                                  hands.push(hands.shift());
                                  if (winPlayerId >= 0) {
                                      work = hands[winPlayerId];
                                      hands[winPlayerId] = hands[(winPlayerId + 3) % MAX_PLAYER];
                                      hands[(winPlayerId + 3) % MAX_PLAYER] = work;
                                  }
                                  break;
                        case 3  : alert("出目 : 左2(手札を左隣りに2つ移動。)");
                                  hands.push(hands.shift());
                                  if (winPlayerId >= 0) {
                                      work = hands[winPlayerId];
                                      hands[winPlayerId] = hands[(winPlayerId + 3) % MAX_PLAYER];
                                      hands[(winPlayerId + 3) % MAX_PLAYER] = work;
                                  }
                                  hands.push(hands.shift());
                                  if (winPlayerId >= 0) {
                                      work = hands[winPlayerId];
                                      hands[winPlayerId] = hands[(winPlayerId + 3) % MAX_PLAYER];
                                      hands[(winPlayerId + 3) % MAX_PLAYER] = work;
                                  }
                                  break;
                        case 4  : alert("出目 : ×(シャッフル発動失敗)");
                                  break;
                        case 5  : alert("出目 : ×(シャッフル発動失敗)");
                                  break;
                        default : alert("shuffleTime kind=" + kind);
                                  break;
                    }

                    // 手札シャッフル処理を呼び出す。
                    for (let playerId = 0; playerId < MAX_PLAYER; playerId++) {
                        if (players[playerId].strWin == "") {
                            hands[playerId].shuffle();
                        }
                    }

                    // 手札表示処理を呼び出す。
                    game.outputHandP();

                    // カード選択イベント設定処理を呼び出す。
                    game.setSelectCardEvt();
                    return;
                };

                // シャッフルタイム処理
                this.shuffleTime = function() {
                    let work = "シャッフル発動！！";
                    alert(work);

                    // サイコロを振ってシャッフル方法を決める。
                    let random = Math.floor(Math.random() * MAX_SHUFFLE);
                    //alert("出目 : " + random);

                    // シャッフルタイム実処理を呼び出す。
                    this.shuffleTimeCore(random);
                    //this.shuffleTimeCore(1);

                    // シャッフルタイム使用フラグをONにする。
                    players[cntTurn].shuffle = true;

                    // シャッフルボタン表示切替処理を呼び出す。
                    this.changesShuffleButton();
                    return;
                };

                // 対象プレイヤー情報取得処理
                this.getTargetPlayer = function() {
                    // 引くプレイヤーと引かれるプレイヤーを調べる。
                    let toPlayer = cntTurn;
                    let fromPlayer = (cntTurn + 1) % MAX_PLAYER;
                    while(1) {
                        if ((toPlayer != fromPlayer) && (players[fromPlayer].strWin == "")) {
                            break;
                        }
                        fromPlayer = (fromPlayer + 1) % MAX_PLAYER;
                    }
                    let result = [];
                    result["from"] = fromPlayer;
                    result["to"] = toPlayer;
                    return result;
                };

                // カード選択共通処理
                this.selectCardCommon = function(fromPlayer, toPlayer, intPlayer, intIdx) {
                    if (fromPlayer != intPlayer) {
                        // カードを引く先が間違っている場合
                        let work = "プレイヤー" + zeroPadding(toPlayer + 1) + "の手番です。";
                        work += "プレイヤー" + zeroPadding(fromPlayer + 1) + "のカードを引いてください。";
                        alert(work);
                    } else {
                        // カードを引く先が正しい場合

                        // 指定手札取得処理を呼び出す。
                        let card = hands[fromPlayer].getTarget(intIdx);
                        //alert("fromPlayer:" + fromPlayer + "  intIdx:" + intIdx + "  mark:" + card.mark + "  num:" + card.num);

                        // 手札セット処理を呼び出す。
                        hands[toPlayer].set(card);

                        // 手札整理処理を呼び出す。
                        hands[toPlayer].checkPairAll();

                        // 手札シャッフル処理を呼び出す。
                        hands[toPlayer].shuffle();

                        // 手札表示処理を呼び出す。
                        game.outputHandP();

                        // カード選択イベント設定処理を呼び出す。
                        game.setSelectCardEvt();

                        // ターン変更処理を呼び出す。
                        game.changeTurn();
                    }
                    return;
                };

                // カード選択イベント処理
                this.selectCardUser = function(event) {
                    // クリックしたカードが妥当かどうかによって処理を分岐する。
                    if (players[cntTurn].cpu == true) {
                        // 手番がCPUである場合
                        let work = "プレイヤー" + zeroPadding(cntTurn + 1) + "(CPU)の手番です。";
                        work += "カード選択はできません。";
                        alert(work);
                    } else {
                        // 対象プレイヤー情報取得処理を呼び出す。
                        let result = game.getTargetPlayer();

                        // イベント情報からクリックしたカードを特定する。
                        let name = event.target.getAttribute("name").split("_");
                        let intPlayer = parseInt(name[0], 10);
                        let intIdx = parseInt(name[1], 10);

                        // カード選択共通処理を呼び出す。
                        game.selectCardCommon(result["from"], result["to"], intPlayer, intIdx);
                    }
                    return;
                };

                // カード自動選択処理
                this.selectCardCpu = function() {
                    // 対象プレイヤー情報取得処理を呼び出す。
                    let result = this.getTargetPlayer();

                    // 引くカードを決める。
                    let handInfo = hands[result["from"]].getAll();
                    let random = Math.floor(Math.random() * handInfo.hand.length);
                    let intPlayer = result["from"];
                    let intIdx = random;
                    //alert("intPlayer + "、" + intIdx);
                    //let work = "プレイヤー" + zeroPadding(result["to"] + 1) + "が、";
                    //work += "プレイヤー" + zeroPadding(result["from"] + 1) + "のカードを引きます。";
                    //alert(work);

                    // カード選択共通処理を呼び出す。
                    this.selectCardCommon(result["from"], result["to"], intPlayer, intIdx);
                    return;
                };

                // カード選択イベント設定共通処理
                this.setSelectCardEvtCommon = function(playerId, handInfo) {
                    // 各カードにイベントを設定する。
                    for (let loop = 0; loop < handInfo.hand.length; loop++) {
                        let work = document.getElementsByName(String(playerId) + "_" + String(loop));
                        work[0].addEventListener("click", this.selectCardUser);
                    }
                    return;
                };

                // カード選択イベント設定処理
                this.setSelectCardEvt = function() {
                    for (let loop = 0; loop < MAX_PLAYER; loop++) {
                        // 各プレーヤーごとにカード選択イベント設定共通処理を呼び出す。
                        let handInfo = hands[loop].getAll();
                        this.setSelectCardEvtCommon(loop, handInfo);
                    }
                    return;
                };

                // シャッフルボタン表示切替処理
                this.changesShuffleButton = function() {
                    // シャッフルボタンを活性に変更する。
                    document.getElementById("shuffle").disabled = false;

                    if (cntWin >= 3) {
                        // 残りのプレイヤーが2人以下の場合

                        // シャッフルボタンを非活性に変更する。
                        document.getElementById("shuffle").disabled = true;
                    }
                    if (players[0].shuffle != false) {
                        // プレイヤー01がシャッフルタイム使用済の場合

                        // シャッフルボタンを非活性に変更する。
                        document.getElementById("shuffle").disabled = true;
                    }

                    // ジョーカー探索処理を呼び出す。
                    let info = this.searchJoker();
                    //alert("fin playerId:" + info["id"] + "  index:" + info["index"]);
                    if (info["id"] != 0) {
                        // プレイヤー01がジョーカーを保持していない場合

                        // シャッフルボタンを非活性に変更する。
                        document.getElementById("shuffle").disabled = true;
                    }
                    return;
                };

                // ゲーム開始処理
                this.start = function() {
                    // 初期化処理を呼び出す。
                    this.init();

                    // 開始ボタンを非活性に変更する。
                    document.getElementById("start").disabled = true;

                    // デッキ作成処理を呼び出す。
                    deck.make();

                    // 作成したデッキをシャッフルする。
                    deck.shuffle();

                    // 手札配布処理を呼び出す。
                    this.distribute();

                    // 各プレーヤーごとに手札全整理処理を呼び出す。
                    for (let loop = 0; loop < MAX_PLAYER; loop++) {
                        hands[loop].checkPairAll();
                    }

                    // 手札表示処理を呼び出す。
                    this.outputHandP();

                    // カード選択イベント設定処理
                    this.setSelectCardEvt();

                    // 手番表示処理を呼び出す。
                    this.outputTurn();

                    // シャッフルボタン表示切替処理を呼び出す。
                    this.changesShuffleButton();
                    return;
                };

                // ターン変更処理
                this.changeTurn = function() {
                    // ゲーム終了判定処理を呼び出す。
                    result = game.isFin();
                    if (result == true) {
                        // ゲーム終了処理を呼び出す。
                        game.fin();
                    } else {
                        // ターンを切り替える。
                        cntTurn = (cntTurn + 1) % MAX_PLAYER;
                        while(1) {
                            if (players[cntTurn].strWin == "") {
                                break;
                            }
                            cntTurn = (cntTurn + 1) % MAX_PLAYER;
                        }

                        // 手札表示処理を呼び出す。
                        this.outputHandP();

                        // カード選択イベント設定処理
                        this.setSelectCardEvt();

                        // 手番表示処理を呼び出す。
                        this.outputTurn();

                        // 手番によって処理を分岐する。
                        if (players[cntTurn].cpu == true) {
                            // 手番がCPUである場合

                            // 次へボタンを活性に変更する。
                            document.getElementById("next").disabled = false;

                            let info = this.searchJoker();
                            if (info["id"] != 0) {
                                // プレイヤー01がジョーカーを保持していない場合
                                // 自動でターンを進める。
                                game.next();
                            } else {
                                // プレイヤー01がジョーカーを保持している場合
                                // ユーザの次へボタン操作イベント待ち。
                            }
                        } else {
                            // 手番がユーザである場合

                            // 次へボタンを非活性に変更する。
                            document.getElementById("next").disabled = true;

                            // ユーザのカード選択イベント待ち。
                        }

                        // シャッフルボタン表示切替処理を呼び出す。
                        this.changesShuffleButton();
                    }
                    return;
                };

                // ターン進行処理
                this.next = function() {
                    // ジョーカー探索処理を呼び出す。
                    let info = this.searchJoker();
                    //alert("fin playerId:" + info["id"] + "  index:" + info["index"]);
                    if (info["id"] != 0) {
                        // プレイヤー01がジョーカーを保持していない場合

                        if (players[info["id"]].shuffle != true) {
                            // シャッフルタイム未使用である場合

                            if (cntWin == 2) {
                                // 残りのプレイヤーが3人の場合

                                // シャッフルタイム処理を呼び出す。
                                this.shuffleTime();
                            }
                        }
                    }

                    // カード自動選択処理を呼び出す。
                    this.selectCardCpu();
                    return;
                };

                // 結果表示処理
                this.outputResult = function() {
                    let work = "";
                    for (let loop = 0; loop < MAX_PLAYER; loop++) {
                        if (loop == 0) {
                            work += "<p id='result' style='color:red'>";
                        } else {
                            work += "<p id='result' style='color:black'>";
                        }
                        work += "プレイヤー" + String(zeroPadding(loop + 1)) + "：";
                        work += "1位 " + String(spacePadding(players[loop].results["win1"])) + "回";
                        work += "　2位 " + String(spacePadding(players[loop].results["win2"])) + "回";
                        work += "　3位 " + String(spacePadding(players[loop].results["win3"])) + "回";
                        work += "　4位 " + String(spacePadding(players[loop].results["lose"])) + "回";
                        let total = 0;
                        total += parseInt(String(spacePadding(players[loop].results["win1"])));
                        total += parseInt(String(spacePadding(players[loop].results["win2"])));
                        total += parseInt(String(spacePadding(players[loop].results["win3"])));
                        let win = total;
                        total += parseInt(String(spacePadding(players[loop].results["lose"])));
                        let par = "---";
                        if (total != 0) {
                            par = win / total * 100.00;
                            par = par.toFixed(3);
                        }
                        work += "　勝率 " + par + "%" + "<br>";
                    }
                    work += "</p>";
                    document.getElementById("result").innerHTML = work;
                    return;
                };

                // 手番表示処理
                this.outputTurn = function() {
                    let work =  "<span>";
                    work += "プレイヤー" + zeroPadding(cntTurn + 1) + "の手番　　";
                    work += "</span>";
                    document.getElementById("turn").innerHTML = work;
                    return;
                };

                // ボタン表示処理
                this.outputButton = function() {
                    let work =  "<span>";
                    work += "<input type='button' id='start' value='開始' onclick='game.start()'>";
                    work += "<input type='button' id='next' value='次へ' disabled=true onclick='game.next()'>";
                    work += "<input type='button' id='shuffle' value='シャッフル' disabled=true onclick='game.shuffleTime()'>";
                    work += "</span>";
                    document.getElementById("button").innerHTML = work;
                    return;
                };
            }

            // 初期化処理を呼び出す。
            let game = new OldMaid();
            game.init();

            // ボタン表示処理を呼び出す。
            game.outputButton();

            // 結果表示処理を呼び出す。
            game.outputResult();
        </script>
    </body>
</html>