みかづきブログ その3

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

input type="number"の右のボタンをカスタムする 💻

input type="number"の右のボタンがspin buttonということを知りました。
そしてwebkit限定ですが、CSSである程度カスタムできることを知ったので、早速カスタムしてみました。
本当のスピンボタンは透明にしつつ、大きくしておいて、その上に当たり判定のないダミーのボタンを置くという方針を取っています。

SCSS

body {
  background: #ECEFF1;
}

.input-box {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  margin: auto;
  max-width: 600px;
  width: 100%; height: 60px;

  &:before {
    position: absolute;
    top: 8px;
    right: 20px;
    color: #ECEFF1;
    font-size: 20px;
    content: "▲";
    pointer-events: none; // 当たり判定をなくす
  }
  
  &:after {
    position: absolute;
    bottom: 8px;
    right: 20px;
    color: #ECEFF1;
    font-size: 20px;
    content: "▼";
    pointer-events: none; // 当たり判定をなくす
  }
  
  .input {
    box-sizing: border-box;
    display: block;
    margin: 0 auto 40px;
    border: none;
    border-radius: 10px;
    padding: 20px 60px 20px 20px;
    width: 100%; height: 60px;
    font: 20px "Avenir Next";
    box-shadow: 0 0 2px rgba(0, 0, 0, .5) inset;
    -webkit-appearance: none;
    
    &:focus {
      outline: none;
    }

    &::-webkit-inner-spin-button {
      position: absolute;
      top: 0; bottom: 0;
      right: 0; // 右端に固定
      margin: auto;
      transform: scale(5); // 当たり判定を大きくする
      transform-origin: right center;
      opacity: 0; // 透明にして見えなくする
    }
    
    &::-webkit-contacts-auto-fill-button {
      opacity: 0; // Safariのオートフィルボタンを透明にして見えなくする
    }
  }
}

HTML

<div class="input-box">
  <input class="input" type="number"/>
</div>



最近noteも書いてます。

note.mu

Macの開発環境を整える 2019 春(MAMP・Cyberduck・Docker・Go・rbenv・bandler・ImageMagick・MySQLの導入)

昨年末に最低限の環境を整えたのですが、もろもろ開発を進めるに当たって追加で色々導入したので、導入手順をまとめておきます。

kimizuka.hatenablog.com

MAMP

www.mamp.info

PHPのサイトをリニューアルするために導入しました。
ローカルでMySQL、Apache、PHPを簡単に動かせるので便利ですね。
ただMySQLのバージョンがMAMPのバージョンに固定されているため、こちらのページ から3.5.2をダウンロードしました(5.5系のMySQLを使いたかったため)。

www.mamp.info

PHPのバージョンは「MAMP > 環境... > PHP」から選択できますが、GUI上にはインストールされているものの新しいもの2つしか表示されないので、/Applications/MAMP/bin/phpの中に入っているディレクトリを、適当にリネームしましょう。

f:id:kimizuka:20190308112739p:plain

僕の場合は、5.2.17を使いたかったので、7.0.8と5.2.17以外のディレクトリにすべて_をつけています。

f:id:kimizuka:20190308112747p:plain


Cyberduck

SFTPでのファイルアップロードのために導入しました。
学生の頃は愛用していまして、アイコンが好きなので使わなくてもDockに置いておいた時期もあります。

Cyberduck

Cyberduck

  • David Kocher
  • 仕事効率化
  • ¥2,900

学生の頃は無料で使わせていただいておりましたが、いままでの感謝を込めてこの度購入しました。

cyberduck.softonic.jp

無料版はこちらです。


Docker

便利だという噂は聞いていたのですが、いまだになんなのかは良くわかっていません。
開発で必要になったので導入しました。

hub.docker.com

良くわからないまま雰囲気で「Docker Desktop for Mac」を導入したものの、問題なく動いております。


Go

開発に必要になったのでhomebrewをつかって導入しました。

brew install go

で、すべてデフォルトの設定にしたため、~/go/というディレクトリができました。ちょっと気になりますが、まあ良しとしましょう。

echo 'export GOPATH=${HOME}/go' >> ~/.bash_profile
echo 'export PATH=$GOPATH/bin:$PATH' >> ~/.bash_profile

で、GOPATHとPATHを通せばOKです。


rbenv ruby-build

複数のRubyのバージョンを切り替える必要が出てきたためrbenvとruby-buildを導入しました。

brew install rbenv ruby-build

のあとに、

echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
echo 'eval "$(rbenv init -)"' >> ~/.bash_profile

でOKです。


ruby

旧バージョンのrubyが必要になったためインストールしました。

rbenv install -l

でインストール可能なバージョンの一覧を確認し、

rbenv install 2.2.2

という感じでインストールできます。

rbenv global 2.2.2

で、グローバルのバージョンを切り替え。

rbenv local 2.2.2

で、ローカルのバージョンを切り替えです。

bandler

gem install bundler

で導入できるはずなんですが、2.2.2のRubyが必要だったため、

ERROR:  Error installing bundler: bundler requires Ruby version >= 2.3.0.

というエラーに悩みました。

rbenv global 2.2.2
gem install bundler -v "1.16.4"

とバージョンを指定して導入しました。


ImageMagick


開発に必要になったので導入しました。

brew install imagemagick

でOKです。余談ですが、ImageMagickを調べていたらこんな記事に出くわしました。

blog.cybozu.io


MySQL

導入に一番苦戦しました。
5.6系を導入したかったので、

brew install mysql@5.6
echo 'export PATH="/usr/local/opt/mysql@5.6/bin:$PATH"' >> ~/.bash_profile

で良いはずなんですが、

mysql.server start

で、起動しようとすると、

ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)
ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (38)
. ERROR! The server quit without updating PID file.

的なエラーが出て、なかなか起動できず、アンインストールとインストールを繰り返していたのですが、

/usr/local/var/mysql

を削除してから、再インストールしたところ無事に起動できるようになりました。



環境構築にほぼ丸1日掛けてしまいましたが、今回はこんな感じです。

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