みかづきブログ その3

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

夏なのでCSSで蚊取り線香をつくって蚊が寄ってこないページをつくりました。

See the Pen mosquito coil with mosquito sound by kimmy (@kimmy) on CodePen.

まず、CSSで蚊取り線香をつくりました。

半円を互い違いに組み合わせて実装しております。

また、クリックすると火が着くのですが、

f:id:kimizuka:20170811004025p:plain

その際、蚊の嫌がる周波数の音を出しています。

f:id:kimizuka:20170811004036p:plain

なので、原理的にはサイト上の蚊取り線香に火をつければ蚊が寄ってこないわけです。
バナーや夏フェスのサイトとかに組み込むと、とても良いと思ってます。

Pug

#mosquito-coil
  - var length = 6;
  - for (var i = 0; i < length; ++i) {
    .circle
  - }

SCSS

$length: 6;
$width: 10px;
$color: #004D40;

body {
  background: #212121;
}

#mosquito-coil {
  position: absolute;
  top: 50%; left: 50%;
  cursor: pointer;
  
  &:before {
    display: block;
    position: absolute;
    top: $width;
    @if ($length % 2 == 0) {
      left: $width * -2 * ceil($length / 2);
    } @else {
      left: $width * (1 + $length);
    }
    border-radius: 50%;
    width: $width; height: $width;
    background: $color;
    content: "";
    transform: scale(.9);
    transition: background 12s ease-in-out;
  }

  &:after {
    display: block;
    position: absolute;
    top: $width; left: 0;
    border-radius: 50%;
    width: $width; height: $width;
    background: $color;
    content: "";
  }

  .circle {
    position: absolute;
    border: solid $width $color;

    &:nth-child(odd) {
      border-radius: 50% 50% 0 0 / 100% 100% 0 0;
      border-bottom: none;
    }

    &:nth-child(even) {
      border-radius: 0 0 50% 50% / 0 0 100% 100%;
      border-top: none;
    }

    @for $i from 0 through $length {
      &:nth-child(#{$i + 1}) {
        @if $i % 2 == 1 {
          top: $width * 1.5;
        } @else {
          top: -$width * $i;
        }
        left: $width * -2 * ceil($i / 2);
        width: $width * (1 + $i * 2);
        height: $width * (0.5 + 1 * $i); 
      }
    }
  }
  
  &.on {
    &:before {
      background: #4d0000;
      animation: mosquito-coil-blink 1.8s ease-in-out infinite alternate;
    }
  }
}

@keyframes mosquito-coil-blink {
  0% {
    box-shadow: 0 0 0 rgba(255, 255, 255, .8);
  }
  100% {
    box-shadow: 0 0 5px rgba(255, 255, 255, .8);
  }
}

JavaScript

(() => {
  
  "use strict";
  
  let AudioContext = window.AudioContext || window.webkitAudioContext,
      ctx = new AudioContext(),
      oscillator = ctx.createOscillator(),
      coil = document.getElementById("mosquito-coil"),
      isOn = false;
  
  coil.addEventListener("click", () => {
    isOn = !isOn;
    if (isOn) {
      oscillator = ctx.createOscillator();
      oscillator.frequency.value = 17000;
      oscillator.connect(ctx.destination);
      coil.classList.add("on");
      oscillator.start();
    } else {
      oscillator.stop();
      coil.classList.remove("on");
    }

  }, false);
  
})();

レギュラー番組ゼロでもCM出演があれば暮らしていけるのだろうか?

f:id:kimizuka:20170718181708p:plain

こどもが生まれてからは、朝、一緒にEテレを観てから出社してます。

先日、いつものようにEテレを観ていたら、「コニちゃん」というキャラクターがでてまして、

にほんごであそぼ コニちゃん満腹 [DVD]

にほんごであそぼ コニちゃん満腹 [DVD]

「そういえば、ポンキッキーズに『コニーちゃん』ってキャラクターでてたなー。」

コニーちゃんのクリスマス(カレンダー付き)

コニーちゃんのクリスマス(カレンダー付き)


と懐かしい気持ちになりました。
(コニちゃんも小錦さんが演じており、その時点で懐かしい気持ちになりました)

懐かしい気持ちのまま、

「Eテレを贔屓にしてたけど、たまにはポンキッキーズを観ようかなー。」

と妻に話してみると、

「え!?ポンキッキーズなんてとっくの昔に終わった(※1)よ!」

と言われました。


え!?


まじかよ!



ガチャピン、ムック、いま無職なのかよ!



そりゃー。UQモバイルのCMにもでるわけだ。


「宇宙人家族」篇

と思いました。

(※1)調べてみると、2017年4月から、BSフジで「ポンキッキーズ」が再開したようです。これでCMを降板になっても安心ですね。^ ^





ツイッターで #台無しプロダクト を発表してます!
こちらもよろしくお願いします。

GoogleMapにスクロールを吸収されるのは嫌だ(スマホでは2本指で操作したい)

kimizuka.hatenablog.com

以前、PC版についてはこんな記事を書きましたが、スマホ版はどうしたもんかと思っていました。
(上に透明なDIVとかを置いてクリックすると消えるようにとかしてました)

しかし、最近スマホでGoogleMapを見ると、

f:id:kimizuka:20170716220852p:plain

2本指での操作が必要となってます。
これは便利だ。

いつからこうなったんだろうと調べてみると、

cloud-ja.googleblog.com

去年の11月に導入された機能の模様です。
iframe埋め込みするだけで自動的にこのオプションが有効になる模様。これは便利だ。

だた、マウスホイールイベントのOFFは相変わらずAPI経由じゃないと行えない模様。
API経由で地図の操作を2本指にしたい時は、 gestureHandlingオプション をつかえば良いとのこと。

スクロールとパンの動作  |  Google Maps JavaScript API  |  Google Developers

ただし、APIを無料で呼び出せるのが、1日25,000回までなのでアクセスがあるサイトに導入するのはなかなか迷うところです。