CSS Nite LP67「All About XD update 2020」とAdobe MAX Japan 2019のXD Short Sessionsでスピーカーを担当しました。XDプラグインやシステム環境設定・Keyboard Maestroなどの自動化アプリケーションを利用し，2秒かかる手間を0.3秒に縮めるような小さな効率化をする話です。
1回目の記事【まとめ】プラグインとカスタマイズで作ろう！自分だけの最速XD（1）では，いくつかの方法でXDプラグインにショートカットを設定しました。
2回目の今回は，Keyboard Maestroなどの自動化アプリケーションを利用してXDをもっと便利にします。
前回の記事でも少しだけ紹介しましたが，自動化アプリケーションを使うとショートカットに設定できるキーの種類が増える，Adobe XDだけではできないコンビネーションを作れるなど，より自分に合わせた操作にカスタマイズできます。次のようなアプリがあります。
macOS用
Windows用
Keyboard Maestroを使ってみる
mac用自動化アプリの中で特におすすめなのはKeyboard Maestroです。多機能で性能が良いのはもちろん，自動化機能（マクロ）の新規作成とその管理が1番手軽でした。
マクロは基本的に，任意のきっかけ（トリガー）で指定した動作（アクション）を実行します。
トリガーには［指定したキーを押したとき］［指定したマウスボタンを押したとき］など手動で発動させるものや［ウインドウが切り替わったとき］など自動で発動するものがあります。実行できるアクションは［指定したキーを押す］［メニューを選択する］［コピー/ペーストする］［プログラムを実行する］［マウスクリックをシミュレートする］など多岐にわたり，これらを複数組み合わせてマクロを作ります。
XDプラグインは［メニューを選択する］または［指定したキー（ショートカット）を押す］アクションを経由すると実行可能です。それでは自動化アプリとXDプラグインの連携を試してみましょう。
今回作る2つのマクロのデータを置いておきます。参考にどうぞ。
テキストをペーストした瞬間行ごとに分割する
XDプラグインのSplit Rowsを使うと，アートボードに置いてあるテキストを行ごとに分割できます。ただこれだとクリップボードにある文章を分割したい場合，一旦アートボードにペーストする必要があります。
面倒なので，プラグインが自動でクリップボードの中身を取得・ペーストしてほしいのですが，残念ながらプラグインAPIではそれができません。そこで，Keyboard Maestroを使ってペーストしてからSplit Rowsを実行する作戦をとります。
まずは新規マクロを作り，⊕ New Trigger から Hot Key Trigger を選びます。これがショートカット設定なのでcommand+shift+Vなど，お好みのキーを割り当ててください。
やることは ①ペースト，②メニュー「Split Simple」の選択 の2つです。⊕ New Action を選び，ウインドウ左側に出てきたアクション一覧から ①Paste，②Select or Show a Menu Item の2つを引き出します。PasteはClipboardカテゴリ，Select or Show a Menu ItemはInterface Controlカテゴリに含まれています。
実行するメニューは，Select or Show a Menu Item 枠内右の Menu ∨ の部分を押すとその場で選べます。XD->プラグイン->Split Rows->Split Simple と順番に辿ってください。そこまでできたらマクロ完成です。
command+shift+Vを押すなどして実行すると，クリップボード内のテキストをペーストすると同時に一行ごとに分割します。
アセットのカラーをショートカットで適用する
プラグインを使わず，Keyboard Maestroだけでもなかなか便利な機能になります。特に汎用性が高いのは［画像を探してクリック］です。
普段アセットのカラーを適用するときは，オブジェクトや文字を選択した状態でアセットパネルのカラー項目をクリックしていると思います。この方法はカーソルが画面上を行ったり来たりして不便です。また，文字の一部を選択しているとプラグインは使えないようなのでその方向もあまり期待できません。Keyboard Maestroでショートカットを設定しましょう。
やることはクリックしたい場所のスクリーンショットを撮り，Keyboard Maestroがその画像を表示されている画面から探してクリックする，という流れです。
Keyboard Maestroで新しいマクロを作り，control+1など適当なショートカットを割り当ててください。アクションにはClick at Found Imageだけを指定します。
次にcontrol+shift+command+4でクリックしたいアセットパネルの場所をスクリーンショットに撮り，Click at Found Imageアクション枠内にあるImageの右の四角にペーストします。ここが認識する画像を収めるスペースです。
ここまでできたらマクロ完成です。control+1を押すとカーソルがアセットパネルの指定した項目に自動で移動しクリックされます。画像が認識されなかったり余計な場所が検出されるときは，認識画像スペースの下にあるスライダで検出精度を調整してください。左が厳しく右が甘い判定です。
Restore Mouse Locationというオプションにチェックを入れると，カーソルの位置が移動せずクリックだけをしてくれるため，さらに作業が速くなります。
［画像を探してクリック］を使うと，識別できる目印があれば何でもクリックやフォーカスが可能です。境界線のスポイトを呼び出すような，クリックするしかアクセス手段がないものに使うと良いでしょう。ドラッグ＆ドロップさえ可能なので，不安定さをコントロールできれば相当な戦力になります。ぜひ自分に合わせた設定を作ってみてください。
長くなったので次回に続きます。次回はAutomatorで動作を記録してUIを操るなど，やや高度なことをする予定です。
このサイトで配布しているスクリプトやその他のファイルを，無断で転載・配布・販売することを禁じます。
それらの使用により生じたあらゆる損害について，私どもは責任を負いません。
スクリプトやファイルのダウンロードを行った時点で，上記の規定に同意したとみなします。
シリーズ記事：
- 【まとめ】プラグインとカスタマイズで作ろう！自分だけの最速XD（1）
- 【まとめ】プラグインとカスタマイズで作ろう！自分だけの最速XD（2）
- 【まとめ】プラグインとカスタマイズで作ろう！自分だけの最速XD（3）
![[archive] minimumArea 3.0.0](https://sttk3.com/wordpress/wp-content/uploads/2024/06/2024_0617_01_wordpress-150x150.png)
