演習 – ユーザーファイルを表示する

3 分

この演習では、アプリを拡張して、OneDrive for Business のユーザーのルートフォルダーにあるファイル一覧を表示します。

ファイルのリストを取得する

まず、Microsoft Graph 呼び出しをアプリケーションに追加します。

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

ファイルの末尾に、ファイルのリストを取得する getFiles() という名前の新しい非同期関数を追加します。 select 関数を使用して、各ファイルの id、name、folder、package プロパティを取得します。

// Get files in root of user's OneDrive
async function getFiles() {
  ensureScope('files.read');
  try {
    const response = await graphClient
        .api('/me/drive/root/children')
        .select('id,name,folder,package')
        .get();
    return response.value;
  } catch (error) {
    console.error(error);
  }
}

ファイルを表示する HTML プレースホルダーを追加する

次に、ファイルのリストを表示する HTML を追加します。

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

次に示すように、水平方向のルール、ラベル、順序付けされていないリストを使用して content ブロックを拡張します。

<div id="content" style="display: none;">
  <h4>Welcome <span id="userName"></span></h4>
  <!-- Add for file download -->
  <hr />
  <label>Files in your OneDrive root folder:</label>
  <ul id="downloadLinks"></ul>
</div>

アプリにファイルを表示する

最後の手順は、前に追加した関数を呼び出してファイルのリストを表示するためにコードを少し追加することです。

コードエディターで、ui.js ファイルを開きます。
ファイルの末尾に、displayFiles() 関数を追加します。
```
async function displayFiles() {
  const files = await getFiles();
  const ul = document.getElementById('downloadLinks');
  while (ul.firstChild) {
    ul.removeChild(ul.firstChild);
  }
  for (let file of files) {
    if (!file.folder && !file.package) {
      let a = document.createElement('a');
      a.href = '#';
      a.appendChild(document.createTextNode(file.name));
      let li = document.createElement('li');
      li.appendChild(a);
      ul.appendChild(li);
    }
  }
}
```
if ステートメントはすべてのフォルダーまたはパッケージをスキップして、ファイルのみを表示することに注意してください。現時点では、API でこれらのアイテムをフィルター処理する方法はありません。また、ファイルはアンカータグ (ハイパーリンク) として表示されます。次の演習では、このリンクを選択すると各ファイルをダウンロードする機能を追加します。
displayUI() 関数の末尾の右中かっこの直前に、displayFiles() への呼び出しを追加します。
```
  // beginning of function omitted for brevity
  content.style = "display: block";

  displayFiles();
}
```

アプリの実行

Microsoft Graph を使用して、ユーザーのファイルの一部を表示するようにアプリを拡張しました。ユーザーのインスタンスの OneDrive のルートフォルダーにいくつかのファイルがあることを確認してください。

ターミナルで次のコマンドを実行して、Web アプリを確認します。
```
npm start
```
既定のブラウザーが開き、http://localhost:8080 を指しているはずです。
[Microsoft アカウントでサインイン] ボタンを選択して、Microsoft 365 アカウントでサインインします。
初めてアプリを実行する場合は、ファイルへのアクセス許可をアプリに付与するように求めるメッセージが表示されます。続行する場合は、要求に同意します。
ファイルのリストが表示されます。
演習の次の部分で使用するので、Node.js サーバーを実行し続けます。

演習 – ユーザー ファイルを表示する

ファイルのリストを取得する

ファイルを表示する HTML プレースホルダーを追加する

アプリにファイルを表示する

アプリの実行

フィードバック

演習 – ユーザーファイルを表示する