Microsoft Graph Toolkit を使用して生産性アプリを構築する

Microsoft Graph Toolkit は、アプリを Microsoft 365 データとインテリジェンスに接続するための Web コンポーネントと認証プロバイダーのコレクションです。このチュートリアルでは、Microsoft Graph Toolkit コンポーネントと MSAL2 プロバイダーを使用して、予定表のイベント、To Do タスク、ファイルを監視する Web アプリケーションを作成する方法について説明します。

サンプルのしくみ

このサンプルでは、Microsoft Graph Toolkit MSAL2 プロバイダーを使用して、Microsoft Entra IDによる認証を有効にする Web アプリを作成し、UI コンポーネントを使用してカレンダーイベント、To Do タスク、ネイティブ Microsoft エクスペリエンスのように見えるファイルをレンダリングします。

One Productivity Hub サンプルを示すスクリーンショット

前提条件

Microsoft 365 開発者テナントが必要です。 Microsoft 365 開発者プログラムを通じて対象となる場合があります。詳細については、FAQ を参照してください。または、 1 か月間の無料試用版にサインアップするか、Microsoft 365 プランを購入することもできます。
Visual Studio Code をインストールします。
Visual Studio Code Live Server をインストールして、Web アプリをテストします。

アプリケーションをMicrosoft Entra IDに登録する

残り 40 分

ユーザー認証を有効にするには、アプリケーションをMicrosoft Entra IDに登録します。

Microsoft Entra 管理センターに移動し、Microsoft 365 Developer Program テナントでサインインします。
[ID] メニューの [アプリケーション] を展開し>、[アプリの登録>新しい登録] を選択します>。
次の値を使用して アプリケーションの登録 フォームに入力し、[ 登録] を選択します。
- 名前: 1 つの Productivity Hub デモ
- サポートされているアカウントの種類: 任意の組織のディレクトリ内のアカウント (任意のMicrosoft Entra ディレクトリ - マルチテナント) と個人用 Microsoft アカウント (Skype、Xbox など)
- リダイレクト URI: リダイレクト URI の種類として [シングルページアプリケーション (SPA)] を選択し、リダイレクト URI として配置 http://localhost:3000/index.html してローカルでテストします。
アプリの登録が完了したら、アプリケーションページの [ 概要 ] タブに移動し、 アプリケーション (クライアント) ID をコピーします。次の手順では、この ID が必要です。

アプリケーションを作成する

残り 30 分

この手順では、Web アプリを作成し、Microsoft Graph Toolkit MSAL2 プロバイダーで認証を有効にします。

Web アプリを作成する

新しいフォルダーを作成し、 OneProductivityHub という名前を付けます。 Visual Studio Code を使用してフォルダーを右クリックして開きます。
OneProductivityHub フォルダーに新しいファイルを作成し、index.htmlという名前を付けます。
オプションから [HTML サンプル] を選択CTRL + SPACEして選択します。

CDN 経由で Microsoft Graph Toolkit で認証を有効にするには、セクション内の index.html に次のスクリプトタグを <body></body> 追加します。

<script type="module">
    import { registerMgtComponents, registerMgtMsal2Provider } from "https://unpkg.com/@microsoft/mgt@4";
    registerMgtMsal2Provider();
    registerMgtComponents();
</script>

MSAL2 プロバイダーを初期化する

index.htmlで、セクションに次のように MSAL2 プロバイダーを<body></body>追加します。
```
<mgt-msal2-provider
    client-id="<YOUR_CLIENT_ID>"
    scopes="User.Read,
    User.ReadBasic.All,
    Calendars.Read,
    Files.Read,
    Files.Read.All,
    Sites.Read.All,
    Tasks.Read,
    Tasks.ReadWrite,
    People.Read">
</mgt-msal2-provider>
```
重要

プロバイダーで定義されている次のスコープは、認証プロセス中にユーザーの同意を要求するために必要なアクセス許可の一覧として表示されます。 User.Read, User.ReadBasic.All, Calendars.Read, Files.Read, Files.Read.All, Sites.Read.All, Tasks.Read, Tasks.ReadWrite, People.Read
を、Microsoft Entra アプリケーションからコピーしたクライアント ID に置き換えます<YOUR_CLIENT_ID>。

index.html の最終バージョンが次の例のようになります。

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>One Productivity Hub</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
  <script src='main.js'></script>
</head>
<body>
  <script type="module">
    import { registerMgtComponents, registerMgtMsal2Provider } from "https://unpkg.com/@microsoft/mgt@4";
    registerMgtMsal2Provider();
    registerMgtComponents();
  </script>
  <mgt-msal2-provider
      client-id="<YOUR_CLIENT_ID>"
      scopes="User.Read,
      User.ReadBasic.All,
      Calendars.Read,
      Files.Read,
      Files.Read.All,
      Sites.Read.All,
      Tasks.Read
      Tasks.ReadWrite,
      People.Read">
  </mgt-msal2-provider>
</body>
</html>

アプリケーションを設計する

残り 20 分

この手順では、Microsoft Graph Toolkit コンポーネントを使用して Web アプリを設計し、CSS でスタイルを設定します。

セクション のindex.html で <body></body>、プロバイダーの下に次のコードを追加します。

<div>
  <mgt-login />
</div>

残りのコンポーネントのタイトルと列を作成する

アプリの外観を構造化するには、One Productivity Hub に追加される各機能のタイトルと列を作成します。 の下のindex.html で<body></body>、div 内のログインコンポーネントの下に次の HTML コードを追加します。

<div class="features">

  <div class="header"><div class="title">
    <h2>One Productivity Hub</h2>
    <div class="row">
      <div class="column"><h3>Calendar events</h3></div>
      <div class="column"><h3>To-do tasks</h3></div>
      <div class="column"><h3>Files</h3></div>
    </div>
  </div></div>

  <div class="row" id="content">
    <div class="column" id="mgt-col"></div>
    <div class="column" id="mgt-col"></div>
    <div class="column" id="mgt-col"></div>
  </div>

</div>

議題コンポーネント

でタグ付けされた div の下に class="row"、最初の列 div 内に Agenda コンポーネントを追加します。

<mgt-agenda />

To Do コンポーネント

でタグ付けされた div の class="row"下に、2 番目の列 div 内に To-do コンポーネントを追加します。

<mgt-todo />

FileList コンポーネント

でタグ付けされた div の下に class="row"、3 番目の列 div 内にファイルリストコンポーネントを追加します。

<mgt-file-list />

CSS を使用して Web アプリのスタイルを設定する

プロジェクトの下に index.css ファイルを作成し、次の CSS コードを追加します。

body,
#root>div {
    background-color: #F3F2F1;
}
.features {
    min-height: 80vh;
    margin: 20px;
    background-color: #FFF;
    box-shadow: 0px 1.2px 3.6px rgba(0, 0, 0, 0.11), 0px 6.4px 14.4px rgba(0, 0, 0, 0.13);
    border-radius: 4px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.header {
    display: flex;
    background-color: #f0f0f0;
}
.title {
    margin-top: 20px;
    margin-left: 10px;
    width: 100%;
}
.title h2 {
    font-size: 24px;
    padding-left: 5px;
    display: inline;
    font-weight: 600;
}
.title h3 {
    float: left;
    width: 32%;
    background:transparent;
    font-size: 16px;
    margin-bottom: 10px;
    padding-left: 10px;
    padding-top: 10px;
    color: #8A8886;
    font-weight: 600;
}
mgt-login {
    margin-left: 20px;
    --avatar-size: 60px;
    --font-family: 'Segoe UI';
    --font-size: 20px;
    --font-weight: 700;
    --color: black;
    --text-transform: none;
    --line2-font-size: 14px;
    --line2-font-weight: 400;
    --line2-color: #8A8886;
    --line2-text-transform: none;
}
#content, html, body {
    height: 98%;
  }
#mgt-col {
  float: left;
  width: 32%;
  background:transparent;
  height:500px;
  overflow: hidden;
  padding: 5px;
  margin-top: 5px;
}
#mgt-col:hover {
  overflow-y: auto;
}

内 のindex.html で <head></head>、スタイルシートリンク href を index.cssとして定義します。
```
<link rel='stylesheet' type='text/css' media='screen' href='index.css'>
```

index.html の最終バージョンが次のようになります。

<!DOCTYPE html>
  <html>
  <head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>One Productivity Hub</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='index.css'>
    <script src='main.js'></script>
  </head>
  <body>
    <script type="module">
      import { registerMgtComponents, registerMgtMsal2Provider } from "https://unpkg.com/@microsoft/mgt@4";
      registerMgtMsal2Provider();
      registerMgtComponents();
    </script>
    <mgt-msal2-provider
        client-id="<YOUR_CLIENT_ID>"
        scopes="User.Read,
        User.ReadBasic.All,
        Calendars.Read,
        Files.Read,
        Files.Read.All,
        Sites.Read.All,
        Tasks.Read,
        Tasks.ReadWrite,
        People.Read">
    </mgt-msal2-provider>
    <div>
      <mgt-login />
    </div>
    <div class="features">
        <div class="header">
            <div class="title">
                <h2>One Productivity Hub</h2>
                <div class="row">
                    <div class="column"><h3>Calendar events</h3></div>
                    <div class="column"><h3>To-do tasks</h3></div>
                    <div class="column"><h3>Files</h3></div>
                </div>
            </div>
        </div>
        <div class="row" id="content">
            <div class="column" id="mgt-col"><mgt-agenda /></div>
            <div class="column" id="mgt-col"><mgt-todo /></div>
            <div class="column" id="mgt-col"><mgt-file-list /></div>
        </div>
    </div>
  </body>
</html>

アプリケーションを実行する

残り 10 分

この手順では、Live Server を使用してブラウザーでサンプルアプリを実行します。

を選択 CTRL + SHIFT + P して Visual Studio Code でパネルを開き、パネルに「」と入力 Preferences し、オプションから選択 Preferences: Open Workspace Settings (JSON) します。

開いたファイルで settings.json 、次のコードを追加します。

{
"liveServer.settings.host": "localhost",
"liveServer.settings.port": 3000
}

を選択 CTRL + SHIFT + P して Visual Studio Code でパネルを開き、パネルに「」と入力 Live Server し、オプションから選択 Live Server: Open with Live Server します。 Live Server はブラウザーでアプリを実行します。
[ サインイン] を 選択し、Microsoft 365 Developer Program テナントを使用してサインインします。
予定表イベントの表示、To Do タスク、ファイルフォルダーなどのアプリケーション機能を使用するために必要なアクセス許可に同意します。
One Productivity Hub アプリが正しく動作することを確認するには、Microsoft 365 Developer テナントにいくつかの予定表イベント、To Do タスク、ファイルフォルダーを追加します。

概要

100% 完了しました

Microsoft Graph Toolkit を使用して One Productivity Hub サンプルアプリが正常に構築されました。このチュートリアルでは、Web アプリを作成し、Microsoft Graph Toolkit MSAL2 プロバイダーと UI コンポーネントを使用しました。

One Productivity Hub アプリを強化する方法を探している場合は、Microsoft Graph Toolkit で使用できる Web コンポーネントの一覧を参照し、アプリに追加のコンポーネントを含めます。

次の手順

Microsoft Graph Toolkit の詳細については、「 Microsoft Graph Toolkit の概要」と「Microsoft Graph Toolkit を使用したアプリの開発」ラーニングパスを参照してください。

次の方法で共有

Microsoft Graph Toolkit を使用して生産性アプリを構築する

サンプルのしくみ

前提条件

アプリケーションをMicrosoft Entra IDに登録する

アプリケーションを作成する

Web アプリを作成する

MSAL2 プロバイダーを初期化する

アプリケーションを設計する

残りのコンポーネントのタイトルと列を作成する

議題コンポーネント

To Do コンポーネント

FileList コンポーネント

CSS を使用して Web アプリのスタイルを設定する

アプリケーションを実行する

概要

次の手順

フィードバック

次の方法で共有

Microsoft Graph Toolkit を使用して生産性アプリを構築する

サンプルのしくみ

前提条件

アプリケーションをMicrosoft Entra IDに登録する

アプリケーションを作成する

Web アプリを作成する

MSAL2 プロバイダーを初期化する

アプリケーションを設計する

Login コンポーネントを初期化する

残りのコンポーネントのタイトルと列を作成する

議題コンポーネント

To Do コンポーネント

FileList コンポーネント

CSS を使用して Web アプリのスタイルを設定する

アプリケーションを実行する

概要

次の手順

フィードバック