インライン画像を送受信する

using Microsoft.Extensions.DependencyInjection;
using Microsoft.Teams.Apps.Clients;
using Microsoft.Teams.Apps.Schema;

HttpClient imageClient = app.Services
    .GetRequiredService<IHttpClientFactory>()
    .CreateClient(nameof(ApiClient));

teams.OnMessage(async (context, cancellationToken) =>
{
    TeamsAttachment? image =
        context.Activity.Attachments?.FirstOrDefault(
            attachment =>
                attachment.ContentType is not null &&
                attachment.ContentType.Value.StartsWith(
                    "image/",
                    StringComparison.OrdinalIgnoreCase) &&
                attachment.ContentUrl is not null);

    if (image?.ContentUrl is not Uri contentUrl)
    {
        return;
    }

    using HttpResponseMessage response =
        await imageClient.GetAsync(
            contentUrl,
            HttpCompletionOption.ResponseHeadersRead,
            cancellationToken);

    response.EnsureSuccessStatusCode();

    byte[] bytes =
        await response.Content.ReadAsByteArrayAsync(
            cancellationToken);

    // Process the image bytes.
});

主要な API と値:

• nameof(ApiClient): プラットフォーム認証を使用する SDK クライアントを選択します。
• ContentType: image/* MIME タイプと大文字と小文字を区別せずに一致させます。
• ContentUrl: 正規の認証済み画像ダウンロード URL を使用します。
• ResponseHeadersRead: 最初に応答コンテンツをバッファリングせずに処理を開始します。
• EnsureSuccessStatusCode: イメージの取得が失敗した場合は明示的に失敗します。

app.on('message', async ({ activity }) => {
  const image = activity.attachments?.find(
    (attachment) =>
      attachment.contentType?.toLowerCase().startsWith('image/') &&
      attachment.contentUrl
  );

  if (image?.contentUrl) {
    const response = await app.api.http.get<ArrayBuffer>(
      image.contentUrl,
      { responseType: 'arraybuffer' }
    );
    const bytes = Buffer.from(response.data);

    // Process the image bytes.
  }
});

主要な API と値:

• activity.attachments: すべての受信メッセージの添付ファイルを検索します。
• contentType: image/* MIME タイプと大文字と小文字を区別せずに一致させます。
• contentUrl: 正規の認証済み画像ダウンロード URL を使用します。
• app.api.http: SDK の認証済みクライアントでバイトをダウンロードします。
• responseType: バイナリ イメージ コンテンツを受信するように arraybuffer を設定します。

@app.on_message
async def handle_message(ctx: ActivityContext[MessageActivity]) -> None:
    image = next(
        (
            attachment
            for attachment in (ctx.activity.attachments or [])
            if attachment.content_type
            and attachment.content_type.lower().startswith("image/")
            and attachment.content_url
        ),
        None,
    )

    if image and image.content_url:
        response = await app.api.http.get(image.content_url)
        image_bytes = response.content

        # Process the image bytes.

主要な API と値:

• ctx.activity.attachments: すべての受信メッセージの添付ファイルを検索します。
• content_type: image/* MIME タイプと大文字と小文字を区別せずに一致させます。
• content_url: 正規の認証済み画像ダウンロード URL を使用します。
• app.api.http: SDK の認証済みクライアントでバイトをダウンロードします。
• response.content: ダウンロードされたバイナリ イメージ コンテンツにアクセスします。

TeamsAttachment image = TeamsAttachment.CreateBuilder()
    .WithContentType(new AttachmentContentType("image/png"))
    .WithContentUrl(new Uri("https://contoso.com/charts/weekly.png"))
    .WithName("weekly.png")
    .Build();

await context.SendAsync(
    new MessageActivityInput()
        .WithText("Here is the latest chart:")
        .AddAttachment(image),
    cancellationToken);

キーのプロパティと値:

• ContentType: ホストされたイメージのバイトに一致する MIME の種類を設定します。
• ContentUrl: 公開されている HTTPS 画像の URL を設定します。
• Name: 画像のオプションの表示名を追加します。
• AddAttachment: 送信メッセージに画像を添付します。

app.on('message', async ({ send }) => {
  await send(
    new MessageActivityInput('Here is the latest chart:')
      .addAttachments({
        contentType: 'image/png',
        contentUrl: 'https://contoso.com/charts/weekly.png',
        name: 'weekly.png'
      })
  );
});

キーのプロパティと値:

• contentType: ホストされたイメージのバイトに一致する MIME の種類を設定します。
• contentUrl: 公開されている HTTPS 画像の URL を設定します。
• name: 画像のオプションの表示名を追加します。
• addAttachments: 送信メッセージに画像を添付します。

@app.on_message
async def handle_message(ctx: ActivityContext[MessageActivity]) -> None:
    await ctx.send(
        MessageActivityInput(text="Here is the latest chart:").add_attachments(
            Attachment(
                content_type="image/png",
                content_url="https://contoso.com/charts/weekly.png",
                name="weekly.png",
            )
        )
    )

キーのプロパティと値:

• content_type: ホストされたイメージのバイトに一致する MIME の種類を設定します。
• content_url: 公開されている HTTPS 画像の URL を設定します。
• name: 画像のオプションの表示名を追加します。
• add_attachments: 送信メッセージに画像を添付します。

byte[] bytes = await File.ReadAllBytesAsync(
    "./charts/weekly.png",
    cancellationToken);

string dataUri =
    $"data:image/png;base64,{Convert.ToBase64String(bytes)}";

TeamsAttachment image = TeamsAttachment.CreateBuilder()
    .WithContentType(new AttachmentContentType("image/png"))
    .WithContentUrl(new Uri(dataUri))
    .WithName("weekly.png")
    .Build();

await context.SendAsync(
    new MessageActivityInput()
        .WithText("Here is the latest chart:")
        .AddAttachment(image),
    cancellationToken);

キーのプロパティと値:

• dataUri: 一致する MIME タイプのプレフィックス base64 バイト。
• ContentType: データ URI と実際の画像形式を一致させます。
• ContentUrl: 完全なデータ URI を Uri でラップします。
• Name: 画像形式に一致するオプションのファイル名を追加します。

app.on('message', async ({ send }) => {
  const bytes = await readFile('./charts/weekly.png');

  await send(
    new MessageActivityInput('Here is the latest chart:')
      .addAttachments({
        contentType: 'image/png',
        contentUrl: `data:image/png;base64,${bytes.toString('base64')}`,
        name: 'weekly.png'
      })
  );
});

キーのプロパティと値:

• contentUrl: 一致する MIME タイプのプレフィックス base64 バイト。
• contentType: データ URI と実際の画像形式を一致させます。
• bytes.toString('base64'): データ URI のイメージ バイトをエンコードします。
• name: 画像形式に一致するオプションのファイル名を追加します。

@app.on_message
async def handle_message(ctx: ActivityContext[MessageActivity]) -> None:
    encoded = b64encode(
        Path("./charts/weekly.png").read_bytes()
    ).decode("ascii")

    await ctx.send(
        MessageActivityInput(text="Here is the latest chart:").add_attachments(
            Attachment(
                content_type="image/png",
                content_url=f"data:image/png;base64,{encoded}",
                name="weekly.png",
            )
        )
    )

キーのプロパティと値:

• content_url: 一致する MIME タイプのプレフィックス base64 バイト。
• content_type: データ URI と実際の画像形式を一致させます。
• b64encode: データ URI のイメージ バイトをエンコードします。
• name: 画像形式に一致するオプションのファイル名を追加します。

string encoded = Convert.ToBase64String(
    await File.ReadAllBytesAsync(
        "./charts/weekly.png",
        cancellationToken));

await context.SendAsync(
    new MessageActivityInput()
        .WithText(
            $"<div>Revenue is up." +
            $"<img src=\"data:image/png;base64,{encoded}\"/>" +
            $"Questions?</div>")
        .WithTextFormat(TextFormats.Xml),
    cancellationToken);

キーのプロパティと値:

• src: 埋め込みイメージに base64 データ URI を使用します。
• TextFormats.Xml: メッセージ本文内の HTML 要素を有効にします。
• height width: 画像要素にオプションのサイズを追加します。

app.on('message', async ({ send }) => {
  const bytes = await readFile('./charts/weekly.png');
  const encoded = bytes.toString('base64');

  await send(
    new MessageActivityInput(
      `<div>Revenue is up.` +
      `<img src="data:image/png;base64,${encoded}"/>` +
      `Questions?</div>`
    ).withTextFormat('xml')
  );
});

キーのプロパティと値:

• src: 埋め込みイメージに base64 データ URI を使用します。
• withTextFormat('xml'): メッセージ本文で HTML 要素を有効にします。
• height width: 画像要素にオプションのサイズを追加します。

@app.on_message
async def send_positioned_image(
    ctx: ActivityContext[MessageActivity],
) -> None:
    encoded = base64.b64encode(
        Path("./charts/weekly.png").read_bytes()
    ).decode("ascii")

    await ctx.send(
        MessageActivityInput(
            text=(
                '<div>Revenue is up.'
                f'<img src="data:image/png;base64,{encoded}"/>'
                'Questions?</div>'
            )
        ).with_text_format("xml")
    )

キーのプロパティと値:

• src: 埋め込みイメージに base64 データ URI を使用します。
• with_text_format("xml"): メッセージ本文で HTML 要素を有効にします。
• height width: 画像要素にオプションのサイズを追加します。