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 とかで出力できるようになって欲しいかなーと思いました。

---

• Cannot expand variable in comment · Issue #1311 · pugjs/pug · GitHub
• Comments added variable is not compiled, the possibility of increasing? · Issue #1878 · pugjs/pug · GitHub

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

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

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

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

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

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

• Macのスクリーンショットの保存先を変更する方法 | delaymania
• Mac キャプチャーの保存先を変更する。 - かもメモ

キーボードコマンドでアプリやファイルを探して開ける便利アプリ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

• Mac(OSX)で.bashrcを編集する · GitHub
• 初心者向けシェルスクリプトの基本コマンドの紹介 - Qiita

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にインストールする分には公式のコマンドをそのまま実行すればすんなりインストールが完了しました。

• macOS 用パッケージマネージャー — macOS 用パッケージマネージャー
• 【Mac】クリーンインストールされたmacOS High SierraにHomebrewをインストールする方法 - HWD Blog
• Web エンジニアが macOS Sierra にアップグレードしてやったこと
• High SierraにアップデートされたMacでHomebrewがうまく動かない時 - Qiita

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

homebrew版のgitを使う

インストール

$ brew install git

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

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

• macOSのgitをXcode Command Line Tools版からHomebrew版に乗り換えてみた - Qiita
• OS XでのGit環境セットアップ - Qiita

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 core.ignorecase false

色付け

$ 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\.

• Gitをインストールしたら真っ先にやっておくべき初期設定 - Qiita
• コマンドラインでのgitの色設定 - Qiita
• よく使うgitコマンドのエイリアスを設定して開発効率をアップする - Qiita

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とか他にも色々設定できるようなので時間があるときにでも調べてみておくと今後幸せになれそう。

• 秘密鍵・公開鍵を作成する（Mac） - Qiita
• お前らのSSH Keysの作り方は間違っている - Qiita
• macOS SierraでSSH鍵のパスフレーズの件 - Qiita

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

---

[参考一覧]

• Macのスクリーンショットの保存先を変更する方法 | delaymania
• Mac - ランチャーアプリ「Alfred」の基本的な使い方 - PC設定のカルマ
• Mac(OSX)で.bashrcを編集する · GitHub
  • 初心者向けシェルスクリプトの基本コマンドの紹介 - Qiita
• macOS 用パッケージマネージャー — macOS 用パッケージマネージャー
  • 【Mac】クリーンインストールされたmacOS High SierraにHomebrewをインストールする方法 - HWD Blog
  • Web エンジニアが macOS Sierra にアップグレードしてやったこと
  • High SierraにアップデートされたMacでHomebrewがうまく動かない時 - Qiita
• macOSのgitをXcode Command Line Tools版からHomebrew版に乗り換えてみた - Qiita
  • OS XでのGit環境セットアップ - Qiita
• Gitをインストールしたら真っ先にやっておくべき初期設定 - Qiita
  • コマンドラインでのgitの色設定 - Qiita
  • よく使うgitコマンドのエイリアスを設定して開発効率をアップする - Qiita
• 秘密鍵・公開鍵を作成する（Mac） - Qiita
  • お前らのSSH Keysの作り方は間違っている - Qiita
  • macOS SierraでSSH鍵のパスフレーズの件 - Qiita
  • .ssh/configで設定すると接続が楽になる方法 - Qiita

Satechi Type-C アルミニウム Proハブ Macbook Pro 13/15インチ対応 40Gbs Thunderbolt 3 4K HDMI Micro/SDカード USB 3.0ポート×2 マルチ USB ハブ (シルバー)

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
}

---

[参考]

• IE10からコンディショナルコメントを廃止 | マイナビニュース
  • Microsoft Drop Conditional Comments in IE10 — SitePoint
  • かぴのんのつぶやき『IE10で条件付きコメントがサポートされない』
  • IE11 でも標準モードでは条件付きコメントは無視される: ある SE のつぶやき
• ブラウザごとにcssを変えたい IE11の場合（CSSハックで対応） - ts0818のブログ
  • css hacks for IE11 ( & Edge ) - Qiita
  • IE11にのみ適用するスタイルシート - Qiita
• Can I use... Support tables for HTML5, CSS3, etc
• object-fitをCSSのみでIEにも対応してみる - Qiita

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

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