[XD Plugin]Direct text copy(テキストを直接コピー)
みなさん、Adobe XD(以下XD)プラグインはもう作りましたか？
まだ何を作るか迷っている方はHello worldの次に取り掛かるプラグインとしてこんなものはどうでしょうか？XDアプリ上でのコーディング作業が楽になると思いますよ！
直接テキストがコピーできない！問題を解決するプラグイン
XDでは、オブジェクトを選択するとオブジェクト情報がそのままクリップボードに入り、SNSで画像をそのまま共有するのにとても便利…ですが、コーディングをするのにテキストを取ろうとすると、一度編集状態にして文字を選択する必要がありました。
0. 下準備しよう
XDを立ち上げて、メニューからプラグイン>開発用>開発フォルダーを開くでdevelopフォルダーを開き、そこに新しいフォルダーを作ります。
今回はcopy-textとでもしておきましょう。日本語のフォルダー名は避けます。
1. ショートカットキーをセットしたmanifest.jsonを準備する
今回の肝になるのはこのmanifest.json。いくらダイレクトでコピーできるようになってもいちいちメニューを開いていては面倒くさくてたまりません。
{"name": "RepeatGrid Fitter","id": "copy-text-someword","version":"1.0.0","description":"copy text from Text objects","host":{"app":"XD","minVersion":"13.0.0"},"uiEntryPoints":[{"type":"menu","label": "Copy Text","commandId":"mainCommand","shortcut": { "mac": "Cmd+Alt+C", "win": "Ctrl+Alt+C" }}]}
太字の部分を見てください。Cmd/Ctrl+Alt+Cでコピー機能が動くように指定しています。このようにしてshortcutの項目に、macとwindows別々に指定します。
特殊キーはそのままの名称(Cmd,Ctrl,Opt/Alt,Shift)で使えるので指定も簡単です。現在はCmdかCtrlを含んでいないと機能しないことに注意してください。キー同士は+(半角)で結びます。
uiEntryPointsが配列になっているのはXDプラグインは複数のコマンドを登録できるからです。テキスト周りのコマンドをどんどん追加して行くと便利そうですね。
さて、これでショートカットキーの準備ができました。
2. main.jsでクリップボードにテキスト情報を追加しよう
今回は複数のオブジェクトを選択してその中からテキストを抜き出すように作りました。
コピー＆ペーストで使えますが簡単にコメントで解説しています
const {Text} = require("scenegraph");// テキストオブジェクトを使うよ！のおまじないconst clipboard = require("clipboard");// クリップボードを使うよ！のおまじないfunction mainFunction(selection) {let selectedTexts = [];const textElements = getTextElements(selection);if (textElements.length == 0) return;for(let i=0;i<textElements.length;i++){selectedTexts.push(textElements[i].text);// Textオブジェクトのtextプロパティにすべての文字列が入っています。改行もok}clipboard.copyText(selectedTexts.join("\n"));// クリップボードにテキストをコピー}function getTextElements(selection) {const textElements = [];// 選択しているオブジェクトをチェックしてTextオブジェクトだけ抜き出しますfor(let i=0;i<selection.items.length;i++) {if(selection.items[i] instanceof Text)//チェック部分textElements.push(selection.items[i]);}return textElements;}module.exports = {commands: {mainCommand: mainFunction,//この関数を使ってね}};
manifestとスクリプトが完成したので動かしてみましょう。
動きましたか？
まとめ
XDのプラグインは、設定のための入力画面を作らなければ簡単です。ドキュメントを見ながらいろいろ作って共有していきましょう！
