はじめに

Afloatとは、指定したウィンドウを透過させることができるMacのプラグインです。
また、最前面にウィンドウを固定する機能もあるため、
デザインデータと半透明にしたブラウザと重ね合わせてスタイルを調整することができます。

macOSのアップグレードにより、macOS Sierra辺りから使えなくなったと思っていたのですが、
AfloatXという後継が出たと知り試したところ普通にAfloatも使えるようになっていました。

初めてAfloatを知ったという方も、これを機に是非お試しください。

ピクセルパーフェクトが求められる利用シーンでは精度、作業効率ともに今までの比ではないかと思います。

自分の場合は最初マージンなど目視でざっくりコーディングし、微調整はAfloatを使って丁寧に仕上げるようにしています。
これをすることでデザイナーさんからの細かい戻しも少なく済み、コーディングの作業効率はもちろんプロジェクト全体の進行もスムーズになります。

Macのプラグインマネージャーをインストール

Macのプラグインマネージャー「MacForge」を下記からダウンロードし、アプリをインストールします。
Afloatを使えるようにする設定が必要なため、アプリは一旦インストールだけ済ませておきます。

MacForgeからアプリをダウンロード
解凍したらアプリケーションフォルダに移動（任意）

Afloatを使えるようにする設定①

MacForgeのREADMEにLoading plugins into some applications may require Library Validation is disabled と書かれており、
ライブラリの検証を無効にする必要があるようです。
ターミナルで下記のコマンドを実行します。

sudo defaults write /Library/Preferences/com.apple.security.libraryvalidation.plist DisableLibraryValidation -bool true

Afloatを使えるようにする設定②

1.　PCを再起動し、アップルマークが出る前にCommand+Rを長押し。アップルマークが出たら離す
macOS 復元システム画面が表示されるので、メニューバー「ユーティリティー」からターミナルを立ち上げ、下記を実行。

csrutil enable --without fs --without nvram --without debug

2.　PCを再起動しMacForgeを立ち上げ、左上の検索から「Afloat」と検索。
3.　AfloatとAfloatXが出てくるので、AfloatのGETボタンをクリック。
4.　左メニューのManageにAfloatが追加され、チェックが付いている事を確認。

※AfloatXは後継のようですが、ショートカットが無いのでAfloatのほうが使い勝手が良さそうです。

動作の確認

半透明にしたいアプリを立ち上げ、
Command + Control + マウスホイール上下（タッチパッドの場合は２本指で上下）で透過できれば成功です。

Chromeの場合メニューバーのウィンドウに「Keep Afloat」などの下記の項目が表示されていれば正常にインストールされています。

便利なショートカット

常に最前面に固定＆解除
Command + Control + A

透明度の変更
Command + Control + マウスホイール上下（タッチパッドの場合２本指で上下）
Command + Control + 0 or 1

アプリが急に落ちる時の対処法

MacForgeを起動した状態でアプリを立ち上げると、
アプリが落ちてしまう時があるようです。
Afloatの動作確認ができたらMacForgeは終了しておくと良さそうです。
※MacForgeを終了してもAfloatは機能します。

Afloatを無効にするには

Manegeからチェックを外してもAfloatが有効になったまま動作してしまいます。
立ち上げていたアプリのウィンドウを終了すれば次回以降Afloatは無効になります。