Chrome 拡張機能を使用する Automation Co-Pilot のウィジェットの開発

Chrome 拡張機能を使用する Automation Co-Pilot で iFrame ウィジェットを開発して、Web アプリケーションにデプロイします。

前提条件

  • AAE_Basic 権限で Control Room にログインする必要があります。
  • 設定を完了して、Chrome 拡張機能を使用する Automation Co-Pilot がブラウザにインストールされていることを確認してください。Chrome 拡張機能を使用した Automation Co-Pilot の設定と接続
  • Automation Co-Pilot に、オートメーションを Chrome 拡張機能を使用する Automation Co-Pilot にマッピングするウィジェットを設定します。Automation Co-Pilot を使用した iFrame ウィジェットの設定
  • ウィジェットの [埋め込みコード] にアクセスして Chrome 拡張機能を使用する Automation Co-Pilot に入力できるようにします。src= の後に URL を引用符で囲んで指定します。
    画像では、埋め込みコードの場所を示しています。

Chrome 拡張機能を使用する Automation Co-Pilot では、Chrome ブラウザはウィジェットを埋め込む器として機能します。次の手順を使用して、Web アプリケーション用の iFrame ウィジェットを開発し、そのウィジェットを Automation Co-Pilot にデプロイし、完全な埋め込みオートメーション機能をマッピングします。多くの Web コンポーネントを開発することができますが、次の手順を使用すると、簡単に Web アプリケーションに直接オートメーションを提供できます。

PixieBrix ページ エディター環境を使用して、Automation Co-Pilot からオートメーションを Web アプリケーションにマッピングして設定し、ウィジェットを埋め込むためのコンポーネントを選択します。この環境では、OAuth 接続を使用して、Control Room から保存されたプロセスやオートメーションにアクセスし、選択したコンポーネントにマッピングします。エディターでの開発方法の詳細については、次のリンクを参照してください。Guide to PixieBrix Page Editor

次のビデオは、Chrome 拡張機能を使用する Automation Co-Pilot でのウィジェットの開発プロセスを説明しています。

手順

  1. 開始するには、iFrame ウィジェットを埋め込む Web アプリケーションに移動します。
  2. [パネルをレンダリング] アクションを選択し、ペインの上部にあるゴミ箱アイコンをクリックして削除します。
  3. ページ エディターを開くには、目的の Web アプリケーションを右クリックして [検査] を選択します。
    次の表と画像に開発環境の詳細を示しています。
    パネル 説明
    1 拡張機能リスト 開発用の拡張機能を作成および選択します。
    2 拡張機能の概要 拡張機能のコンポーネントを追加、表示、編集します。
    3 構成パネル コンポーネントと Web ページとのやり取りをマッピングし、構成します。
    4 データ パネル 拡張機能をテストおよびデバッグします。

    Pixie ページ エディターの画像。
  4. 拡張機能リストから、[追加] をクリックし、[サイドバー パネル] を選択します。
  5. [概要] パネルで、プラス アイコンをクリックすると、コンポーネント メニューが表示されます。
  6. iFrame コンポーネントを選択し [ブリックを追加] をクリックします。
  7. 構成パネルに、必要な項目を入力します。
    1. ウィジェットの [名前] を入力します。この名前は、ユーザーに対してプロビジョニングを開始する際に Automation Co-Pilot に表示されます。
    2. ウィジェットの URL を入力して、Control Room にアクセスします。
    この URL は、埋め込みウィジェットを使用する Automation Co-Pilot の [埋め込みコード] から取得したものです。src= の後に URL を引用符で囲んで指定します。
  8. 拡張機能を保存します。
  9. データ パネルを使用して、拡張機能のテストとデバッグを行います。
    データ パネルに最終的な出力の詳細が表示され、マッピングや構成にエラーがある場合はアラートが表示されます。
    重要: 無効な接続または無効な資格情報のアラートが表示された場合は、Automation Co-Pilot が正しく設定されているか、Chrome 拡張機能を使用する Automation Co-Pilot に正しく接続されているか確認してください。
  10. 検証に成功すると、[拡張機能リスト] パネルで縦の 3 点リーダーをクリックし、設計図に拡張機能を追加します。

    画像は、インターフェースのどこに設計図を追加するかを示しています。
  11. [新しい設計図を作成] を選択します。
  12. 新しい設計図に [移動] または [コピー] を選択します。
  13. 一意の ID を入力してください。
  14. 次のステップで拡張子を識別するために、名前を入力します。
  15. 拡張機能が動作している間の段階的なカスタマイズを識別する開発者のバージョンを入力します。
  16. 説明を入力します。
  17. [作成] をクリックして、変更を保存します。

次のステップ

チームのために拡張機能を開発した後、設計図を、Chrome 拡張機能を使用する Automation Co-Pilot にデプロイします。Chrome 拡張機能を使用して拡張機能バージョンをデプロイする