演習 - ユーザーのメールをバッチで読み込む

5 分

この演習では、アプリを拡張して、10 アイテムごとのバッチでユーザーメールを閲覧できるようにします。

10 アイテムごとのバッチでメールを読み込む

まず、10 アイテムごとのバッチのメールを読み込む getEmails() 機能を更新します。読み込むメールの次のセットが定義されている場合は、関数の引数として渡されます。

コードエディターで、graph.js ファイルを開きます。
getEmails() 関数のシグネチャを更新して、単一の引数 nextLink を受け入れます。
```
async function getEmails(nextLink) {
  // ...
}
```

nextLinkが設定されている場合、関数はそれを SDK に渡してデータを取得する必要があります。 nextLink設定されていない場合、関数はデータの初期セットを読み込む必要があります。 return ステートメントを次の if ステートメントに置き換えて、getEmails() 関数を更新します。

if (nextLink) {
  return await graphClient
    .api(nextLink)
    .get();
}
else {
  return await graphClient
    .api('/me/messages')
    .select('subject,receivedDateTime')
    .orderby('receivedDateTime desc')
    .top(10)
    .get();
}

更新された getEmails() 関数は次のようになります。

async function getEmails(nextLink) {
  ensureScope('mail.read');

  if (nextLink) {
    return await graphClient
      .api(nextLink)
      .get();
  }
  else {
    return await graphClient
      .api('/me/messages')
      .select('subject,receivedDateTime')
      .orderby('receivedDateTime desc')
      .top(10)
      .get();
  }
}

テンプレートを拡張して、ユーザーがメールをページングできるようにする

getEmails() 関数を拡張して、より多くのメールを読み込みます。次の手順では、ユーザーが利用可能な場合により多くのメールを読み込めるボタンを表示します。

コードエディターで、index.html ファイルを開きます。
行 <ul id="emails"></ul> を見つけ、その直後に次のコードを追加して、ユーザーがより多くのメールをロードできるようにするボタンを追加します。
```
<div id="loadMoreContainer" style="display: none;">
  <button onclick="displayEmail();">Load more</button>
</div>
```

その他のメールを追加

ユーザーがより多くのメールを読み込むことができるようにアプリが更新されたので、最後の手順は、より多くのメールの読み込みを処理する機能を追加することです。

コードエディターで、ui.js ファイルを開きます。
displayEmail() 関数の前に、値を割り当てずに、nextLink という名前の新しい変数を定義します。
```
var nextLink;
```
displayEmail() 関数で、nextLink を含むように getEmails() 関数を取得するための呼び出しを更新します。
```
var emails = await getEmails(nextLink);
```
次に、データを取得した後、@odata.nextLink プロパティの値を取得します。設定すると、ユーザーが表示できるデータが増えていることがわかります。 displayEmail() 関数の if ステートメントの直後に次のコードを追加します。
```
nextLink = emails['@odata.nextLink'];
```
displayEmail()関数の最後に、取得したメールを表示した後、ページの最後までスクロールして、ユーザーが取得したメールをすぐに表示できるようにします。
```
window.scrollTo({ top: emailsUl.scrollHeight, behavior: 'smooth' });
```
最後に、nextLink が返されたかどうかを確認し、返されていた場合はボタンを表示して、より多くのメールを読み込みます。

次のコードを displayEmail() 関数の最後に追加します。
```
if (nextLink) {
  document.getElementById('loadMoreContainer').style = 'display: block';
}
```

完全な displayEmail() 関数は次のようになります。

var nextLink;
async function displayEmail() {
  var emails = await getEmails(nextLink);
  if (!emails || emails.value.length < 1) {
    return;
  }
  nextLink = emails['@odata.nextLink'];

  document.getElementById('displayEmail').style = 'display: none';

  var emailsUl = document.getElementById('emails');
  emails.value.forEach(email => {
    var emailLi = document.createElement('li');
    emailLi.innerText = `${email.subject} (${new Date(email.receivedDateTime).toLocaleString()})`;
    emailsUl.appendChild(emailLi);
  });
  window.scrollTo({ top: emailsUl.scrollHeight, behavior: 'smooth' });

  if (nextLink) {
    document.getElementById('loadMoreContainer').style = 'display: block';
  }
}

アプリの実行

Microsoft Graph を 10 個のアイテムのバッチで使用してユーザーのメールを表示し、より多くのメールを読み込むようにアプリを拡張しました。アプリをローカルで実行しましょう。

ターミナルで次のコマンドを実行して、Web アプリを確認します。
```
npm start
```
ブラウザーは http://localhost:8080 を指している必要があります。
[Microsoft アカウントでサインイン] ボタンを選択して、Microsoft 365 アカウントでサインインします。
アカウントでサインインした後、[メールの表示] ボタンを選択します。
アプリに表示されたユーザーの最新の 10 通のメールのリストが表示されます。
メールボックスに 10 通を超えるメールがある場合は、次の 10 件のメッセージを読み込むボタンが表示されます。
ターミナルウィンドウで CTRL+C を選び、Node.js サーバーを停止します。

続行

演習 - ユーザーのメールをバッチで読み込む

10 アイテムごとのバッチでメールを読み込む

テンプレートを拡張して、ユーザーがメールをページングできるようにする

その他のメールを追加

アプリの実行

フィードバック