flexboxで%はまだ使っちゃダメっぽい(2016年5月現在)

padding-topやpadding-bottomをパーセントで指定して、ブラウザが拡縮しても縦横比を崩さないというテクニックが便利でよくつかうんだけど、タイトルの通り'display: flex;'した要素の子要素 、いわゆるflex itemにはこの%で高さを指定した場合Firefoxでこれが効かなかった。（ChromeとかSafariとかは大丈夫）

でググったところ、

stackoverflow.com

なんか、仕様でまだ揉めてるのか...?

そして、

Authors should avoid using percentages in paddings or margins on flex items entirely, as they will get different behavior in different browsers.

てW3Cに書かれてるみたいね...ブラウザごとに挙動違うからpaddingやmarginにパーセント使うのやめとけと。

というわけで、flexboxではパーセント使わずに実装しなきゃいけない。どーしよっかな！

フィルターが空中に浮かぶドリッパー THE IIKONE BREWER

iikone.bigcartel.com

見た目がキモかっこいい。普通のドリッパーっていうのはフィルターがドリッパーに接するけど、これは一切接しない。そうすることで、抽出したコーヒーとドリッパーの間の表面張力に邪魔されず、均一にフィルターの表面を活かした抽出ができるとのこと。

The ultimate result is a more complex, even less bitter brew than is the one produced by classic manual pourover brewers, and fewer nonsoluble particles in the cup.

確かに、フィルターとドリッパー間の表面張力で滞留がなくなって過抽出によるが苦味が減るのはわかったけど、結局complexな味ってどういうことなんだ。（わかる人いたら教えてほしい）苦味が減る分様々な味が感じられるから、ということ? nonsoluble particle 溶けない粒っていうのはよくわからん。どんなフィルターつかってるんだ。

$699なのでさすがに自分では買わないけど、これ置いてる店あったら間違いなくそれ目当てで行ってしまう。どっか置かないかな。

今さらのvideoタグに関する備忘録

前はコピペとかで作ってたけど、最近はだいたいのブラウザでmp4で動画見れるからvideoタグはずっとシンプルに使える。 だからコピペせず自分で書いて気づいたことをつらつらと。

width指定

htmlタグに幅指定しないと再描画されるのがけっこうはっきり見える。なので、videoタグに幅指定はほぼ必須。

opacity

videoタグにcssのopacity効きません。フェードインさせたかったら動画に入れるか、擬似要素とかでマスクをかける。

モバイル

プロパティのautoplayは効かない。ページ開いただけで勝手にダウンロードされたら困りますものね。

背景などで使用している場合はdisplay: none;してcssのbackground-imageでposter画像を出すのがよさそう。上述の理由でopacity使えないのと、visibility: hidden;を使った場合なぜか動画プレイヤーの再生ボタンが中途半端に出てきたのでdisplay: none;一択かなと。

アニメーションするハンバーガーボタンつくる

今日日(きょうび、って漢字にするとめちゃ読みずらい)、ハンバーガーボタンは動いて当然だよね、って気風だし、毎回つくるの面倒なのでさくっとコピペできるボタン用意した。

See the Pen animated hamburger button by ruemui (@ruemui) on CodePen.

ポイント

• モジュールとして使いやすいようボタンだけ
• なるべく少ないコード
• カスタマイズしやすいよう色々まとめた

使い方

HTML

<div class="header__btn"><span>MENU</span></div>

CSS

.header__btn {
  $width: 50px;
  $strokeWidth: 4px;
  $distance: 15px;
  $duration: .4s;
  $color: #000;

  position: absolute;
  width: 50px;
  height: 50px;
  font-size: 0;  
  &:hover {cursor: pointer;}
  span {
    border-bottom: $strokeWidth solid $color;
    width: $width;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -($width / 2);
    transition: all $duration ease;
    &:before, &:after {
      content: '';
      display: inline-block;
      border-top: $strokeWidth solid $color;
      width: $width;
      position: absolute;
      left: 50%;
      margin-left: -($width / 2);
      transition: all $duration ease;
    }
    &:before {
      top: -($distance);
    }
    &:after {
      top: $distance;
    }
  }
}
// when the menu opens
.header__btn--opened { 
  span {
    border-bottom: none;
    &:before {
      transform: rotate(-45deg);
      top: 0;
    }
    &:after {
      transform: rotate(45deg);
      top: 0;
    }
  }
}

/* to display button at the center */
.header__btn {
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

• $width: ボタンの幅
• $strokeWidth: ハンバーガーの線幅
• $distance: 線と線の間隔
• $duration: アニメーションする時間
• $color: メニューの色

spanが中央線、:beforeが上の線、:afterが下の線になっていて、上下の線の回転角を変えて色々できる。たとえば、:before、を45度:afterを135度にしたりしてもいい。

js

var $btn = $('.header__btn');
$btn.on('click', function(e) {
  e.preventDefault();
  $(this).toggleClass('header__btn--opened');
});

e.preventDefault(); いらないけどトリガーのdivをaに変えてもいいように一応入れておいた。

あと、cssだけでやるのも（ちょっと前だけど）流行っていたのでつくっといたよ。

See the Pen CSS only animated hamburger button by ruemui (@ruemui) on CodePen.

HTML

<div class="header__btn">
  <input type="checkbox" id="menu">
  <label for="menu">MENU</label>
</div>

CSS

$width: 50px;
$strokeWidth: 6px;
$distance: 15px;
$duration: .4s;
$color: #000;
 
label:hover {cursor: pointer;}
input {
  display: none;
}
label {
  font-size: 0;
  width: $width;
  height: $width;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -($width / 2);
  transition: all $duration ease;
  &:before, &:after {
    content: '';
    display: inline-block;
    border-top: $strokeWidth solid $color;
    width: $width;
    position: absolute;
    left: 50%;
    margin-left: -($width / 2);
    transition: box-shadow ($duration / 4),
                transform $duration ($duration / 2),
                top $duration;
  }
  &:before {
    top: -($distance);
    box-shadow: 0 $distance 0 $color;
  }
  &:after {
    top: $distance;
  }
}

// when the menu opens
input:checked { 
  & ~ label {
    &:before {
      transform: rotate(-45deg);
      top: 0;
      box-shadow: ($distance * 2) $distance 0 lighten($color, 100%);
    }
    &:after {
      transform: rotate(45deg);
      top: 0;
    }
  }
}

この人 CSS3 Only Menu

のやり方を参考に。

labelをトリガーにすると本当にボーダーの上をクリックしなければいけなかったのでlabelに高さを持たせて、 三本の線はlabel:beforeのbox-shadowで。box-shadowでつくる方が色々線のコントロールはしやすかった。

比較して

js使わないほうが条件こぼれとかなさそうだし、反応もすこしだけいい気がする。ただメニューで使うときにはinput:checkedを使ってメニューオープン時のスタイルを定義しなきゃいけないので、CSSの見通し悪くなりそう。

gitでPermission Deniedって言われるときの解決法

sshの設定うまくいってないとよく言われる。うまくいってても再起動するとまた言われたりする。 うざい。

とりあえず公式を参照する。

Generating SSH keys - User Documentation

以下自分のためのメモ。

ssh -T git@github.com
で接続チェック。

ssh-add ~/.ssh/id_rsa_github
でもっかい鍵を登録する。(id_rsa_github)の部分は鍵の名称なので場合によって書き換える。

これでだいたいOK。

映画: 神々のたそがれ 映画というよりもはや体験

「神々のたそがれ」見てきた。本当に不快で正直途中で出たかった。我慢して最後まで見た自分を褒めたい。ネタバレはせずに、（というかする必要がない）つらつらと思ったこと。

『神々のたそがれ』予告編 - YouTube

映画ゴーンガール 結婚とか夫婦って

映画ゴーンガール観てきた。素晴らしい映画だった。観て損なし。少しだけネタバレしながら、感想など。

映画「ゴーン・ガール」予告編 - YouTube

あらすじ

5年目の結婚記念日に妻が失踪。争った形跡、残った血痕などから事件とみなされるが、妻は毎年結婚記念日に謎解きを仕掛けていた。家宅捜索中に「ヒント １」と書かれた手紙が発見される。妻の失踪の謎を解くサスペンスかと思いきや物語は二転三転し...

良かったとことか

• 展開の多さ。開始1時間くらいですでに1本の話になりそうなところをさらにこれでもかというくらいに新たな展開を持ってくる話。
• そして、鑑賞者を引き込む巧妙な見せ方。最初は夫視点で観ていって、途中から妻の回想を出会いから順に追体験していく。心躍る恋愛の時間、そして結婚、不幸な時、そして不和。種明かしの後、鑑賞者はどちらの味方にもなれなくなる。あるいは、どっちもどっちだから自分と同性に無理矢理感情移入するかも知れない。どちらにしろ、結末も含めてはっきりとこうだ！という答えがなく、見る人によって様々な解釈をさせてくれる。
• 音楽。 トレント・レズナーだった。心象がいやというほど伝わってくる不協和音やらノイズが最高にかっこよかった。

観終えて

旦那の最後はあれでよかったんじゃないかなーと思う。お互い求めているものは与えているわけだし、やっと対等になれたわけだから。（サイコ野郎と一緒はイヤだろうけど）
また、メディアの過剰な報道や、話題のヒートアップは結婚した夫婦に対立する物としての世間体のようなものを表してるのかなーなどと。二人だけの関係ってのはつまり恋愛ということで社会はあまり関係ないけど、結婚すると夫婦と社会この二項が刺激しあって個人の人生を支配する、自分一人の人生ではなくなるっていうのはあまりに陳腐な言葉にはなってしまうけど。まあそんな当たり前のことを生々しく感じさせてくれる映画でした。