NotionでTouch Barを使いたい！
はじめに
最近 MacBookPro を初めて購入し Notion をアプリから使っていたのですが、タッチバーにボタンや操作表示が何もなく寂しいと感じたため、タッチバーをカスタマイズして Notion 専用のオリジナルタッチバーを作成しました。
Notion にはブラウザ上で使うウェブ版と各プラットフォーム向けのアプリ版が存在します。
この記事内では Mac 向けの Notion アプリを対象にしています。記事内の各設定については M1 チップ搭載の Mac にて動作確認済みです。
この記事ではタッチバー付きモデルの MacBook を対象にしています。タッチバーがないモデルでは記事の内容は使えません。予めご了承ください。
Notion でのタッチバー表示
デフォルトでは以下のようにタッチバーに最低限のボタンしか表示されていません。
Before
何もなくて使い物にならない 😑
以下が BetterTouchTool を使ってカスタマイズしたタッチバーになります。
After
ボタンワンタッチで Notion のブロックを変換できるようにしています。例えば、H1 をおすと H1 入力(一番大きい見出し)に切り替わり、見出しが大きくなります。
それぞれのボタンにショートカットを設定しているため、タッチしたボタンに応じてブロックの内容が変化します。
右側には BetterTouchTool で用意されている日付と時刻とバッテリー残量表示ウィジェットなどを配置しています。BTT ではウィジットも充実しています。
テキストやアイコンの背景色もタッチバーに色合いを合わせたため、違和感なく配置できました。
BetterTouchTool（通称 BTT）とは？
MacOS 上でタッチバーのカスタマイズや、マウス、トラックバックのカスタマイズを行うためのユーティリティです。
これがあるとできることが大きく広がります。ライセンスを購入して使うユーティリティになりますが試用期間も設けられています。無料で 45 日間使うことができるため、設定に慣れるためにも試用期間を使い切ってから購入するのをおすすめします。私は、速攻で Lifetime License(生涯ライセンス)を購入しました。
生涯ライセンスは日本円で現在、約 2400 円程度と少しお値段はしますが、タッチバー・トラックパッド・マウスは日常的に使うものなのでカスタマイズするために投資する価値はあると感じます。同じ開発者の他のツールを買う、寄付をすることでライセンスをもらうこともできますが記事内では詳しく触れません。しかし、ライセンスの認証がやや面倒だと感じるため、ライセンスの更新を気にすることなく使えるも生涯ライセンスの購入がおすすめです。また追加の課金がないため 1 回だけ生涯ライセンスを買えば、ずっとサポートを受けられるという安心感があります。
タッチバー不要論なども多く目にしますが、このツールを使うことでタッチバーでの操作が格段に広がり、ポテンシャルを最大限に引き出すことが可能なのでタッチバー付きモデルを使う場合は必須導入のツールだと感じます。
タッチバーをカスタマイズ
Notion ではキーボードショートカットが多数用意されています。使えるキーボードショートカットはこちらの記事を参考にしてください。公式のドキュメントが日本語訳にてまとめられております。
翻訳ドキュメントの公開をしてくれているノースサンド様ありがとうございます！
多数あるショートカットキーの中からよく使うものを簡単にタッチバーから呼び出せるようにカスタマイズしていきます。Notion には Turn into という機能があり、ブロック単位で表示を変換できます。操作は以下の通りです。
| 操作表記 | 動作 | ショートカットキー |
|---|---|---|
| Text | テキスト | ⌘ ＋ ⌥ ＋ 1 |
| Heading 1 | 見出し 1 | ⌘ ＋ ⌥ ＋ 2 |
| Heading 2 | 見出し 2 | ⌘ ＋ ⌥ ＋ 3 |
| Heading 3 | 見出し 3 | ⌘ ＋ ⌥ ＋ 4 |
| Page | ページ化 | ⌘ ＋ ⌥ ＋ 5 |
| To-do-list | チェックボックス化 | ⌘ ＋ ⌥ ＋ 6 |
| Bulleted list | 箇条書きリスト化 | ⌘ ＋ ⌥ ＋ 7 |
| Numbered list | 番号付きリスト化 | ⌘ ＋ ⌥ ＋ 8 |
| Code | コードブロック化 | ⌘ ＋ ⌥ ＋ 9 |
例えば Notion でブロックを選択して ⌘ + ⌥ + 2 とキー入力するとブロックのスタイルが Heading1(見出し 1)に変わります。
これらの操作をボタン 1 つでタッチバーから呼び出せるように設定していきます。テキストが存在するブロックでタッチバーのボタンをタップするとブロックがタップしたボタンに応じて変換されます。一番大きい見出しを作成したいときは H1 をタップするだけで直感的にブロックを変換できます。
それでは BetterTouchTool を実際に使ってタッチバーボタンの設置とショートカットキーの割当をしていきます。ボタン追加とショートカットキーの追加は上部メニューからタッチバータブを選択して設定できます。
一番左のアプリ選択メニューから対象となるアプリケーションを選択して固有のタッチバーを設定できます。もしメニューに Notion のアプリが表示されていない場合は＋マークから「ファイルシステムからアプリを選択」、アプリケーションフォルダ内の Notion.app を選択することで設定できるようになります。
こちらの画像が設定後の画像になります。
画面一番左が現在登録しているタッチバーボタン(トリガー)、画面真ん中がボタンタッチ時に行うアクション(ショートカットキーの送信)、一番右側がタッチバートリガー設定(ボタンの詳細設定)になっています。
タッチバーボタン設定方法
ボタンをタッチしたときにショートカットキーを実行してもらいたいので、トリガーのアクションとしてキーのダウンとアップを送信するように設定します。設定することでタッチバーのボタンに 1 回タッチするだけで複数キーを同時に押したのと同じように動作させることができます。
タッチバートリガー設定でカスタマイズできる項目がかなり多く迷いがちなため私の設定を手順に沿って解説します。
ボタンにアイコンを表示する場合
まず、ボタンにアイコンを設定している場合の設定です。
初期設定からカスタマイズしてる点は以下のとおりです。
- ボタンタイトル (動作がわかりやすい名前)
- 背景色 (背景色に同化させたいためブラックを指定)
- アイコン (アイコン画像を指定)
- ボタン表示(アイコン or タイトル)
具体的にアイコンが必要なボタン(チェックボックスやトグルなど)はアイコンを設定し、必要ないもの(見出しや箇条リスト、番号付きリストなど)はテキストを設定しています。
背景色は背景色に同化させたいため黒(#000000)を設定し、アイコンを設定しています。アイコンはデフォルトで用意されていますが、使いたいアイコンがない場合は PC 上や、クリップボードを参照しての設定もできます。私はデフォルトで用意されているIoniconsさんのアイコンの中から選択しました。
また、ボタンにアイコンを表示したい場合は、ボタンアイコンの選択項目から「アイコンのみ表示、テキストなし」にチェックが入っている必要があります。
ボタンにアイコンを表示しない(テキストのみ)の場合
ボタンにアイコンを設定せずにテキストのみの場合は簡単に作成できます。
デフォルトの設定からボタンタイトルを変更するだけでボタンの作成ができます。このときにテキストの色や背景色を他のボタンと同じ用にすることで違和感なくボタンとして並べることができます。
テキストをボタンに表示する場合、ボタンには、ボタンタイトルに設定したもの表示されますが、ボタンタイトルが設定されていないとボタンに何も表示されないため注意が必要です。
アクションの割り当て
画面真ん中のアクション設定からタッチしたときに行うアクションを設定できます。
今回はショートカットキーが押されたことを Notion のアプリに伝えたいため、「キーボードショートカットを送信する」の項目に設定したいショートカットキーを設定します。
以下は、テキスト表示(⌘ + ⌥ + 1)をボタンへ設定しているアクションです。
このように設定することで、該当するボタンをタッチしたときに設定したショートカットキーが必ず実行されるようになります。また複数のキーを連続して入力する場合は「追加のアクションを追加」からキーボードショートカットキーを更に追加できます。Notion で引用ブロック挿入のショートカットキー( " + space)のようなシフトキーを使う複雑な組み合わせも実行させることができます。
割り当てられるアクションにはショートカットキーだけでなく Apple Script やシステム制御コマンドなどもしていできるため、アイデアしだいではデフォルトのタッチバーよりも使いやすい自分だけのオリジナルタッチバーが作れます。
キーボードでショートカットキーを覚えていれば、迷うことはありませんが、常にタッチバーに表示されてからでも操作できることで操作の自由度が高まります。
おわりに
タッチバーを BetterTouchTool を使ってカスタマイズしてみました。キーボードを使って文章を入力する際は、キーボードでショートカットを入力するほうが指の移動が少ないため早く入力できます、しかしタッチバーという選択肢が増えることで操作しやすくなります。検索もワンタッチで呼び出せるためおすすめです。記事内で紹介した機能のほかにも BetterTouchTool を導入することでタッチバーやトラックパッドのポテンシャルを最大限に引き出すことができるため、各々使いやすいようにカスタマイズしてみてください。
Notion のアプリも M1 チップに最適化されたものが配信されていたりと開発が進んでいるので、今後 Notion のアプリで公式にタッチバーでの操作がサポートされるといいですね。
以上、ここまで読んでいただきありがとうございました。
参考
お前らの Touch Bar はダサい - Qiita
BetterTouchTool で TouchBar を自分好みにカスタマイズ・変更する方法