みかづきブログ その3

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

Navigator.getUserMediaではなくMediaDevices.getUserMediaをつかう

時代に合わせて修正しました。
IEは未対応ですが、マイクロソフト自身がIEの使用を辞めるよう要請しているとのことなので問題ないでしょう。(?)

japanese.engadget.com

Navigator.getUserMedia(非推奨)

const medias = {
  audio: false,
  video: true
};
const video = document.getElementById("video");

navigator.getUserMedia(medias, successCallback, errorCallback);

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

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

MediaDevices.getUserMedia(IE未対応)

const medias = {
  audio: false,
  video: true
};
const video = document.getElementById("video");
const promise = navigator.MediaDevices.getUserMedia(medias); // promiseが返ってくる

promise.then(successCallback)
       .chatch(errorCallback);

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

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

コールバックを渡すのではなく、promiseを返すようになったのがいまっぽいですね。
併せて下記2つの記事と、

kimizuka.hatenablog.com
kimizuka.hatenablog.com

下記2つのリポジトリを修正しました。

github.com
github.com

AndroidStudioのエミュレータ内のブラウザがウェブに繋がらないときの対策

Android Studioからではなく、コマンドラインからDNSサーバを指定して起動すれば解決しました。

/Users/#{ユーザー名}/Library/Android/sdk/emulator/emulator -avd #{エミュレータの名前} -dns-server 8.8.8.8

といった具合です。
とりあえずシェルスクリプトをバッチファイルにして保存しておいたので、次回からは楽々で起動できそうです。

IE11で動的に属性セレクタを変更した際にスタイルが反映されない

その昔、Androidではまったことがありましたが、まさかIE11でも動的に属性セレクタを変更した際にスタイルが反映されないとは思いもしませんでした。

DEMO

※ IE11では動きませんでした

HTML

<div data-is-show-dialog="false"></div>

SCSS

[data-is-show-dialog] {
    visibility: visible;
    position: fixed;
    top: 50px; bottom: 50px;
    left: 50px; right: 50px;
    opacity: 1;
    background: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    transform: scale(1);
    transition: all .2s ease-in-out;
    
    &[data-is-show-dialog="false"] {
        visibility: hidden;
        opacity: 0;
        transform: scale(.8);
    }
}

対策

DEMO

HTML

<div data-is-show-dialog="false"></div>

SCSS

[data-is-show-dialog] {
    visibility: visible;
    position: fixed;
    top: 50px; bottom: 50px;
    left: 50px; right: 50px;
    opacity: 1;
    background: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    transform: scale(1);
    transition: all .2s ease-in-out;
    
    &[data-is-show-dialog="false"], .data-is-show-dialog {
        visibility: hidden;
        opacity: 0;
        transform: scale(.8);
    }
}

JavaScript

setInterval(function() {
    document.querySelector('[data-is-show-dialog]').dataset.isShowDialog = !(document.querySelector('[data-is-show-dialog]').dataset.isShowDialog === 'true');
    document.querySelector('[data-is-show-dialog]').classList.toggle('data-is-show-dialog');
}, 1000);

泣く泣くclassを振ることにしました。