Microsoft Graph Toolkit のファイルコンポーネント

注意

Microsoft Graph Toolkit は非推奨です。 2025 年 9 月 1 日から、2026 年 8 月 28 日に完全な退職が予定されています。開発者は、Web エクスペリエンスを構築するために、Microsoft Graph SDK またはその他のサポートされている Microsoft Graph ツールを使用して移行する必要があります。詳細については、非推奨のお知らせを参照してください。

File コンポーネントは、 OneDrive または SharePoint の個々のファイル/フォルダーを表すために使用されます。コンポーネントには、ファイル名やフォルダー名、ファイルの種類アイコン、作成者や最終更新日などの情報が表示されます。ファイルの識別子を指定できます。コンポーネントは、指定された識別子に基づいてファイルを取得するクエリを生成します。このコンポーネントは、単独で使用することも、 mgt-file-list コンポーネントの一部として使用することもできます。

例

次の例では、 mgt-file コンポーネントを使用してファイルを表示します。コードエディターを使用して、プロパティがコンポーネントの動作をどのように変更させるかを確認することができます。

HTML
React

mgt.dev でこの例を開きます。

プロパティ

いくつかのプロパティを使用して、コンポーネントをカスタマイズできます。

属性	プロパティ	説明
file-query	fileQuery	取得するファイルへの完全なクエリまたはパス。
user-id	userId	ユーザーの ID。このプロパティは、指定したユーザーのファイルを取得するために使用されます。また、 `item-id`、 `item-path`、 `insight-type` 、または `insight-id`も指定する必要があります。
drive-id	driveId	ファイルが属するドライブの ID。また、 `item-id` または `item-path`も指定する必要があります。
group-id	groupId	ファイルが属するグループの ID。また、 `item-id` または `item-path`も指定する必要があります。
site-id	siteId	ファイルが属しているサイトの ID。また、 `item-id` または `item-path`も指定する必要があります。特定のリストからファイルを参照している場合は、 `list-id` も指定します。
list-id	listId	ファイルが属するリストの ID。また、 `site-id` と `item-id`も指定する必要があります。
item-id	itemId	ファイルの ID。既定のクエリは `/me/drive/items`。 `drive-id`、`group-id`、`site-id`、または`user-id`を指定して、特定の場所を照会します。
item-path	itemPath	ファイルの項目パス。既定のクエリは `/me/drive/root`。 `drive-id`、`group-id`、`site-id`、または`user-id`を指定して、特定の場所を照会します。
insight-type	insightType	ファイルが取得される分析情報の種類。 `trending`、`used`、または`shared`できます。
insight-id	insightId	分析情報リソースの ID。
file-details	fileDetails	ファイルを表すオブジェクトに設定します
file-icon	fileIcon	アイコンが格納されている URL パス。
-	driveItem	項目の Graph の詳細を含むオブジェクト。
-	fileDetails	DriveItem を含むオブジェクト。
view	view	を設定して、ファイルのレンダリング方法を制御します。既定値は `oneline` です。 `image` - アイコンのみを表示する `oneline` - アイコンと 1 行のテキストを表示します (既定値はファイル `name`) `twolines` - アイコンと 2 行のテキストを表示する (既定では`name` と `lastModifiedDateTime` ) `threelines` - アイコンと 3 行のテキスト (既定では作成者の`name`、 `lastModifiedDateTime`、 `displayName` ) を表示します。
line1-property	line1Property	テキストの最初の行に使用する `fileDetails` のプロパティを設定します。既定値は、ファイルの `name` です。
line2-property	line2Property	2 行目のテキストに使用する `fileDetails` のプロパティを設定します。既定値は `lastModifiedDateTime` です。
line3-property	line3Property	3 行目のテキストに使用する `fileDetails` のプロパティを設定します。既定値は、ファイルの `size` です。

次の例では、特定のクエリからデータを取得するコンポーネントの動作を変更しています。

<mgt-file file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2">
</mgt-file>

次の例では、コンポーネントの動作を変更して、特定のクエリからデータをフェッチし、3 行の情報 (ファイル名、最終変更日時、既定ではファイルサイズ) を表示し、ファイルアイコンを設定します。

<mgt-file
  file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2"
  view="threeLines"
  file-icon="ICON_PATH"
></mgt-file>

次の例では、コンポーネントの動作を変更して、特定のドライブからデータをフェッチします。

<mgt-file
  drive-id="b!-RIj2DuyvEyV1T4NlOaMHk8XkS_I8MdFlUCq1BlcjgmhRfAj3-Z8RY2VpuvV_tpd"
  item-id="01BYE5RZ5MYLM2SMX75ZBIPQZIHT6OAYPB"
></mgt-file>

次の例では、コンポーネントの動作を変更して、SharePoint サイトとパスからデータをフェッチします。

<mgt-file
  site-id="m365x214355.sharepoint.com,5a58bb09-1fba-41c1-8125-69da264370a0,9f2ec1da-0be4-4a74-9254-973f0add78fd"
  item-Path="/DemoDocs/AdminDemo"
></mgt-file>

次の例では、コンポーネントの動作を変更して、分析情報の種類別にデータをフェッチします。

<mgt-file
  insight-type="shared"
  insight-id="AW1GxMvkOztMkJX-SCppUSRPF5EvyPDHRZVAqtQZXI4JoUXwI9_mfEWNlabr1f7aXRBWDMt2C2FDop4fP1vsUw9tRsTL5Ds7TJCV_kgqaVEkBA"
></mgt-file>

CSS カスタムプロパティ

mgt-file コンポーネントは、以下の CSS カスタムプロパティを定義します。

<mgt-file class="file" file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2"></mgt-file>

.file {
  --file-type-icon-height: 30px;
  --file-border: 4px dotted #ffbdc3;
  --file-border-radius: 8px;
  --file-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  --file-background-color: #e0f8db;
  --file-background-color-focus: yellow;
  --file-background-color-hover: green;
  --file-padding: 8px;
  --file-padding-inline-start: 12px;
  --file-margin: 3px 4px;
  --file-line1-font-size: 15px;
  --file-line1-font-weight: 500;
  --file-line1-color: gray;
  --file-line1-text-transform: capitalize;
  --file-line2-font-size: 14px;
  --file-line2-font-weight: 300;
  --file-line2-color: #e50000;
  --file-line2-text-transform: lowercase;
  --file-line3-font-size: 13px;
  --file-line3-font-weight: 500;
  --file-line3-color: purple;
  --file-line3-text-transform: capitalize;
}

詳細については、「コンポーネントのスタイリング」を参照してください。

Microsoft Graph API とアクセス許可

このコントロールは、以下の Microsoft Graph API とアクセス許可を使用します。 API 呼び出しごとに、一覧表示されているいずれかのアクセス許可が必要です。

構成	アクセス許可スコープ	API
開発者は、 AND を提供します	Files.Read、Files.ReadWrite、Files.Read.All、Files.ReadWrite.All、Group.ReadWrite.All、Group.ReadWrite.All、Sites.Read.All、Sites.ReadWrite.All	GET /drive/{drive-id}/items/{item-id}
開発者は、 AND を提供します	Files.Read、Files.ReadWrite、Files.Read.All、Files.ReadWrite.All、Group.ReadWrite.All、Group.ReadWrite.All、Sites.Read.All、Sites.ReadWrite.All	GET /drive/{drive-id}/root:/{item-path}
開発者は、 AND を提供します	Files.Read、Files.ReadWrite、Files.Read.All、Files.ReadWrite.All、Group.ReadWrite.All、Group.ReadWrite.All、Sites.Read.All、Sites.ReadWrite.All	GET /groups/{group-id}/drive/items/{item-id}
開発者は、 AND を提供します	Files.Read、Files.ReadWrite、Files.Read.All、Files.ReadWrite.All、Group.ReadWrite.All、Group.ReadWrite.All、Sites.Read.All、Sites.ReadWrite.All	GET /groups/{group-id}/drive/root:/{item-path}
開発者が提供するのはのみ `{item-id}`	Files.Read、Files.ReadWrite、Files.Read.All、Files.ReadWrite.All、Group.ReadWrite.All、Group.ReadWrite.All、Sites.Read.All、Sites.ReadWrite.All	GET /me/drive/items/{item-id}
開発者が提供するのはのみ `{item-path}`	Files.Read、Files.ReadWrite、Files.Read.All、Files.ReadWrite.All、Group.ReadWrite.All、Group.ReadWrite.All、Sites.Read.All、Sites.ReadWrite.All	GET /me/drive/root:/{item-path}
開発者は、 AND を提供します	Files.Read、Files.ReadWrite、Files.Read.All、Files.ReadWrite.All、Group.ReadWrite.All、Group.ReadWrite.All、Sites.Read.All、Sites.ReadWrite.All	GET /sites/{site-id}/drive/items/{item-id}
開発者は、 AND を提供します	Files.Read、Files.ReadWrite、Files.Read.All、Files.ReadWrite.All、Group.ReadWrite.All、Group.ReadWrite.All、Sites.Read.All、Sites.ReadWrite.All	GET /sites/{site-id}/drive/root:/{item-path}
開発者は、`{item-id}` AND `{list-id}`を提供します`{item-id}`	Files.Read、Files.ReadWrite、Files.Read.All、Files.ReadWrite.All、Group.ReadWrite.All、Group.ReadWrite.All、Sites.Read.All、Sites.ReadWrite.All	GET /sites/{site-id}/lists/{list-id}/items/{item-id}/driveItem
開発者は、 AND を提供します	Files.Read、Files.ReadWrite、Files.Read.All、Files.ReadWrite.All、Group.ReadWrite.All、Group.ReadWrite.All、Sites.Read.All、Sites.ReadWrite.All	GET /users/{user-id}/drive/items/{item-id}
開発者は、 AND を提供します	Files.Read、Files.ReadWrite、Files.Read.All、Files.ReadWrite.All、Group.ReadWrite.All、Group.ReadWrite.All、Sites.Read.All、Sites.ReadWrite.All	GET /users/{user-id}/drive/root:/{item-path}
`insight-type` は、AND 開発者が提供 `trending` に設定されています `{insight-id}`	Sites.Read.All、Sites.ReadWrite.All	GET /me/insights/trending/{insight-id}/resource
`insight-type` は、AND 開発者が提供 `used` に設定されています `{insight-id}`	Sites.Read.All、Sites.ReadWrite.All	GET /me/insights/used/{id}/resource
`insight-type`と開発者が提供`shared{insight-id}`	Sites.Read.All、Sites.ReadWrite.All	GET /me/insights/shared/{id}/resource

テンプレート

mgt-file コンポーネントは、いくつかのテンプレートをサポートしており、コンポーネントの特定の部分を置き換えることができます。テンプレートを指定するには、コンポーネント内に <template> 要素を含め、 data-type を次のいずれかの値に設定します。

データ型	データコンテキスト	説明
読み込み中	なし	コンポーネントがロード状態のときにレンダリングするテンプレート。
no-data	なし	使用可能なファイルデータがない場合にレンダリングするテンプレート。
default	file: ファイルの詳細オブジェクト	デフォルトのテンプレートは、コンポーネント全体を独自のテンプレートに置き換えます。

テンプレートの使用例

<mgt-file file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2">
  <template data-type="default">
    <p>File name: {{file.name}}.</p>
    <p>File ID: {{file.id}}.</p>
  </template>
  <template data-type="loading">
    <p>Getting the file data...</p>
  </template>
  <template data-type="no-data">
    <p>No file data was found</p>
  </template>
</mgt-file>

認証

このコントロールは、認証ドキュメントに記述されているグローバル認証プロバイダーを使用して、必要なデータを取得します。

キャッシュ

オブジェクトストア	キャッシュされたデータ	解説
`driveFiles`	ドライブ ID 別のファイルの一覧	`driveId`が指定されている場合に使用されます
`groupFiles`	グループ ID 別のファイルの一覧	`groupId`が指定されている場合に使用されます
`siteFiles`	サイト ID 別のファイルの一覧	`siteId`が指定されている場合に使用されます
`userFiles`	ユーザー ID 別のファイルの一覧	`userId`が指定されている場合に使用されます
`insightFiles`	分析情報別のファイルの一覧	`insightType`と`insightId`が提供される場合に使用されます
`fileQueries`	クエリ別のファイルの一覧	`fileQuery`が指定されている場合に使用されます

キャッシュを構成する方法の詳細については、「キャッシュ」を参照してください。

ローカリゼーション

コントロールは、ローカライズできる次の変数を公開します。ローカライズを設定する方法の詳細については、「コンポーネントのローカライズ」を参照してください。

文字列名	既定値
modifiedSubtitle	`Modified`
sizeSubtitle	`Size`

フィードバック

このページはお役に立ちましたか?

Last updated on 2025-08-12