みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです!

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

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

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

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

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

2020.06.04 追記

blog.kimizuka.org

setAttributeをつかって更新するとスタイルが反映されることに気づきました!


--


その昔、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を振ることにしました。