Adobe XDのオブジェクトをPNGに変換するAppleScript（Automatorサービス）

11477 ワード
Automator AppleScript AdobeXD AppleScript テキストリンク

コピーはSVG形式に？

クリップボードにコピーしたオブジェクトはSVG形式になってしまうようですね。

https://twitter.com/tonkotsuboy_com/status/1163811210141159425

これをコピーして……

エディタにペースト

pngをbase64エンコードしてる。
これはこれでそういう考えだからいいけど、そのまま画像として欲しい時もある……

すると〜〜
https://twitter.com/sttk3com/status/1163820964284489730?s=20

さすがはしたたか企画さん。
なるほどas «class PNGf»)でPNGが取り出せるんだ〜

じゃあ、サービスつくりましょう！

コードの確認

まずはスクリプトエディタで動作確認

XDからpng形式でクリップボードに
tell application "Adobe XD"
    activate
    tell application "System Events"
        tell process "Adobe XD"
            keystroke "c" using {command down}
            set the clipboard to (the clipboard as «class PNGf»)
        end tell
    end tell
end tell

画像としてクリップボードに格納されているので、それをプレビュー.appのファイルメニューからクリップボードから新規作成でファイル作成。

よし、できた。

Automatorでサービスを作る

Automatorを起動し、ファイルメニューから新規、サービスを選択。

左側のアクションからAppleScriptを実行をダブルクリック。
入力は入力なし、検索対象はAdobe XDをそれぞれ選択。
下記のコードをコピー＆ペースト。
いきなりコード量が増えたのは、サービスにするならデスクトップにファイルとして保存するようにしたから。

クリップボードにあれば十分であれば、上記のコードをコピー＆ペーストしてください。

適宜名前をつけて保存。
ファイルは~/Library/Services/に保存されます。

XDから選択オブジェクトをpngファイルに書き出す
--XDからクリップボードに
my setClipboard()

try
    set png to the clipboard as «class PNGf»
on error
    error number -128
end try


--保存パスの生成
set writePath to my getWritePath()


--デスクトップにタイムスタンプ名で保存
my writePng(png, writePath)


--選択したオブジェクトをクリップボードにコピー
on setClipboard()
    tell application "Adobe XD"
        activate
        tell application "System Events"
            tell process "Adobe XD"
                delay 0.1
                keystroke "c" using {command down}
                delay 0.2
                set the clipboard to (the clipboard as «class PNGf»)
            end tell
        end tell
    end tell
end setClipboard


--保存パスの生成
on getWritePath()
    set desktopPath to path to desktop as text
    set timestamp to do shell script "date +%Y%m%d_%H%M%S"

    return desktopPath & timestamp & ".png"
end getWritePath

--ファイル書き出し
on writePng(png, writePath)
    set fh to open for access writePath with write permission

    try
        set eof fh to 0
        write png to fh starting at eof
        close access fh
    on error
        close access fh
    end try
end writePng

ショートカットの設定

サービスで作ったのでショートカットも設定しましょう。
システム環境設定からキーボード、ショートカットタブを選択したら、サービスをクリック。
先ほど保存したファイル名を選択してショートカットキーを割り当てましょう。