logologo
スタート
マニュアル
開発
プラグイン
API
ホーム
English
简体中文
日本語
한국어
Español
Português
Deutsch
Français
Русский
Italiano
Türkçe
Українська
Tiếng Việt
Bahasa Indonesia
ไทย
Polski
Nederlands
Čeština
العربية
עברית
हिन्दी
Svenska
スタート
マニュアル
開発
プラグイン
API
ホーム
logologo
概要

データソース

データソース管理
メインデータソース

外部データソース(データベース)

紹介
外部 MySQL
外部 MariaDB
外部 PostgreSQL
外部 MSSQL
外部 Oracle
メインDB・外部DB比較
REST API データソース
KingbaseES データソース

データテーブル

概要
標準テーブル
継承テーブル
ファイルテーブル
ツリーテーブル
カレンダーテーブル
コメントテーブル
式テーブル
SQL テーブル
データベースビュー

テーブルフィールド

概要
フィールド検証

基本タイプ

一行テキスト
複数行テキスト
携帯電話番号
メールアドレス
URL
整数
数値
パーセンテージ
パスワード
カラー
アイコン

選択タイプ

チェック
ドロップダウン(単一選択)
ドロップダウン(複数選択)
ラジオボタン
チェックボックス

マルチメディア

Markdown
Markdown (Vditor)
リッチテキスト
添付ファイル(リレーション)
添付ファイル(URL)

日付 & 時刻

概要
日時(タイムゾーン付き)
日時(タイムゾーンなし)
Unix タイムスタンプ
日付(時刻なし)
時刻

ジオメトリ

ポイント
ライン
円
ポリゴン

高度なタイプ

UUID
Nano ID
並び順
計算式
自動採番
JSON
データテーブル選択
暗号化

システム情報

作成日時
最終更新日時
作成者
最終更新者
スペース
テーブルOID

リレーションタイプ

概要
1対1
1対多
多対1
多対多
多対多(配列)

開発

概要
Next Page概要
TIP

このドキュメントはAIによって翻訳されました。不正確な情報については、英語版をご参照ください

#拡張開発

#フロントエンドのファイルタイプを拡張する

アップロード済みのファイルは、フロントエンドのUI上でファイルタイプに応じて異なるプレビューコンテンツを表示できます。ファイルマネージャーの添付ファイルフィールドには、ブラウザベース(iframeに埋め込み)のファイルプレビュー機能が組み込まれており、画像、動画、音声、PDFなど、ほとんどのファイル形式をブラウザで直接プレビューできます。ブラウザでのプレビューに対応していないファイル形式や、特別なプレビュー操作が必要な場合は、ファイルタイプに基づいたプレビューコンポーネントを拡張することで実現できます。

#例

例えば、画像ファイルタイプに対してカルーセル切り替えコンポーネントを拡張したい場合は、以下のコードを使用します。

import match from 'mime-match';
import { Plugin, attachmentFileTypes } from '@nocobase/client';

class MyPlugin extends Plugin {
  load() {
    attachmentFileTypes.add({
      match(file) {
        return match(file.mimetype, 'image/*');
      },
      Previewer({ index, list, onSwitchIndex }) {
        const onDownload = useCallback(
          (e) => {
            e.preventDefault();
            const file = list[index];
            saveAs(file.url, `${file.title}${file.extname}`);
          },
          [index, list],
        );
        return (
          <LightBox
            // discourageDownloads={true}
            mainSrc={list[index]?.url}
            nextSrc={list[(index + 1) % list.length]?.url}
            prevSrc={list[(index + list.length - 1) % list.length]?.url}
            onCloseRequest={() => onSwitchIndex(null)}
            onMovePrevRequest={() => onSwitchIndex((index + list.length - 1) % list.length)}
            onMoveNextRequest={() => onSwitchIndex((index + 1) % list.length)}
            imageTitle={list[index]?.title}
            toolbarButtons={[
              <button
                key={'preview-img'}
                style={{ fontSize: 22, background: 'none', lineHeight: 1 }}
                type="button"
                aria-label="Download"
                title="Download"
                className="ril-zoom-in ril__toolbarItemChild ril__builtinButton"
                onClick={onDownload}
              >
                <DownloadOutlined />
              </button>,
            ]}
          />
        );
      },
    });
  }
}

attachmentFileTypes は、@nocobase/client パッケージで提供されている、ファイルタイプを拡張するためのエントリーオブジェクトです。この add メソッドを使用して、ファイルタイプディスクリプターを拡張します。

各ファイルタイプは、ファイルタイプが要件を満たしているかを確認するための match() メソッドを実装する必要があります。この例では、mime-match パッケージが提供するメソッドを使ってファイルの mimetype 属性をチェックしています。image/* のタイプに一致する場合、処理が必要なファイルタイプと見なされます。一致しなかった場合は、組み込みのタイプ処理にフォールバックされます。

タイプディスクリプターオブジェクトの Previewer プロパティは、プレビューに使用されるコンポーネントです。ファイルタイプが一致すると、このコンポーネントがレンダリングされてプレビューが表示されます。通常、<Modal /> のようなモーダルタイプのコンポーネントを基本コンテナとして使用し、その中にプレビューとインタラクティブなコンテンツを配置してプレビュー機能を実装することをお勧めします。

#API

export interface FileModel {
  id: number;
  filename: string;
  path: string;
  title: string;
  url: string;
  extname: string;
  size: number;
  mimetype: string;
}

export interface PreviewerProps {
  index: number;
  list: FileModel[];
  onSwitchIndex(index): void;
}

export interface AttachmentFileType {
  match(file: any): boolean;
  Previewer?: React.ComponentType<PreviewerProps>;
}

export class AttachmentFileTypes {
  add(type: AttachmentFileType): void;
}

#attachmentFileTypes

attachmentFileTypes は、@nocobase/client からインポートされるグローバルインスタンスです。

import { attachmentFileTypes } from '@nocobase/client';

#attachmentFileTypes.add()

ファイルタイプレジストリに新しいファイルタイプディスクリプターオブジェクトを登録します。ディスクリプターのタイプは AttachmentFileType です。

#AttachmentFileType

#match()

ファイル形式のマッチングメソッドです。

引数 file は、アップロードされたファイルのデータオブジェクトで、タイプ判定に使用できる関連プロパティが含まれています。

  • mimetype: ファイルのMIMEタイプです。
  • extname: ファイルの拡張子です("."を含む)。
  • path: ファイルの相対保存パスです。
  • url: ファイルのURLです。

戻り値は boolean 型で、一致したかどうかの結果を示します。

#Previewer

ファイルをプレビューするためのReactコンポーネントです。

渡されるPropsパラメータは以下の通りです。

  • index: 添付ファイルリスト内でのファイルのインデックスです。
  • list: 添付ファイルのリストです。
  • onSwitchIndex: インデックスを切り替えるためのメソッドです。

onSwitchIndex には、list 内の任意のインデックス値を渡すことで、他のファイルに切り替えることができます。null を引数として渡すと、プレビューコンポーネントは直接閉じられます。

onSwitchIndex(null);