演習 - ユーザーのメールを表示する

4 分

この演習では、アプリを拡張して、ユーザーが最新の 10 通のメールを表示できるようにします。

Microsoft Graph からメールを読み込む

最初に、現在のユーザーの最新の 10 通のメールを読み込む呼び出しを Microsoft Graph に追加します。

コードエディターで、graph.js ファイルを開きます。

ファイルの末尾に、最新の 10 通のメールを取得する新しい非同期関数を追加します。各メールの件名と受信した日時を読み込みます。

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

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

メールを表示するプレースホルダーを追加する

次に、メールを読み込むボタンでアプリを拡張し、メールを表示するプレースホルダーを追加します。

コードエディターで、index.html ファイルを開きます。
行 <h4>Welcome <span id="userName"></span></h4> を検索し、その直後に次のマークアップを追加します。
```
<button onclick="displayEmail();" id="displayEmail">Show email</button>
<ul id="emails"></ul>
```

メールを読み込むボタンと、メールを表示するプレースホルダーでコンテンツブロックを拡張します。

<div id="content" style="display: none;">
  <h4>Welcome <span id="userName"></span></h4>
  <button onclick="displayEmail();" id="displayEmail">Show email</button>
  <ul id="emails"></ul>
</div>

アプリでメールを表示する

最後に、Microsoft Graph を使用してメールを要求し、それをプレースホルダーに表示します。

コードエディターで、ui.js ファイルを開きます。

ファイルの末尾に、displayEmail 関数を追加します:

async function displayEmail() {
  var emails = await getEmails();
  if (!emails || emails.value.length < 1) {
    return;
  }

  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);
  });
}

アプリの実行

Microsoft Graph を使用してユーザーのメールを表示するようにアプリを拡張しました。アプリをローカルで実行しましょう。

ターミナルで次のコマンドを実行して、Web アプリを確認します。
```
npm start
```
ブラウザーは http://localhost:8080 を指している必要があります。
[Microsoft アカウントでサインイン] ボタンを選択して、Microsoft 365 アカウントでサインインします。
アカウントでサインインした後、[メールの表示] ボタンを選択します。
初めてアプリを実行する場合は、メールへのアクセス許可をアプリに付与するように求めるメッセージが表示されます。続行する場合は、要求に同意します。
アプリに最新の 10 通のメールが表示されます。

ヒント

メールが表示されない場合は、アプリにサインインするときに使用したアカウントの受信トレイにメールが存在することを確認してください。

続行

演習 - ユーザーのメールを表示する

Microsoft Graph からメールを読み込む

メールを表示するプレースホルダーを追加する

アプリでメールを表示する

アプリの実行

フィードバック