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

2025-06-12

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に登録する

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

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

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

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

Web アプリを作成する

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

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

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

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

index.htmlで、次のように [<body></body>] セクションに MSAL2 プロバイダーを追加します。
```
<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。
<YOUR_CLIENT_ID>を、Microsoft Entra アプリケーションからコピーしたクライアント 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>

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

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

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

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

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

アプリの外観を構造化するには、One Productivity Hub に追加される各機能のタイトルと列を作成します。 [<body></body>] の下のindex.htmlで、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>

議題コンポーネント

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

<mgt-agenda />

To Do コンポーネント

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

<mgt-todo />

FileList コンポーネント

class="row"でタグ付けされた div の下に、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;
}

<head></head>内のindex.html で、スタイルシートリンク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>

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

この手順では、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 タスク、ファイルフォルダーを追加します。

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