アダプティブ カード デザイナーについてご紹介するシリーズ記事です。
5回目は、アダプティブ カード デザイナーで利用できるパーツの1つである「CodeBlock」をご紹介します。
はじめに
過去のシリーズ記事については以下をご覧ください。
- アダプティブ カード デザイナーの使い方：その1 操作画面の説明 - JBS Tech Blog
- アダプティブ カード デザイナーの使い方：その2 操作ボタンの説明 - JBS Tech Blog
- アダプティブ カード デザイナーの使い方：その3 操作方法の説明 - JBS Tech Blog
- アダプティブ カード デザイナーの使い方：その4 アダプティブ カードを新規作成してみる - JBS Tech Blog
また、本記事を執筆している2026年4月時点で、2つのアダプティブ カード デザイナーが存在しています。
本記事で記載するアダプティブ カード デザイナーのリンクは、以下からご確認ください。
CodeBlockとは
「CodeBlock」は、アダプティブ カード内でコードを読み手に分かりやすく表示するためのパーツです。
行番号を表示したり、コード言語を指定てシンタックスハイライトによる強調表示をしたりすることができます。
以下画像は、「CodeBlock」を用いてJSON形式のコードをアダプティブ カードに表示させたものです。
設定可能箇所
「CodeBlock」で設定できるものは、以下3つのカテゴリに分かれています。
- CodeBlock
- Responsive layout
- Layout
CodeBlock
「CodeBlock」は、コード表示そのものに対する設定部分です。
ここでは「Code snippet」と「Language」をご紹介します。
Code snippet
「Code snippet」は、アダプティブ カードに表示させるコードを入力する箇所です。
ここで入力したコードが、CodeBlock内に表示されます。
実際にコード入力した場合、Previewで確認した表示例は以下です。
※ Expandを選択すると、コードを全量確認することができます。
Language
「Language」はコードブロックに表示する言語を指定する箇所です。
指定した言語に応じた強調表示を行うことができます。
HTMLやJava、PowerShellなど、様々な種類の言語に対応しています。
デフォルトで設定されているのは「PlainText」です。
以下画像は、「Language」で「Json」を選択してJSON形式のコードを表示させたものです。「Plaintext」を選択したときに比べて、色が付いていることが分かります。
- 「Plaintext」選択時のJSONコード表示
- 「Json」選択時のJSONコード表示
Responsive layout
「Responsive layout」は、アダプティブ カードの横幅によって、コードを表示させるかどうかを設定する部分です。
「Always visible」がデフォルトで設定されています。これは、「アダプティブ カードが、どのような幅で設定されていても表示させる」という意味合いです。
「Always visible」以外を選択すると、以下画像のように、「Match」の設定項目が表示されます。
「Match」は「Target width」で指定した幅に対し、どのような条件でコードを表示させるかを設定できる箇所です。
それぞれ、以下の意味です。
- That width exactly：指定した幅の場合のみ表示する
- At least that width：指定した幅以上の場合で表示する
- At most that width：指定した幅以下で表示する
例えば、「Target width」で「Standard width」、「Match」で「At least that width」を設定した場合、「アダプティブ カードの幅がStandard widthより狭い場合は表示させない」といった設定となります。
上記で設定し、Previewで確認した画像は以下です。Very narrowとNarrowでは表示されていないことが分かります。
Layout
「Layout」は、アダプティブ カード内で、他の要素との間隔や区切り線を入れるかどうかを設定できる箇所です。
ここでは「Spacing」と「Separator」をご紹介します。
Spacing
「Spacing」は、他の要素との間隔を設定できる箇所です。
「None」になるにつれて間隔が狭くなり、「Padding」になるにつれて間隔が広くなります。
- 「None」を選択した場合の間隔
- 「Padding」を選択した場合の間隔
Separator
「Separator」は、他の要素との間に区切り線を入れることが出来る設定です。
- 選択せず区切り線を入れない場合
- 選択して区切り線を入れた場合
終わりに
アダプティブ カード デザイナーの使い方シリーズの5回目として、CodeBlockについてご紹介しました。
CodeBlockを利用する際の参考になれば幸いです。
