アプリケーション内でのカードのレンダリングRendering cards inside your application

アプリケーション内でアダプティブ カードをレンダリングするのは簡単です。It's easy to render Adaptive Cards inside your application. すべての一般的なプラットフォーム向けに SDK が提供されているだけでなく、独自のアダプティブ カード レンダラーを作成するための詳細な仕様も提供されています。We provide SDKs for the all common platforms, as well as provide a detailed specification for creating your own Adaptive Card renderer.

  1. 対象のプラットフォームにレンダラー SDK をインストールしますInstall a renderer SDK - for your target platform.
  2. アプリのスタイル、規則、およびアクション イベント ハンドラーで構成されたレンダラー インスタンスを作成しますCreate a renderer instance - configured with your app's style, rules, and action event handlers.
  3. アプリに対して自動的にスタイル設定されるネイティブ UI にカードをレンダリングしますRender a card to native UI - automatically styled to your app.

アダプティブ カードの SDKAdaptive Cards SDKs

プラットフォームPlatform インストールInstall ビルドBuild ドキュメントDocs 状況Status
JavaScriptJavaScript npm インストールnpm install ソースSource ドキュメントDocs ビルドの状態
.NET WPF.NET WPF Nuget インストールNuget install ソースSource ドキュメントDocs ビルドの状態
.NET HTML.NET HTML Nuget インストールNuget install ソースSource ドキュメントDocs ビルドの状態
Windows UWPWindows UWP Nuget インストールNuget install ソースSource ドキュメントDocs ビルドの状態
AndroidAndroid Maven CentralMaven Central ソースSource ドキュメントDocs ビルドの状態
iOSiOS CocoaPodsCocoaPods ソースSource ドキュメントDocs ビルドの状態

レンダラーのインスタンスを作成するCreate an instance of the renderer

次の手順では、AdaptiveCardRenderer のインスタンスを作成します。The next step is to create an instance of an AdaptiveCardRenderer.

アクション イベントをフックするHook up action events

既定では、アクションはカード上にボタンとしてレンダリングされますが、期待通りに動作するかどうかはアプリ次第です。By default, the actions will render as buttons on the card, but it's up to your app to make them behave as you expect. 各 SDK には、処理する必要のある OnAction イベントに相当するものがあります。Each SDK has the equivalent of an OnAction event that you must handle.

  • Action.OpenUrl - 指定された url を開きます。Action.OpenUrl - open the specified url.
  • Action.Submit - 送信の結果を取得し、ソースに送信します。Action.Submit - take the result of the submit and send it to the source. カードのソースに送信する方法は、自分で完全に決定できます。How you send it to the source of the card is entirely up to you.
  • Action.ShowCard - ダイアログを呼び出し、そのダイアログにサブカードをレンダリングします。Action.ShowCard - invokes a dialog and renders the sub-card into that dialog. これを処理する必要があるのは、ShowCardActionModepopup に設定されている場合のみであることにご注意ください。Note that you only need to handle this if ShowCardActionMode is set to popup.

カードをレンダリングするRender a card

カードのペイロードを取得したら、レンダラーを呼び出してカードで渡すだけですみます。After you acquire a card payload, simply call the renderer and pass in the card. カードのコンテンツで構成されるネイティブ UI オブジェクトに戻ります。You will to get back a native UI object made up of the card contents. その後は、この UI をアプリの任意の場所に配置するだけです。Now just put this UI somewhere in your app.

カスタマイズCustomization

レンダリングされる対象をカスタマイズするには、いくつかの方法があります。There are several ways you can customize what is rendered.

HostConfigHostConfig

HostConfig は、アプリ内のカードの基本的なスタイル設定と動作を制御する、共有のクラスプラットフォーム構成オブジェクトです。A HostConfig is a shared, cross-platform configuration object that controls the basic styling and behavior of cards inside your app. これにより、フォント サイズ、要素間の間隔、色、サポートされるアクションの数などを定義します。It defines things like font sizes, spacing between elements, colors, number of supported actions, etc.

ネイティブ プラットフォームのスタイル設定Native platform styling

ほとんどの UI フレームワークでは、ネイティブ UI フレームワークのスタイル設定を使用して、レンダリングされたカードのスタイルを設定できます。Most UI frameworks allow you to style the rendered card by using the native UI framework styling. たとえば、HTML では HTML の CSS クラスを指定でき、XAML では出力を細かく制御するためにカスタムの ResourceDictionary を渡すことができます。For example, in HTML you can specify CSS classes for the HTML, or in XAML you can pass in a custom ResourceDictionary for fine-grained control of the output.

要素ごとにレンダリングをカスタマイズするCustomize per-element rendering

各 SDK では、任意の要素のレンダリングをオーバーライドすることや、定義したまったく新しい要素のサポートを追加することもできます。Each SDK allows you to override the rendering of any element, or even add support for entirely new elements that you define. たとえば、Input.Date レンダラーの残りの出力を保持したまま、独自のカスタム コントロールを生成するように、このレンダラーを変更できます。For example, you can change the Input.Date renderer to emit your own custom control while still retaining the rest of the output of the renderer. また、定義するカスタムの Rating 要素に対するサポートを追加できます。Or you can add support for a custom Rating element that you define.