> ## Documentation Index > Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt > Use this file to discover all available pages before exploring further. # フォームのカスタマイズ > YiDAのカスタムコンポーネント機能を解説。ローコードでの作成・デバッグ・インストール手順から、テキストコピー機能の実装例、属性設定やバージョン管理まで、業務に合ったフォーム部品を自作する方法を紹介します。 | **機能** | **Freeプラン** | **ベーシック版** | **プロフェッショナル版** | **専用版** | | ----------- | ----------- | ---------- | -------------- | ------- | | カスタムコンポーネント | 非対応 | 非対応 | 対応 | 対応 | ## 1. 機能概要 ### 1.1 カスタムコンポーネントとは カスタムコンポーネント機能では、お客様自身がコンポーネントを開発できます。これにより、コンポーネントと業務ニーズの適合性が高まり、開発・保守コストを削減しながら、コンポーネントの再利用性を向上できます。 ### 1.2 ユースケース YiDA標準のコンポーネントではアプリの業務ニーズを満たせない場合、業界固有の慣習や要件に基づいて、業務シナリオに合わせたコンポーネントを開発できます。カスタムコンポーネントは同一組織内で共有できるため、今後同様のアプリを構築する際にも簡単に再利用できます。 ### 1.3 コンポーネントの構成 コンポーネントはビューと属性で構成されます。利用側では、コンポーネントの属性を変更することで、異なるビューを表示できます。 ビューはさらに、デザインビューとランタイムビューに分けられます。ほとんどの場合、デザインビューとランタイムビューは共通で利用できます。 提供側では、コンポーネントのビューと属性をそれぞれ個別に開発します。 ## 2. 手順ガイド **テキストコピー機能を実装する**簡単な例を通して、カスタムコンポーネントの作成・デバッグ・インストール・利用という一連の流れを体験します。 ### 2.1 シナリオ カスタムコンポーネント機能を使い、YiDA既存のテキストコンポーネントをローコードで拡張して、テキストコピー機能を実装します。これにより、ユーザーはテキスト内容をクリップボードにコピーできるようになり、同じフィールド値を繰り返し使いたい場面で役立ちます。 ### 2.2 完成イメージ 図 2.2-1 テキストコピーのデモ ### 2.3 手順 #### 2.3.1 ステップ1：カスタムコンポーネントを作成する コンポーネントの名前・タイプ・識別子などの属性を設定することで、業務ニーズに合ったコンポーネントを低コストで作成できます。 **手順：** 1. YiDAアプリ > アプリ設定 > コンポーネント管理 > コンポーネントセンター（図 2.3-1 参照）。 図 2.3-1 コンポーネントセンターに入る 2. コンポーネントを追加 > コンポーネント名・コンポーネントタイプ・コンポーネント識別子などの属性を入力 > 確認（図 2.3-2 参照）。 図 2.3-2 カスタムカウンターコンポーネントを作成する 1. 通常コンポーネントは通常、表示専用の機能に使用され、データを保存できません。データ送信には対応していません。コンポーネントを設計する際は、実際の業務シナリオを確認してください。コンポーネントにテキスト入力ボックスなどの要素を含めた場合、ユーザーが送信したデータは保存されません。 #### 2.3.2 ステップ2：カスタムコンポーネントを開発・デバッグする さまざまな業務ニーズに合わせて、コンポーネントを開発・デバッグします。この例では、カウンター機能を実装します。 **手順：** 1. コンポーネントセンター > マイコンポーネント > デバッグするコンポーネントを選択 > 開発（図 2.3-3 参照）。 図 2.3-3 カスタムコンポーネントの開発・デバッグの入口 前述のとおり、コンポーネントはビューと属性で構成されます。コンポーネントを開発する際は、まず必要な属性を抽象化します。属性から始めましょう。このコンポーネントに必要なのは、テキスト内容用の属性1つだけです。属性設定 > 属性定義 に移動し、`content` という名前のテキスト内容属性を追加して、属性タイプをテキストに設定し、セッターに `textSetter` を選択します。 属性を定義したら、コンポーネントのビューを作成します。必要なYiDA標準コンポーネントをキャンバスに追加し（この例では「テキスト」と「コピー」という名前のテキストコンポーネント2つを使用）、基本属性を設定します。テキストコンポーネントの内容を変数（先ほど定義した属性 `props.content`）にバインドすると、実行時に渡された値が表示されます（図 2.3-4 参照）。 図 2.3-4 カスタムコンポーネントのレイアウト 4. ボタンコンポーネントにアクションを設定し、テキストコピーの動作を実装します。「コピー」のテキストを選択 > アクションを作成 > クリック時に `onCopyText` を実行（図 2.3-5 参照）。 図 2.3-5 ボタンのアクションを設定する 5. JSパネルにコピー処理のロジックを記述します（図 2.3-6 参照）。 図 2.3-6 「コピー」ボタンのアクションのコード ```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}} export function onCopyText() { const input = document.createElement('input'); input.setAttribute('readonly', 'readonly'); // 属性には this.props.xxx でアクセスします input.setAttribute('value', this.props.content); document.body.appendChild(input); input.select(); input.setSelectionRange(0, 9999); document.execCommand('copy'); document.body.removeChild(input); this.utils.toast('クリップボードにコピーしました'); } ``` 図 2.3-7 リリース情報を入力する 8. コンポーネントが公開されると確認メッセージが表示されます（図 2.3-8 参照）。実際の開発では、コンポーネントを保存した時点で開発バージョン（0.1.0）をインストールして、実環境でのデバッグが可能です。正式バージョンの公開は、開発完了後に行えば十分です。 図 2.3-8 公開成功の通知 #### 2.3.3 ステップ3：カスタムコンポーネントをインストールする 開発・デバッグしたカスタムコンポーネントをページにインストールすると、ページ設計時に利用できるようになります。[コンポーネントのインストール](/ja/yida/form/sg47d6)では、ページタイプを選択する必要があります。カスタムコンポーネントは、選択したページタイプのページデザイナーにのみ表示されます。 **手順：** 1. フォーム設計ページ > コンポーネントライブラリ > カスタムコンポーネント > コンポーネント管理（図 2.3-9 参照）。 図 2.3-9 カスタムコンポーネントをインストールする入口 2. コンポーネント管理ページ > コンポーネント一覧 > インストールするカスタムコンポーネントを選択 > インストール（図 2.3-10 参照）。 図 2.3-10 インストールするコンポーネントを選択する 3. インストールするバージョンとインストールスコープを選択 > インストール（図 2.3-11 参照）。 図 2.3-11 コンポーネントをインストールする 1. 本番環境でカスタムコンポーネントを安定して動作させるため、バージョンを選択する際は必ず正式リリース版（1.x.x）をインストールしてください。 2. カスタムコンポーネントをページデザイナーで利用するには、インストールスコープで対応するページタイプを選択する必要があります。コンポーネントは、選択したページタイプのページデザイナーにのみ表示されます。 3. 初回インストール後は、コンポーネントのバージョンを「更新」できます。 #### 2.3.4 ステップ4：カスタムコンポーネントを利用する 上記の手順を完了すると、カスタムコンポーネントがページのコンポーネントライブラリの「カスタムコンポーネント」に表示されます。次の手順で利用します。 **手順：** 1. フォーム設計ページ > コンポーネントライブラリ > カスタムコンポーネント > 利用するコンポーネントを選択 > キャンバスにドラッグ（図 2.3-12 参照）。 図 2.3-12 カスタムコンポーネントを利用する #### 2.3.5 ステップ5：コンポーネント情報を確認・編集する コンポーネントの利用中に、サムネイル・ヘルプドキュメントのURL・説明を更新したい場合は、次の手順に従ってください。 **手順** 1. アプリ設定 > コンポーネント管理 > コンポーネントセンター（図 2.3-13 参照）。 図 2.3-13 コンポーネントセンターに入る 2. 確認または編集するコンポーネントを選択 > 詳細（図 2.3-14 参照）。 図 2.3-14 コンポーネントの詳細を確認する コンポーネントの詳細ページは、**基本情報**、**リリース情報**、**管理者**の3つのセクションで構成されます（図 2.3-15 参照）。 1. 基本情報：「編集」をクリックすると、カスタムコンポーネントのサムネイル・ヘルプドキュメントのURL・説明を更新できます。その他の項目はコンポーネント作成時に設定され、変更できません。 2. リリース情報：バージョンと各バージョンのリリースノートを含む、コンポーネントの更新履歴を確認できます。 3. 管理者（カスタムコンポーネントを開発・デバッグする権限を持ちます。デフォルトはコンポーネントの作成者）：管理者を追加・削除して権限管理を行います。 4. インストール情報：インストール先のアプリ・バージョン・スコープ・インストール実行者・インストール日時を含む、コンポーネントのインストール履歴を確認できます。 図 2.3-15 コンポーネントの詳細ページ ## 3. カスタムコンポーネントの属性 カスタムコンポーネント機能では、YiDA既存コンポーネントの拡張に加えて、開発したコンポーネントの属性（`propTypes`）をカスタマイズできます。これにより、カスタムコンポーネントを開発者の日常的なシナリオや習慣に合わせやすくなり、柔軟性とカスタマイズ性が高まります。 ### 3.1 カスタムコンポーネントの属性設定の入口 **パス**：ローコードコンポーネントデザイナー > キャンバス上の「ローコードビジネスコンポーネント」を選択 > 右側の属性（図 3.1-1 参照）。 図 3.1-1 カスタムコンポーネントの属性設定の入口 ### 3.2 カスタムコンポーネントの属性設定 カスタムコンポーネントの属性は、**両端設計**、**属性定義（**`propTypes`**）**、**ライフサイクル**、**固定識別子**の4つのセクションで構成されます。 * 両端設計：オン／オフの切り替えです。有効にすると、PCとモバイルのデザインが完全に分離され、それぞれを個別に設計して両端で異なる要件に対応できます。 * 属性定義（`propTypes`）：タイトル、名前、タイプ（データ形式）、デフォルトなど、カスタムコンポーネントの基本属性をカスタマイズします。非表示にするか（表示状態）や変更時（値の変化）にイベントをバインドして、幅広い業務ニーズに対応することもできます。詳細は[コンポーネントの属性設定](/ja/yida/form/zyrrlb)をご覧ください。 * ライフサイクル：カスタムコンポーネントには、コンポーネントのマウント完了時（`componentDidMount`）、コンポーネントの更新時（`componentDidUpdate`）、コンポーネントのエラー捕捉時（`componentDidCatch`）、コンポーネントのアンマウント前（`componentWillUnmount`）の4つのライフサイクルフックがあります。適切なフックにロジックを記述して、複雑な業務ニーズに対応します。 * 固定識別子：YiDA標準コンポーネントと同様に、カスタムコンポーネントにもコンポーネントのIDとなる固定識別子属性があります。この値は自動生成され、通常は変更する必要はありません。YiDAはこの値をバックエンドでのデータ保存やコードのバインドなどに使用します。 **重要：** * コンポーネントの固定識別子（`fieldId`）は、YiDAがコンポーネントを参照するためのIDです。変更すると、そのコンポーネントを使用している数式・データ保存（データが失われる可能性もあります）・JS関数の参照に影響する場合があります。固定識別子は変更しないことを強く推奨します。 * それでも変更する場合（現時点ではスキーマのインポートによってのみ可能です）、その結果を理解し、すべての責任をお客様自身が負うことに同意したものとみなされます。YiDAはその結果について責任を負いません。あらかじめご了承ください。 * コンポーネントの表示名は固定識別子（`fieldId`）と同じ働きをします。`fieldId` はシステムが生成する値で覚えにくいため、表示名を使うことでコードやOpenAPI呼び出しでフィールド名を扱いやすくできます。 ## 4. 付録 ### 4.1 コンポーネントのタイプ YiDAのカスタムコンポーネントには、**通常コンポーネント**、**フォームコンポーネント**、**ポータルコンポーネント**の3種類があります。主な違いは次のとおりです。 1. 通常コンポーネントは通常、表示専用の機能に使用され、データを保存できません。既存の「リッチテキスト」や「グループ分け」コンポーネントに似ています。 2. フォームコンポーネントはデータを送信できます。通常コンポーネントより開発が複雑で、追加のメタデータ設定が必要です。 3. ポータルコンポーネントも表示専用の機能に使用され、データを保存できません。ポータルページでの利用を想定しています。 ### 4.2 コンポーネントのインストールタイプ YiDAの[ページタイプ](/ja/yida/intro/poq66i)には、通常フォームページ、ワークフローフォームページ、レポートページ、DataVダッシュボード、カスタムページ、外部リンク、ポータルページがあります。 YiDAのカスタムコンポーネント（通常コンポーネントタイプ）は、現時点でカスタムページ、通常フォーム、ワークフローフォームにインストールできます。 インストール時に対応するページタイプを選択すると、そのページタイプのページデザイナーにコンポーネントが表示されます。 ### 4.3 コンポーネントのバージョン YiDAのカスタムコンポーネントには、**開発バージョン**と**正式バージョン**の2種類があります。 [セマンティックバージョニング](https://semver.org/lang/zh-CN/)に、独自のルールを追加しています。 1. 0.1.0 はデフォルトの開発バージョンです。開発バージョンはコンポーネントデザイナーとリアルタイムに同期し、デバッグに使用します。 2. 1.x.x は正式リリース版です。現在の機能を固定し、本番環境での安定性を確保します。本番アプリでは必ず 1.x.x の正式リリース版をインストールしてください。 ## 5. FAQ **Q：コンポーネントを削除しても問題ありませんか？** コンポーネントの削除とアンインストールに対応しています。後方互換性の確保は開発者の責任となります。 **Q：カスタムコンポーネントはどのように理解すればよいですか？** こちらの[**リンク**](/ja/open/yida/guide/keywords)をご覧ください。 **Q：コンポーネントは何で構成されていますか？** コンポーネントはビューと属性で構成されます。利用側では、コンポーネントの属性を変更することで、異なるビューを表示できます。 ビューはさらに、デザインビューとランタイムビューに分けられます。ほとんどの場合、デザインビューとランタイムビューは共通で利用できます。 **提供側では、コンポーネントのビューと属性をそれぞれ個別に開発します。** **Q：カスタムコンポーネントを使用しているアプリをアプリ配布で他の組織に配布した場合、正しく開けますか？** 開けます。 アプリを他の組織に配布した後も、配布先の組織はコンポーネントを通常どおり利用できます。配布したアプリで編集権限が有効になっている場合、配布先の組織でコンポーネントをインストールすることもできます。 **Q：ページ上でカスタムコンポーネントの属性を取得するにはどうすればよいですか？** カスタムコンポーネントは基本コンポーネントと同様に動作します。`this.$('fieldId').get('propName')` で属性を取得します。 **Q：ページ上でカスタムコンポーネントの属性を更新するにはどうすればよいですか？** カスタムコンポーネントは基本コンポーネントと同様に動作します。`this.$('fieldId').set('propName', propValue)` で属性を更新します。 属性をデータソースの変数にバインドすることもできます。 **Q：コンポーネントからページ上の他のコンポーネントにアクセスして連携するにはどうすればよいですか？** カスタムコンポーネントに `function` タイプの属性（イベントコールバック）を追加します。 ページ側では、このコールバックを使って他のコンポーネントと連携します。 コンポーネント内では、コンポーネントのイベント時やコンポーネントの `DidMount` など適切なタイミングで `this.props.xxx()` を呼び出し、コールバックを発火させます。 **ヒント：`function` タイプの属性にもデフォルトを設定でき、非表示にすることもできます。** **Q：カスタムコンポーネントでサードパーティのNPMパッケージをインストールできますか？** A：現在は対応していません。代わりにCDNリソースを動的に読み込んでください。 ```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}} function loadScript(src, callback) { if (!src) { return; } const node = document.createElement('script'); node.src = src; node.addEventListener('load', callback, false); document.head.appendChild(node); } function loadCss(url) { const linkElement = document.createElement('link'); linkElement.rel = 'stylesheet'; linkElement.href = url; document.body.appendChild(linkElement); } (function loadAssets() { loadCss('https://dev.g.alicdn.com/yida-platform/react-cropper/1.0.0/css/react-cropper.css'); loadScript('https://dev.g.alicdn.com/yida-platform/react-cropper/1.0.0/js/react-cropper.js', () => { // ここにコードを記述します }); })(); ``` **Q：コンポーネントをインストールしましたが、パネルに表示されません。なぜですか？** A：インストールスコープをご確認ください。 **Q：カスタムコンポーネントでフォームのデータを送信するにはどうすればよいですか？** A：YiDAのカスタムコンポーネントは、まだフォームコンポーネントタイプに対応していません。データを送信するには、既存のフォームコンポーネントに値を入力する方法を使ってください。たとえば、「固定識別子」属性を宣言し、コンポーネント利用時に既存フォームフィールドの識別子を渡した上で、コンポーネント側のイベントで必要なデータを既存フォームフィールドに書き戻します。 **Q：コンポーネントのバージョン管理はどのようになっていますか？** コンポーネントには開発バージョンと正式バージョンがあります。 YiDAのカスタムコンポーネントのバージョンは、[**セマンティックバージョニング**](https://semver.org/lang/zh-CN/)に追加ルールを加えたものです。 0.1.0 はデフォルトの開発バージョンです。開発バージョンはコンポーネントデザイナーとリアルタイムに同期し、デバッグに使用します。 1.x.x は正式リリース版です。現在の機能を固定し、本番環境での安定性を確保します。本番アプリでは必ず 1.x.x の正式リリース版をインストールしてください。 **Q：属性を定義しました。その属性の変化にコンポーネントを反応させるにはどうすればよいですか？** コンポーネントデザイナーで対象のコンポーネントと該当する属性を選択します。属性を変数またはカスタムのハンドラー関数にバインドし、`this.props.xxx` を使ってロジックを分岐させます。例： **または** **Q：コンポーネント内でスタイルを動的に設定できますか？** できます。コンテナコンポーネントを使用し、「カスタムスタイルクラス」を追加して、そのクラスを変数にバインドします。 **Q：カスタムコンポーネントは親子組織や上下流組織に対応していますか？** A：カスタムコンポーネントは、親子組織や上下流組織を含む組織をまたいだ利用にはまだ対応していません。