Adobe Express アドオンについて

Adobe Express アドオンは Adobe Express の機能拡張プラットフォームで動作するWebアプリケーションです。アドオンを介して Adobe Express とサードパーティ製の機能やサービスを連携できます。

Adobe Express アドオンの利用

Adobe Express を開き、新しいプロジェクトを作成するか、既存のものを開きます
左側のメニューにある「アドオン」ボタンをクリックします
利用できるアドオンが表示されるので選択するか、検索バーを使用して特定のアドオンを検索します
アドオンを選択し、詳細情報を確認してから「追加」ボタンをクリックしてアドオンをインストールします

インストール後、Adobe Expressのプロジェクトでアドオンが利用出来ます。様々なアドオンが公開されていますのでお試しください。

Adobe Express Add-on SDK

アドオンの開発には Adobe が提供する Adobe Express Add-on SDK を使用します。以下は Add-on SDKが提供する機能の例です。

画像と動画のインポート
画像のエクスポート
OAuth 2.0を介して外部ソースに接続
Expressの編集画面のキャンバスへのコンテンツのドラッグアンドドロップサポート
マニフェストデータの取得
言語の検出

詳細は公式サイトの「Implementing Common Use Cases」と「Code Samples」を参照してください。(※英語ドキュメント)

アドオン開発ガイド

このセクションは公式サイトで公開されている Adobe Express アドオン開発・クイックスタートの内容を日本語に訳したものです。アドオンプロジェクトの作成、アドオンのビルド、Adobe Expressへのアドオンのロード、アドオンの編集など、開発の一連の流れを説明しています。

開発環境のセットアップ

前提条件

NodeJS (メジャーバージョン16以上) および npm (メジャーバージョン8以上) がインストールされていること
HTML、CSS、JavaScriptでのプログラミングに慣れていること
Adobe Express アカウント（既存の Adobe ID を使用するか、無料で新たに作成する）

Add-on CLI

Add-on CLI (コマンドラインインターフェース) はアドオン開発に必要です。ローカルマシンから直接 Adobe Express アドオンをビルドおよびホストすることを可能にします。

1. アドオンプロジェクトの作成

ターミナルを開いて、次のコマンドを実行してください。

$ npx @adobe/create-ccweb-add-on hello-world --template javascript

コマンドを実行して、基本的な JavaScript テンプレートに基づいた新しいアドオンを作成します。Adobe Express Add-on CLI で利用可能な組み込みテンプレートについては、Templates をご覧ください。

※Adobe アカウントへのログインと「Adobe Developer Terms of Use」への同意が必要となります。

2. アドオンのビルド

次に、以下のコマンドを実行して、作成されたhello-worldフォルダへ移動し、アドオンをビルドして、ローカルサーバーでアドオンをホストします。

$ cd hello-world;
$ npm start;

npm startスクリプトを実行すると下記のメッセージが表示されます。

Done. Your add-on 'hello-world' is hosted on: https://localhost:5241/

You can now sideload your add-on by enabling the Developer Mode in the Add-ons panel.

次のステップはローカルサーバーで起動しているアドオンをAdobe Expressへロードします。

3. 開発モードの有効化（初回のみ）

Adobe Express へ移動します
右上のユーザーアバターをクリックして「設定」を選んでください
設定画面内にある「アドオンの開発」のトグルボタンをクリックして開発モードを有効化してください

4. アドオンのテスト

Adobe Express へ移動し新しいプロジェクトを作成します
左のメニューにある「アドオン」ボタンをクリックし、アドオンパネルを開きます
アドオンタブへ移動して「アドオンのテスト」のトグルボタンをクリックします
ローカルにホストされているアドオンのURLを入力するモーダルダイアログが表示されます
※意図的に違うポートを使用してなければ、デフォルトのURL https://localhost:5241を使用してください
「外部サーバーからアドオンを読み込むことのリスクについて了解しました。」にチェックを入れて「接続」ボタンをクリックしてください
「アドオンの開発」パネルにアドオンの名前、バージョンと共に「アドオンが開発サーバー接続されました」というメッセージがログに表示されます
*「開発中」パネルにあるアドオンのアイコンをクリックしてアドオンを起動します
Adobe Express ウィンドウの右側のアドオンパネルにアドオンが表示されます