演習 - mgt-get コンポーネントを使用して Microsoft Graph クエリを最適化する

  • 8 分

この演習では、Microsoft Graph Toolkit の Get コンポーネントを使用する方法について説明します。 これにより、サインインしているユーザーの OneNote のノートブックを表示できます。

始める前に

この演習の前提条件として、このモジュールの前の演習「ユニット 3: 演習 - コンポーネントによって読み込まれたデータをキャッシュする」を完了していることを確認してください。

Get コンポーネントを実行する

次の手順に従って、Get コンポーネントを実行し、アプリにユーザーのノートブックを表示します。

  1. index.html ファイルを開きます。 Login コンポーネント <mgt-login></mgt-login> の直後に <body> タグ内に Get コンポーネント追加します。

    <!DOCTYPE html>
<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-HERE"></mgt-msal2-provider>
  <mgt-login></mgt-login>
  <mgt-get></mgt-get>
</body>
</html>

  2. 次のように、resource 属性と scopes 属性を Get コンポーネントに追加します。

    <mgt-get resource="me/onenote/notebooks" scopes="Notes.Read, Notes.Read.All">
</mgt-get>

  3. OneNote ノートブックの一覧を取得してアプリに表示するには、次のタスクを実行します。

    • <mgt-get></mgt-get> タグの間に <template></template> を追加します。
    • <template></template> タグの間に <div></div> を追加します。
    • data-for 属性を <div> に追加して、ノートブックの一覧の各ノートブックをループします。 属性を に設定しますdata-fornote in value。
    <mgt-get resource="me/onenote/notebooks" scopes="Notes.Read, Notes.Read.All">
  <template>
    <div class="note" data-for="note in value">
    </div>
  </template>
</mgt-get>

  4. これで、アプリにノートブックのデータの一覧が表示されます。 関連付けられた URL を含むノートブック名の一覧を表示するには、<div></div> タグ内に次の行を追加します。

    <a href="{{ note.links.oneNoteWebUrl.href}}"> {{ note.displayName }} </a>

  5. ノートブックを最後に変更したユーザーのプロフィールとノートブックの最終更新日時を表示するには、次のコード スニペットをノート タグの<div></div> タグ内に追加 します。 <a></a> タグの後にこれを追加します。

    <h4> Last modified by:
   <mgt-person person-query="{{note.lastModifiedBy.user.displayName}}" view="oneline" person-card="hover"></mgt-person>
</h4>
<h5>Last modified date: {{note.lastModifiedDateTime}}</h5>

  6. Get コンポーネントの見た目をプロフェッショナルに変更するには、performance-mgt フォルダーに index.css ファイルを作成します。

  7. 次の CSS スニペットを index.css に追加します。

    .note {
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  padding: 10px;
  margin: 8px 4px;
  font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif;
}

.note a {
  font-size: 14px;
  margin-top: 8px;
}

.note h4 {
  font-size: 9px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: gray;
  margin-top: 4px;
  margin-bottom: 0px;
}
.note h5 {
  font-size: 7px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: royalblue;
  margin-top: 4px;
  margin-bottom: 0px;
}

.note mgt-person {
  --person-line1-font-size: 10px;
  --avatar-size-s: 12px;
  display: inline-block;
  vertical-align: middle;
}

  8. <head></head> タグの間で index.html ファイルに次の行を追加します。

    <link rel='stylesheet' href='index.css'>

  9. すべての変更が完了すると、index.html ファイルは次のようになります。

    <!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
  <link rel='stylesheet' href='index.css'>
</head>

<body>
  <mgt-msal2-provider client-id="YOUR-CLIENT-ID-HERE"></mgt-msal2-provider>
  <mgt-login></mgt-login>
  <mgt-get resource="/me/onenote/notebooks" scopes="Notes.Read, Notes.Read.All">
    <template>
      <div class="note" data-for="note in value">
        <a href="{{note.links.oneNoteWebUrl.href}}">{{ note.displayName }} </a>
        <h4> Last modified by:
          <mgt-person person-query="{{note.lastModifiedBy.user.displayName}}" view="oneline" person-card="hover">
          </mgt-person>
        </h4>
        <h5>Last modified date: {{note.lastModifiedDateTime}}</h5>
      </div>
    </template>
  </mgt-get>
</body>
</html>

ブラウザーでアプリをテストする

  1. 今回 Microsoft 365 開発者テナントを初めて使用する場合、Microsoft 365 開発者テナントのアカウントの OneNote にノートブックがない可能性があります。 アプリのテストを開始する前に、https://www.office.com/launch/onenote にアクセスし、Microsoft 365 開発者テナント アカウントでサインインします。 OneNote のノートブックを作成します。

  2. Visual Studio Code の場合、Visual Studio Code で次のキーの組み合わせを選択し、Live Server で検索します。

    • Windows: CTRL+SHIFT+P
    • macOS: COMMAND+SHIFT+P

    Live Server を実行してアプリテストします。

  3. ブラウザーを開き、http://localhost:3000 に移動します。

  4. Microsoft 365 開発者アカウントでサインインします。 必要なアクセス許可に同意し、[同意する] を選択します。

  5. ファイルの一覧がアプリに表示され、ファイルを共有したユーザーと最終更新日に関する情報が表示されます。

Microsoft Graph ツールキットの People コンポーネントを示すスクリーンショット。