かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

Pug 出力するコメントに変数を使いたい

pugでHTMLを生成する時、変数をコメントに含めて出力するのに少しハマったのでメモ

変数をコメントに含める方法

- var hello = "world";
<!-- hello #{hello} -->
| <!-- hello #{hello} -->

<!-- hello world -->
<!-- hello world -->

又はpugの文字列展開の方法を使って

- var hello = "world";
!= `<!-- hello ${hello} -->`

<!-- hello world -->

NG集

- var hello = "world";
<!-- hello ${hello} -->      // <!-- hello ${hello} -->
`<!-- hello #{hello} -->`    // ERROR
| <!-- hello ${hello} -->    // <!-- hello ${hello} -->
|= <!-- hello ${hello} -->   // = <!-- hello ${hello} -->
! <!-- hello ${hello} -->    // ERROR
!= "<!-- hello #{hello} -->" // <!-- hello #{hello} -->
!= `<!-- hello #{hello} -->` // <!-- hello #{hello} -->
// hello #{hello}            // <!-- hello #{hello}-->
// `hello ${hello}`          // <!-- `hello ${hello}`-->
//= hello #{hello}           // <!--= hello #{hello}-->
//= `hello ${hello}`         // <!--= `hello ${hello}`-->
//!= `hello ${hello}`        // <!--!= `hello ${hello}`-->
//= hello                    // <!--= hello-->

jadeからpugになって文字列展開は#{var}から`${var}`に変わったはずなのですが、コメントの出力に関しては${var}を使うには != `<!-- ${var} -->` としなければならないので、<!-- #{var} -->とした方が楽そうです。(コメント部分とそうでない部分とで書き方が異なるので少し混乱しそうですが...

GitHub内でも議論があるようですが、//= var とかで出力できるようになって欲しいかなーと思いました。


コメント力―「できる人」はここがちがう (ちくま文庫)

コメント力―「できる人」はここがちがう (ちくま文庫)

Mac OSX High Sierra 開発環境セットアップのメモ (1) git homebrew ssh

新しいMacちゃんの開発環境とかのセットアップのメモ

Finder

不可視ファイルの表示

macOS Sierraからはターミナルでコマンドを打ち込まなくてもcommand+shift+.ショートカットをFinderで実行すれば不可視ファイルの表示/非表示が切り替えられるようです

macOS Sierraでは隠しファイルを表示するショートカットキー「CMD+Shift+.」がFinderでも利用可能に。 | AAPL Ch.

タイトルバーにフルパスを表示させる

ターミナルを起動して下記コマンドを実行

$ defaults write com.apple.finder _FXShowPosixPathInTitle -boolean true
$ killall Finder

※ コマンド実行したら不可視ファイルの表示が非表示に戻るかもです

キャプチャーの保存先を変更する

デフォルトではデスクトップにキャプチャーが保存されるのでPicturesscreencaptureフォルダを作成してここにキャプチャー保存されるようにしたいと思います。
ターミナルを開き下記コマンドを実行 (保存先は適時変更してください)

$ defaults write com.apple.screencapture location ~/Pictures/screencapture/
$ killall SystemUIServer

キーボードコマンドでアプリやファイルを探して開ける便利アプリAlfredをインストールする

サイトからダウンロードしてインストール。

.bashrc 関連のセットアップ

初期状態では.bashrc .bash_profile が無いので作成する

$ cd ~
$ touch .bashrc
$ touch .bashrc_profile

ターミナル起動時に.bashrcが読み込まれるように.bash_profileをエディターで開き下記を記入して保存する

if [ -f ~/.bashrc ]; then
    . ~/.bashrc
fi
llコマンドを使えるようにする

Macにはllコマンドがないのでディレクトリの一覧を表示するにはls -nと打たなくてはならずチョットメンドーなのでllコマンドで一覧が表示できるようにコマンドのエイリアスを作成します。
.bashrcに下記を追記して保存

alias ll='ls -n'

ターミナルで下記コマンドを実行してエイリアスを使えるようにする

$ source .bashrc

Xcode のインストール

gitを使ったりするにも必要だった気がするやつ... (よく覚えてない

$ xcode-select --install

ライセンスの承諾 (やったかどうか忘れた...)

$ sudo xcodebuild -license

Homebrew のインストール

Homebrewのサイトにあるコードをそのまま実行

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Mac OSX El Capitanにアップデートした際はパーミッションの問題でハマったという記事を結構見ていたのですが、クリーンな状態のHigh Sierraにインストールする分には公式のコマンドをそのまま実行すればすんなりインストールが完了しました。

Gitのインストールと初期設定

homebrew版のgitを使う

インストール

$ brew install git

なぜか私のHigh Sierraではインストールしただけでデフォルトのgitがhomebrew版になったのだけど、ターミナルを再起動したり新規タブを開いたときにhomebrew版にならないときは、.bashrcにhomebrewのパスを追加する

export PATH=/usr/local/bin:$PATH

Git configの設定

ユーザー情報
$ git config --global user.name "<NAME>"
$ git config --global user.email "<E-mail>"
デフォルトのエディタをvimにする
$ git config --global core.editor 'vim -c "set fenc=utf-8"'
色付け
$ git config --global color.ui true
$ git config --global color.diff auto
$ git config --global color.status auto
$ git config --global color.branch auto

設定の確認

$ git config --global --list

Gitを便利に使うエイリアスを設定

checkoutとかbranchとか長いのでエイリアスを設定して楽をします。

$ git config --global alias.st status
$ git config --global alias.br branch
$ git config --global alias.co checkout
$ git config --global alias.cm commit
$ git config --global alias.gr grep

作成したエイリアスの確認

$ git config --global --list | grep ^alias\.

SSH 秘密鍵・公開鍵の作成

GitHubやBitbucketを使えるようにするためにSSH 秘密鍵・公開鍵を作成します。
.sshディレクトリがないので作成

$ install -m 0700 -d ~/.ssh

秘密鍵・公開鍵の作成

$ cd ~/.ssh
$ ssh-keygen -t rsa -b 4096 -C "<Email>"

パスフレーズを設定した場合Sierraだとパスフレーズを覚えず毎回訊かれるようになる面倒くさい問題があったようなのでパスフレーズを覚えさせる設定をしておきます。   .ssh/configの作成

$ touch ~/.ssh/config

.ssh/configに下記を記述

Host *
  AddKeysToAgent yes
  UseKeychain yes

ServerAliveIntervalとか他にも色々設定できるようなので時間があるときにでも調べてみておくと今後幸せになれそう。

 
node・rubyphpapacheなどのローカル環境の構築はまた今度。。。
開発環境のセットアップ毎回めんどくさすぎる。自動化とかできないものかな〜


[参考一覧]


USB Type-Cのハブに👆これ買いました。
HDMIも付いてて便利なのですが、給電不足なのか時々USBメモリマウントできないことがあってお高かったのに...ぐぬぐ...ってなってます。

IE HTMLのIE分岐の条件付きコメント <!-- [if IE] -->が効かなくなってた。

表題のとおりです。

画像をレスポンシブで100%表示するのにObject-fitが便利なのですが、IE11ではObject-fitがサポートされてないので、HTMLのIEを判別させる条件付きコメントを使ってIEの時だけ上書きするCSSを読み込ませようとしていました。

<!--[if IE]><link rel="stylesheet" href="./assets/css/ie.css"><![endif]-->

Windowsの実機で確認するとIE用のCSSが読み込まれる気配がなく、調べた所IE10から条件付きコメントの機能が廃止になってるようでした。(IE対応不要な案件ばかりしてたので知らなかった...

IE10でコンディショナルコメントが廃止される背景には、IE10が十分に標準規約に準拠しているため、もはや特定のバージョンのブラウザとして区別する必要がないといった理由がある。
出典: IE10からコンディショナルコメントを廃止 | マイナビニュース

IE10が十分に標準規約に準拠しているため、もはや特定のバージョンのブラウザとして区別する必要がないといった理由がある。」( ತಎತ) ふ〜ん
嘘つけ!!!
つまり上記の<!--[if IE]>IE9以下のみで有効になるようです。

IE用のCSSハック

条件付きコメントが効かなくなっているのでIE11に対応するには、懐かしのCSSハックを使う必要があるようです。
(条件分岐でIEだけ別のCSS読み込ませるほうが他ブラウザへの影響もなくて楽だったのですが...)

IE10用以降用 CSSハック

-ms-high-contrast:noneというメディアクエリを使うと、IE10以降のみに適応されるCSSが作成できるようです

@media all and (-ms-high-contrast:none) {
 /* IE10以降に適応されるCSS */
}

IE11用 CSSハック

IE11は上記のメディアクエリに加えて*::-ms-backdrop,セレクターにつける事で、IE11のみにCSSを適応させることが出来るようです。

@media all and (-ms-high-contrast:none) {
  *::-ms-backdrop, .selector {
    /* IE11のみに適応されるCSS */
  }
}

@media all and (-ms-high-contrast:none) {} このメディアクエリを付けず、
*::-ms-backdrop, のみの場合は IE11 に加えて IE7 と IE5 にスタイルが当たるようです。
なので、IE7以前に対応しないのであれば、メディアクエリは不要で

*::-ms-backdrop, .selector {
  /* IE11に適応されるCSS */
}

とすれば良さそうです。

IE10もIE11もブラウザのバグが多すぎて別途対応しなければならなくなるのに、何故この条件付きコメントの機能を廃止したのか理解不能です...
つまりマイクロソフト的にももうIEの対応は辞めようよ。って事ですよね?
IE対応はしてません」を積極的に使っていきましょう!!

おまけ: object-fit を擬似的にIEに対応させる方法

上記のCSSハックを使って次のようなIEに object-fit っぽい挙動を実装しました。

.coverImg
  position: relative
  img
    object-fit: cover
    position: static
    width: 100%
    height: 100%

@media all and (-ms-high-contrast:none) {
  /* for IE10, IE11 */
  .coverImg
    overflow: hidden
    img
      position: absolute
      top: 50%
      left: 50%
      width: 100%
      height: auto
      min-width: <image-width>px
      min-height: 100%
      transform: translateX(-50%) translateY(-50%);
}

@supports ( object-fit: cover ) {
  .coverImg
    img  
      min-width: auto
      min-height: auto
      transform: none
}

[参考]

バグっていいじゃん(劇場盤)

バグっていいじゃん(劇場盤)

よくねーよ。(タイトルに対して)