SlideShare a Scribd company logo
1 of 47
Download to read offline
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
Adobe XDプラグインをつくってみよう
@yoshikinoko Yoshiki Takeoka (⽵岡義樹)| Program Manager, Japan R&D, Adobe
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
Adobe XDプラグインの紹介
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
#xdug_sendai #XDPlugin#sfeugXDに機能を追加できるプラットフォーム
XDプラグインは⾃由に機能を追加・公開できます (2018/10-)
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
#xdug_sendai #XDPlugin#sfeugIcondrop
4
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
#xdug_sendai #XDPlugin#sfeugGoogle Sheets for Adobe XD
5
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
XDプラグインをつくってみよう!
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
#xdug_sendai #XDPlugin#sfeugAdobe XD プラグイン サンプルファイル
http://bit.ly/xdplugin-jp
7
01-01-scenegraph-sample
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
#xdug_sendai #XDPlugin#sfeug実際にXDプラグインを作ってみよう!
1
ファイルをダウンロードし解凍する
http://bit.ly/xdplugin-jp
2 “プラグイン”>”開発版”>“開発フォルダーを表⽰”
3
01-01-seenegraph-sample を『フォルダーごと』
開発フォルダー(develop)にコピー&ペースト
4
“プラグイン”>”開発版”>“プラグインを再読み込み”
もしくは Cmd/Ctrl+Shift+R
5 “プラグイン”> “Red Square”
6 🎉プラグイン起動 🎉
8
2
3
4
5
1
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
#xdug_sendai #XDPlugin#sfeug動かしてみよう!
9
01-01-scenegraph-sample
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
#xdug_sendai #XDPlugin#sfeug
1. ZIP形式で圧縮、拡張⼦.xdxに変更
2. ダブルクリックでインストール
開発フォルダーに
フォルダごとコピー
ファイル構成とフォーマット & ビルド⽅法は2種類
設定ファイル
manifest.json
処理のコード
main.js
アイコン
images/icon-24px.png
images/icon-48px.png
10
ファイル構成 ビルド&インストール
開発⽤
プロダクション(本番)⽤
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
#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
01-01-scenegraph-sample
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
#xdug_sendai #XDPlugin#sfeug
manifest.json
manifest.json の uiEntryPoints
12
main.jsでexportされたFunction
01-01-scenegraph-sample
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
#xdug_sendai #XDPlugin#sfeugショートカットキーを設定する
13
01-02-scenegraph-sample
manifest.json
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
#xdug_sendai #XDPlugin#sfeug
XDのAPIの読み込み
scenegraph に正⽅形を追加
プラグインの起動プロセス
14
main.js
01-01-scenegraph-sample
manifest.json
Developer Consoleに表⽰する
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
#xdug_sendai #XDPlugin#sfeugmain.js を構成する3つの要素
15
require
exports
functions
manifest.jsonの設定値
XDのAPIの読み込み
scenegraph に正⽅形を追加
01-01-scenegraph-sample/main.js
Developer Consoleに表⽰する
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
#xdug_sendai #XDPlugin#sfeugDeveloper Console
16
scenegraph に正⽅形を追加
Developer Consoleに表⽰する
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
#xdug_sendai #XDPlugin#sfeugScenegraphとは
17
• Scenegraph: XDで描画されるオブジェクトの構成
• selection: 選択中のオブジェクト
• documentRoot : RootNode以下のファイル全体
selection.insertionParent.addChild(shape); //コピペと同じように要素を追加
sceneNode
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
#xdug_sendai #XDPlugin#sfeugEdit Context ‒ 編集できるノードには制限あり
選択中のオブジェクト(と付近のオブジェクト)のみ編集可能
18
選択中のノードの共通の親
ノードの配下のオブジェクト
が編集可能
Group以外のコンテナ
(RepeatGridなど)の⼦要素
は編集不可
アートボード直下のオブジェ
クトを選択すると
RepeatGridの⼦要素以外が編
集可能
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
#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
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
#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
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
プラグインパネルを利⽤する
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
#xdug_sendai #XDPlugin#sfeugプラグインパネルのサンプルコード
http://bit.ly/xdplugin-jp
22
03-01-panel-sample
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
#xdug_sendai #XDPlugin#sfeugプラグインパネルの表⽰と更新
03-01-panel-sample
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
#xdug_sendai #XDPlugin#sfeugプラグインパネルにおけるインタラクション
24
§ panel - show
§ プラグインパネルが表⽰される
§ panel - update
§ 選択中のオブジェクトが編集・更新される
§ panel - hide
§ プラグインパネルが閉じられる
(アプリ終了時、ファイルを閉じたときは
「呼ばれません」)
§ UI Interactions
§ パネル内のUIの操作
03-01-panel-sample
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
#xdug_sendai #XDPlugin#sfeugプラグインパネルの表⽰と更新のロジック
25
manifest.json main.js
03-01-panel-sample
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
#xdug_sendai #XDPlugin#sfeugプラグインパネルのライフサイクル
26
#1 show
パネルのUIのDOMを作成
event引数にDOMを追加
#2 update
選択中のオブジェクト(selections)に応じて、
パネルのDOMを更新
#3 hide
パネル閉じる(あまり利⽤しない)
03-01-panel-sample/main.js
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
モーダルダイアログを利⽤する
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
#xdug_sendai #XDPlugin#sfeugモーダルダイアログのサンプルコード
http://bit.ly/xdplugin-jp
28
02-01-dialog-sample
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
#xdug_sendai #XDPlugin#sfeugXDプラグインの表⽰するモーダルダイアログ
29
02-01-dialog-sample
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
#xdug_sendai #XDPlugin#sfeugモーダルダイアログの利⽤例
30
確認・同意画⾯の提⽰ エラーメッセージの表⽰
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
#xdug_sendai #XDPlugin#sfeugモーダルダイアログのインタラクション
§ ESCキーの押下
§ ※無効化できません
§ Promise の値に “reasonCanceled” が設定される
§ ENTERキーの押下
§ form.onsubmit()が呼ばれる
§ ボタンクリック
§ OKとCancelの2つを⽤意
§ 各⾃eventlistenerの設定が必要
31
submit前に必ずチェック!
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
#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
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
#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は書かない
02-01-dialog-sample/main.js
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
#xdug_sendai #XDPlugin#sfeug⼊⼒値を受け取り、 モーダルダイアログを閉じる
34
dialog.close()
ユーザーの⼊⼒値を含めない
Promiseを返す
ESC Keypress
dialog.close(‘reasonCanceled’
)が呼ばれる
Dialogを開いたあとのScenegraphの
操作は⾮同期で処理
02-01-dialog-sample/main.js
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
#xdug_sendai #XDPlugin#sfeug動かしてみよう!
35
02-01-dialog-sample
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
開発におすすめのツールなど
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
#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 のテンプレートです
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
プラグイン開発の注意点
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
#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
同期処理に関するエラーメッセージの例
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
#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
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
#xdug_sendai #XDPlugin#sfeugXDのプラグインは node.js でも ブラウザでもありません!
§ node.js や ブラウザにある APIがそのまま動作する訳ではありません
§ 例えば・・・下記の関数は「現時点では」サポートされていません
§ HTMLIFrameElement
§ ⼀部のcssプロパティ
§ setTimeout (2019/02 よりサポート)
§ clearTimeout(2019/02 よりサポート)
§ cancelAnimationFrame (2019/04 よりサポート)
§ requestAnimationFrame (2019/04 よりサポート)
41
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
#xdug_sendai #XDPlugin#sfeugNode.js (npm) は動くが・・・注意が必要
§ node_modules, package.json のフォルダをチェックしません。
§ webpack, rollup などでバンドルが必須
42
const someLib = require("somelib"); // no package.json lookup
xdpm と webpack(+babel) の組み合わせはオススメです
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
#xdug_sendai #XDPlugin#sfeugプラグインパネルとモーダルダイアログの使い分け
プラグイン操作中にキャンバス(オブジェクト)にアクセスする必要があるか?
43
アクセス不要
ショートカットキー
アクセス必要
モーダルダイアログプラグインパネル
プラグインデザインガイドライン https://github.com/AdobeXD/plugin-design-assets
(⽇本語版翻訳中 https://adobe.ly/2ksZMpi )
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
#xdug_sendai #XDPlugin#sfeugプラグインデザインガイドライン
44
https://github.com/AdobeXD/plugin-design-assets
⽇本語版翻訳中 https://adobe.ly/2ksZMpi
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
最新情報をチェックしよう!
© 2018 Adobe. All Rights Reserved. Adobe Confidential.
#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プラグインをつくってみよう

More Related Content

What's hot

UI controls in Android
UI controls in Android UI controls in Android
UI controls in Android DivyaKS12
 
Project meeting: Android Graphics Architecture Overview
Project meeting: Android Graphics Architecture OverviewProject meeting: Android Graphics Architecture Overview
Project meeting: Android Graphics Architecture OverviewYu-Hsin Hung
 
Difference Between Angular and AngularJS.pdf
Difference Between Angular and AngularJS.pdfDifference Between Angular and AngularJS.pdf
Difference Between Angular and AngularJS.pdfYour Team in India
 
RESTful API 설계
RESTful API 설계RESTful API 설계
RESTful API 설계Jinho Yoo
 
[RIIT 2017] Identifying Grey Sheep Users By The Distribution of User Similari...
[RIIT 2017] Identifying Grey Sheep Users By The Distribution of User Similari...[RIIT 2017] Identifying Grey Sheep Users By The Distribution of User Similari...
[RIIT 2017] Identifying Grey Sheep Users By The Distribution of User Similari...YONG ZHENG
 
Compliance as Code with terraform-compliance
Compliance as Code with terraform-complianceCompliance as Code with terraform-compliance
Compliance as Code with terraform-complianceEmre Erkunt
 
Introduction to flutter's basic concepts
Introduction to flutter's basic conceptsIntroduction to flutter's basic concepts
Introduction to flutter's basic conceptsKumaresh Chandra Baruri
 
Flutter overview - advantages & disadvantages for business
Flutter overview - advantages & disadvantages for businessFlutter overview - advantages & disadvantages for business
Flutter overview - advantages & disadvantages for businessBartosz Kosarzycki
 
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...Edureka!
 
Camera 2.0 in Android 4.2
Camera 2.0 in Android 4.2 Camera 2.0 in Android 4.2
Camera 2.0 in Android 4.2 Balwinder Kaur
 
Python: the Project, the Language and the Style
Python: the Project, the Language and the StylePython: the Project, the Language and the Style
Python: the Project, the Language and the StyleJuan-Manuel Gimeno
 
What is flutter and why should i care?
What is flutter and why should i care?What is flutter and why should i care?
What is flutter and why should i care?Sergi Martínez
 
Inside Android's UI
Inside Android's UIInside Android's UI
Inside Android's UIOpersys inc.
 
LANGUAGE TRANSLATOR APP
LANGUAGE TRANSLATOR APPLANGUAGE TRANSLATOR APP
LANGUAGE TRANSLATOR APPIRJET Journal
 
Unit 1 - TypeScript & Introduction to Angular CLI.pptx
Unit 1 - TypeScript & Introduction to Angular CLI.pptxUnit 1 - TypeScript & Introduction to Angular CLI.pptx
Unit 1 - TypeScript & Introduction to Angular CLI.pptxMalla Reddy University
 

What's hot (20)

UI controls in Android
UI controls in Android UI controls in Android
UI controls in Android
 
Project meeting: Android Graphics Architecture Overview
Project meeting: Android Graphics Architecture OverviewProject meeting: Android Graphics Architecture Overview
Project meeting: Android Graphics Architecture Overview
 
Difference Between Angular and AngularJS.pdf
Difference Between Angular and AngularJS.pdfDifference Between Angular and AngularJS.pdf
Difference Between Angular and AngularJS.pdf
 
RESTful API 설계
RESTful API 설계RESTful API 설계
RESTful API 설계
 
Flutter
FlutterFlutter
Flutter
 
[RIIT 2017] Identifying Grey Sheep Users By The Distribution of User Similari...
[RIIT 2017] Identifying Grey Sheep Users By The Distribution of User Similari...[RIIT 2017] Identifying Grey Sheep Users By The Distribution of User Similari...
[RIIT 2017] Identifying Grey Sheep Users By The Distribution of User Similari...
 
WTF is Reactive Programming
WTF is Reactive ProgrammingWTF is Reactive Programming
WTF is Reactive Programming
 
Characteristics of c#
Characteristics of c#Characteristics of c#
Characteristics of c#
 
Flutter
FlutterFlutter
Flutter
 
Compliance as Code with terraform-compliance
Compliance as Code with terraform-complianceCompliance as Code with terraform-compliance
Compliance as Code with terraform-compliance
 
Introduction to flutter's basic concepts
Introduction to flutter's basic conceptsIntroduction to flutter's basic concepts
Introduction to flutter's basic concepts
 
Flutter
FlutterFlutter
Flutter
 
Flutter overview - advantages & disadvantages for business
Flutter overview - advantages & disadvantages for businessFlutter overview - advantages & disadvantages for business
Flutter overview - advantages & disadvantages for business
 
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...
 
Camera 2.0 in Android 4.2
Camera 2.0 in Android 4.2 Camera 2.0 in Android 4.2
Camera 2.0 in Android 4.2
 
Python: the Project, the Language and the Style
Python: the Project, the Language and the StylePython: the Project, the Language and the Style
Python: the Project, the Language and the Style
 
What is flutter and why should i care?
What is flutter and why should i care?What is flutter and why should i care?
What is flutter and why should i care?
 
Inside Android's UI
Inside Android's UIInside Android's UI
Inside Android's UI
 
LANGUAGE TRANSLATOR APP
LANGUAGE TRANSLATOR APPLANGUAGE TRANSLATOR APP
LANGUAGE TRANSLATOR APP
 
Unit 1 - TypeScript & Introduction to Angular CLI.pptx
Unit 1 - TypeScript & Introduction to Angular CLI.pptxUnit 1 - TypeScript & Introduction to Angular CLI.pptx
Unit 1 - TypeScript & Introduction to Angular CLI.pptx
 

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

30分でできる!Adobe XDプラグイン開発!
30分でできる!Adobe XDプラグイン開発!30分でできる!Adobe XDプラグイン開発!
30分でできる!Adobe XDプラグイン開発!Yoshiki Takeoka
 
Web制作で培ってきたFlashのリッチな表現力をモバイルアプリに
Web制作で培ってきたFlashのリッチな表現力をモバイルアプリにWeb制作で培ってきたFlashのリッチな表現力をモバイルアプリに
Web制作で培ってきたFlashのリッチな表現力をモバイルアプリにinvogue
 
スマホキャンプサマー2012:ANEとアプリ内課金に挑戦
スマホキャンプサマー2012:ANEとアプリ内課金に挑戦スマホキャンプサマー2012:ANEとアプリ内課金に挑戦
スマホキャンプサマー2012:ANEとアプリ内課金に挑戦Tetsuya Shiraishi
 
PhoneGapとハイブリッド開発
PhoneGapとハイブリッド開発PhoneGapとハイブリッド開発
PhoneGapとハイブリッド開発Andy Hall
 
Android multiscreen
Android multiscreenAndroid multiscreen
Android multiscreenKazuaki Ueda
 
マルチクラウドデータ連携Javaアプリケーションの作り方
マルチクラウドデータ連携Javaアプリケーションの作り方マルチクラウドデータ連携Javaアプリケーションの作り方
マルチクラウドデータ連携Javaアプリケーションの作り方CData Software Japan
 
Adobe & HTML5
Adobe & HTML5Adobe & HTML5
Adobe & HTML5Andy Hall
 
アイデアを形にする ③3時間でアプリ公開!ゼロからのプログラミング講座
アイデアを形にする  ③3時間でアプリ公開!ゼロからのプログラミング講座アイデアを形にする  ③3時間でアプリ公開!ゼロからのプログラミング講座
アイデアを形にする ③3時間でアプリ公開!ゼロからのプログラミング講座DIVE INTO CODE Corp.
 
Flex開発を加速するFlash Builder 4新機能紹介
Flex開発を加速するFlash Builder 4新機能紹介Flex開発を加速するFlash Builder 4新機能紹介
Flex開発を加速するFlash Builder 4新機能紹介Keisuke Todoroki
 
The Twelve-Factor (A|M)pp with C#
The Twelve-Factor (A|M)pp with C#The Twelve-Factor (A|M)pp with C#
The Twelve-Factor (A|M)pp with C#Yuta Matsumura
 
2020/06/16 tsjp-azure-staticwebapps-vs_codespaces
2020/06/16 tsjp-azure-staticwebapps-vs_codespaces2020/06/16 tsjp-azure-staticwebapps-vs_codespaces
2020/06/16 tsjp-azure-staticwebapps-vs_codespacesIssei Hiraoka
 
【16-D-4】3分ではじめるスマホアプリのビジュアル開発
【16-D-4】3分ではじめるスマホアプリのビジュアル開発【16-D-4】3分ではじめるスマホアプリのビジュアル開発
【16-D-4】3分ではじめるスマホアプリのビジュアル開発hmimura_embarcadero
 
デザイナー・印刷会社の皆様に贈る、Creative Cloud 導入のメリット &lt;アップデート>
デザイナー・印刷会社の皆様に贈る、Creative Cloud 導入のメリット &lt;アップデート>デザイナー・印刷会社の皆様に贈る、Creative Cloud 導入のメリット &lt;アップデート>
デザイナー・印刷会社の皆様に贈る、Creative Cloud 導入のメリット &lt;アップデート>Tsuyoshi Nakao
 
Android App Development with Gradle & Android Studio
Android App Development with Gradle & Android StudioAndroid App Development with Gradle & Android Studio
Android App Development with Gradle & Android StudioSoichiro Kashima
 
Rancherを活用して開発効率を上げる
Rancherを活用して開発効率を上げるRancherを活用して開発効率を上げる
Rancherを活用して開発効率を上げるMichitaka Terada
 
PHPにおけるRIA事情と開発
PHPにおけるRIA事情と開発PHPにおけるRIA事情と開発
PHPにおけるRIA事情と開発konekto
 

Similar to Adobe XDプラグインをつくってみよう (20)

30分でできる!Adobe XDプラグイン開発!
30分でできる!Adobe XDプラグイン開発!30分でできる!Adobe XDプラグイン開発!
30分でできる!Adobe XDプラグイン開発!
 
Web制作で培ってきたFlashのリッチな表現力をモバイルアプリに
Web制作で培ってきたFlashのリッチな表現力をモバイルアプリにWeb制作で培ってきたFlashのリッチな表現力をモバイルアプリに
Web制作で培ってきたFlashのリッチな表現力をモバイルアプリに
 
スマホキャンプサマー2012:ANEとアプリ内課金に挑戦
スマホキャンプサマー2012:ANEとアプリ内課金に挑戦スマホキャンプサマー2012:ANEとアプリ内課金に挑戦
スマホキャンプサマー2012:ANEとアプリ内課金に挑戦
 
PhoneGapとハイブリッド開発
PhoneGapとハイブリッド開発PhoneGapとハイブリッド開発
PhoneGapとハイブリッド開発
 
Android multiscreen
Android multiscreenAndroid multiscreen
Android multiscreen
 
マルチクラウドデータ連携Javaアプリケーションの作り方
マルチクラウドデータ連携Javaアプリケーションの作り方マルチクラウドデータ連携Javaアプリケーションの作り方
マルチクラウドデータ連携Javaアプリケーションの作り方
 
Adobe & HTML5
Adobe & HTML5Adobe & HTML5
Adobe & HTML5
 
AndroidでDIxAOP
AndroidでDIxAOPAndroidでDIxAOP
AndroidでDIxAOP
 
アイデアを形にする ③3時間でアプリ公開!ゼロからのプログラミング講座
アイデアを形にする  ③3時間でアプリ公開!ゼロからのプログラミング講座アイデアを形にする  ③3時間でアプリ公開!ゼロからのプログラミング講座
アイデアを形にする ③3時間でアプリ公開!ゼロからのプログラミング講座
 
Flex開発を加速するFlash Builder 4新機能紹介
Flex開発を加速するFlash Builder 4新機能紹介Flex開発を加速するFlash Builder 4新機能紹介
Flex開発を加速するFlash Builder 4新機能紹介
 
The Twelve-Factor (A|M)pp with C#
The Twelve-Factor (A|M)pp with C#The Twelve-Factor (A|M)pp with C#
The Twelve-Factor (A|M)pp with C#
 
Gaming cicd-pipeline gaming-technight-2
Gaming cicd-pipeline gaming-technight-2Gaming cicd-pipeline gaming-technight-2
Gaming cicd-pipeline gaming-technight-2
 
【初心者向け】API を使ってクラウドの管理を自動化しよう
【初心者向け】API を使ってクラウドの管理を自動化しよう【初心者向け】API を使ってクラウドの管理を自動化しよう
【初心者向け】API を使ってクラウドの管理を自動化しよう
 
2020/06/16 tsjp-azure-staticwebapps-vs_codespaces
2020/06/16 tsjp-azure-staticwebapps-vs_codespaces2020/06/16 tsjp-azure-staticwebapps-vs_codespaces
2020/06/16 tsjp-azure-staticwebapps-vs_codespaces
 
【16-D-4】3分ではじめるスマホアプリのビジュアル開発
【16-D-4】3分ではじめるスマホアプリのビジュアル開発【16-D-4】3分ではじめるスマホアプリのビジュアル開発
【16-D-4】3分ではじめるスマホアプリのビジュアル開発
 
デザイナー・印刷会社の皆様に贈る、Creative Cloud 導入のメリット &lt;アップデート>
デザイナー・印刷会社の皆様に贈る、Creative Cloud 導入のメリット &lt;アップデート>デザイナー・印刷会社の皆様に贈る、Creative Cloud 導入のメリット &lt;アップデート>
デザイナー・印刷会社の皆様に贈る、Creative Cloud 導入のメリット &lt;アップデート>
 
ZendStudioのご紹介
ZendStudioのご紹介ZendStudioのご紹介
ZendStudioのご紹介
 
Android App Development with Gradle & Android Studio
Android App Development with Gradle & Android StudioAndroid App Development with Gradle & Android Studio
Android App Development with Gradle & Android Studio
 
Rancherを活用して開発効率を上げる
Rancherを活用して開発効率を上げるRancherを活用して開発効率を上げる
Rancherを活用して開発効率を上げる
 
PHPにおけるRIA事情と開発
PHPにおけるRIA事情と開発PHPにおけるRIA事情と開発
PHPにおけるRIA事情と開発
 

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

  • 1. © 2018 Adobe. All Rights Reserved. Adobe Confidential. Adobe XDプラグインをつくってみよう @yoshikinoko Yoshiki Takeoka (⽵岡義樹)| Program Manager, Japan R&D, Adobe
  • 2. © 2018 Adobe. All Rights Reserved. Adobe Confidential. Adobe XDプラグインの紹介
  • 3. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_sendai #XDPlugin#sfeugXDに機能を追加できるプラットフォーム XDプラグインは⾃由に機能を追加・公開できます (2018/10-)
  • 4. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_sendai #XDPlugin#sfeugIcondrop 4
  • 5. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_sendai #XDPlugin#sfeugGoogle Sheets for Adobe XD 5
  • 6. © 2018 Adobe. All Rights Reserved. Adobe Confidential. XDプラグインをつくってみよう!
  • 7. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_sendai #XDPlugin#sfeugAdobe XD プラグイン サンプルファイル http://bit.ly/xdplugin-jp 7 01-01-scenegraph-sample
  • 8. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_sendai #XDPlugin#sfeug実際にXDプラグインを作ってみよう! 1 ファイルをダウンロードし解凍する http://bit.ly/xdplugin-jp 2 “プラグイン”>”開発版”>“開発フォルダーを表⽰” 3 01-01-seenegraph-sample を『フォルダーごと』 開発フォルダー(develop)にコピー&ペースト 4 “プラグイン”>”開発版”>“プラグインを再読み込み” もしくは Cmd/Ctrl+Shift+R 5 “プラグイン”> “Red Square” 6 🎉プラグイン起動 🎉 8 2 3 4 5 1
  • 9. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_sendai #XDPlugin#sfeug動かしてみよう! 9 01-01-scenegraph-sample
  • 10. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_sendai #XDPlugin#sfeug 1. ZIP形式で圧縮、拡張⼦.xdxに変更 2. ダブルクリックでインストール 開発フォルダーに フォルダごとコピー ファイル構成とフォーマット & ビルド⽅法は2種類 設定ファイル manifest.json 処理のコード main.js アイコン images/icon-24px.png images/icon-48px.png 10 ファイル構成 ビルド&インストール 開発⽤ プロダクション(本番)⽤
  • 11. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #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 01-01-scenegraph-sample
  • 12. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_sendai #XDPlugin#sfeug manifest.json manifest.json の uiEntryPoints 12 main.jsでexportされたFunction 01-01-scenegraph-sample
  • 13. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_sendai #XDPlugin#sfeugショートカットキーを設定する 13 01-02-scenegraph-sample manifest.json
  • 14. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_sendai #XDPlugin#sfeug XDのAPIの読み込み scenegraph に正⽅形を追加 プラグインの起動プロセス 14 main.js 01-01-scenegraph-sample manifest.json Developer Consoleに表⽰する
  • 15. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_sendai #XDPlugin#sfeugmain.js を構成する3つの要素 15 require exports functions manifest.jsonの設定値 XDのAPIの読み込み scenegraph に正⽅形を追加 01-01-scenegraph-sample/main.js Developer Consoleに表⽰する
  • 16. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_sendai #XDPlugin#sfeugDeveloper Console 16 scenegraph に正⽅形を追加 Developer Consoleに表⽰する
  • 17. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_sendai #XDPlugin#sfeugScenegraphとは 17 • Scenegraph: XDで描画されるオブジェクトの構成 • selection: 選択中のオブジェクト • documentRoot : RootNode以下のファイル全体 selection.insertionParent.addChild(shape); //コピペと同じように要素を追加 sceneNode
  • 18. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_sendai #XDPlugin#sfeugEdit Context ‒ 編集できるノードには制限あり 選択中のオブジェクト(と付近のオブジェクト)のみ編集可能 18 選択中のノードの共通の親 ノードの配下のオブジェクト が編集可能 Group以外のコンテナ (RepeatGridなど)の⼦要素 は編集不可 アートボード直下のオブジェ クトを選択すると RepeatGridの⼦要素以外が編 集可能
  • 19. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #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
  • 20. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #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
  • 21. © 2018 Adobe. All Rights Reserved. Adobe Confidential. プラグインパネルを利⽤する
  • 22. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_sendai #XDPlugin#sfeugプラグインパネルのサンプルコード http://bit.ly/xdplugin-jp 22 03-01-panel-sample
  • 23. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_sendai #XDPlugin#sfeugプラグインパネルの表⽰と更新 03-01-panel-sample
  • 24. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_sendai #XDPlugin#sfeugプラグインパネルにおけるインタラクション 24 § panel - show § プラグインパネルが表⽰される § panel - update § 選択中のオブジェクトが編集・更新される § panel - hide § プラグインパネルが閉じられる (アプリ終了時、ファイルを閉じたときは 「呼ばれません」) § UI Interactions § パネル内のUIの操作 03-01-panel-sample
  • 25. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_sendai #XDPlugin#sfeugプラグインパネルの表⽰と更新のロジック 25 manifest.json main.js 03-01-panel-sample
  • 26. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_sendai #XDPlugin#sfeugプラグインパネルのライフサイクル 26 #1 show パネルのUIのDOMを作成 event引数にDOMを追加 #2 update 選択中のオブジェクト(selections)に応じて、 パネルのDOMを更新 #3 hide パネル閉じる(あまり利⽤しない) 03-01-panel-sample/main.js
  • 27. © 2018 Adobe. All Rights Reserved. Adobe Confidential. モーダルダイアログを利⽤する
  • 28. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_sendai #XDPlugin#sfeugモーダルダイアログのサンプルコード http://bit.ly/xdplugin-jp 28 02-01-dialog-sample
  • 29. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_sendai #XDPlugin#sfeugXDプラグインの表⽰するモーダルダイアログ 29 02-01-dialog-sample
  • 30. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_sendai #XDPlugin#sfeugモーダルダイアログの利⽤例 30 確認・同意画⾯の提⽰ エラーメッセージの表⽰
  • 31. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_sendai #XDPlugin#sfeugモーダルダイアログのインタラクション § ESCキーの押下 § ※無効化できません § Promise の値に “reasonCanceled” が設定される § ENTERキーの押下 § form.onsubmit()が呼ばれる § ボタンクリック § OKとCancelの2つを⽤意 § 各⾃eventlistenerの設定が必要 31 submit前に必ずチェック!
  • 32. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #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
  • 33. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #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は書かない 02-01-dialog-sample/main.js
  • 34. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_sendai #XDPlugin#sfeug⼊⼒値を受け取り、 モーダルダイアログを閉じる 34 dialog.close() ユーザーの⼊⼒値を含めない Promiseを返す ESC Keypress dialog.close(‘reasonCanceled’ )が呼ばれる Dialogを開いたあとのScenegraphの 操作は⾮同期で処理 02-01-dialog-sample/main.js
  • 35. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_sendai #XDPlugin#sfeug動かしてみよう! 35 02-01-dialog-sample
  • 36. © 2018 Adobe. All Rights Reserved. Adobe Confidential. 開発におすすめのツールなど
  • 37. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #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 のテンプレートです
  • 38. © 2018 Adobe. All Rights Reserved. Adobe Confidential. プラグイン開発の注意点
  • 39. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #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 同期処理に関するエラーメッセージの例
  • 40. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #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
  • 41. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_sendai #XDPlugin#sfeugXDのプラグインは node.js でも ブラウザでもありません! § node.js や ブラウザにある APIがそのまま動作する訳ではありません § 例えば・・・下記の関数は「現時点では」サポートされていません § HTMLIFrameElement § ⼀部のcssプロパティ § setTimeout (2019/02 よりサポート) § clearTimeout(2019/02 よりサポート) § cancelAnimationFrame (2019/04 よりサポート) § requestAnimationFrame (2019/04 よりサポート) 41
  • 42. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_sendai #XDPlugin#sfeugNode.js (npm) は動くが・・・注意が必要 § node_modules, package.json のフォルダをチェックしません。 § webpack, rollup などでバンドルが必須 42 const someLib = require("somelib"); // no package.json lookup xdpm と webpack(+babel) の組み合わせはオススメです
  • 43. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_sendai #XDPlugin#sfeugプラグインパネルとモーダルダイアログの使い分け プラグイン操作中にキャンバス(オブジェクト)にアクセスする必要があるか? 43 アクセス不要 ショートカットキー アクセス必要 モーダルダイアログプラグインパネル プラグインデザインガイドライン https://github.com/AdobeXD/plugin-design-assets (⽇本語版翻訳中 https://adobe.ly/2ksZMpi )
  • 44. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_sendai #XDPlugin#sfeugプラグインデザインガイドライン 44 https://github.com/AdobeXD/plugin-design-assets ⽇本語版翻訳中 https://adobe.ly/2ksZMpi
  • 45. © 2018 Adobe. All Rights Reserved. Adobe Confidential. 最新情報をチェックしよう!
  • 46. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #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