Table of Contents
- Android StudioでTouch Barをカスタム
- Touch BarにHot Reloadを表示させるには
- 手順1. キーマップ設定の確認
- 手順2. マクロの作成
- 手順3. アイコンのダウンロード
- 手順4. Touch Barへの登録
- 環境について
Android StudioでTouch Barをカスタム
Android Studio、もといIntelliJ IDEA(Android Studioのベースソフト)にはTouch Barをカスタマイズする機能が搭載されています。
軽く方法を解説しますと、
- ⌘ + , でSettingsを開く
- 「Appearance & Behavior」→「Menus and Toolbars」→「Touch Bar」の中身を編集
と言う感じでできます。(⌘との同時押しなどで機能するフォルダーもあるため、よくフォルダー名を見て編集してください)
私は普段Flutterでアプリ開発をしているので、Flutter Hot ReloadがTouch Barにあるとかなり便利です。そこで、「Default」→「Touch Bar Run/Debug Actions」に「Flutter Hot Reload」を追加しようとしたわけです。
しかし表示されません。
明らかに追加されていますが、
上のように、Hot Reloadが表示されません。
というわけで、対処法を作りました。
Touch BarにHot Reloadを表示させるには
結論から言うと、直接表示させることはできません。いくら試しても出てきませんでした。なので、回り道をして別のアプローチで登録します。
手順1. キーマップ設定の確認
ここでは、ショートカットキーとマクロを利用する方法で実現します。
まず、⌘ + , を押して設定画面を開き、「Keymap」をクリックします。その中の検索ボックスで「Hot Reload」と検索します。すると「Flutter Hot Reload」が表示されるはずです。ここで、日本語配列のMacだと注意。日本語配列のMacには 「\」キーが存在しません 。そのため、初期設定のショートカットキーは使えません。
「Flutter Hot Reload」をダブルクリックし、「Remove ⌘\」をクリックして削除し、再度ダブルクリックし「Add Keyboard Shortcut」をクリックします。そして⌘キーと、Windowsキーボードでは「\」のある「_」キーの同時押しに設定します。
手順2. マクロの作成
次はマクロを作成します。Edit→Macros→Start Macro Recordingをクリックし、先程のショートカットキーを同時押しし、右下に表示される停止ボタン(赤い四角)をクリックします。
マクロ名を入力します。「Flutter Hot Reload」としてください。
手順3. アイコンのダウンロード
このままマクロをTouch Barに登録すると「Flutter Hot Reload」という文字になってしまって格好悪いし分かりにくいので、それっぽいアイコンをダウンロードします。
以下のサイトから「lightning」で検索にかけて、稲妻アイコンをSVG形式でダウンロードしてください。(右下)
https://jetbrains.design/intellij/resources/icons_list/
ダウンロード後は解凍してください。
手順4. Touch Barへの登録
⌘ + , →「Appearance & Behavior」→「Menus and Toolbars」→「Touch Bar」(右側の画面)→「Default」→「Touch Bar Run/Debug Actions」→「Run」をクリックし、上部の「＋」→「Add Action...」をクリックします。
「Macros」→「Flutter Hot Reload」をクリックし、下部の「icon:」の右側のフォルダーアイコンをクリックし、ダウンロードしたアイコン(lightning.svg)を選択して「Open」をクリックし、「Set Icon」をクリックし、OKをクリックします。最後に設定画面でOKをクリックして完了です。
上のようになりました。位置を変更するには、設定上部の上下三角アイコンをクリックして並び替えます。
環境について
今回の説明で利用した環境です。
- Android Studio 4.2 beta6
- Material Theme UIプラグイン導入済み
- Flutter Plugin 55.0.2