みかづきブログ その3

3ヶ月つづけてみました。

JavaScriptのappendとappendChildの違い

すごく昔に、jQueryで書いたコードをjQuery無しで書き直す作業を行っていたのですが、

$body.append($wrapper);

的なコードを、

document.body.appendChild(wrapper);

という感じに書き換えようとして、

document.body.append(wrapper);

としてしまいました。

で、発覚までに時間がかかったのですが、
原因として、appendというメソッド、IE、Edge以外には存在するんですね。

developer.mozilla.org

IEでテストして初めて己の過ちに気づきました。

せっかくなので、appendとappendChildの違いをまとめておこうと思います。


appendChild

developer.mozilla.org


まずはおなじみappendChild。
DOMの子要素にDOMを追加するときにつかうメソッドです。

引数に渡したDOMをメソッドを叩いたDOMの最後尾に追加します。
で、関数の戻り値は引数で渡したDOMの参照となります。

var elm = document.body.appendChild(document.createElement("div"));

というコードを実行すると、
body要素の最後尾に空のdivが挿入され、elmにはdivの参照が入ります。

基本的にはすべてのブラウザで、すべてのDOMで使用することができますが、

  1. document間の移動はできない
  2. すでに親を持っているDOMをappendChildの引数に渡すと、元の親から削除された後に追加される

の2点に注意してつかいましょう。


append

developer.mozilla.org

※ formDataに対するappendではなく、DOMに対するappendです。

developer.mozilla.org

Javascript append

で検索を書けると、jQueryのappendばかり引っかかってしまい、調べるのに苦労しました。

引数で渡したDOMを、メソッドを叩いたDOMの最後尾に追加するという挙動は一緒なのですが、

  1. IE、Edgeで動作しない
  2. DOMだけではなくテキストノードも追加できる(Stringを渡すとテキストノードとして最後尾に追加される)
  3. 引数を複数渡せる(兄弟要素として追加される)
  4. 戻り値がない


などがappendChildとの違いとなります。



ただ、そもそもブラウザの対応状況を考えると、appendを積極的に使う必要はなさそうです。

IEでもCanvasに紙吹雪を舞い散らせてみました。

kimizuka.hatenablog.com

昔書いたコードをIE用にトランスコンパイルしてみました。
これで、IE10、IE11でも動くようになったと思います。

DEMO


JavaScript

"use strict";

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Progress = function () {
  function Progress() {
    var param = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];

    _classCallCheck(this, Progress);

    this.timestamp = null;
    this.duration = param.duration || Progress.CONST.DURATION;
    this.progress = 0;
    this.delta = 0;
    this.progress = 0;
    this.isLoop = !!param.isLoop;

    this.reset();
  }

  Progress.prototype.reset = function reset() {
    this.timestamp = null;
  };

  Progress.prototype.start = function start(now) {
    this.timestamp = now;
  };

  Progress.prototype.tick = function tick(now) {
    if (this.timestamp) {
      this.delta = now - this.timestamp;
      this.progress = Math.min(this.delta / this.duration, 1);

      if (this.progress >= 1 && this.isLoop) {
        this.start(now);
      }

      return this.progress;
    } else {
      return 0;
    }
  };

  _createClass(Progress, null, [{
    key: "CONST",
    get: function get() {
      return {
        DURATION: 1000
      };
    }
  }]);

  return Progress;
}();

var Confetti = function () {
  function Confetti(param) {
    _classCallCheck(this, Confetti);

    this.parent = param.elm || document.body;
    this.canvas = document.createElement("canvas");
    this.ctx = this.canvas.getContext("2d");
    this.width = param.width || this.parent.offsetWidth;
    this.height = param.height || this.parent.offsetHeight;
    this.length = param.length || Confetti.CONST.PAPER_LENGTH;
    this.yRange = param.yRange || this.height * 2;
    this.progress = new Progress({
      duration: param.duration,
      isLoop: true
    });
    this.rotationRange = typeof param.rotationLength === "number" ? param.rotationRange : 10;
    this.speedRange = typeof param.speedRange === "number" ? param.speedRange : 10;
    this.sprites = [];

    this.canvas.style.cssText = ["display: block", "position: absolute", "top: 0", "left: 0", "pointer-events: none"].join(";");

    this.render = this.render.bind(this);

    this.build();

    this.parent.appendChild(this.canvas);
    this.progress.start(performance.now());

    requestAnimationFrame(this.render);
  }

  Confetti.prototype.build = function build() {
    for (var i = 0; i < this.length; ++i) {
      var canvas = document.createElement("canvas"),
          ctx = canvas.getContext("2d");

      canvas.width = Confetti.CONST.SPRITE_WIDTH;
      canvas.height = Confetti.CONST.SPRITE_HEIGHT;

      canvas.position = {
        initX: Math.random() * this.width,
        initY: -canvas.height - Math.random() * this.yRange
      };

      canvas.rotation = this.rotationRange / 2 - Math.random() * this.rotationRange;
      canvas.speed = this.speedRange / 2 + Math.random() * (this.speedRange / 2);

      ctx.save();
      ctx.fillStyle = Confetti.CONST.COLORS[Math.random() * Confetti.CONST.COLORS.length | 0];
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.restore();

      this.sprites.push(canvas);
    }
  };

  Confetti.prototype.render = function render(now) {
    var progress = this.progress.tick(now);

    this.canvas.width = this.width;
    this.canvas.height = this.height;

    for (var i = 0; i < this.length; ++i) {
      this.ctx.save();
      this.ctx.translate(this.sprites[i].position.initX + this.sprites[i].rotation * Confetti.CONST.ROTATION_RATE * progress, this.sprites[i].position.initY + progress * (this.height + this.yRange));
      this.ctx.rotate(this.sprites[i].rotation);
      this.ctx.drawImage(this.sprites[i], -Confetti.CONST.SPRITE_WIDTH * Math.abs(Math.sin(progress * Math.PI * 2 * this.sprites[i].speed)) / 2, -Confetti.CONST.SPRITE_HEIGHT / 2, Confetti.CONST.SPRITE_WIDTH * Math.abs(Math.sin(progress * Math.PI * 2 * this.sprites[i].speed)), Confetti.CONST.SPRITE_HEIGHT);
      this.ctx.restore();
    }

    requestAnimationFrame(this.render);
  };

  _createClass(Confetti, null, [{
    key: "CONST",
    get: function get() {
      return {
        SPRITE_WIDTH: 9,
        SPRITE_HEIGHT: 16,
        PAPER_LENGTH: 100,
        DURATION: 8000,
        ROTATION_RATE: 50,
        COLORS: ["#EF5350", "#EC407A", "#AB47BC", "#7E57C2", "#5C6BC0", "#42A5F5", "#29B6F6", "#26C6DA", "#26A69A", "#66BB6A", "#9CCC65", "#D4E157", "#FFEE58", "#FFCA28", "#FFA726", "#FF7043", "#8D6E63", "#BDBDBD", "#78909C"]
      };
    }
  }]);

  return Confetti;
}();

(function () {
  var DURATION = 8000,
      LENGTH = 120;

  new Confetti({
    width: window.innerWidth,
    height: window.innerHeight,
    length: LENGTH,
    duration: DURATION
  });

  setTimeout(function () {
    new Confetti({
      width: window.innerWidth,
      height: window.innerHeight,
      length: LENGTH,
      duration: DURATION
    });
  }, DURATION / 2);
})();

iOS11のSafariからカメラとマイクにアクセスするシンプルでサンプルなコードを書きました。

iOS11がリリース(9月20日)されてから、はや1ヶ月半弱、
iPhone8が発売(9月22日)されてからも、はや1ヶ月半弱、
iPhoneXが発売(11月3日)されてしてから、はや3日が立ち、

32ビットアプリが動かなくなるという情報からか、リリース直後は若干苦戦していたiOS11のシェアも、
アナリティクスを確認する限りでは、着々と増えてきております。


さてさて、

New in Safari 11.0 – Camera and microphone access.
 Added support for the Media Capture API.
 Websites can access camera and microphone streams from a user's device (user permission is required.)

Safari 11.0 より引用

とあるように、iOS11からはウェブサイトからカメラマイクにアクセスできるようになりました。
iOS11のシェアが増えてきたいまこそ、ウェブサイトからカメラマイクにアクセスするサイトをつくるチャンスなのではないかと思い、
シンプルなサンプルを書いてみました。ソースはリポジトリにアップしております。

カメラにアクセス
github.com

マイクにアクセス
github.com





はじめに

  1. マイク、カメラにアクセスするためにはhttpsのサイトであることが必須条件です。
  2. Androidでは動作確認しておりません。



カメラにアクセス編

フロントカメラにアクセス

f:id:kimizuka:20171106161950p:plain

https://kimizuka.github.io/webcamera-preview-for-ios11/front-camera/

明示的にフロントカメラを渡していますが、

medias = {audio : false, video : true}

という感じで、明示的に渡さなくても基本的にフロントカメラが立ち上がります。

ソースコード

JavaScript

const medias = {audio : false, video : {
        facingMode: "user" // フロントカメラにアクセス
      }},
      video  = document.getElementById("video");

navigator.getUserMedia(medias, successCallback, errorCallback);

function successCallback(stream) {
  video.srcObject = stream;
};

function errorCallback(err) {
  alert(err);
};

HTML

<video id="video" autoplay playsinline></video><!--インライン再生を可能にしておく-->

CSS

body {
  margin: 0;
  background: #000;
}

#video {
  display: block;
  width: 100%;



リアカメラにアクセス

f:id:kimizuka:20171106162015p:plain

https://kimizuka.github.io/webcamera-preview-for-ios11/rear-camera/

ソースコード

JavaScript

const medias = {audio : false, video : {
        facingMode : {
          exact : "environment" // リアカメラにアクセス
        }
      }},
      video  = document.getElementById("video");

navigator.getUserMedia(medias, successCallback, errorCallback);

function successCallback(stream) {
  video.srcObject = stream;
};

function errorCallback(err) {
  alert(err);
};

HTML

<video id="video" autoplay playsinline></video><!--インライン再生を可能にしておく-->

CSS

body {
  margin: 0;
  background: #000;
}

#video {
  display: block;
  width: 100%;



応用例

f:id:kimizuka:20171106162042p:plain

https://kimizuka.github.io/webcamera-preview-for-ios11/carnvas-demo/

f:id:kimizuka:20171106133159g:plain

車窓とあわせる用の簡易ARのデモです。
すべてcanvasにレンダリングしても良かったのですが、カメラから取り込んだ映像以外はCSSで描画しています。
画面をタップするとジャンプします。
折角CSSを使っているので、targetセレクタをつかって、#reverseで反転させようと思ったのですが、
何故かiOSでうまくいきません。(原因調査中)
ソースはリポジトリを直接見ていただいたほうが早いと思います。



マイクにアクセス編

マイク入力をビジュアライズ

f:id:kimizuka:20171106162110p:plain

https://kimizuka.github.io/mic-preview-for-ios11/analyse/

f:id:kimizuka:20171106135846g:plain

iOSの制約で「ユーザージェスチャーきっかけで無いとオーディオを再生できない」という点に苦戦しました、
はじめに画面をタップさせることで制約を回避しました。
FFTを書けて画面上にビジュアライスしています。

ソースコード

JavaScript

(function() {

  "use strict";
  
  let btn    = document.getElementById("btn"),
      canvas = document.getElementById("canvas"),
      ctx    = canvas.getContext("2d");
  
  navigator.getUserMedia({
    audio: true
  }, _handleSuccess, _handleError);
  
  function _handleSuccess(evt) {
    btn.addEventListener("click", () => {
      _handleClick(evt);
    }, false);
  }

  function _handleError() {
    alert("Error!");
  }

  function _handleClick(evt) {
    let LENGTH   = 16,
        audioCtx = new (window.AudioContext || window.webkitAudioContext)(),
        options  = {
          mediaStream : evt
        },
        src      = audioCtx.createMediaStreamSource(evt),
        analyser = audioCtx.createAnalyser(evt),
        data   = new Uint8Array(LENGTH),
        w      = 0,
        i      = 0;

    btn.classList.add("off");
    analyser.fftSize = 1024;
    src.connect(analyser);

    setInterval(() => {
      canvas.width  = window.innerWidth;
      canvas.height = window.innerHeight;

      ctx.fillStyle = "#3e3e3e";

      w = canvas.width / LENGTH,

      analyser.getByteFrequencyData(data);

      for (i = 0; i < LENGTH; ++i) {
        ctx.rect(i * w, canvas.height - data[i] * 2, w, data[i] * 2);
      }

      ctx.fill();
    }, 20);
  }

})();

HTML

<canvas id="canvas"></canvas>
<div id="btn">TAP TO START</div>

CSS

body {
  font: 20px "Rubik Mono One", sans-serif;;
  background: #e3e3e3;
  overflow: hidden;
}

#btn {
  display: flex;
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  color: #3e3e3e;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity .2s ease-in-out;
}

#btn.off {
  opacity: 0;
  pointer-events: none;
}

#canvas {
  display: block;
}



音声認識(失敗)

f:id:kimizuka:20171106162152p:plain

こちらでつくったサンプルをiOS11で試してみましたが、

kimizuka.hatenablog.com

残念ながら、動作しませんでした。
それもそのはず、SpeechRecognitionはまだ未実装ですね。

developer.mozilla.org


今回はiOS11に限ったコードを書きましたが、
実践に投入するにはAndroidやPCでも動くようにしなければならないですね。
それは、そのうち頑張って書こうと思います。今回は以上となります。