Adobe XD Plugin「Scenegraph」の操作とDialogの作り方

© 2018 Adobe. All Rights Reserved. Adobe Confidential.
Scenegraphの操作とDialogの作り方
Yoshiki Takeoka （竹岡義樹）| Program Manager, Japan R&D, Adobe

Japan R&Dの紹介
2

貂明朝テキスト
3

Match Font for Japanese
4

Adobe I/O - https://adobe.io/
5

Scenegraphの基本
スターターキットを触ってみよう！

サンプルファイル
http://bit.ly/xdplugin-jp
7
01-01-scenegraph-sample

Starter-project
 設定ファイル
 Plugin-ID
 Menu-UI
 Icon
 処理のコード
 アイコン
8
manifest.json
main.js
images/icon.png

manifest.json
9
Plugin Manager
Menu
アイコンは96px固定
name, descriptionは
日本語未対応
https://adobe.ioで取得
日本語使えます

Plugin Manager と manifest.json の関係
10
description
name
icons
version

Menu と manifest.json の uiEntryPoints
11

main.js を構成する3つの要素
12
manifest.jsonの設定値
require
selection, documentRoot
exports
functions
Scenenodeに正方形を追加

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

API Modules – APIを利用するときはrequire!
 application require(’application’)
 XD, OSのバージョン、rendition の書き出し
 scenegraph require(’scenegraph’)
 documentNode(Artboard, Rectange, Ellipse, Line, Path … など）の参照、変更、追加、削除
 commands require(’commands’)
 selection に含まれるオブジェクトへの操作
 group, ungroup, createMaskGroup, bringToFront
 storage require(’uxp’)
 ローカルストレージへのアクセス
 clipboard require(’clipboard’)
 現在は clipboard.copyText() のみ可能 clipboard からアートボードへのコピペは不可
 Network require不要(global)
 websocket, XMLHttpRequest, Fetch
14

main.js をみなおしてみる
15
manifest.jsonの設定値
require
selection, documentRoot
Scenenodeに正方形を追加
exports
functions

動かしてみよう！
16

Project Template の種類
17
Official Github (quick-start)
https://github.com/adobeXD/Plugin-samples
Adobe I/O
https://console.adobe.io/plugins
XD Awesome (Community)
https://github.com/AdobeXD/xd-awesome

Dialogの基本
ユーザーの入力を取得する

サンプルファイル
http://bit.ly/xdplugin-jp
19
02-01-dialog-sample

Dialog - XDで表示される UIのこと
20

Dialogの利用例
21
確認・同意画面の提示エラーメッセージの表示

Dialogにおけるインタラクションの種類
 ESCキーの押下
 ※無効化できません
 Promise の値に “reasonCanceled” が設定される
 ENTERキーの押下
 form.onsubmit()が呼ばれる
 ボタンクリック
 OKとCancelの2つを用意
 各自eventlistenerの設定が必要
22
submit前に必ずチェック！

Dialog を表示する
23
renderDialog() //Dialog Objectを作成
dialog = document.querySelector('#dialog');
dialog.showModal(); //Async,Promise
dialog.close(returnvalue);

Dialogの描画 – DOMオブジェクトを追加する
24
<form method=“dialog”>
post, getは動作しない
<dialog>
input タグのボタンは不可
※下記のボタンは使えません
•<input type="button" />
•<input type="reset" />
•<input type="submit" />
uxp-variant
<footer>に<button>を配置
inline styleは書かない

eventlistenerの設定
 <dialog>
 DOMに追加すること！
 dialog.close()
 ユーザーの入力値を渡さない
 ユーザーのインタラクション
 Cancel Button - Click
 OK Button – Click
 ENTER – Keypress
 e.preventDefault() – bug?
 ESC – Keypress
 イベントリスナは設定不要
 Promiseの返り値が 'reasonCanceled’
25

dialog.close() – 入力値を受け取ったあとに閉じる
26
dialog.close()
ユーザーの入力値を含めない
Promiseを返す
ESC Keypress
dialog.close(‘reasonCanceled’
)が呼ばれる
Dialogを開いたあとのScenegraphの
操作は非同期で処理

動かしてみよう！
27

プラグイン開発にあたってのお願い
気をつけて頂きたいことなど

同期（Synchronized）と非同期（Asynchronized）
 同期（Synchronized）で実行するケース
 処理が高速（2秒程度）で終了するとき
 非同期（Asynchronized）で実行するケース
 storage, Network などの非同期関数を実行するとき
 処理に時間がかかるとき
 Dialogを表示したうえで「作業の進捗」を表示し、処理中の「キャンセル」ができるようにする
 Dialogを表示したり、(storage, Networkなどの）非同期関数を実行した後にScenegraphを操作
するとき
29
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
同期処理に関するエラーメッセージの例

Edit Context – 編集できるノードの制限
30
• 選択中のノード
• 選択中の直下のノード
Edit Context がRootNode
（何も選択していないとき）
Edit Context がRootNode以外のとき
• アートボード
• アートボード直下のノード
• PasteBoard中にあるノード

基本はES5ベース、 ES2015(ES6)は一部サポート
31
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 を用いた非同期処理

XDのプラグインは node.js でもブラウザでもありません！
 node.js やブラウザにある APIがそのまま動作する訳ではありません
 例えば・・・下記の関数は「現時点では」サポートされていません
 setTimeout
 clearTimeout
 cancelAnimationFrame
 requestAnimationFrame
 HTMLIFrameElement
 一部のcssプロパティ
32

Node.js (npm) は動くが・・・注意が必要
 node_modules, package.json のパスはチェックしません。
 webpack, rollup などでバンドルが必須
 requireでは、localfileのみチェックします。
33
const someLib = require("somelib"); // no package.json lookup
xdpm と webpack(+babel) の組み合わせはオススメです

最後に・・・

GithubやForumの最新情報をチェックをお願いします
 GithubのアップデートやForumの議論が活発に行われています
 Adobeの社員も見てます！更新してます。
 公式リファレンスのミスがForumで発覚した事例も・・・orz、ごめんなさい
35
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
事例：Dialog の Keypress ENTER でdialog.close()の引数が渡せない

Appendix

node の properties の更新はインラインで行わない
38
Good
• node.fill の値に代入して更新して
いる
• (node.fill のsetter が呼び出されて
いる）
Bad
• node.color.r への直接の書き込み
はできない

現在、Adobe I/O Console でプラグインを登録できない
39

開発用, xdxファイル経由のインストールのみPlugin Managerの日本語が利用可能
40

プラグインができる編集
 ノード（オブジェクト）にそのものに対する操作・編集
 属性の更新
 ノード削除
 ノードの追加
 複数のノード、ノードの構造を伴う編集
 グループ化
 グループ化解除
 Z値（背面、前面）への移動
41

オブジェクト（ノード）の座標系
42
Local
coordinates
Parent
Coordinates
Global
Coordinates

ローカル座標系で左上が (0,0)とは限らない
43
Text path
0,0 から宣言されていない

END

Adobe XD Plugin「Scenegraph」の操作とDialogの作り方

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Similar to Adobe XD Plugin「Scenegraph」の操作とDialogの作り方

Similar to Adobe XD Plugin「Scenegraph」の操作とDialogの作り方 (20)

Adobe XD Plugin「Scenegraph」の操作とDialogの作り方