演習 - レンダリングのトラブルシューティング

8 分

この演習では、Microsoft Graph ツールキットコンポーネントで使用可能なデータを検証する方法を学びます。また、Web アプリでもコンポーネントが一貫してレンダリングされるようになります。まずは、Web アプリを準備するところから演習を始めましょう。

Web アプリを準備する

Visual Studio Code で、index.html ファイルを開きます。
その内容を以下の HTML コンテンツにリセットします。は、前のモジュールで登録した Microsoft Entra アプリのアプリケーション (クライアント) ID に置き換えますYOUR-CLIENT-ID。属性と CSS を使用して Microsoft Graph Toolkit コンポーネントを構成してスタイルを設定します。
```
<html>
  <head>
    <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
  </head>

  <body>
    <mgt-msal2-provider client-id="YOUR-CLIENT-ID"></mgt-msal2-provider>
    <mgt-login></mgt-login>
    <mgt-agenda days="3" group-by-day></mgt-agenda>
  </body>
</html>
```
Web アプリケーションが予期したとおりに動作することを確認します。 Visual Studio Code で Live Server を実行し、アプリをテストします。ブラウザーを開き、http://localhost:3000 に移動します。イベントの一覧が表示されます。

コンポーネントテンプレートのデバッグ

Web アプリの動作が確認できたところで、Agenda コンポーネントのイベント表示を調整してみましょう。

テンプレートに以下のように指定して、Agenda コンポーネントでイベントのタイトルのみを表示するように変更します。
```
<mgt-agenda days="3" group-by-day>
  <template>{{ event.title }}</template>
</mgt-agenda>
```
現在、Agenda コンポーネントには何も表示されません。修正してみましょう。
イベントのレンダリングを変更したいので、data-type 属性を使用して event テンプレートを使用してみましょう。
```
<mgt-agenda days="3" group-by-day>
  <template data-type="event">{{ event.title }}</template>
</mgt-agenda>
```
これで日のリストが表示されましたが、コンポーネントにはまだイベントのタイトルが表示されていません。テンプレートを変更して、テンプレートにどのようなデータがあるかを確認しましょう。
```
<mgt-agenda days="3" group-by-day>
  <template data-type="event">{{ console.log(this) }}</template>
</mgt-agenda>
```
ブラウザーの開発者ツールで本体に記録されたデータを調べてみると、イベントのタイトルが subject プロパティに保存されていることがわかります。
テンプレートを更新して、title の代わりに subject プロパティを参照するようにします。
```
<mgt-agenda days="3" group-by-day>
  <template data-type="event">{{ event.subject }}</template>
</mgt-agenda>
```
これで、各イベントのタイトルが表示されるはずです。

それでは、Web アプリでフォントの色を変更してみましょう。

Visual Studio Code で、index.html ファイルを開きます。 head セクションに以下の style 要素を追加することで、Web アプリのグローバルフォントの色を変更します。
```
<style>
  body {
    color: blue;
  }
</style>
```
body では、ユーザーを歓迎するあいさつ文を追加します。
```
<h1>Hello</h1>
```

mgt-agenda コンポーネントで、前の演習で追加したカスタムテンプレートを削除します。 Web アプリの完全な HTML は次の例のようになります。

<html>
    <head>
      <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
      <style>
        body {
          color: blue;
        }
      </style>
    </head>

    <body>
      <h1>Hello</h1>
      <mgt-msal2-provider client-id="YOUR-CLIENT-ID"></mgt-msal2-provider>
      <mgt-login></mgt-login>
      <mgt-agenda days="3" group-by-day></mgt-agenda>
    </body>
</html>

Visual Studio Code で Live Server を実行し、アプリをテストします。ブラウザーを開き、http://localhost:3000 に移動します。イベントの一覧が表示されます。

イベントのリストには、定義したフォントの色が使用されていません。修正してみましょう。

Visual Studio Code で、style の定義を拡張して、スタイル指定イベント用の CSS カスタムプロパティを追加します。

<style>
  body {
    color: blue;
  }
  mgt-agenda {
    --agenda-header-color: blue;
    --agenda-event-time-color: blue;
    --agenda-event-subject-color: blue;
  }
</style>

Visual Studio Code で Live Server を実行し、アプリをテストします。ブラウザーを開き、http://localhost:3000 に移動します。 Web アプリケーションのフォントの色を使用するイベントの一覧が表示されます。

演習 - レンダリングのトラブルシューティング

Web アプリを準備する

コンポーネント テンプレートのデバッグ

フィードバック

コンポーネントテンプレートのデバッグ