BTT(BetterTouchTool)でTouch Barをカスタマイズする

## はじめに
MacBook Pro 2016に搭載されたTouch Bar。
ボタンやスライドバーを使うことで、キーを覚えずにアプリケーションの奥深くにある機能が呼び出せると話題ですが、まだまだ対応したアプリケーションが少ないことも確かです。
この投稿では、そんな状況にあるTouch Barを、BetterTouchToolを導入してカスタマイズする方法を紹介します。

## BetterTouchToolの導入
(BetterTouchToolを導入済みの方は、次の章まで飛ばしてください)
BetterTouchToolは有料アプリケーションです。料金の支払いには3つの方法があります。

- [公式サイト](https://sites.fastspring.com/boastr/product/bettertouchtool)から支払う(590円〜)。
- BTT Remote PROを購入し、無料のライセンスを手にする(490円)。
- BetterSnapToolを購入し、無料のライセンスを手にする(360円)。

下の2つは、BTT Remote PROまたはBetterSnapToolを持っている人が無料でBetterTouchToolのライセンスを手に入れられることを利用したものです。BTT Remote PROを利用した無料ライセンスの入手については、[こちら](http://minatokobe.com/wp/os-x/mac/post-20393.html)の記事に詳しく載っています。BetterSnapToolは、使っているMacの中に入った状態でBetterTouchToolを起動し、無料ライセンスの取得を試行することで自動的に検知されます。

筆者は、BetterSnapToolの購入による無料ライセンスの入手をおすすめします。理由としては、3つの選択肢の中で最も安価であることと、遠隔操作を行うことよりも直接Macを操作するほうが多いことが挙げられます。

## BetterTouchToolでTouch Barをカスタマイズする
(注意)*BetterTouchToolでカスタマイズしたボタンを使用するには、システム環境設定のキーボードの設定で、「Touch Barに表示する項目」を「App コントロールおよびControl Strip」にしてください。*

ここでは、Touch Bar未対応アプリケーションであるTwitter for Macをカスタマイズして、新しいツイートのダイアログを開くボタンを作成してみます。

BetterTouchToolを開き、右上にある「TouchBar」に移動すると、次のようなウィンドウになります。
<img width="1127" alt="スクリーンショット 2017-03-04 10.34.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/54282/6ebe52e2-772b-a495-9847-807cc3db1768.png">

### カスタマイズしたいアプリケーションを選ぶ
この段階では、まだGlobalとFinderしか選ぶことができません。
左側中央近くの「+」から使用するアプリケーションを選択することができます。ここでは、「Twitter.app」を選択します。

### ボタンを追加する
まず、右下の方にある「+TouchBar Button」で、新しいボタンを追加します。
次に、Touch Bar Button Nameには、Touch Barで表示される文字列(ラベル)を設定します。今回は、「新しいツイート」としておきます。
そして、このTouch Barボタンに機能をもたせます。Custom Keyboard Shortcutの下の入力欄を**クリックしてから**、Command-Nを入力してください。入力欄に「⌘N」と表示されれば成功です。

<img width="1127" alt="スクリーンショット 2017-03-06 09.42.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/54282/04d31f6a-b0d1-0fa5-2ee6-d16c4795641c.png">

ここで、一度追加したボタンを確認してみましょう。
Twitter for Macのウィンドウを開くと、Touch Barが次のようになっているはずです。なっていなければ、BetterTouchToolのアイコンをしたボタン(画像の右から4番目)をタッチしてください。

<img width="1085" alt="スクリーンショット 2017-03-06 09.39.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/54282/0562c642-da38-d06d-4755-b559e105d6fb.png">

ボタンをタッチしてみると、新しいツイートを書くダイアログが出てきます。

### ボタンをカスタマイズする
さて、とりあえずボタンは作成できました。
しかし、ボタンといっても、テキストだけであるとか、グレーであるとか、少し味気ない気もします。
ここで、ボタンの見た目をカスタマイズして、モダンな見た目にしていきます。

#### ボタンにアイコンを追加する
Touch Bar Button Nameの左側にあるAdd Iconをクリックし、表示されているアイコンをドラッグアンドドロップすることで、無料のアイコンをボタンのアイコンとして追加できます。

<img width="400" alt="スクリーンショット 2017-03-06 09.52.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/54282/e38fb773-2ff5-e517-2008-e43a3daa0205.png">

アイコンが追加されるだけで、見やすくなります。
<img width="303" alt="スクリーンショット 2017-03-06 10.05.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/54282/3bc37a7a-8df2-2551-e382-a6ba46019151.png">


#### ボタンの色を変更する
色を変更することで、より視覚的にわかりやすいボタンになります。
Touch Bar Button Nameの下のAdvanced Configurationから、TouchBar Button Colorを編集します。ここでは16進数での色も指定できるので、Twitterの色である#00acedを指定します。

<img height="425" alt="スクリーンショット 2017-03-06 10.01.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/54282/5152f3ae-0ab6-f942-6542-33fbbabf37a8.png">

その後、Saveを押せば色が反映されます。

<img width="307" alt="スクリーンショット 2017-03-06 10.11.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/54282/1403e26a-77b3-3764-9554-a0ad824c7dc3.png">


#### ボタンをアイコンだけにする
たくさんのボタンを置きたい場合、ラベルが表示されていると、多くのボタンを見ることができないので不都合です。ここで、ラベルを非表示にして、より多くのスペースを確保できるようにします。
先ほどと同じく、Advanced Configurationを開きます。その中の「Icon only, no text (please enter a title anyways)」にチェックを入れて、Saveで反映します。
*(注意)「please enter a title anyways」とある通り、Touch Bar Button Nameには必ず何か入れなければなりません。何も書かなければ、アイコンを設定しても、ボタンは出現しません。*

これで、スペースを節約することができました。
<img width="204" alt="スクリーンショット 2017-03-06 10.23.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/54282/aaa47c7f-f184-0062-04e1-32571a7528e3.png">

## 最後に
あとは上の操作の繰り返しで(とりあえずは)自分の思い通りのTouch Barを作ることができます。
これからもTouch Barに関する記事を作っていく予定なので、ぜひご覧ください。