アプリケーション内でのカードのレンダリング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.
- 対象のプラットフォームにレンダラー SDK をインストールします。Install a renderer SDK - for your target platform.
- アプリのスタイル、規則、およびアクション イベント ハンドラーで構成されたレンダラー インスタンスを作成します。Create a renderer instance - configured with your app's style, rules, and action event handlers.
- アプリに対して自動的にスタイル設定されるネイティブ UI にカードをレンダリングします。Render a card to native UI - automatically styled to your app.
アダプティブ カードの SDKAdaptive Cards SDKs
| プラットフォームPlatform | インストールInstall | ビルドBuild | ドキュメントDocs | 状況Status |
|---|---|---|---|---|
| JavaScriptJavaScript |  |
ソースSource | ドキュメントDocs |  |
| .NET WPF.NET WPF |  |
ソースSource | ドキュメントDocs |  |
| .NET HTML.NET HTML |  |
ソースSource | ドキュメントDocs | |
| Windows UWPWindows UWP |  |
ソースSource | ドキュメントDocs |  |
| AndroidAndroid |  |
ソースSource | ドキュメントDocs |  |
| iOSiOS |  |
ソース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 specifiedurl. - 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. これを処理する必要があるのは、
ShowCardActionModeがpopupに設定されている場合のみであることにご注意ください。Note that you only need to handle this ifShowCardActionModeis set topopup.
カードをレンダリングする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.