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を入力するモーダルダイアログが表示されます
※意図的に違うポートを使用してなければ、デフォルトのURLhttps://localhost:5241を使用してください -
「外部サーバーからアドオンを読み込むことのリスクについて了解しました。」にチェックを入れて「接続」ボタンをクリックしてください
-
「アドオンの開発」パネルにアドオンの名前、バージョンと共に「アドオンが開発サーバー接続されました」というメッセージがログに表示されます
*「開発中」パネルにあるアドオンのアイコンをクリックしてアドオンを起動します -
Adobe Express ウィンドウの右側のアドオンパネルにアドオンが表示されます
5. アドオンの編集
アドオンのテスト中にソースファイルの編集をしてアドオンを修正することができます。
試しにsrc/index.htmlのボタンの文字列を"Click me"から"Say hello"へ変更してみます。
変更前
src/index.html
変更後
src/index.html
ソースファイルを更新すると、アドオンがリビルドされます。
アドオンがテストされているブラウザーへ戻ると、変更した文字列が自動的にボタンへ反映されています。また、アドオンが自動で読み込まれたことを示すログが「アドオンの開発」パネルに表示されます。
このように、アドオンをテストしながら、ソースコードを更新した場合でも、アドオンを自動的にリビルドしExpress側でリロードさせることが出来ます。
マニフェストの更新
manifest.jsonを更新する場合はアドオンを手動でリロードする必要があります。「アドオン開発」パネルに手動で更新するようメッセージが表示されるので、「更新」ボタンをクリックしてアドオンを手動で更新してください。
試しにsrc/manifest.jsonのnameフィールドの文字列を "Say Hello" へ変更してみます。nameフィールドを"Say hello"へ変更します。
Adobe Expressの「アドオン開発」パネルに戻るとmanifest.jsonの変更が検出されたことを示すログを確認できます。
「更新」ボタンをクリック後に、再度、アドオンのアイコンをクリックしてください。新しいアドオンの名前がタイトルに反映されます。
詳細な開発手法、UX、デバッグ、Add-on SDK リファレンス等の詳しいドキュメントは公式ページで公開しています。 (*英語ドキュメント)
Image Gallery (オープンソースアドオン)
このセクションでは、Adobe が開発し、オープンソース化したアドオン Image Gallery を紹介します。
Image Gallery について
Image Gallery は、Adobe Express アドオンの Code Sample の一つで、オープンソース化した画像アセット用のアドオンです。
例えば、Adobe Expressで個人・企業のオリジナルキャラクターやロゴを配布するアドオンを作成することができます。
Image Gallery のソースコードへはこちらからアクセスできます。
独自のコンテンツを利用できるアドオンの開発にご興味のある方はお試しください。使用法はリポジトリをご参照ください。
ソフトウェアエンジニア (Tokyo) の募集
2024年6月7日(本稿執筆時点)、アドビの日本オフィスの研究開発本部では、Adobe Creative Cloud、Adobe Document Cloud などの日本市場向けの機能を開発するソフトウェアエンジニアを募集しています。
日本の研究開発チームは、日本のユーザーに、より優れたユーザー体験を提供することを目指しています。クリエイティブなデジタル体験を一緒に創造しませんか。
ぜひ下記のページよりご応募ください。
Software Development Engineer