syncfusion-react-file-manager

Syncfusion React File Manager

ドラッグ＆ドロップ、複数のビューへの対応、カスタム操作、完全なアクセシビリティなど、豊富な機能を備えたファイルシステムのインターフェースを構築するための、Syncfusion React File Manager コンポーネントの実装ガイドです。

クイックナビゲーション

🚀 まずは使い始めたいですか？
→ インストールと基本的なセットアップについては、Getting Startedをご覧ください。

🛠️ Docker／クラウドバックエンドが必要ですか？
→ 統合プロバイダーイメージを使用した Azure Blob Storage および Amazon S3 へのデプロイについては、Docker Deploymentをご覧ください。

🛠️ ファイル操作を実装したいですか？
→ 作成、読み取り、更新、削除のパターンについては、File Operations (CRUD)をご確認ください。

📊 ローカルデータを扱いますか？
→ メモリ内のファイルとイベント駆動型の操作については、Flat Data Structureをご覧ください。

✅ 複数のファイルを選択する必要がありますか？
→ Ctrl+クリック、Shift+クリック、ドラッグによる選択については、Multiple Selection & Range Selectionをご覧ください。

⚡ 大量のファイル一覧を扱いますか？
→ 1000 個以上のファイルをスムーズにスクロールするには、Virtualizationをご利用ください。

🎨 UI をカスタマイズしたいですか？
→ テーマとレイアウトのオプションについては、Customization & Stylingをご覧ください。

⚙️ 高度な機能をお探しですか？
→ パフォーマンス、カスタムプロバイダー、API 統合については、Advanced Featuresをご覧ください。

♿ アクセシビリティや多言語対応が必要ですか？
→ WCAG と国際化については、Accessibility & Localizationをご覧ください。

🔐 ユーザーアクセス制御が必要ですか？
→ ロールベースの権限とセキュリティについては、Access Controlをご覧ください。

📤 カスタムヘッダーをサーバーに渡しますか？
→ setRequestHeader と認証については、Pass Custom Value to Serverをご覧ください。

🎯 高度なカスタマイズが必要ですか？
→ Adding Custom Item to Context MenuおよびAdding Custom Item to Toolbarをご確認ください。

🔧 ツールバー項目を有効／無効にしますか？
→ プログラムによる制御については、Enable/Disable Toolbar Itemをご覧ください。

🖼️ サムネイルやアイコンをカスタマイズしますか？
→ アイコンテンプレートについては、Customize Custom Thumbnailをご覧ください。

📁 ナビゲーションペインをカスタマイズしますか？
→ ツリービューのカスタマイズについては、Customize Navigation Paneをご覧ください。

✨ 項目を事前選択しますか？
→ デフォルトの選択については、Preselect Itemsをご覧ください。

📦 ダイアログやタブ内に File Manager を配置しますか？
→ 他のコンポーネントへの埋め込みについては、Nested Itemsをご覧ください。

このスキルを使用する場面

次のような場合に、このスキルを使用します。

• アプリケーション用のファイルブラウザーインターフェースを作成する
• ファイルのアップロードおよびダウンロード機能を実装する
• ファイル管理機能（作成、削除、名前変更、更新）を構築する
• 複数のビュー（詳細表示と大きなアイコン表示）に対応する
• ファイル管理にドラッグ＆ドロップ機能を追加する
• コンテキストメニュー、ツールバー、スタイルをカスタマイズする
• アクセシビリティ機能（キーボードナビゲーション、ARIA）を統合する
• 国際化と RTL 言語に対応する
• ローカルまたはリモートのファイルシステムに接続する
• Syncfusion の統合 Docker プロバイダーイメージを使用して、ホスト型ファイルサービスをデプロイする
• コンテナーの環境変数を介して、バックエンドに Azure Blob Storage または Amazon S3 を使用する

コンポーネントの概要

ファイルマネージャーは、ファイルシステムを管理するためのグラフィカルユーザーインターフェイスコンポーネントです。次の機能を利用できます。

• ファイル操作： ファイルの読み取り、作成、削除、名前変更、アップロード、ダウンロード、更新
• 複数のビュー： 詳細ビュー（並べ替え可能なリスト）と大きなアイコンビュー（サムネイル）を切り替え
• ナビゲーション： 階層を探索するためのパンくずリストとツリービュー付きナビゲーションペイン
• コンテキストメニュー： カスタマイズ可能なオプションを備えた右クリックメニュー
• ドラッグ＆ドロップ： 設定可能なドロップ領域を使って、フォルダー間でファイルをドラッグ
• アクセシビリティ： キーボードナビゲーションとスクリーンリーダーに対応し、WCAG に完全準拠
• ローカライズ： 右から左に記述する言語の RTL 方向を含む、多言語サポート
• カスタマイズ： スタイル、テーマ、動作をカスタマイズするための幅広い API

ドキュメントとナビゲーションガイド

主な機能

はじめにとインストール

📄 参照： references/getting-started.md

• インストールとパッケージのセットアップ
• 基本的なファイルマネージャーの実装
• CSS のインポートとテーマの設定
• 初期設定とセットアップ
• ファイルサービスへの接続（AjaxSettings）

Docker デプロイ

📄 参照： references/docker-deployment.md

• Syncfusion File Manager プロバイダー統合 Docker イメージ
• Azure Blob Storage プロバイダーの設定
• Amazon S3 プロバイダーの設定
• docker-compose のセットアップと環境変数
• ホストされたサービス用のクライアント側 ajaxSettings の接続設定
• よくあるサービスエラーと DNS エラーのトラブルシューティング

ファイル操作（CRUD）

📄 参照： references/file-operations.md

• フォルダーとファイルの作成
• ファイルシステムの読み取りと参照
• 更新／名前変更操作
• ファイルとフォルダーの削除
• アップロードおよびダウンロード機能
• 複数ファイルの選択と一括操作
• ファイルプロバイダーのパターンとカスタム実装

ビューとナビゲーション

📄 参照： references/views-and-navigation.md

• 列を備えた詳細ビュー
• サムネイル付き大きなアイコンビュー
• ビューの切り替えと設定
• パンくずリストのナビゲーション制御
• ナビゲーションペイン（ツリービューのサイドバー）
• ツールバーの機能とレイアウト

データ管理

フラットなデータ構造

📄 参照： references/flat-data.md

• サーバー呼び出しの代わりにローカルの JSON データを使用
• FileData インターフェイスとプロパティ
• アイテムごとの権限管理
• イベント駆動型のファイル操作（作成、削除、名前変更、検索）
• React フックによる状態管理
• バックエンドとの同期パターン
• 大規模なデータセットのパフォーマンス最適化

複数選択と範囲選択

📄 参照： references/multiple-selection.md

• 複数選択機能の有効化／無効化
• マウスのドラッグによる範囲選択
• チェックボックスによる選択のサポート
• 選択状態の管理
• 選択したアイテムの API とイベント
• 読み込み時のアイテムの事前選択
• キーボードショートカット（Ctrl+A、Shift+クリック）

アイテムの事前選択

📄 参照： references/preselect-the-items.md

• 読み込み時にプログラムでアイテムを選択
• ファイルの種類、サイズ、または日付に基づく事前選択
• コンテキストに応じた事前選択
• 選択メソッド（selectAll、clearSelection）
• 選択したアイテムをプログラムで取得

パフォーマンスと最適化

仮想化とパフォーマンス

📄 参照： references/virtualization.md

• 大規模なデータセットで仮想スクロールを有効化
• ファイルとフォルダーを動的に読み込み
• ビューポートに基づくレンダリングの最適化
• モジュールの注入とセットアップ
• パフォーマンス上の制限と回避策
• 1000 件を超えるアイテムを扱う際のベストプラクティス

ユーザーインタラクション

ドラッグ＆ドロップ機能

📄 参照： references/drag-and-drop.md

• ドラッグ＆ドロップ機能の有効化／無効化
• ドロップ領域の設定
• イベント処理（fileDragStart、fileDragStop、fileDropped）
• フォルダー間のドラッグ＆ドロップ
• カスタムのドラッグ＆ドロップ動作

カスタマイズとスタイル設定

📄 参照： references/customization.md

• コンテキストメニューのカスタマイズ
• ツールバーのカスタマイズ
• 詳細ビューの列のカスタマイズ
• ナビゲーションペインのカスタマイズ
• ツールチップのカスタマイズ
• ファイル拡張子と隠しファイルの表示／非表示
• 大きなアイコン表示でのサムネイル設定
• CSS クラスとテーマのカスタマイズ

高度なカスタマイズ

コンテキストメニューへのカスタム項目の追加

📄 参照： references/adding-custom-item-to-context-menu.md

• コンテキストメニューへのカスタムメニュー項目の追加
• メニュー項目へのアイコンの追加
• メニュークリックイベントの処理
• ファイルのプロパティに応じた条件付きメニュー項目
• 動的なメニューのカスタマイズ

ツールバーへのカスタム項目の追加

📄 参照： references/adding-custom-item-to-toolbar.md

• デフォルトのツールバー項目の変更
• カスタムツールバー項目の追加
• ツールバー用のカスタムテンプレート
• ツールバーのクリック処理
• カスタムボタン、チェックボックス、ドロップダウン

ツールバー項目の有効化／無効化

📄 参照： references/enable-disable-toolbar-item.md

• プログラムによるツールバー項目の有効化／無効化
• 選択内容に応じた有効化／無効化
• ロールベースのツールバー制御
• 操作中の無効化
• 権限ベースのツールバー制御

カスタムサムネイルのカスタマイズ

📄 参照： references/customize-custom-thumbnail.md

• サムネイルの表示／非表示
• 大きなアイコン表示用のカスタムテンプレート
• ファイルの種類に応じたアイコン
• サイズに応じた色分け
• 日付に応じたアイコン表示

ナビゲーションペインのカスタマイズ

📄 参照： references/customize-navigation-items.md

• ナビゲーションペインの表示状態と幅の制御
• ナビゲーションノード用のカスタムテンプレート
• ファイル数とメタデータの追加
• フォルダーの色分け
• アイコンベースのナビゲーションスタイル設定
• レスポンシブなナビゲーションペイン

入れ子になった項目

📄 参照： references/nested-items.md

• ダイアログ内へのファイルマネージャーの埋め込み
• タブ内へのファイルマネージャーの埋め込み
• スプリッター内へのファイルマネージャーの埋め込み
• ファイルマネージャーを使ったファイルセレクター
• ファイルマネージャーを使った複数パネルのレイアウト

セキュリティと統合

アクセス制御

📄 参照： references/access-control.md

• フォルダー／ファイルのアクセス権限の定義
• 権限の種類（許可／拒否）
• ロールベースのアクセス制御
• ユーザーロールごとのアクセスルール
• バックエンドでの権限検証

カスタム値のサーバーへの送信

📄 参照： references/pass-custom-value-to-server.md

• setRequestHeader によるカスタム HTTP ヘッダーの設定
• ユーザー認証ヘッダー
• ユーザー識別ヘッダー
• ファイル操作の追跡
• 部門ベースのアクセス
• ダウンロード操作のカスタマイズ
• 画像読み込みのカスタマイズ
• サーバー統合の包括的なパターン

アクセシビリティとローカライズ

アクセシビリティとローカライズ

📄 参照： references/accessibility-localization.md

• WCAG 2.1 への準拠
• キーボードナビゲーション（矢印キー、Enter、Delete）
• ARIA 属性とロール
• スクリーンリーダーのサポート
• 国際化（i18n）
• 右から左（RTL）への表示のサポート
• ロケールごとの日付と数値の書式設定

高度な機能

高度な機能

📄 参照： references/advanced-features.md

• カスタムファイルシステムプロバイダーの実装
• API 統合パターン
• パフォーマンス最適化の手法
• エラー処理とエッジケース
• イベントシステムとフック
• 高度な検索とフィルタリング
• カスタムの並べ替えと比較
• 入れ子になったコンポーネント（ダイアログ／タブ内のファイルマネージャー）

クイックスタートの例

ファイルマネージャーと一緒に Tailwind3 テーマパッケージをインストールします。

npm install @syncfusion/ej2-react-filemanager
npm install @syncfusion/ej2-tailwind3-theme

テーマのインポートを src/App.css に追加します。

/* src/App.css */
@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/file-manager/index.css";

src/App.tsx で App.css とコンポーネントをインポートします。

import React from 'react';
import { FileManagerComponent, Inject, DetailsView, NavigationPane, Toolbar } from '@syncfusion/ej2-react-filemanager';
import './App.css';

function App() {
  const hostUrl = "url";

  return (
    <div>
      <FileManagerComponent
        id="file"
        ajaxSettings={{
          url: hostUrl + "api/FileManager/FileOperations",
          getImageUrl: hostUrl + "api/FileManager/GetImage",
          uploadUrl: hostUrl + "api/FileManager/Upload",
          downloadUrl: hostUrl + "api/FileManager/Download"
        }}
        view="Details"
        height="375px"
      >
        <Inject services={[DetailsView, NavigationPane, Toolbar]} />
      </FileManagerComponent>
    </div>
  );
}

export default App;

メソッドリファレンス

ファイルマネージャーには、操作を制御するためのプログラム用メソッドが用意されています。

選択と表示の制御

メソッド	パラメーター	目的
selectAll()	-	現在のパスにあるすべてのファイルとフォルダーを選択します
clearSelection()	-	すべての項目の選択を解除します
getSelectedFiles()	-	選択したファイルオブジェクトの配列を取得します

ファイル操作

メソッド	パラメーター	目的
createFolder(name?)	name: string (optional)	新しいフォルダーを作成します。名前を指定しない場合はダイアログを開きます
renameFile(id?, name?)	id: string, name: string	ファイルまたはフォルダーの名前を変更します。パラメーターを指定しない場合はダイアログを開きます
deleteFiles(ids?)	ids: string[]	ファイルまたはフォルダーを削除します。指定しない場合は確認ダイアログを開きます
openFile(id)	id: string	ファイルを開くか、フォルダーに移動します
downloadFiles(ids?)	ids: string[] (optional)	選択したファイルをダウンロードします。指定しない場合は選択項目をダウンロードします
uploadFiles()	-	ファイルのアップロードダイアログを開きます

ナビゲーションと更新

メソッド	パラメーター	目的
refreshFiles()	-	現在のフォルダーの内容を更新します
refreshLayout()	-	コンポーネントのレイアウトを更新します
traverseBackward()	-	親ディレクトリに移動します
filterFiles(filterData?)	filterData: Object	表示されているファイルにカスタムフィルターを適用します

ツールバーとメニューの制御

メソッド	パラメーター	目的
disableToolbarItems(items)	items: string[]	特定のツールバーボタンを無効にします
enableToolbarItems(items)	items: string[]	特定のツールバーボタンを有効にします
getToolbarItemIndex(item)	item: string	ツールバー項目の位置を取得します
disableMenuItems(items)	items: string[]	コンテキストメニュー項目を無効にします
enableMenuItems(items)	items: string[]	コンテキストメニュー項目を有効にします
getMenuItemIndex(item)	item: string	コンテキストメニュー項目の位置を取得します

ダイアログの制御

メソッド	パラメーター	目的
closeDialog()	-	開いているダイアログを閉じます

コンポーネントのライフサイクル

メソッド	パラメーター	目的
destroy()	-	コンポーネントのリソースをクリーンアップします

イベントリファレンス

ファイルマネージャーには、カスタマイズ用の包括的なイベントフックが用意されています。

ファイル選択イベント

イベント	引数	発生時
fileSelection	FileSelectionEventArgs	ファイルまたはフォルダーが選択される直前（キャンセル可能）
fileSelect	FileSelectEventArgs	ファイルまたはフォルダーが選択または選択解除されたとき

ファイルナビゲーションイベント

イベント	引数	発生時
fileOpen	FileOpenEventArgs	ファイルまたはフォルダーが開かれる直前
fileLoad	FileLoadEventArgs	ファイルまたはフォルダーの項目が描画されたとき

ファイル操作イベント

イベント	引数	発生時
beforeFolderCreate	FolderCreateEventArgs	フォルダーの作成が要求されたとき（キャンセル可能）
folderCreate	FolderCreateEventArgs	フォルダーが正常に作成されたとき
beforeRename	RenameEventArgs	名前の変更が要求されたとき（キャンセル可能）
rename	RenameEventArgs	ファイルまたはフォルダーの名前が正常に変更されたとき
beforeDelete	DeleteEventArgs	削除が要求されたとき（キャンセル可能）
delete	DeleteEventArgs	ファイルまたはフォルダーが正常に削除されたとき
beforeMove	MoveEventArgs	移動またはコピー操作が開始されたとき
move	MoveEventArgs	ファイルまたはフォルダーが正常に移動またはコピーされたとき

ドラッグ＆ドロップイベント

イベント	引数	発生時
fileDragStart	FileDragEventArgs	ドラッグ操作が開始されたとき
fileDragging	FileDragEventArgs	ドラッグ中
fileDragStop	FileDragEventArgs	ドロップされる直前（キャンセル可能）
fileDropped	FileDragEventArgs	ファイルまたはフォルダーが正常にドロップされたとき

アップロードイベント

イベント	引数	発生するタイミング
uploadListCreate	UploadListCreateArgs	アップロード UI の作成時（アップロード前の検証）
beforeDownload	BeforeDownloadEventArgs	ダウンロードが要求されたとき

メニューとコンテキストイベント

イベント	引数	発生するタイミング
menuOpen	MenuOpenEventArgs	コンテキストメニューが開く直前
menuClose	MenuCloseEventArgs	コンテキストメニューが閉じたとき
menuClick	MenuClickEventArgs	コンテキストメニュー項目がクリックされたとき

検索とダイアログイベント

イベント	引数	発生するタイミング
search	SearchEventArgs	ユーザーが検索ボックスに入力したとき
beforePopupOpen	BeforePopupOpenCloseEventArgs	ダイアログが開く直前
popupOpen	PopupOpenCloseEventArgs	ダイアログが開いたとき
beforePopupClose	BeforePopupOpenCloseEventArgs	ダイアログが閉じる直前
popupClose	PopupOpenCloseEventArgs	ダイアログが閉じたとき

AJAX とサーバーイベント

イベント	引数	発生するタイミング
beforeSend	BeforeSendEventArgs	AJAX リクエストの送信時（カスタムヘッダーを追加）
success	SuccessEventArgs	AJAX リクエストが成功したとき
failure	FailureEventArgs	AJAX リクエストが失敗したとき
beforeImageLoad	BeforeImageLoadEventArgs	画像／サムネイルのリクエスト送信時

ライフサイクルイベント

イベント	引数	発生するタイミング
created	Object	コンポーネントの初期化完了時
destroyed	Object	コンポーネントの破棄時

ツールバーイベント

イベント	引数	発生するタイミング
toolbarCreate	ToolbarCreateEventArgs	ツールバーの作成時
toolbarClick	ToolbarClickEventArgs	ツールバーボタンがクリックされたとき

一般的なパターン

1. 基本セットアップパターン

まず、Tailwind3 テーマパッケージをインストールします。

npm install @syncfusion/ej2-tailwind3-theme

テーマのインポートを src/App.css に追加します。

/* src/App.css */
@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/file-manager/index.css";

次に、コンポーネントを使用します。

import React from 'react';
import { FileManagerComponent, Inject, DetailsView, NavigationPane, Toolbar } from '@syncfusion/ej2-react-filemanager';
import './App.css';

export default function BasicFileManager() {
  return (
    <FileManagerComponent
      id="file"
      ajaxSettings={{
        url: "url",
        getImageUrl: "url",
        uploadUrl: "url",
        downloadUrl: "url"
      }}
      view="Details"
      height="500px"
    >
      <Inject services={[DetailsView, NavigationPane, Toolbar]} />
    </FileManagerComponent>
  );
}

セットアップ手順：

1. @syncfusion/ej2-react-filemanager とすべてのピア依存関係をインストールします
2. テーマパッケージをインストールします：npm install @syncfusion/ej2-tailwind3-theme
3. テーマのインポートを App.css に追加します：@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/file-manager/index.css";
4. ajaxSettings エンドポイントを設定します
5. ビュー（Details または LargeIcons）を選択します
6. 必要なサービス（有効にする機能）を注入します

2. ファイルサービスのバックエンドパターン

想定されるエンドポイント構成：

ajaxSettings={{
  url: "url",
  getImageUrl: "url",
  uploadUrl: "url",
  downloadUrl: "url"
}}

バックエンドの実装（ASP.NET Core の例）：

[ApiController]
[Route("api/[controller]")]
public class FileManagerController : ControllerBase
{
    [HttpPost("FileOperations")]
    public IActionResult FileOperations(
        [FromForm] string action,
        [FromForm] string path,
        [FromForm] string name = null,
        [FromForm] IFormFile uploadFiles = null)
    {
        switch (action)
        {
            case "read":
                // Return files and folders at given path
                return Ok(new { files = GetDirectoryContents(path) });
            case "create":
                // Create new folder
                Directory.CreateDirectory(Path.Combine(path, name));
                return Ok();
            case "delete":
                // Delete files/folders
                return Ok();
            case "rename":
                // Rename file/folder
                return Ok();
            case "move":
                // Move or copy files
                return Ok();
            default:
                return BadRequest("Invalid action");
        }
    }

    [HttpGet("GetImage")]
    public IActionResult GetImage([FromQuery] string path)
    {
        // Return thumbnail or image file
        var filePath = ResolvePath(path);
        return PhysicalFile(filePath, "image/jpeg");
    }

    [HttpPost("Upload")]
    public IActionResult Upload([FromForm] IFormFile uploadFiles, [FromForm] string path)
    {
        // Handle file upload
        var filePath = Path.Combine(path, uploadFiles.FileName);
        using (var stream = new FileStream(filePath, FileMode.Create))
        {
            uploadFiles.CopyTo(stream);
        }
        return Ok();
    }

    [HttpGet("Download")]
    public IActionResult Download([FromQuery] string path)
    {
        // Return file for download
        var file = System.IO.File.ReadAllBytes(path);
        var fileName = Path.GetFileName(path);
        return File(file, "application/octet-stream", fileName);
    }
}

3. 状態管理パターン

import React, { useRef, useState } from 'react';

export default function FileManagerWithState() {
  const fileManagerRef = useRef(null);
  const [selectedFiles, setSelectedFiles] = useState([]);
  const [currentPath, setCurrentPath] = useState('/');

  const handleFileSelect = (args) => {
    setSelectedFiles(args.fileDetails);
  };

  const handleCreateFolder = () => {
    fileManagerRef.current?.createFolder('NewFolder');
  };

  const handleDeleteSelected = () => {
    const ids = selectedFiles.map(f => f.name);
    fileManagerRef.current?.deleteFiles(ids);
  };

  return (
    <div>
      <div className="toolbar">
        <button onClick={handleCreateFolder}>Create Folder</button>
        <button onClick={handleDeleteSelected} disabled={!selectedFiles.length}>
          Delete ({selectedFiles.length})
        </button>
        <span>Path: {currentPath}</span>
      </div>
      <FileManagerComponent
        ref={fileManagerRef}
        fileSelect={handleFileSelect}
        ajaxSettings={{...}}
        height="400px"
      >
        <Inject services={[DetailsView, NavigationPane, Toolbar]} />
      </FileManagerComponent>
    </div>
  );
}

4. イベント駆動型カスタムロジックパターン

<FileManagerComponent
  // Prevent deletion of certain files
  beforeDelete={(args) => {
    if (args.fileDetails[0].name.startsWith('.')) {
      args.cancel = true;
      alert('Cannot delete system files');
    }
  }}
  
  // Add headers to AJAX requests
  beforeSend={(args) => {
    args.headers = { ...args.headers, 'Authorization': `Bearer ${token}` };
  }}
  
  // Validate before upload
  uploadListCreate={(args) => {
    args.fileDetails.forEach(file => {
      if (file.size > 5000000) { // 5MB limit
        args.cancel = true;
      }
    });
  }}
  
  // Track successful operations
  success={(args) => {
    console.log('Operation successful:', args.action, args.result);
  }}
  
  // Handle errors
  failure={(args) => {
    console.error('Operation failed:', args.error);
  }}
/>

5. カスタマイズパターン

<FileManagerComponent
  // Customize toolbar
  toolbarSettings={{
    items: ['NewFolder', 'Upload', '|', 'Cut', 'Copy', 'Paste', '|', 'Delete', 'Download'],
    visible: true
  }}
  
  // Customize context menu
  contextMenuSettings={{
    file: ['Open', '|', 'Cut', 'Copy', '|', 'Delete', 'Rename', '|', 'Details'],
    folder: ['Open', '|', 'Cut', 'Copy', 'Paste', '|', 'Delete', 'Rename'],
    layout: ['SortBy', 'View', 'Refresh', '|', 'NewFolder', 'Upload'],
    visible: true
  }}
  
  // Customize columns in details view
  detailsViewSettings={{
    columns: [
      {
        field: 'name',
        headerText: 'Name',
        minWidth: 120,
        template: '<span class="custom-name">${name}</span>'
      },
      {
        field: '_fm_modified',
        headerText: 'Modified',
        type: 'dateTime',
        format: 'MMMM dd, yyyy HH:mm',
        minWidth: 120
      },
      {
        field: 'size',
        headerText: 'Size',
        minWidth: 90,
        template: '<span>${size}</span>'
      }
    ]
  }}
  
  // Customize navigation pane
  navigationPaneSettings={{
    maxWidth: '650px',
    minWidth: '240px',
    visible: true,
    sortOrder: 'None'
  }}
/>

6. パフォーマンス最適化パターン

<FileManagerComponent
  // Enable virtualization for large datasets
  enableVirtualization={true}
  
  // Enable persistence to maintain state
  enablePersistence={true}
  
  // Configure search settings
  searchSettings={{
    allowSearchOnTyping: true,
    filterType: 'contains',
    ignoreCase: true
  }}
  
  // Configure upload settings
  uploadSettings={{
    autoUpload: true,
    minFileSize: 0,
    maxFileSize: 30000000, // 30MB
    allowedExtensions: '.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx',
    autoClose: false,
    directoryUpload: false,
    sequentialUpload: false
  }}
  
  // Sort optimization
  sortBy="name"
  sortOrder="Ascending"
/>

主要な Props

コア設定

Prop	型	デフォルト	用途
ajaxSettings	Object	以下を参照	ファイル操作用のバックエンドエンドポイントを設定します
path	string	"/"	現在のフォルダーパス
view	string	"LargeIcons"	ビューの種類："Details" または "LargeIcons"
width	string	"100%"	コンポーネントの幅
height	string	"400px"	コンポーネントの高さ

表示と動作

Prop	型	デフォルト	用途
showFileExtension	boolean	true	ファイル拡張子を表示します
showHiddenItems	boolean	false	隠しファイル／フォルダーを表示します
showThumbnail	boolean	true	大きなアイコンビューでサムネイルを表示します
showItemCheckBoxes	boolean	true	ホバー時にチェックボックスを表示します
sortBy	string	"name"	並べ替えフィールド："name"、"dateModified"、"size"
sortOrder	string	"Ascending"	並べ替え順："Ascending"、"Descending"、または "None"
enableRtl	boolean	false	右から左へのレイアウトをサポートします
locale	string	"en-US"	ローカライズ言語コード

選択とナビゲーション

Prop	Type	Default	Purpose
allowMultiSelection	boolean	true	複数のファイルを選択できるようにします
enableRangeSelection	boolean	false	マウスをドラッグして複数の項目を選択します
selectedItems	string[]	[]	初期状態で選択されているファイル名
allowDragAndDrop	boolean	false	ドラッグ＆ドロップ操作を有効にします

パフォーマンスと機能

Prop	Type	Default	Purpose
enableVirtualization	boolean	false	大規模なデータセットで仮想スクロールを有効にします
enablePersistence	boolean	false	ビュー、パス、選択状態を保持します
enableHtmlSanitizer	boolean	true	XSS 攻撃を防ぐために HTML をサニタイズします
cssClass	string	""	スタイル設定用のカスタム CSS クラス
rootAliasName	string	null	ルートフォルダーの表示名
popupTarget	HTMLElement	null	ダイアログのポップアップ先要素

データと設定オブジェクト

Prop	Type	Purpose
fileSystemData	Object[]	ローカルファイル用のフラットなデータ構造
contextMenuSettings	Object	コンテキストメニュー項目をカスタマイズします
toolbarSettings	Object	ツールバーの項目とレイアウトを設定します
detailsViewSettings	Object	列と列幅をカスタマイズします
navigationPaneSettings	Object	サイドバーの動作と外観を設定します
searchSettings	Object	検索フィルタリングのオプションを設定します
uploadSettings	Object	アップロードの動作を設定します
sortComparer	Function	カスタムソート関数
largeIconsTemplate	string | Function	大きいアイコン表示用のカスタムテンプレート
navigationPaneTemplate	string | Function	ナビゲーションペイン用のカスタムテンプレート

AJAX 設定

ajaxSettings={{
  url: "url",     // Main CRUD endpoint (required)
  getImageUrl: "url",   // Thumbnail retrieval
  uploadUrl: "url",       // File upload endpoint
  downloadUrl: "url",   // File download endpoint
  // Optional: Add custom headers
  // headers: { 'Authorization': 'Bearer token' }
}}

バックエンドエンドポイントの要件：

• url - action パラメーターを含む POST リクエストを受け取ります：

  • read：パス内のファイルを一覧表示します
  • create：新しいフォルダーを作成します
  • delete：ファイルまたはフォルダーを削除します
  • rename：ファイルまたはフォルダーの名前を変更します
  • move：ファイルを移動／コピーします（コピーまたは切り取り）
  • search：ファイルを検索します
  • upload：ファイルのアップロードを処理します
  • download：ダウンロードを準備します

• getImageUrl - サムネイル画像 URL を取得するための、path パラメーターを含む GET リクエスト

• uploadUrl - ファイルを含むマルチパートフォームデータの POST リクエスト

• downloadUrl - ファイルのダウンロードストリームを開始します

一般的な使用例

ケース 1：ドキュメント管理システム

アップロード、ダウンロード、フォルダー整理に対応したドキュメントブラウザーを実装します：

• メタデータの表示には詳細ビューを使用します
• ドキュメント操作用にコンテキストメニューを設定します
• 検索機能を追加します
• バックエンドでアクセス制御を実装します

ケース 2：メディアファイルブラウザー

画像や動画のサムネイルを表示するギャラリーを構築します：

• サムネイル表示には大きいアイコンビューを使用します
• プレビュー生成用に getImageUrl を設定します
• パフォーマンス向上のため、遅延読み込みを実装します
• ファイル整理用にドラッグ＆ドロップを追加します

ケース 3：管理者向けファイルマネージャー

社内向けのファイル管理ツールを作成します：

• 管理者専用の操作を含めてツールバーをカスタマイズします
• 高度なコンテキストメニューのオプションを実装します
• ロギングと監査証跡を追加します
• バックエンドで権限を設定します

ケース 4：ローカライズされたファイルマネージャー

複数の言語と RTL に対応します：

• locale にユーザーの言語を設定します
• RTL 言語では enableRtl を有効にします
• 言語ごとにコンテキストメニューのラベルをカスタマイズします
• ロケールに合わせて日付とサイズをフォーマットします

---

次のステップ

1. 開始： インストールと基本設定については、references/getting-started.md をご覧ください
2. バックエンド： Azure Blob Storage / Amazon S3 については、references/docker-deployment.md をご覧ください
3. 実装： 要件に合った機能リファレンスを選択してください
4. カスタマイズ： スタイル設定と構成については、references/customization.md をご確認ください
5. 最適化： パフォーマンスとエッジケースについては、references/advanced-features.md をご確認ください
6. アクセシビリティ： references/accessibility-localization.md に準拠していることを確認してください

---