30分でできる！Adobe XDプラグイン開発！
1 like1,457 views
2019/10/23 に開催された 大阪 Adobe XD ユーザーグループ #07 の Session2 「Adobe XDプラグインを開発しよう」で発表した内容です。 サンプルコードをコピー＆ペーストしながら、Adobe XDのプラグイン開発に必要な情報を解説します。 Adobe XDのプラグインはjavascriptで開発できるので、Web開発の経験があれば、簡単に開発することが可能です。 #xdug #xdug_osaka #XDPlugin #AdobeXD
30分でできる！Adobe XDプラグイン開発！
- 1. © 2018 Adobe. All Rights Reserved. Adobe Confidential. 30分でできる！Adobe XDプラグイン開発！ @yoshikinoko Yoshiki Takeoka （⽵岡義樹）| Program Manager, Japan R&D, Adobe
- 2. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_osaka #XDPlugin#xdug⾃⼰紹介 2 @yoshikinoko⽵岡義樹 アドビ・研究開発本部 プログラムマネージャー 2017年12⽉アドビ⼊社 Photoshop, XDなどのCreative Cloud製品の研究開発に従事 • Adobe XDプラグインの開発者 🙌 • 六本⽊ヒルズ 🏢に部署が移転 🚚 • かばん 🎒が無駄に 💡
- 3. © 2018 Adobe. All Rights Reserved. Adobe Confidential. Adobe XD ゲームパッド・キーボードトリガー 3 キーボード・ゲームパッドだけじゃない！Adobe XDとデバイスを連携させてハードウェアをプロトタピングしよう！ #AdobeXD #AdobeIO - Adobe Blog https://adobe.ly/2J1E2dv
- 4. © 2018 Adobe. All Rights Reserved. Adobe Confidential. Adobe XDプラグインの紹介
- 5. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_osaka #XDPlugin#xdugXDに機能を追加できるプラットフォーム XDプラグインは⾃由に機能を追加・公開できます (2018/10-)
- 6. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_osaka #XDPlugin#xdugIcondrop 6
- 7. © 2018 Adobe. All Rights Reserved. Adobe Confidential. XDプラグインをつくってみよう！
- 8. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_osaka #XDPlugin#xdugAdobe XD プラグイン サンプルファイル http://bit.ly/xdplugin-jp 8 01-01-scenegraph-sample zipを解凍後、下記のフォルダを使います
- 9. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_osaka #XDPlugin#xdugXDプラグイン開発に必要なモノ 開発フォルダー メニュー>プラグイン>開発版>開発フォルダーを表⽰ 開発フォルダー「developフォルダー」が表⽰されない場合は作成してください！ 9 Mac ~/Library/Application Support/Adobe/ Adobe XD/develop Win %LOCALAPPDATA%¥Packages¥ Adobe.CC.XD_adky2gkssdxte¥ LocalState¥develop
- 10. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_osaka #XDPlugin#xdug実際にXDプラグインを作ってみよう！ 1 ファイルをダウンロードし解凍する http://bit.ly/xdplugin-jp 2 “プラグイン”>”開発版”>“開発フォルダーを表⽰” 3 01-01-seenegraph-sample を『フォルダーごと』 開発フォルダー(develop)にコピー＆ペースト 4 “プラグイン”>”開発版”>“プラグインを再読み込み” もしくは Cmd/Ctrl+Shift+R 5 “プラグイン”> “Red Square” 6 🎉プラグイン起動 🎉 10 2 3 4 5 1
- 11. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_osaka #XDPlugin#xdug動かしてみよう！ 11 01-01-scenegraph-sample
- 12. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_osaka #XDPlugin#xdug 1. ZIP形式で圧縮、拡張⼦.xdxに変更 2. ダブルクリックでインストール 開発フォルダーに フォルダごとコピー ファイル構成とフォーマット & ビルド⽅法は2種類 設定ファイル manifest.json 処理のコード main.js アイコン images/icon-24px.png images/icon-48px.png 12 ファイル構成 ビルド＆インストール 開発⽤ プロダクション（本番）⽤
- 13. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_osaka #XDPlugin#xdugmanifest.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 プラグインを起動させるメニュー、パネルの設定 13 01-01-scenegraph-sample
- 14. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #XDPlugin#xdug_osaka#xdugショートカットキーを設定する 14 01-02-scenegraph-sample manifest.json
- 15. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #XDPlugin#xdug_osaka#xdug XDのAPIの読み込み scenegraph に正⽅形を追加 プラグインの起動プロセス 15 main.js 01-01-scenegraph-sample manifest.json Developer Consoleに表⽰する
- 16. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_osaka #XDPlugin#xdugmain.js を構成する3つの要素 16 require exports functions manifest.jsonの設定値 XDのAPIの読み込み scenegraph に正⽅形を追加 01-01-scenegraph-sample/main.js Developer Consoleに表⽰する
- 17. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #XDPlugin#xdug_osaka#xdugDeveloper Console 17 scenegraph に正⽅形を追加 Developer Consoleに表⽰する
- 18. © 2018 Adobe. All Rights Reserved. Adobe Confidential. #xdug_osaka #XDPlugin#xdugXDプラグイン開発の参考資料 18 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
- 19. © 2018 Adobe. All Rights Reserved. Adobe Confidential. Developer Prerelease（英語のみ） リリース前のXDのAPIに いち早くアクセスできます！ 19 1. Mediumで詳細をチェック！ http://bit.ly/XD23APIUpdate 2.応募のメールを送る xdplugindevs1@adobe.com