|
1 | 1 | # Adobe XD Plugin Meetup サンプルコード
|
2 | 2 |
|
3 |
| - |
4 | 3 | ## 開発環境のセットアップ
|
5 | 4 |
|
6 | 5 | 1. 適当な場所にリポジトリをチェックアウト
|
|
9 | 8 |
|
10 | 9 | もしくは [zipファイルをダウンロード](https://github.com/yoshikinoko/XDPluginMeetupJapan/releases/latest)
|
11 | 10 |
|
12 |
| -2. `develop` フォルダ(開発用プラグインフォルダ)を開く |
13 |
| - |
14 |
| - ※`develop` フォルダが存在しないときは作成してください※ |
15 |
| - |
16 |
| - Mac: |
17 |
| - |
18 |
| - `~/Library/Application\ Support/Adobe/Adobe\ XD\ CC/develop` |
| 11 | +2. Adobe XD プラグイン開発フォルダー(`develop`フォルダー)を開く |
19 | 12 |
|
20 |
| - Windows: |
21 |
| - |
22 |
| - `C:\Users\%USERNAME%\AppData\Local\Packages\Adobe.CC.XD_adky2gkssdxte\LocalState\develop` |
23 |
| - |
24 |
| - もしくは Adobe XD を起動した後に下記のメニューより開く |
| 13 | + Adobe XD を起動した後に下記のメニューよりフォルダーを開いてください |
25 | 14 |
|
26 | 15 | `プラグイン` >`開発版` > `開発フォルダーを表示`
|
27 | 16 |
|
28 |
| -3. `develop` フォルダにリポジトリ(または回答したzipファイル)のディレクトリをコピー |
29 |
| - |
30 |
| - サブフォルダ(または buildフォルダ)内の`main.js`, `manifest.json`, `images/iconl.png`などを **フォルダごとコピー** する |
| 17 | +3. 開発フォルダー(`develop`フォルダー) にフォルダごとコピーしてください。 |
31 | 18 |
|
32 |
| - Mac: |
| 19 | + 例えば、「01-01-scenegraph-sample」のフォルダーを **フォルダーごとコピー** してください |
33 | 20 |
|
34 |
| - ```bash |
35 |
| - cp -r 01-01-scenegraph-sample ~/Library/Application\ Support/Adobe/Adobe\ XD\ CC/develop/ |
36 |
| - ``` |
| 21 | +4. Adobe XDを起動し、プラグインを再読み込みしてください。 |
37 | 22 |
|
38 |
| - Windows: |
39 |
| - |
40 |
| - Windows Explorerでコピー&ペースト |
41 |
| - |
42 |
| -4. Adobe XDを起動し、新しいドキュメントを作成 |
| 23 | + `プラグイン` > `開発版` > `プラグインを再読み込み` |
43 | 24 |
|
44 |
| -5. Adobe XD のメニューより、プラグインを再読み込み |
| 25 | + **ショートカットキー** |
45 | 26 |
|
46 |
| - `プラグイン` > `開発版` > `プラグインを再読み込み` |
| 27 | + Mac: <kbd>Command</kbd>+<kbd>Shift</kbd>+<kbd>R</kbd> |
47 | 28 |
|
48 |
| - ショートカットキー Mac: `Command+Shift+R` Win: `Ctrl+Shift+R` |
| 29 | + Win: <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>R</kbd> |
49 | 30 |
|
50 |
| -6. Adobe XD のメニューより、プラグインを起動 |
| 31 | +5. Adobe XD のメニューより、プラグインを起動 |
51 | 32 |
|
52 | 33 | `プラグイン` > `プラグイン名`
|
53 | 34 |
|
54 | 35 | ## サンプルコードの概要
|
55 | 36 |
|
56 |
| -### 1. Dialogを表示しないPlugin |
57 |
| - |
58 |
| -### 1.1 サンプルコードのみ |
| 37 | +### 01-01 100pxの赤色の正方形を挿入する、もっとも簡単なプラグイン |
59 | 38 |
|
60 | 39 | [01-01-scenegraph-sample](./01-01-scenegraph-sample)
|
61 | 40 |
|
62 |
| -### 1.2 webpack, xdpm を用いたプロジェクトテンプレート |
| 41 | +### 01-02 ショートカットキーを設定し、webpack, xdpm を用いたプロジェクトテンプレート |
63 | 42 |
|
64 | 43 | [01-02-scenegraph-sample-webpack](./01-02-scenegraph-sample-webpack)
|
65 | 44 |
|
66 |
| -#### Dialogを表示しないPluginのプレビュー |
67 |
| - |
68 |
| - |
| 45 | +01-01と01-02のプラグインのプレビュー |
69 | 46 |
|
70 |
| -### 2. Dialogを表示するPlugin |
| 47 | + |
71 | 48 |
|
72 |
| -### 2.1 サンプルコードのみ |
| 49 | +### ダイアログを表示するプラグイン |
73 | 50 |
|
74 | 51 | [02-01-dialog-sample](./02-01-dialog-sample)
|
75 | 52 |
|
76 |
| -### 2.2 webpack, xdpm を用いたプロジェクトテンプレート |
| 53 | +### ダイアログを表示し、 webpack, xdpm を用いたプロジェクトテンプレート |
77 | 54 |
|
78 | 55 | [02-02-dialog-sample-webpack](./02-02-dialog-sample-webpack)
|
79 | 56 |
|
80 |
| -#### Dialogを表示するPluginのプレビュー |
81 |
| - |
82 |
| - |
| 57 | +#### ダイアログを表示するプラグインのプレビュー |
83 | 58 |
|
| 59 | + |
84 | 60 |
|
85 | 61 | ## 参考資料・サイト
|
86 | 62 |
|
87 | 63 | ### 日本語
|
88 | 64 |
|
89 | 65 | - [はじめてのAdobe XDプラグイン開発!定番のHello Worldを表示させてみよう \#AdobeXD \#AdobeMAX \- Adobe Blog](https://blogs.adobe.com/japan/web-getting-started-with-xd-plugin-development/)
|
| 66 | +- [Adobe XDプラグインのソースコードの解説 \#AdobeIO \#XDPlugin \#AdobeXD \- Adobe Blog](https://blogs.adobe.com/japan/cc-web-adobe-xd-plugin-quickstart-japanese/) |
| 67 | +- [\#Adobe XD のパネルに対応したプラグインの開発 \- Adobe Blog](https://blogs.adobe.com/japan/cc-web-xd-plugin-developent-with-panel-ui/) |
90 | 68 | - [Adobe XD Plugins Advent Calendar 2018 \- Qiita](https://qiita.com/advent-calendar/2018/xdplugin?fbclid=IwAR0aTdPE0eNtR5utjXZriObs7c0NdzyO81aqX2RXbr2GPvTr1o0c_sfLjy4)
|
91 | 69 | - [Adobe XD User Group Japan facebook group](https://www.facebook.com/XDUGJP/)
|
92 |
| -- [Adobe XD official facebook page ](https://www.facebook.com/adobexdcc/) |
| 70 | +- [Adobe XD official facebook page](https://www.facebook.com/adobexdcc/) |
93 | 71 | - [Adobe XD \- Adobe Blog](https://blogs.adobe.com/japan/tag/adobe-xd/)
|
94 | 72 | - [Creative Cloud 道場 \- Adobe Blog \#CCDojo](https://blogs.adobe.com/japan/creativecloud/ccdojo/)
|
95 | 73 | - [Adobe XD CC体験版ダウンロード](https://www.adobe.com/jp/products/xd.html)
|
|
101 | 79 | - [Adobe XD Plugin Developers Forum](https://forums.adobexdplatform.com/)
|
102 | 80 | - [Adobe XD Github](https://github.com/adobexd)
|
103 | 81 | - [Adobe I/O](https://www.adobe.io/)
|
| 82 | +- [Adobe Tech Blog](https://medium.com/adobetech) |
| 83 | +- [Twitter #XDPlugin](https://twitter.com/hashtag/XDPlugin) |
104 | 84 |
|
105 | 85 | ## LICENSE
|
106 | 86 |
|
|
0 commit comments