f:id:mofumofu_dance:20210510223803p:plain

前回: HTML上で Adaptive Card を表示する - (1) 単純なカード表示 - MoreBeerMorePower

前回は非常に簡単な Adaptive Card を表示するための JavaScript SDK を利用した HTML を紹介しました。

カードを表示するだけであればそのままでも問題ないのですが、ボタンで表示を切り替えたりし始めるとデザインが少しモサっとしているなと思うかもしれません。

f:id:mofumofu_dance:20210510220730p:plain — スタイルをあてていない素のカード

Adaptive Card に対応したプラットフォーム (Teams, Virtual Agents, Outlook...) ではカードの各要素を最適に表示するためにあらかじめスタイルが用意されています。これにより、カードは自動的に最適な見た目になるわけですが、 HTMLに表示する場合には自分でスタイルをあてる必要があります。

スタイルを調整する方法は大きく2つ

HostConfig (JSON) を書く
CSS をあてる

1. HostConfig

HostConfigについては公式ドキュメントが最も丁寧に書いていますが、簡単に言えばJSONで書かれる基本のスタイル設定です。

難しく考えずにサンプルが用意されているので、それをそのまま使ってもいいかもしれません。

HostConfigを設定する場合には前回のHTMLのうち、<body>~</body>部分のスクリプトを追加します。

<body>
    <script type="text/javascript">
        // Set card json
        const card = {ここにカードのJSON};
        // Create an AdaptiveCard instance
        let adaptiveCard = new AdaptiveCards.AdaptiveCard();
        // Host Config defines the style and behavior of a card
        const hostcfg = {ここにHostConfigのJSON};
        adaptiveCard.hostConfig = new AdaptiveCards.HostConfig(hostcfg);
        // Parse the card payload
        adaptiveCard.parse(card);
        // Render the card to an HTML element
        let renderedCard = adaptiveCard.render();
        // And finally insert it in the page
        document.body.appendChild(renderedCard);
    </script>
</body>

const hostcfg = [ここにHostConfigのJSON]; ここの右側にHostConfigのJSONを書きます。

ためしにサンプルのHostConfigを適用有無で比べてみます。

f:id:mofumofu_dance:20210510220547p:plain

好みは分かれますね。行間のスペースが詰まっていたり、文字の大きさの定義が加わっていたり、一番わかりやすいのはボタン幅が横いっぱいになっていることでしょうか。

2. Native Styling

さらにボタンのテーマなどを変えたいときにはCSSを適用します。どのクラスのスタイルを書けばいいかはこちらを参考にしてください。

これはサンプルがないので、Teams で表示する場合のCSSを少し加工してみました。ダウンロードは以下からどうぞ。

github.com

CSSを適用するには <head>~</head>部分に追加します。

<html>

<head>
    <link rel="stylesheet" href="./AcStylingSample.css" />
    <script type="text/javascript" src="https://unpkg.com/adaptivecards/dist/adaptivecards.js"></script>
    <script type="text/javascript" src="https://unpkg.com/markdown-it/dist/markdown-it.min.js"></script>
</head>

<body>

これを適用すると・・・

f:id:mofumofu_dance:20210510222238p:plain

ボタンあたりがTeamsっぽくなりましたね。もう少し複雑なカードで見てみると、テキスト入力パーツなんかもスタイルが変わっていることがわかります。

f:id:mofumofu_dance:20210510222822p:plain

まとめ

ここまでをまとめると、スタイルを設定することを考慮した場合のHTMLは以下のようになります。

<html>

<head>
    <link rel="stylesheet" href="ここにCSSファイルのパス" />
    <script type="text/javascript" src="https://unpkg.com/adaptivecards/dist/adaptivecards.js"></script>
    <script type="text/javascript" src="https://unpkg.com/markdown-it/dist/markdown-it.min.js"></script>
</head>

<body>
    <script type="text/javascript">
        // Set card json
        const card = {ここにカードのJSON};
        // Create an AdaptiveCard instance
        let adaptiveCard = new AdaptiveCards.AdaptiveCard();
        // Host Config defines the style and behavior of a card
        const hostcfg = {ここにHostConfigのJSON};
        adaptiveCard.hostConfig = new AdaptiveCards.HostConfig(hostcfg);
       // Parse the card payload
        adaptiveCard.parse(card);
        // Render the card to an HTML element
        var renderedCard = adaptiveCard.render();
        // And finally insert it in the page
        document.body.appendChild(renderedCard);
    </script>
</body>

</html>