カスタムアプリから Teams 会議への音声/ビデオ通話

[アーティクル]
Developer (中級)
完了まで 59 分

レベル: 中級

このチュートリアルでは、カスタム React アプリケーションで Azure Communication Services を使用して、ユーザーがMicrosoft Teams会議に音声/ビデオ通話を行えるようにする方法について説明します。このシナリオを可能にするために使用できるさまざまな構成要素について学習し、関連するさまざまな Microsoft Cloud サービスについて説明する実践的な手順を提供します。

このチュートリアルで構築する内容

アプリケーションソリューションの概要

ACS オーディオ/ビデオソリューション

前提条件

ノード LTS - このプロジェクトにはノード LTS が使用されます
git
Visual Studio Code または選択した別の IDE。
VS Code 用 Azure Functions 拡張機能
Azure Functions Core Tools
Azure サブスクリプション
Microsoft 365 開発者テナント
GitHub アカウント
Visual Studio C# バージョンのチュートリアルを使用している場合。必要に応じて、Visual Studio Code を使用することもできます。

このチュートリアルで使用されるテクノロジには、

React
Azure Communication Services
Azure Functions
Microsoft Graph
Microsoft Teams

Azure Communication Services リソースを作成する

残り 57 分

この演習では、Azure portal で Azure Communication Services (ACS) リソースを作成します。

Azure portal の ACS

開始するには、次のタスクを実行します。

ブラウザーで Azure ポータルにアクセスし、サインインします。
ページ上部検索バーに「communication services」と入力し表示されるオプションから Communication Services を選択します。
ツールバーの Create を選択します。
次のタスクを実行します。
- Azure サブスクリプションを選択します。
- 使用するリソースグループを選択します (存在しない場合は新しいリソースグループを作成します)。
- ACS リソース名を入力します。これは一意の値である必要があります。
- データの場所を選択します。
Review + Createを選択し、その後に Create を選択します。
ACS リソースが作成されたら、そのリソースに移動し、 Settings --> ID とユーザーアクセストークンを選択します。
Voice and video calling (VOIP) チェックボックスをオンにします。
生成を選択します。
Identity と User Access トークン値をローカルファイルにコピーします。この演習の後半で値が必要になります。
Settings --> キーを選択しユーザー ID とトークン値をコピーしたローカルファイルに Primary キー 接続文字列値をコピーします。
アプリケーションを実行するには、Teams 会議リンクが必要です。 Microsoft Teamsに移動し、Microsoft 365 開発者テナントでサインインし、左側の Calendar オプションを選択します。

ヒント

現在 Microsoft 365 アカウントをお持ちでない場合は、 Microsoft 365 Developer Program サブスクリプションにサインアップできます。これは 90 日間無料であり、開発アクティビティに使用している限り、継続的に更新されます。 Visual Studio Enterprise または Professional サブスクリプションをお持ちの場合、どちらのプログラムにも無料の Microsoft 365 developer サブスクリプションが含まれており、Visual Studio サブスクリプションの有効期間中アクティブです。
予定表の任意の日付/時刻を選択し、会議のタイトルを追加し、Microsoft 365 開発者テナントからユーザーを招待して、保存を選択します。
予定表に追加した新しい会議を選択し、ACS ユーザー ID、トークン、接続文字列を保存したのと同じファイルに表示される Teams 会議リンクをコピーします。
ACS リソースがセットアップされ、Teams 会議参加リンクが作成されたので、React アプリケーションを稼働させましょう。

Azure Communication Services 呼び出しを React アプリに統合する

残り 47 分

この演習では、 ACS UI 呼び出し複合を React アプリに追加して、カスタムアプリからMicrosoft Teams会議に音声/ビデオ通話を行えるようにします。

React の ACS

GitHub にアクセスしサインインします。 GitHub アカウントをまだお持ちでない場合は、 Sign up オプションを選択して作成できます。
Microsoft Cloud GitHub リポジトリにアクセスします。
Fork オプションを選択して、目的の GitHub 組織/アカウントにリポジトリを追加します。
次のコマンドを実行して、このリポジトリをマシンに複製します。 <YOUR_ORG_NAME>を GitHub の組織名またはアカウント名に置き換えます。
```
git clone https://github.com/<YOUR_ORG_NAME>/MicrosoftCloud
```
Visual Studio Code で サンプル/acs-to-teams-meeting プロジェクトフォルダーを開きます。
client/react フォルダーを展開します。
VS Code で package.json ファイルを開き、次の ACS パッケージが含まれていることに注意してください。
```
@azure/communication-common 
@azure/communication-react
```
ターミナルウィンドウを開き、次のコマンドを実行して、 npm 10 以降がインストールされていることを再確認します。
```
npm --version
```
ヒント

pm 10 以降がインストールされていない場合npm install -g npmを実行して npm を最新バージョンに更新できます。
ターミナルウィンドウを開き、react フォルダーで npm install コマンドを実行して、アプリケーションの依存関係をインストールします。
App.tsxを開き、ファイルの上部にあるインポートを調べるのに少し時間がかかります。これらは、アプリで使用される ACS セキュリティおよびオーディオ/ビデオ呼び出しシンボルのインポートを処理します。
```
import { 
    AzureCommunicationTokenCredential,
    CommunicationUserIdentifier 
} from '@azure/communication-common';
import {  
  CallComposite, 
  fromFlatCommunicationIdentifier, 
  useAzureCommunicationCallAdapter 
} from '@azure/communication-react';
import React, { useState, useMemo, useEffect } from 'react';
import './App.css';
```
Note

CallComposite コンポーネントの使用方法については、この演習の後半で説明します。アプリからMicrosoft Teams会議への音声/ビデオ通話を可能にする Azure Communication Services の主要な UI 機能を提供します。
App コンポーネントを見つけて、次のタスクを実行します。
- 少し時間を取って、コンポーネント内の useState 定義を調べます。
- userId useState関数の空の引用符を、前の演習でコピーした ACS ユーザー ID 値に置き換えます。
- token useState関数の空の引用符を、前の演習でコピーした ACS トークン値に置き換えます。
- teamsMeetingLink useState関数の空の引用符を、前の演習でコピーした Teams 会議リンクの値に置き換えます。
```
// Replace '' with the ACS user identity value
const [userId, setUserId] = useState<string>('');

// Replace '' with the ACS token value
const [token, setToken] = useState<string>('');

// Replace '' with the Teams meeting link value
const [teamsMeetingLink, setTeamsMeetingLink] = useState<string>('');
```
Note

このチュートリアルの後半では、 userId、 token、および teamsMeetingLink の値を動的に取得する方法について説明します。
少し時間を取って、App コンポーネントのuseMemo関数を調べてみましょう。
- credential useMemo関数は、トークンに値が設定されると、新しいAzureCommunicationTokenCredential インスタンスを作成します。
- callAdapterArgs useMemo関数は、オーディオ/ビデオ呼び出しを行うために使用される引数を持つオブジェクトを返します。 ACS 呼び出し引数の userId、 credential、および teamsMeetingLink の値が使用されていることに注意してください。
```
const credential = useMemo(() => {
    if (token) {
        return new AzureCommunicationTokenCredential(token)
    }
    return;
}, [token]);

const callAdapterArgs = useMemo(() => {
    if (userId && credential && displayName && teamsMeetingLink) {
        return {
            userId: fromFlatCommunicationIdentifier(userId) as CommunicationUserIdentifier,
            displayName,
            credential,
            locator: { meetingLink: teamsMeetingLink },
        }
    }
    return {};
}, [userId, credential, displayName, teamsMeetingLink]);
```
Note

useMemo は、必要なパラメーターが渡されるときに、 AzureCommunicationTokenCredential オブジェクトと呼び出しアダプターの引数を 1 回だけ作成する必要があるため、このシナリオで使用されます。 useMemo の詳細については、こちらを参照してください。
credentialsとcallAdapterArgsの準備ができたら、次の行は ACS によって提供される useAzureCommunicationCallAdapter React フックを使用して ACS コールアダプタを作成します。 callAdapter オブジェクトは、後で複合コンポーネントを呼び出す UI で使用されます。
```
const callAdapter = useAzureCommunicationCallAdapter(callAdapterArgs);
```
Note

useAzureCommunicationCallAdapterは React フックであるため、callAdapterArgs値が有効になるまで、callAdapterに値が割り当てられません。

以前に、 App コンポーネントの状態値へのユーザー ID、トークン、および Teams 会議リンクを割り当てた。現時点では問題ありませんが、後の演習では、これらの値を動的に取得する方法について説明します。前に値を設定したので、次に示すように、 useEffect 関数のコードをコメントアウトします。次の演習で Azure Functions を実行したら、このコードを見直します。

useEffect(() => {
    /* Commenting out for now

    const init = async () => {
        setMessage('Getting ACS user');
        //Call Azure Function to get the ACS user identity and token
        let res = await fetch(process.env.REACT_APP_ACS_USER_FUNCTION as string);
        let user = await res.json();
        setUserId(user.userId);
        setToken(user.token);

        setMessage('Getting Teams meeting link...');
        //Call Azure Function to get the meeting link
        res = await fetch(process.env.REACT_APP_TEAMS_MEETING_FUNCTION as string);
        let link = await res.text();
        setTeamsMeetingLink(link);
        setMessage('');
        console.log('Teams meeting link', link);
    }
    init();

    */
}, []);

次の JSX コードを見つけます。インポートした CallComposite 記号を使用して、React アプリから Teams 会議に音声/ビデオ通話を行うために使用されるユーザーインターフェイスをレンダリングします。前に調べた callAdapter は、必要な引数を指定するために、 adapter プロパティに渡されます。
```
if (callAdapter) {
    return (
        <div>
            <h1>Contact Customer Service</h1>
            <div className="wrapper">
                <CallComposite
                    adapter={callAdapter} 
                />
            </div>
        </div>
    );
}
```
続行する前にファイルを保存します。
ターミナルウィンドウで npm start を実行して、アプリケーションを実行します。 react フォルダー内でコマンドを実行してください。
アプリケーションがビルドされると、呼び出し元の UI が表示されます。マイクとカメラの選択を有効にして、通話を開始します。待合室に配置されていることがわかります。 Microsoft Teamsで前に設定した会議に参加する場合は、ゲストに会議への参加を許可できます。
Ctrl + C キーを押して、アプリケーションを停止します。これで正常に実行できたので、ACS ユーザー ID とトークンを動的に取得し、Microsoft Teams会議を自動的に作成し、Microsoft Graph を使用して参加 URL を返す方法について説明します。

Microsoft Graph を使用してMicrosoft Teams会議を動的に作成する

残り 37 分

この演習では、Azure Functions と Microsoft Graph を使用して、Microsoft Teams会議リンクを作成し、ACS に渡すプロセスを自動化します。

Teams 会議を作成する

デーモンアプリ認証用の Microsoft Entra ID アプリを作成する必要があります。この手順では、 app 資格情報を使用してバックグラウンドで認証が処理され Microsoft Entra ID アプリはアプリケーションのアクセス許可を使用して Microsoft Graph API 呼び出しを行います。 Microsoft Graph は、Microsoft Teams会議を動的に作成し、Teams 会議の URL を返すために使用されます。
Microsoft Entra ID アプリを作成するには、次の手順を実行します。
1. Azure ポータルに移動しMicrosoft Entra ID 選択します。
2. [アプリの登録] タブの後に [+ 新規登録を選択します。
3. 次に示すように、新しいアプリ登録フォームの詳細を入力し、 Registerを選択します。
  - 名前: ACS Teams 相互運用アプリ
  - サポートされているアカウントの種類: 任意の組織のディレクトリ (任意の Microsoft Entra ID ディレクトリ - マルチテナント) 内のアカウントと個人の Microsoft アカウント (Skype、Xbox など)
  - リダイレクト URI: 空白のままにします
4. アプリが登録されたら、API のアクセス許可に移動し+ アクセス許可の追加を選択します。
5. Microsoft Graphの後にアプリケーションのアクセス許可を選択します。
6. Calendars.ReadWriteアクセス許可を選択し、追加を選択します。
7. アクセス許可を追加した後、<YOUR_ORGANIZATION_NAME>の管理者の同意を選択します。
8. Certificates & secrets タブに移動し、+ 新しいクライアントシークレットを選択し、追加を選択します。
9. シークレットの値をローカルファイルにコピーします。この値は、この演習の後半で使用します。
10. Overview タブに移動し、Application (client) IDとDirectory (tenant) IDの値を前の手順で使用したのと同じローカルファイルにコピーします。

Visual Studio で samples/acs-to-teams-meeting/server/csharp/GraphACSFunctions.sln を開くか、Visual Studio Code で GraphACSFunctions フォルダーを開きます。
GraphACSFunctions プロジェクトに移動し、次の値を持つlocal.settings.json ファイルを作成します。
```
{
    "IsEncrypted": false,
    "Values": {
        "FUNCTIONS_WORKER_RUNTIME": "dotnet-isolated",
        "TENANT_ID": "",
        "CLIENT_ID": "",
        "CLIENT_SECRET": "",
        "USER_ID": "",
        "ACS_CONNECTION_STRING": ""
    },
    "Host": {
        "LocalHttpPort": 7071,
        "CORS": "*",
        "CORSCredentials": false
    },
    "watchDirectories": [
        "Shared"
    ]
}
```
- 前の演習でローカルファイルにコピーした値を使用して、 TENANT_ID、 CLIENT_ID 、 CLIENT_SECRET の値を更新します。
- Microsoft Teams会議を作成するユーザー ID を使用して USER_ID を定義します。
ユーザー ID は、 Azure ポータルから取得できます。
- Microsoft 365 開発者テナント管理者アカウントを使用してログインします。
- Microsoft Entra ID を選択する
- サイドバーの Users タブに移動します。
- ユーザー名を検索して選択すると、ユーザーの詳細が表示されます。
- ユーザーの詳細内で、 Object ID は User IDを表します。 Object ID値をコピーし、local.settings.jsonのUSER_ID値に使用します。
Note

ACS_CONNECTION_STRING は次の演習で使用されるため、まだ更新する必要はありません。

acs-to-teams-meeting/server/csharp フォルダーにあるGraphACSFunctions.slnを開き、次の Microsoft Graph および ID パッケージが含まれていることに注意してください。

<PackageReference Include="Azure.Communication.Identity" Version="1.3.1" />
<PackageReference Include="Azure.Identity" Version="1.11.2" />
<PackageReference Include="Microsoft.Graph" Version="5.51.0" />

Program.csに移動し、ConfigureServices メソッドで次のコードに注意してください。

    var host = new HostBuilder()
        .ConfigureFunctionsWebApplication()
        .ConfigureServices(services => {
            services.AddApplicationInsightsTelemetryWorkerService();
            services.ConfigureFunctionsApplicationInsights();
            services.AddSingleton(static p =>
            {
                var config = p.GetRequiredService<IConfiguration>();
                var clientSecretCredential = new ClientSecretCredential(
                    config.GetValue<string>("TENANT_ID"),
                    config.GetValue<string>("CLIENT_ID"),
                    config.GetValue<string>("CLIENT_SECRET")
                );

                return new GraphServiceClient(
                    clientSecretCredential,
                    ["https://graph.microsoft.com/.default"]
                );
            });

            ...

            services.AddSingleton<IGraphService, GraphService>();
        })
        .Build();
}

このコードでは、Azure Functions から Microsoft Graph を呼び出すために使用できる GraphServiceClient オブジェクトを作成します。これはシングルトンであり、他のクラスに挿入できます。
GraphServiceClient コンストラクターにClientSecretCredential値を渡すことで、アプリ専用のアクセス許可 (Calendars.ReadWrite など) を使用して Microsoft Graph API 呼び出しを行うことができます。 ClientSecretCredentialは、Microsoft Entra ID アプリのTenant Id、Client Id、およびClient Secretの値を使用します。

Services/GraphService.cs を開きます。

少し時間を取って、 CreateMeetingEventAsync メソッドを調べてみましょう。

using System;
using System.Threading.Tasks;
using Microsoft.Graph;
using Microsoft.Extensions.Configuration;

namespace GraphACSFunctions.Services;

public class GraphService : IGraphService
{
    private readonly GraphServiceClient _graphServiceClient;
    private readonly IConfiguration _configuration;

    public GraphService(GraphServiceClient graphServiceClient, IConfiguration configuration)
    {
        _graphServiceClient = graphServiceClient;
        _configuration = configuration;
    }

    public async Task<string> CreateMeetingAsync()
    {
        var userId = _configuration.GetValue<string>("USER_ID");
        var newMeeting = await _graphServiceClient
            .Users[userId]
            .Calendar
            .Events
            .PostAsync(new()
            {
                Subject = "Customer Service Meeting",
                Start = new()
                {
                    DateTime = DateTime.UtcNow.ToString("yyyy-MM-ddTHH:mm:ss"),
                    TimeZone = "UTC"
                },
                End = new()
                {
                    DateTime = DateTime.UtcNow.AddHours(1).ToString("yyyy-MM-ddTHH:mm:ss"),
                    TimeZone = "UTC"
                },
                IsOnlineMeeting = true
            });
        return newMeeting.OnlineMeeting.JoinUrl;
    }
}

GraphServiceClient オブジェクトと IConfiguration オブジェクトがコンストラクターに挿入され、フィールドに割り当てられます。
CreateMeetingAsync()関数は、Microsoft Graph Calendar Events API にデータをポストします。この API は、ユーザーの予定表にイベントを動的に作成し、結合 URL を返します。

TeamsMeetingFunctions.csを開き、少し時間を取ってコンストラクターを調べます。前に確認した GraphServiceClient が挿入され、 _graphService フィールドに割り当てられます。
```
private readonly IGraphService _graphService;

public TeamsMeetingFunction(IGraphService graphService) => _graphService = graphService;
```

Runメソッドを見つけます。

[Function("HttpTriggerTeamsUrl")]
public async Task<HttpResponseData> Run(
    [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = null)] HttpRequestData req,
    ILogger log)
{
    var response = req.CreateResponse(HttpStatusCode.OK);
    await response.WriteStringAsync(await _graphService.CreateMeetingAsync());
    return response;
}

HTTP GET 要求で呼び出すことができる HttpTriggerTeamsUrl の関数名を定義します。
_graphService.CreateMeetingAsync()が呼び出され、新しいイベントが作成され、結合 URL が返されます。

Visual Studio で F5 キーを押すか、メニューから Debug --> デバッグの開始 を選択して、プログラムを実行します。このアクションにより、Azure Functions プロジェクトが開始され、 ACSTokenFunction が呼び出し可能になります。

Note

VS Code を使用している場合は、 GraphACSFunctions フォルダーでターミナルウィンドウを開き、 func start実行できます。これは、コンピューターに Azure Functions Core Tools がインストールされていることを前提としています。

Visual Studio Code で サンプル/acs-to-teams-meeting/server/typescript プロジェクトフォルダーを開きます。
次の値を使用して local.settings.json ファイルを作成します。
```
{
    "IsEncrypted": false,
    "Values": {
        "FUNCTIONS_WORKER_RUNTIME": "node",
        "TENANT_ID": "",
        "CLIENT_ID": "",
        "CLIENT_SECRET": "",
        "USER_ID": "",
        "ACS_CONNECTION_STRING": ""
    },
    "Host": {
        "LocalHttpPort": 7071,
        "CORS": "*",
        "CORSCredentials": false
    },
    "watchDirectories": [
        "Shared"
    ]
}
```
- 前の演習でローカルファイルにコピーした値を使用して、 TENANT_ID、 CLIENT_ID 、 CLIENT_SECRET の値を更新します。
- Microsoft Teams会議を作成するユーザー ID を使用して USER_ID を定義します。
ユーザー ID は、 Azure ポータルから取得できます。
- Microsoft 365 開発者テナント管理者アカウントを使用してログインします。
- Microsoft Entra ID を選択します。
- サイドバーの Users タブに移動します。
- ユーザー名を検索して選択すると、ユーザーの詳細が表示されます。
- ユーザーの詳細内で、 Object ID は User IDを表します。 Object ID値をコピーし、local.settings.jsonのUSER_ID値に使用します。
Note

ACS_CONNECTION_STRING は次の演習で使用されるため、まだ更新する必要はありません。
VS Code で package.json ファイルを開き、次の Microsoft Graph および ID パッケージが含まれていることに注意してください。
```
@azure/communication-identity
@azure/identity
@microsoft/microsoft-graph-client
```
typescript フォルダーでターミナルウィンドウを開き、npm install コマンドを実行してアプリケーションの依存関係をインストールします。
Shared/graph.tsを開き、ファイルの上部にあるインポートを調べるのに少し時間がかかります。このコードは、Azure 関数で Microsoft Graph を呼び出すために使用される認証シンボルとクライアントシンボルのインポートを処理します。
```
import { startDateTimeAsync, endDateTimeAsync } from './dateTimeFormat';
import { ClientSecretCredential } from '@azure/identity';
import { Client } from '@microsoft/microsoft-graph-client';
import { TokenCredentialAuthenticationProvider } from '@microsoft/microsoft-graph-client/authProviders/azureTokenCredentials';
import 'isomorphic-fetch';
```
ヒント

この演習の後半で使用する dateTimeFormat.ts からのインポートも表示されます。 startDateTimeAsync と endDateTimeAsync は、会議の開始日と終了日を定義するためのMicrosoft Teams会議リンクを作成するときに使用されます。
少し時間を取って、 clientSecretCredential と appGraphClientを調べます。これらは、認証プロセスの後半で、Microsoft Graph API を呼び出すときに使用されます。
```
let clientSecretCredential;
let appGraphClient;
```

ensureGraphForAppOnlyAuth関数を見つけます。

ClientSecretCredential は、Microsoft Entra ID アプリの Tenant Id、 Client Id 、および Client Secret の値を使用します。
authProvider オブジェクトは、バックグラウンドで認証を行い、アプリ専用のアクセス許可 (Calendars.ReadWrite など) を使用して Microsoft Graph API 呼び出しを行う Microsoft Entra ID アプリとして定義されます。

function ensureGraphForAppOnlyAuth() {
    if (!clientSecretCredential) {
        clientSecretCredential = new ClientSecretCredential(
            process.env.TENANT_ID,
            process.env.CLIENT_ID,
            process.env.CLIENT_SECRET
        );
    }

    if (!appGraphClient) {
        const authProvider = new TokenCredentialAuthenticationProvider(
        clientSecretCredential, {
            scopes: [ 'https://graph.microsoft.com/.default' ]
        });

        appGraphClient = Client.initWithMiddleware({
            authProvider: authProvider
        });
    }
}

createNewMeetingAsync関数について少しお待ちください。データを Microsoft Graph Calendar Events API に投稿します。この API は、ユーザーの予定表にイベントを動的に作成し、新しいイベントの詳細を返します。

async function createNewMeetingAsync(userId) {
    ensureGraphForAppOnlyAuth();
    let startTime = await startDateTimeAsync();
    let endTime = await endDateTimeAsync();
    const newMeeting = `/users/${userId}/calendar/events`;

    const event = {
    subject: 'Customer Service Meeting',
    start: {
        dateTime: startTime,
        timeZone: 'UTC'
    },
    end: {
        dateTime: endTime,
        timeZone: 'UTC'
    },
    isOnlineMeeting: true
    };

    const newEvent = await appGraphClient.api(newMeeting).post(event);    
    return newEvent;     
}

export default createNewMeetingAsync;

server/typescript/src/functions/httpTriggerTeamsUrl.tsに移動し、Http Trigger 関数を調べる:

createNewMeetingAsync は graph.tsからインポートされます。新しいイベントの詳細の作成と取得を処理します。
userId は、Http トリガー関数内の local.settings.json から取得されます。この取得は、process.env.USER_IDを使用してUSER_ID環境変数にアクセスすることによって行われます。
関数がトリガーされると、定義されたユーザー ID を使用して createNewMeetingAsync を呼び出し、パラメーターに新しいイベントの詳細 teamMeetingLink 返します。
この関数は、 meeting.onlineMeeting.joinUrl を呼び出して Teams 会議参加 URL にアクセスし、応答の本文の値を返します。

import { app, HttpRequest, HttpResponseInit, InvocationContext } from "@azure/functions";
import createNewMeetingAsync from '../../Shared/graph';

let teamsMeetingLink;

export async function httpTriggerTeamsUrl(request: HttpRequest, context: InvocationContext): Promise<HttpResponseInit> {
    context.log("Request received");
    const userId = process.env.USER_ID;
    context.log('UserId', userId);

    teamsMeetingLink = await createNewMeetingAsync(userId);
    const body = JSON.stringify(teamsMeetingLink);
    const meeting = JSON.parse(body);
    context.log("meeting:", meeting);

    return {
        // status: 200, /* Defaults to 200 */
        body: meeting.onlineMeeting.joinUrl
    }    
};

app.http('httpTriggerTeamsUrl', {
    methods: ['GET'],
    authLevel: 'anonymous',
    handler: httpTriggerTeamsUrl
});

export default httpTriggerTeamsUrl;

ターミナルウィンドウを使用して、amples/acs-video-to-teams-meeting/server/typescript フォルダー内のnpm startを実行して、関数をローカルで実行します。

React からの Azure 関数の呼び出し

httpTriggerTeamsUrl関数を使用する準備ができたので、React アプリから呼び出してみましょう。
client/react フォルダーを展開します。
次の値を持つ .env ファイルをフォルダーに追加します。
```
REACT_APP_TEAMS_MEETING_FUNCTION=http://localhost:7071/api/httpTriggerTeamsUrl
REACT_APP_ACS_USER_FUNCTION=http://localhost:7071/api/httpTriggerAcsToken
```
これらの値は、ビルドプロセス中に必要に応じて簡単に変更できるように、ビルド時に React に渡されます。
VS Code で client/react/App.tsx ファイルを開きます。
コンポーネント内の teamsMeetingLink 状態変数を見つけます。ハードコーディングされたチームのリンクを削除し、空の引用符で置き換えます。
```
const [teamsMeetingLink, setTeamsMeetingLink] = useState<string>('');
```

useEffect関数を見つけて、次のように変更します。これにより、前に確認した Azure 関数の呼び出しが処理され、Teams 会議が作成され、会議参加リンクが返されます。

useEffect(() => {
    const init = async () => {
        /* Commenting out for now
        setMessage('Getting ACS user');
        //Call Azure Function to get the ACS user identity and token
        const res = await fetch(process.env.REACT_APP_ACS_USER_FUNCTION as string);
        const user = await res.json();
        setUserId(user.userId);
        setToken(user.token);
        */

        setMessage('Getting Teams meeting link...');
        //Call Azure Function to get the meeting link
        const resTeams = await fetch(process.env.REACT_APP_TEAMS_MEETING_FUNCTION as string);
        const link = await resTeams.text();
        setTeamsMeetingLink(link);
        setMessage('');
        console.log('Teams meeting link', link);

    }
    init();

}, []);

続行する前にファイルを保存します。
ターミナルウィンドウを開き、*react フォルダーに cd し、 npm start を実行してアプリケーションをビルドして実行します。
アプリケーションのビルドと読み込みが完了すると、ACS 呼び出し UI が表示され、Microsoft Graph によって動的に作成された Teams 会議に呼び出すことができます。
ターミナルウィンドウに「 Ctrl + C 」と入力して、ターミナルプロセスを停止します。
Azure Functions プロジェクトを停止します。

Note

他の方法でMicrosoft Teams会議拡張する方法の詳細については Azure Communication Services のドキュメントを参照してください。

Azure Communication Services の ID とトークンを動的に作成する

残り 27 分

この演習では、Azure Functions を使用して Azure Communication Services からユーザー ID とトークン値を動的に取得する方法について説明します。取得されると、値が ACS UI 複合に渡され、顧客が呼び出しを行えるようにします。

ACS ID とトークンを作成する

C#
TypeScript

local.settings.jsonを開き、前の演習で保存した ACS 接続文字列でACS_CONNECTION_STRINGの値を更新します。

Visual Studio でStartup.csを開き、ConfigureServices() メソッドの 2 つ目のAddSingleton()呼び出しを調べる。

var host = new HostBuilder()
    .ConfigureFunctionsWebApplication()
    .ConfigureServices(services => {

        ...

        services.AddSingleton(static p =>
        {
            var config = p.GetRequiredService<IConfiguration>();
            var connectionString = config.GetValue<string>("ACS_CONNECTION_STRING");
            return new CommunicationIdentityClient(connectionString);
        });

        ...

    })
    .Build();
}

AddSingleton()呼び出しでは、local.settings.jsonのACS_CONNECTION_STRING値を使用してCommunicationIdentityClient オブジェクトが作成されます。
ACSTokenFunction.csを開き、コンストラクターとフィールド定義を見つけます。
- CommunicationTokenScope.VoIPスコープを含むScopesという名前のフィールドが定義されています。このスコープは、ビデオ通話のアクセストークンを作成するために使用されます。
```
private static readonly CommunicationTokenScope[] Scopes =
[
    CommunicationTokenScope.VoIP,
];
```
- Startup.csで作成されたCommunicationIdentityClient シングルトンインスタンスがコンストラクターに挿入され、_tokenClient フィールドに割り当てられます。
```
private readonly CommunicationIdentityClient _tokenClient;

public ACSTokenFunction(CommunicationIdentityClient tokenClient)
{
    _tokenClient = tokenClient;
}
```

ACSTokenFunction.csでRun()メソッドを調べる:

[Function("HttpTriggerAcsToken")]
public async Task<HttpResponseData> Run(
    [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = null)] HttpRequestData req,
    ILogger log)
{
    var user = await _tokenClient.CreateUserAsync();
    var userToken = await _tokenClient.GetTokenAsync(user, Scopes);

    var response = req.CreateResponse(HttpStatusCode.OK);
    await response.WriteAsJsonAsync(
        new
        {
            userId = user.Value.Id,
            userToken.Value.Token,
            userToken.Value.ExpiresOn
        }
    );
    return response;
}

HTTP GET 要求で呼び出すことができる HttpTriggerAcsToken という名前の関数を定義します。
_tokenClient.CreateUserAsync() メソッドを呼び出すことによって、新しい ACS ユーザーが作成されます。
ビデオ呼び出しに使用されるアクセストークンは、 _tokenClient. GetTokenAsync() メソッドを呼び出すことによって作成されます。
ユーザー ID とトークンは、関数から JSON オブジェクトとして返されます。

Visual Studio で F5 キーを押すか、メニューから Debug --> デバッグの開始 を選択して、プログラムを実行します。これにより、Azure Functions プロジェクトが開始され、 ACSTokenFunction が呼び出し可能になります。

Note

VS Code を使用している場合は、 GraphACSFunctions フォルダーでターミナルウィンドウを開き、 func start実行できます。これは、コンピューターに Azure Functions Core Tools がインストールされていることを前提としています。
Azure Functions がローカルで実行されたので、クライアントはそれらを呼び出して ACS ユーザー ID とトークン値を取得できる必要があります。
エディターで サンプル/acs-to-teams-meeting/client/react/App.tsx ファイルを開きます。
コンポーネント内の userId と token 状態変数を見つけます。ハードコーディングされた値を削除し、空の引用符で置き換えます。
```
const [userId, setUserId] = useState<string>('');
const [token, setToken] = useState<string>('');
```

useEffect関数を見つけて、次のように変更して、Azure 関数を呼び出して ACS ユーザー ID とトークンを取得できるようにします。

useEffect(() => {
    const init = async () => {
        setMessage('Getting ACS user');
        //Call Azure Function to get the ACS user identity and token
        let res = await fetch(process.env.REACT_APP_ACS_USER_FUNCTION as string);
        let user = await res.json();
        setUserId(user.userId);
        setToken(user.token);

        setMessage('Getting Teams meeting link...');
        //Call Azure Function to get the meeting link
        res = await fetch(process.env.REACT_APP_TEAMS_MEETING_FUNCTION as string);
        let link = await res.text();
        setTeamsMeetingLink(link);
        setMessage('');
        console.log('Teams meeting link', link);
    }
    init();

}, []);

続行する前にファイルを保存します。
ターミナルウィンドウを開き、react フォルダー内のnpm startを実行します。ビルドと読み込みが完了すると、ACS 呼び出し UI が表示され、Microsoft Graph によって動的に作成された Teams 会議に呼び出すことができます。
ターミナルウィンドウで Ctrl + C キーを押して React アプリを停止します。
Azure Functions プロジェクトを停止します。
Git の変更をコミットし、Visual Studio Code を使用して GitHub リポジトリにプッシュします。
- Source コントロール アイコンを選択します (Visual Studio Code ツールバーの 3 番目のアイコン)。
- コミットメッセージを入力し、Commit を選択します。
- Sync の変更を選択します。

local.settings.jsonを開き、前の演習で保存した ACS 接続文字列でACS_CONNECTION_STRINGの値を更新します。

Visual Studio Code で server/typescript/src/functions/httpTriggerAcsToken.ts を開きます。これには次のコードがあります。

import { app, HttpRequest, HttpResponseInit, InvocationContext } from "@azure/functions";
import { CommunicationIdentityClient } from '@azure/communication-identity';

export async function httpTriggerAcsToken(request: HttpRequest, context: InvocationContext): Promise<HttpResponseInit> {
    // Get ACS connection string from local.settings.json (or App Settings when in Azure)
    const connectionString = process.env.ACS_CONNECTION_STRING;
    let tokenClient = new CommunicationIdentityClient(connectionString);
    const user = await tokenClient.createUser();
    const userToken = await tokenClient.getToken(user, ["voip"]);
    return {
        jsonBody: { userId: user.communicationUserId, ...userToken }
    };
}

app.http('httpTriggerAcsToken', {
    methods: ['GET'],
    authLevel: 'anonymous',
    handler: httpTriggerAcsToken
});

export default httpTriggerAcsToken;

この関数は、次のタスクを実行します。
- ユーザー ID とトークンの作成に使用される CommunicationIdentityClient をインポートします。
```
import { CommunicationIdentityClient } from '@azure/communication-identity';
```
- ACS_CONNECTION_STRINGという名前の環境変数から ACS 接続文字列を取得します。
```
const connectionString = process.env.ACS_CONNECTION_STRING;
```
Note

これは、前にlocal.settings.json ファイルに追加した接続文字列値です。
- 新しいCommunicationIdentityClient インスタンスを作成し、ACS 接続文字列を渡します。
```
let tokenClient = new CommunicationIdentityClient(connectionString);
```
- ACS ユーザーを作成し、Voice Over IP トークンを取得します。
```
const user = await tokenClient.createUser();
const userToken = await tokenClient.getToken(user, ["voip"]);
```
- userId とトークン値を呼び出し元に返します。
```
return {
    jsonBody: { userId: user.communicationUserId, ...userToken }
};
```
ターミナルウィンドウで server/typescript フォルダーに移動し、 npm start実行します。
Azure Functions がローカルで実行されたので、クライアントはそれらを呼び出して ACS ユーザー ID とトークン値を取得できる必要があります。
エディター client/react/App.tsx ファイルを開きます。
コンポーネント内の userId と token 状態変数を見つけます。ハードコーディングされた値を削除し、空の引用符で置き換えます。
```
const [userId, setUserId] = useState<string>('');
const [token, setToken] = useState<string>('');
```

useEffect関数を見つけて、次のように変更して、Azure 関数を呼び出して ACS ユーザー ID とトークンを取得できるようにします。

useEffect(() => {
    const init = async () => {
        setMessage('Getting ACS user');
        //Call Azure Function to get the ACS user identity and token
        let res = await fetch(process.env.REACT_APP_ACS_USER_FUNCTION as string);
        let user = await res.json();
        setUserId(user.userId);
        setToken(user.token);

        setMessage('Getting Teams meeting link...');
        //Call Azure Function to get the meeting link
        res = await fetch(process.env.REACT_APP_TEAMS_MEETING_FUNCTION as string);
        let link = await res.text();
        setTeamsMeetingLink(link);
        setMessage('');
        console.log('Teams meeting link', link);
    }
    init();

}, []);

続行する前にファイルを保存します。
別のターミナルを開き、react フォルダーでnpm startを実行します。ビルドと読み込みが完了すると、ACS 呼び出し UI が表示され、Microsoft Graph によって動的に作成された Teams 会議に呼び出すことができます。
Ctrl + C を選択して、両方のターミナルプロセス (React と Azure Functions) を停止します。
Git の変更をコミットし、Visual Studio Code を使用して GitHub リポジトリにプッシュします。
- Source コントロール アイコンを選択します (Visual Studio Code ツールバーの 3 番目のアイコン)。
- コミットメッセージを入力し、Commit を選択します。
- Sync の変更を選択します。

アプリを Azure Functions と Azure Container Apps にデプロイする

残り 17 分

重要

このチュートリアルに記載されている前提条件に加えてこの演習を完了するには、コンピューターに次のツールをインストールする必要もあります。

Azure CLI
VS Code を使用している場合は、 Azure Functions 拡張機能をインストールします

この演習では、前の演習で説明した Microsoft Graph 関数と ACS 関数を Azure Functions にデプロイする方法について説明します。また、コンテナーイメージをビルドし、Azure Container Apps にデプロイします。

Azure Container Apps

Azure Functions へのデプロイ

C#
TypeScript

Note

このセクションでは、 Visual Studio を使用して、C# 関数を Azure に発行します。 Visual Studio Code を使用する場合は、「Visual Studio Code を使用して Azure で C# 関数を作成するクイックスタート」の手順に従ってください。

Visual Studio で samples/acs-video-to-teams-meeting/server/csharp/GraphACSFunctions.sln プロジェクトを開きます。
GraphACSFunctions プロジェクトを右クリックし、Publish を選択します。
ターゲットセクションで Azure を選択し、[次へ ] をクリック。
Azure Function App (Windows)を選択し、[次へ] をクリック。
サブスクリプションを選択し、 + 新規作成を選択します。
次の情報を入力してください。
- 関数名: グローバルに一意の名前が必要です。例: acsFunctions<YOUR_LAST_NAME>。
- [サブスクリプション]:サブスクリプションを選択します。
- リソースグループ: このチュートリアルで先ほど作成したリソースグループを選択するか、新しいリソースグループを作成することもできます。
- ホスティングプラン: 従量課金プラン。
- 場所: デプロイ先のリージョンを選択します。
- Azure Storage: 新しいストレージを作成します。 (既存のストレージアカウントを選択することもできます)。
- Azure Insights: 新しい分析情報を作成します。 (既存のストレージアカウントを選択することもできます)。
Note

グローバルに一意の名前が必要です。名前の末尾に番号または姓を追加することで、名前をより一意にすることができます。
Azure Function App が作成されると、確認画面が表示されます。 パッケージから実行オプションが選択されていることを確認し、Finish を選択します。
Publish を選択して、関数を Azure にデプロイします。
関数が Azure にデプロイされたら、Azure portal に移動し、作成した関数アプリを選択します。
デプロイした関数の URL をコピーします。この値は、この演習の後半で使用します。
左側のメニューで Settings --> Configuration を選択します。
[ + 新しいアプリケーション設定 ボタンを選択し、 アプリケーション設定に次のキーと値を追加します。これらの値は、GraphACSFunctions プロジェクトのlocal.settings.jsonから取得できます。
```
# Retrieve these values from local.settings.json
TENANT_ID: <YOUR_VALUE>
CLIENT_ID: <YOUR_VALUE>
CLIENT_SECRET: <YOUR_VALUE>
USER_ID: <YOUR_VALUE>
ACS_CONNECTION_STRING: <YOUR_VALUE>
```
保存ボタンを選択して設定を保存します。
最後に、関数アプリの CORS (クロスオリジンリソース共有) を有効にして、関数アプリの API にドメインの外部からアクセスできるようにする必要があります。左側のメニューで Settings --> CORS を選択します。
Allowed Origins テキストボックスに「* (任意のドメインからアクセス可能)」と入力し、Save ボタンを選択します。

VS Code を使用して関数コードを Azure Functions にデプロイすることから始めましょう。

server/typescript プロジェクトフォルダーを開きます。
既に npm install を実行し、プロジェクトルートに node_modules フォルダーが表示されている必要があります。そうでない場合は、コマンドウィンドウを開き、 npm install を実行して依存関係をインストールします。
Mac で VS Code コマンドパレット (Shift + Cmd + P を開く | Windows の場合は Shift + Ctrl + P ) を押し、[Azure Functions: Create Function App in Azure]$Azure で関数アプリを作成する$ 選択。

Note

このオプションが表示されない場合は、VS Code に Azure Functions 拡張機能がインストールされていることを確認。
次の情報を入力するように求められます。
- Azure サブスクリプション名。
- 関数名: acsFunctions<YOUR_LAST_NAME>。
Note

グローバルに一意の名前が必要です。名前の末尾に番号または姓を追加することで、名前をより一意にすることができます。
- ランタイムスタック - 最新の Node.js LTS バージョンを選択します。
- リージョン (任意のリージョンを選択)。
Azure Function App が作成されると、詳細の表示に関するメッセージが表示されます。
VS Code のコマンドパレットに戻り、 Azure Functions: Deploy to Function App を選択します。サブスクリプションと、前に作成した関数アプリ名を選択するように求められます。
関数が Azure にデプロイされたら、次の操作を行います。
- VS Code で Azure 拡張機能を選択します (サイドバーの Azure アイコンをクリックします)。
- ご自分のサブスクリプションを展開します。
- 関数アプリを展開します。
- 関数を右クリックし、 Browse Web サイトを選択します。続行する前に、関数アプリが正しく動作していることを確認します。
Azure 関数ドメインをローカルファイルにコピーします。この値は、この演習の後半で使用します。

Azure Container Apps をデプロイする

最初に実行するタスクは、新しい Azure Container Registry (ACR) リソースを作成することです。レジストリが作成されたら、イメージをビルドしてレジストリにプッシュします。
コマンドウィンドウを開き、次のコマンドを実行して Azure サブスクリプションにログインします。
```
az login
```

プレースホルダーの値を適宜置き換えて、次のシェル変数を追加します。 <GITHUB_USERNAME>を小文字として追加し、Azure Functions ドメインの<AZURE_FUNCTIONS_DOMAIN>値に置き換えます (ドメイン値にhttps://を含めます)。

Bash
PowerShell

GITHUB_USERNAME="<YOUR_GITHUB_USERNAME>"
RESOURCE_GROUP="<YOUR_RESOURCE_GROUP_NAME>"
ACR_NAME="aca"$GITHUB_USERNAME
AZURE_FUNCTIONS_DOMAIN="<YOUR_AZURE_FUNCTIONS_URL>"

$GITHUB_USERNAME="<YOUR_GITHUB_USERNAME>"
$RESOURCE_GROUP="<YOUR_RESOURCE_GROUP_NAME>"
$ACR_NAME="aca"+$GITHUB_USERNAME
$AZURE_FUNCTIONS_DOMAIN="<YOUR_AZURE_FUNCTIONS_URL>"

次のコマンドを実行して、新しい Azure Container Registry リソースを作成します。

Bash
PowerShell

az acr create \
    --resource-group $RESOURCE_GROUP \
    --name $ACR_NAME \
    --sku Basic \
    --admin-enabled true

az acr create `
    --resource-group $RESOURCE_GROUP `
    --name $ACR_NAME `
    --sku Basic `
    --admin-enabled true

エディターで client/react/Dockerfile ファイルを開き、次のタスクが実行されていることを確認します。
- React アプリケーションがビルドされ、 build ステージに割り当てられます。
- nginx サーバーが構成され、 build ステージの出力が nginx サーバーイメージにコピーされます。

client/react フォルダーのルートから次のコマンドを実行して、Azure でコンテナーイメージをビルドします。 <YOUR_FUNCTIONS_DOMAIN>は、この演習の前半でローカルファイルにコピーした Azure Functions ドメインに置き換えます。

Bash
PowerShell

az acr build --registry $ACR_NAME --image acs-to-teams-meeting \
  --build-arg REACT_APP_ACS_USER_FUNCTION=$AZURE_FUNCTIONS_DOMAIN/api/httpTriggerAcsToken \
  --build-arg REACT_APP_TEAMS_MEETING_FUNCTION=$AZURE_FUNCTIONS_DOMAIN/api/httpTriggerTeamsUrl .

az acr build --registry $ACR_NAME --image acs-to-teams-meeting `
  --build-arg REACT_APP_ACS_USER_FUNCTION=+$AZURE_FUNCTIONS_DOMAIN+/api/httpTriggerAcsToken `
  --build-arg REACT_APP_TEAMS_MEETING_FUNCTION=+$AZURE_FUNCTIONS_DOMAIN+/api/httpTriggerTeamsUrl .

次のコマンドを実行して、レジストリ内のイメージを一覧表示します。新しいイメージが一覧表示されます。
```
az acr repository list --name $ACR_NAME --output table
```
イメージがデプロイされたので、コンテナーを実行できる Azure Container App を作成する必要があります。
ブラウザーで Azure ポータルにアクセスし、サインインします。
上部の検索バーに「 container apps 」と入力し、表示されるオプションから Container Apps を選択します。
ツールバーの Create を選択します。

Note

Azure portal を使用していますが、Azure CLI を使用してコンテナーアプリを作成することもできます。詳細については、クイックスタート: コンテナアプリを使用した最初のコンテナーアプリのデプロイに関するページを参照してください。この演習の最後に Azure CLI を使用する方法の例も示します。
次のタスクを実行します。
- サブスクリプションを選択します。
- 使用するリソースグループを選択します (必要に応じて新しいリソースグループを作成します)。必要に応じて、ACS リソースに使用したのと同じリソースグループを使用できます。リソースグループ名を、Azure Functions ドメインを保存したのと同じローカルファイルにコピーします。
- acs-to-teams-meetingのコンテナーアプリ名を入力します。
- リージョンを選択します。
- Container Apps Environment セクションで Create new を選択します。
- acs-to-teams-meeting-envのEnvironment 名を入力します。
- [作成] ボタンを選択します。
- [次へ: アプリ設定] >を選択します。
コンテナーアプリの作成画面で、次の値を入力します。
- クイックスタートイメージを使用する チェックボックスの選択を解除します。
- 名前: acs-to-teams-meeting
- イメージソース: Azure Container Registry
- レジストリ: <YOUR_ACR_REGISTRY_NAME>.azurecr.io
- 画像: acs-to-teams-meeting
- イメージタグ: latest
- CPU とメモリ: 0.25 CPU コア、-.5 Gi メモリ
アプリケーションのイングレス設定セクションで、次の操作を行います。
- [有効] チェックボックスをオンにします。
- [すべての場所からのトラフィックを受け取る] ラジオボタンを選択します。
これにより、React アプリケーションのエントリポイント (イングレス) が作成され、どこからでも呼び出されます。 Azure Container Apps は、すべてのトラフィックを HTTPS にリダイレクトします。
- ターゲットポート: 80

[Review + create](レビュー + 作成) を選択します。検証に合格したら、[作成] ボタンを選択します。

エラーが発生した場合は、コンテナーアプリ環境が長時間非アクティブであることが原因である可能性があります。最も簡単な解決策は、コンテナーアプリを再度作成するプロセスを実行することです。または、次のコマンドを実行して、Azure CLI を使用してコンテナーアプリを作成することもできます。

Bash
PowerShell

az containerapp create --name acs-to-teams-meeting --resource-group $RESOURCE_GROUP \
    --location westus --image acs-to-teams-meeting \
    --cpu 0.25 --memory 0.5 --environment-name acs-to-teams-meeting-env \
    --ingress-enabled true --ingress-target-port 80 --ingress-type External \
    --ingress-protocol Https --ingress-traffic Anywhere

az containerapp create --name acs-to-teams-meeting --resource-group $RESOURCE_GROUP `
    --location westus --image acs-to-teams-meeting `
    --cpu 0.25 --memory 0.5 --environment-name acs-to-teams-meeting-env `
    --ingress-enabled true --ingress-target-port 80 --ingress-type External `
    --ingress-protocol Https --ingress-traffic Anywhere

コンテナーアプリのデプロイが完了したら、Azure portal でそれに移動し、Overview 画面で Application URL を選択して、nginx コンテナーで実行されているアプリケーションを表示します。

次の方法で共有

カスタムアプリから Teams 会議への音声/ビデオ通話

このチュートリアルで構築する内容

アプリケーションソリューションの概要

前提条件

このチュートリアルで使用されるテクノロジには、

Azure Communication Services リソースを作成する

Azure Communication Services 呼び出しを React アプリに統合する

Microsoft Graph を使用してMicrosoft Teams会議を動的に作成する

local.settings.json ファイルの作成

React からの Azure 関数の呼び出し

Azure Communication Services の ID とトークンを動的に作成する

アプリを Azure Functions と Azure Container Apps にデプロイする

Azure Functions へのデプロイ

Azure Container Apps をデプロイする

おめでとうございます。

このチュートリアルは完了しました

フィードバック

次の方法で共有

カスタム アプリから Teams 会議への音声/ビデオ通話

このチュートリアルで構築する内容

アプリケーション ソリューションの概要

前提条件

このチュートリアルで使用されるテクノロジには、

Azure Communication Services リソースを作成する

Azure Communication Services 呼び出しを React アプリに統合する

Microsoft Graph を使用してMicrosoft Teams会議を動的に作成する

local.settings.json ファイルの作成

React からの Azure 関数の呼び出し

Azure Communication Services の ID とトークンを動的に作成する

アプリを Azure Functions と Azure Container Apps にデプロイする

Azure Functions へのデプロイ

Azure Container Apps をデプロイする

おめでとうございます。

このチュートリアルは完了しました

フィードバック

カスタムアプリから Teams 会議への音声/ビデオ通話

アプリケーションソリューションの概要