Adobe XDプラグインをつくってみよう

© 2018 Adobe. All Rights Reserved. Adobe Confidential.
Adobe XDプラグインをつくってみよう
@yoshikinoko Yoshiki Takeoka （⽵岡義樹）| Program Manager, Japan R&D, Adobe

Adobe XDプラグインの紹介

#xdug_sendai #XDPlugin#sfeugXDに機能を追加できるプラットフォーム
XDプラグインは⾃由に機能を追加・公開できます (2018/10-)

#xdug_sendai #XDPlugin#sfeugIcondrop
4

#xdug_sendai #XDPlugin#sfeugGoogle Sheets for Adobe XD
5

XDプラグインをつくってみよう！

#xdug_sendai #XDPlugin#sfeugAdobe XD プラグインサンプルファイル
http://bit.ly/xdplugin-jp
7
01-01-scenegraph-sample

#xdug_sendai #XDPlugin#sfeug実際にXDプラグインを作ってみよう！
1
ファイルをダウンロードし解凍する
2 “プラグイン”>”開発版”>“開発フォルダーを表⽰”
3
01-01-seenegraph-sample を『フォルダーごと』
開発フォルダー(develop)にコピー＆ペースト
4
“プラグイン”>”開発版”>“プラグインを再読み込み”
もしくは Cmd/Ctrl+Shift+R
5 “プラグイン”> “Red Square”
6 🎉プラグイン起動 🎉
8
2
3
4
5
1

#xdug_sendai #XDPlugin#sfeug動かしてみよう！
9

#xdug_sendai #XDPlugin#sfeug
1. ZIP形式で圧縮、拡張⼦.xdxに変更
2. ダブルクリックでインストール
開発フォルダーに
フォルダごとコピー
ファイル構成とフォーマット & ビルド⽅法は2種類
設定ファイル
manifest.json
処理のコード
main.js
アイコン
images/icon-24px.png
images/icon-48px.png
10
ファイル構成ビルド＆インストール
開発⽤
プロダクション（本番）⽤

#xdug_sendai #XDPlugin#sfeugmanifest.json （設定ファイル）
Key 説明
id Adobe I/O Console で取得
name Adobe I/O Console のプロジェクト同じ名前を推奨
version プラグインのバージョン (x.y.z 形式)
icons アイコン画像 (24px, 48px)
host.app “XD” （固定値）
host.minVersion プラグインが動作するXDの最低バージョン
uiEntryPoints プラグインを起動させるメニュー、パネルの設定
11

manifest.json
manifest.json の uiEntryPoints
12
main.jsでexportされたFunction

#xdug_sendai #XDPlugin#sfeugショートカットキーを設定する
13
manifest.json

XDのAPIの読み込み
scenegraph に正⽅形を追加
プラグインの起動プロセス
14
main.js
manifest.json
Developer Consoleに表⽰する

#xdug_sendai #XDPlugin#sfeugmain.js を構成する3つの要素
15
require
exports
functions
manifest.jsonの設定値
XDのAPIの読み込み
01-01-scenegraph-sample/main.js

#xdug_sendai #XDPlugin#sfeugDeveloper Console
16

#xdug_sendai #XDPlugin#sfeugScenegraphとは
17
• Scenegraph: XDで描画されるオブジェクトの構成
• selection: 選択中のオブジェクト
• documentRoot : RootNode以下のファイル全体
selection.insertionParent.addChild(shape); //コピペと同じように要素を追加
sceneNode

#xdug_sendai #XDPlugin#sfeugEdit Context ‒ 編集できるノードには制限あり
選択中のオブジェクト（と付近のオブジェクト）のみ編集可能
18
選択中のノードの共通の親
ノードの配下のオブジェクト
が編集可能
Group以外のコンテナ
(RepeatGridなど）の⼦要素
は編集不可
アートボード直下のオブジェ
クトを選択すると
RepeatGridの⼦要素以外が編
集可能

#xdug_sendai #XDPlugin#sfeugXD の APIを利⽤するときは requireで読み込む
module 説明
scenegraph require(’scenegraph’) documentNodeの編集
application require(’application’) XD, OS のversion、rendition
commands require(’commands’)
group, ungroup, createMaskGroup,
bringToFront
storage require(’uxp’) ローカルストレージ
clipboard require(’clipboard’) clipboard.copyText()
cloud require(‘cloud’) 共有URL
interactions require(‘interactions’) プロトタイプのプロパティ
viewport require(‘viewport’) 作業中のビューの変更
19

#xdug_sendai #XDPlugin#sfeugXDプラグイン開発の参考資料
20
Official Github (quick-start)
https://github.com/adobeXD/Plugin-samples
Adobe XD Platform
https://adobexdplatform.com/
Twitter #XDplugin
Medium - Adobe Tech Blog
https://medium.com/adobetech

プラグインパネルを利⽤する

#xdug_sendai #XDPlugin#sfeugプラグインパネルのサンプルコード
22
03-01-panel-sample

#xdug_sendai #XDPlugin#sfeugプラグインパネルの表⽰と更新
03-01-panel-sample

#xdug_sendai #XDPlugin#sfeugプラグインパネルにおけるインタラクション
24
§ panel - show
§ プラグインパネルが表⽰される
§ panel - update
§ 選択中のオブジェクトが編集・更新される
§ panel - hide
§ プラグインパネルが閉じられる
(アプリ終了時、ファイルを閉じたときは
「呼ばれません」）
§ UI Interactions
§ パネル内のUIの操作
03-01-panel-sample

#xdug_sendai #XDPlugin#sfeugプラグインパネルの表⽰と更新のロジック
25
manifest.json main.js
03-01-panel-sample

#xdug_sendai #XDPlugin#sfeugプラグインパネルのライフサイクル
26
#1 show
パネルのUIのDOMを作成
event引数にDOMを追加
#2 update
選択中のオブジェクト(selections)に応じて、
パネルのDOMを更新
#3 hide
パネル閉じる（あまり利⽤しない）
03-01-panel-sample/main.js

モーダルダイアログを利⽤する

#xdug_sendai #XDPlugin#sfeugモーダルダイアログのサンプルコード
28
02-01-dialog-sample

#xdug_sendai #XDPlugin#sfeugXDプラグインの表⽰するモーダルダイアログ
29
02-01-dialog-sample

#xdug_sendai #XDPlugin#sfeugモーダルダイアログの利⽤例
30
確認・同意画⾯の提⽰エラーメッセージの表⽰

#xdug_sendai #XDPlugin#sfeugモーダルダイアログのインタラクション
§ ESCキーの押下
§ ※無効化できません
§ Promise の値に “reasonCanceled” が設定される
§ ENTERキーの押下
§ form.onsubmit()が呼ばれる
§ ボタンクリック
§ OKとCancelの2つを⽤意
§ 各⾃eventlistenerの設定が必要
31
submit前に必ずチェック！

#xdug_sendai #XDPlugin#sfeugモーダルダイアログを表⽰する
32
#1
document.bodyにDOMを追加
Dialog Objectを作成
#2
Dialogを表⽰
dialog.showModal(); //Async,Promise
#3
Dialogを閉じる
dialog.close(returnvalue);
02-01-dialog-sample/main.js

#xdug_sendai #XDPlugin#sfeugモーダルダイアログの描画（DOMの追加）
33
<form method=“dialog”>
post, getは動作しない
<dialog>
input タグのボタンは不可
※下記のボタンは使えません
•<input type="button" />
•<input type="reset" />
•<input type="submit" />
uxp-variant
inline styleは書かない

#xdug_sendai #XDPlugin#sfeug⼊⼒値を受け取り、モーダルダイアログを閉じる
34
dialog.close()
ユーザーの⼊⼒値を含めない
Promiseを返す
ESC Keypress
dialog.close(‘reasonCanceled’
)が呼ばれる
Dialogを開いたあとのScenegraphの
操作は⾮同期で処理

#xdug_sendai #XDPlugin#sfeug動かしてみよう！
35
02-01-dialog-sample

開発におすすめのツールなど

#xdug_sendai #XDPlugin#sfeugNode project として開発するのがオススメ
37
@adobe/xdpm
• Common JS にトランスパイル
• Polyfill
• リソース（js, css, pngなど）のバンドル
• npm install @adobe/xdpm
• 開発フォルダー(develop)へプラグインをインストール
• プラグインのファイル構成の検証
01-02-scenegraph-sample, 02-02-dialog-sample が node project のテンプレートです

プラグイン開発の注意点

#xdug_sendai #XDPlugin#sfeug同期（Synchronized）と⾮同期（Asynchronized）
§ 同期（Synchronized）で実⾏するケース
§ 処理が⾼速（2秒程度）で終了するとき
§ ⾮同期（Asynchronized）で実⾏するケース
§ storage, Network などの⾮同期関数を実⾏するとき
§ 処理に時間がかかるとき
§ Dialogを表⽰したうえで「作業の進捗」を表⽰し、処理中の「キャンセル」ができるようにする
§ Dialogを表⽰したり、(storage, Networkなどの）⾮同期関数を実⾏した後にScenegraphを操作
するとき
39
Plugin Error: Plugin `Plugin-id` is not permitted to make changes from the background. Return a Promise to
continue execution asynchronously.
https://adobexdplatform.com/plugin-docs/xdpegs/2-scenegraph.html#29-know-when-to-use-asynchronous-logic
同期処理に関するエラーメッセージの例

#xdug_sendai #XDPlugin#sfeug基本はES5ベース、 ES2015(ES6)は⼀部サポート
XDで動作するES2015の関数説明
Template literals テンプレート⽂字列
Classes クラス構⽂
Block-scoped variables ( let , const ) ブロック内変数宣⾔
Object destructuring オブジェクトの分割代⼊
Default parameters デフォルトパラメーター
Spread and Rest ( … ) 配列の分割代⼊
Arrow functions アロー関数
Asynchronous functions ( async / await ) async/await による⾮同期処理
Promises Promise を⽤いた⾮同期処理
40

#xdug_sendai #XDPlugin#sfeugXDのプラグインは node.js でもブラウザでもありません！
§ node.js やブラウザにある APIがそのまま動作する訳ではありません
§ 例えば・・・下記の関数は「現時点では」サポートされていません
§ HTMLIFrameElement
§ ⼀部のcssプロパティ
§ setTimeout (2019/02 よりサポート）
§ clearTimeout(2019/02 よりサポート）
§ cancelAnimationFrame (2019/04 よりサポート）
§ requestAnimationFrame (2019/04 よりサポート）
41

#xdug_sendai #XDPlugin#sfeugNode.js (npm) は動くが・・・注意が必要
§ node_modules, package.json のフォルダをチェックしません。
§ webpack, rollup などでバンドルが必須
42
const someLib = require("somelib"); // no package.json lookup
xdpm と webpack(+babel) の組み合わせはオススメです

#xdug_sendai #XDPlugin#sfeugプラグインパネルとモーダルダイアログの使い分け
プラグイン操作中にキャンバス（オブジェクト）にアクセスする必要があるか？
43
アクセス不要
ショートカットキー
アクセス必要
モーダルダイアログプラグインパネル
プラグインデザインガイドライン https://github.com/AdobeXD/plugin-design-assets
（⽇本語版翻訳中 https://adobe.ly/2ksZMpi ）

#xdug_sendai #XDPlugin#sfeugプラグインデザインガイドライン
44
https://github.com/AdobeXD/plugin-design-assets
⽇本語版翻訳中 https://adobe.ly/2ksZMpi

最新情報をチェックしよう！

#xdug_sendai #XDPlugin#sfeugGithubやForumの最新情報をチェックをお願いします
§ GithubのアップデートやForumの議論が活発に⾏われています
§ 困ったら #XDPlugin のハッシュタグでつぶやいてください。
§ 公式リファレンスのミスがForumで発覚した事例も・・・orz、ごめんなさい
§ Dialog の Keypress ENTER でdialog.close()の引数が渡せない
46
Forumのスレ ‒ “ok”が渡される
https://forums.adobexdplatform.com/t/creating-modal-dialogs-is-so-hard/313/23
公式リファレンス- “ok”が渡されない
https://adobexdplatform.com/plugin-docs/reference/ui/dialogs/dismissal.html

Adobe XDプラグインをつくってみよう

Adobe XDプラグインをつくってみよう

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Adobe XDプラグインをつくってみよう

Ähnlich wie Adobe XDプラグインをつくってみよう (20)

Adobe XDプラグインをつくってみよう