小さい画像だったり、Markdown でパスを入れたくないときのために、画像を Base64 にエンコードして埋め込めるようにする Mac のクイックアクションを作ったので紹介します。

インストールと使い方

インストール

こちら をダウンロードして、解凍後、 埋め込み形式に変換.workflow をダブルクリックするとインストールができます。

使い方

Finder でイメージファイルを選択後、右クリック > クイックアクション > 埋め込み形式に変換 で実行することができます。

実行結果はクリップボードにコピーされた状態になっているので、貼り付けて使用してください。

作り方について

使いたいだけの人は特に必要ありませんが、詳細についてです。
一応、GitHub リポジトリ にしてあります。

Automator クイックアクション

このコマンドは Automator のクイックアクションとして作成しています。

Automator は macOS で色々と自動化するためのスクリプトなどを作れるアプリです。

その中でクイックアクションという右クリックのメニューから実行できるスクリプトがあり、それを利用しています。

クイックアクションでは macOS の機能を活用したアクションのほか、AppleScript や JavaScript、シェルスクリプトが実行できます。
今回はこの中のシェルスクリプト（ Z Shell ）を利用しています。

Bash でも良かったのですが、最新の macOS はデフォルトが Z Shell なので Z Shell で書いています。

コマンド

中身は Base64 にするための base64 と、改行文字を消すため tr 、書き出す文字列を出力するための echo とクリップボードにコピーするための pbcopy を使っています。

言葉で書くと複雑そうですが、コマンドは以下のような1行のコマンドです。

echo \<img\ src=\"data:image/png\;base64,$(base64 $1)\"\> | tr -d '\n' | pbcopy

これだけで、できています。
ターミナルなどから実行するには引数の $1 を画像のファイルパスにすれば動くと思います。

おわりに

はじめて Automator のアクション公開するんですけど、公開の仕方これでいいのかな…

Web サイトに使われているフォントが気になることありませんか？僕はあります。そんな時に何のフォントが使われているか調べる方法です。

Fonts Ninja

今回は Chrome 拡張機能である Fonts Ninja を使用します。

これは今回ように Web サイトに使われている Web フォントを知りたい時に活用できます。

機能はフォント・タイポグラフィ情報の取得と試し打ちの2つあります。

情報の取得

拡張機能をインストールし、追加されたアイコンをクリックすると、そのページで使われているフォントが一覧で表示されます。

さらに、マウスを特定の文字列にもっていくと、その箇所で使われているフォントやサイズ、色、行間などタイポグラフィ情報が表示されます。

試し打ち

取得した Web フォントを試し打ち（試し書き）することもできます。

表示された、フォント一覧の部分をクリックすると、そのまま文字をタイプすることができます。

欠点

この Fonts Ninja を使っても、全てのフォントが正確に表示されるわけではないようです。

CSS 以外からも情報を取ってきているようですが、限界があります。あくまで参考程度に使うと良いのかもしれません。

おわりに

海外の企業のサイトとかだと、オリジナルの書体とか作っていて見るのも楽しいですね。日本でもこれぐらい自由になれば楽しいのに。

僕はブラウザのブックマークバーをほとんどアイコンだけにしているのですが、たまに見辛く感じます。そこで仕切りを作って見やすくしようということです。

ブックマークバー

何も設定しないとブックマークバーにはファビコンとタイトルが表示されます。

ただ、ブックマークの登録の際にタイトルを削除するとファビコンだけを表示することができます。一例として普段僕が使用しているブックマークバーの一部がこちらです。

ただ、これだとサービスのアイコンがだらだらと並んで、少し見辛いです。そこで区切って見やすくしてみましょう。

仕切り用サイト

仕切りのアイコンを表示するだけのページを用意しました。見本はこちらです。

このような感じで、例えばサービスの種類ごとにまとめて置くことができます。

リンク一覧です。

• 黒の線

• グレーの線

• 白の線

• 黒のスラッシュ

• グレーのスラッシュ

• 白のスラッシュ

• 黒の四角

• グレーの四角

• 白の四角

登録方法は、サイトにアクセスし、ブックマークバーに登録します。その際にタイトルは空欄にしておきましょう。あとは場所を移動させるだけです。

おわりに

ブックマークバーをアイコンだけにしてる人には便利だと思うので、是非使ってください。他のマーク / 色がよかったら言ってくれれば追加します。

今までフォントサイズとか行間を感覚で決めていたんですが、数学的（？）にきっちり決めることで、綺麗になったので、考え方を共有します。

完成品

描画結果

左が普通の表示で、右はわかりやすく、背景に縦方向のグリッドを表示したものです。

CSS

変数を使用して以下のようにしています。

:root {
  --base-font-size: 16px;
  --vert-grid-size: calc(var(--base-font-size) * 2);
}

h1 {
  font-size: calc(var(--base-font-size) * 3.000);
  font-weight: 700;
  line-height: calc(var(--vert-grid-size) * 2);
}

h2 {
  font-size: calc(var(--base-font-size) * 2.498);
  font-weight: 700;
  line-height: calc(var(--vert-grid-size) * 2);
}

h3 {
  font-size: calc(var(--base-font-size) * 2.080);
  font-weight: 700;
  line-height: calc(var(--vert-grid-size) * 2);
}

h4 {
  font-size: calc(var(--base-font-size) * 1.732);
  font-weight: 700;
  line-height: calc(var(--vert-grid-size) * 2);
}

h5 {
  font-size: calc(var(--base-font-size) * 1.442);
  font-weight: 700;
  line-height: calc(var(--vert-grid-size) * 2);
}

h6 {
  font-size: calc(var(--base-font-size) * 1.201);
  font-weight: 700;
  line-height: calc(var(--vert-grid-size) * 2);
}

p {
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: var(--vert-grid-size);
}

なんで作ったの

Web 作るときのテンプレートを作りたいなっていうだけです。

ただ、せっかく作るなら綺麗で汎用性の高いものを作ろうとした結果です。

フォントサイズは等比数列にしているのですが、これは等差数列に比べ、自然にサイズが変わっていくからです。
人の五感は対数に比例するという ヴェーバー‐フェヒナーの法則 があるので、おそらく正しいです。自然界や人が良い（美しい）と思うものを思い浮かべると納得いく気がします。

また、縦方向のグリッドに関しては、ノートの罫線とかを想像すれば分かりやすいと思いますが、やっぱり揃っている方が綺麗ですよね。現在の Web のほとんどのページは縦に伸びていくので意識しない限り縦方向にグリッドが作りにくいので、少なくとも文字（文章）ぐらいはきっちり揃えていきましょうということです。

フォントサイズ

フォントサイズは <p> のサイズを基準値（今回の例は 16px ）として <h1> がその3倍になるような等比数列にします。

<p> から <h1> にかけて常に 1.1 倍みたいな公比の決め方であれば計算は簡単なんですが、今回は最終的に3倍になるという決め方をしています。この公比は累乗根（冪根）となるため、計算が少し複雑です。

3倍まで拡大し、<p> から <h1> までは6ステップあるので、以下の式で係数が求められます。i は各段階（<p> が 0 で <h1> が 6）が入ります。

\sqrt[6]{3^{i}}

ただし、CSS の calc() では累乗根のような複雑な計算ができません。そこであらかじめ計算機やプログラムを使って求めておきます。
累乗根は普通の累乗の計算に置き換えられるので、使用するものが累乗根に対応していない場合は、以下の式を用いましょう。

({3^{i}})^{\frac{1}{6}}

行間

縦方向のグリッドは最小単位を <p> のフォントサイズの2倍としています。

この値を基準に <h1> から <h6> に対しては2グリッド分を与えています。ただ、後半（ <h5>, <h6> ）あたりは余白が大きくなってしまうので1グリッド分でも良いかなとも思っています。その辺は臨機応変に。

おわりに

テンプレの完成目指して頑張ります。