Adobe MAX 2018 XD Plugin API Labsでプラグインを作ってきた！
現地時間2018/10/15(月)14:30の回で、XD Plugin API Labを受けてきました。
英語ができなさすぎてかなり大変なコミュニケーションになってしまいましたが、XDとJavaScriptがある程度わかっているので物自体は無事完成！ざっくり何をやったかを紹介したいと思います。
XD Plugin API Labで何してきたの？
3つの段階で開発版のプラグインづくりが体験できました。
- Lab参加者用に配布されたmain.js、manifest.jsonを開発者ディレクトリにおいて動きを確認
- main.jsを選択中のオブジェクトの情報を取得して変化するように修正
- UIを追加してユーザー入力の値を扱う
それでは順を追って紹介しましょう。
Step1. main.js、manifest.jsonを開発者ディレクトリに
my-first-plugin フォルダー変えるだけの作業ですが、このステップのポイントは開発中のプラグインを置く場所を知ることとXDのプラグインに必須な構造を知ること。
開発中のプラグインは開発者フォルダーに入れます。こちらはXDのメニューからプラグイン＞開発版＞開発者フォルダーで開けます。(Windows版ではハンバーガーメニューを押すと出てくるメニューにあります)
これのおかげでフォルダーを探す手間がなくプラグイン開発の壁がかなり下がっていると感じました。
XDのプラグインのの最低構成は、次の3つ。
- プラグインディレクトリー
- main.js
- manifest.json
manifest.jsonにはプラグインの名前やプラグインが実行されたときに呼び出すJavaScriptの関数を書きます。現在はプラグインのタッチポイント(実行する場所)がmenuしか選べませんがAPIの成長によって増えるそう。
main.jsは実行するJavaScriptを書いておきます。module.exports.commandsとして外から呼び出せる用に設定するのがポイント。
気になるディレクトリー名
ぶつからないようにPlugin IDで作成するのが本来であるようですが、こちらの名前は自由でも動きます。Plugin IDは型がテキストなのでこちらも開発中は気にしなくても大丈夫なようです。※公開する場合にはWebサービスにてPlugin IDを取得しその名前でディレクトリーを作ったりmanifest.jsonの所定の欄に書くことになっています
Step2. 選択中のオブジェクトの情報を取得する、利用する
このステップでは、selectionという選択しているオブジェクトの使い方とXDのワークスペースに配置しているオブジェクトがRootNodeを頂点とした階層構造になるscenegraph(アートボードもテキストもみな親クラスがScenegraph)であることを学びました。
XDがプラグインを実行するときに必ず渡される引数の一つがselectionです。selection.itemsに選択したオブジェクトが配列として入っていることだけ覚えていれば今回は大丈夫ということで確認だけしました。
Step3. UIを追加してその入力値を使う
聞いた中でUIの学習ポイントは3つありました。
- 現在はモーダルダイアログとしてUIが表示される
- 作るときにはHTMLとCSSを使う
- モーダルダイアログを表示するメソッドはpromiseを返すので閉じたときの処理をthen()で記述できる
個人的にはHTMLやCSSをJavaScript内でテキストで書いたりDOM操作をして作る必要があり少し面倒かなと感じました。
一応生のHTMLでかけないか(英語のできる知人に)聞いて(もらって)みたところ…
複雑なUIはどうすればいい？
標準ではJavaScriptにテキストとしてHTMLやCSSを描くことになるので凝ったことをするにはjQueryやVueJSやReactを適宜組み合わせてほしいそうです。
説明を聞きながらのラボは一時間があっという間でした。
そして完成品！
自分で書いたものが動くと格別です。
最後に
配信当日らしいエピソードとしては、こちらのLabには当日配信されたXDが必要で、アメリカでは早朝に配信されたXDをインストールしてない人が続出してなかなかスタートが切れていませんでした。
本日(16日)からはみんなインストール済みだと思いますので良い感じにいろいろ試せるのではないかと思います。
まだ、今日と明日はこちらのLabに参加できますので現地組の日本人の方がいらしたら体験してみるのもいいと思います。飛び込みはわからないのですがまだ申し込めるようです。
API ドキュメント(英語)あり！
https://adobexdplatform.com/plugin-docs/
日本語の公式ブログ記事
素敵なXD APIライフを！
東京Adobe XD meeting 20を2018/11/02 19:00〜東京にて開催します！
お土産もいただきましたのでじゃんけん大会も予定しています。ぜひご参加ください。
