クイックスタート

​

事例シナリオ

​

結果プレビュー

​

手順

​

ステップ 1：カスタムコンポーネントの作成

1. YiDA アプリ >> アプリ設定 >> コンポーネント管理 >> コンポーネントセンター へ移動します（下図参照）。
2. コンポーネントを追加 >> コンポーネント名、コンポーネントタイプ、コンポーネント識別子などのプロパティを入力 >> 確認 します（下図参照）。

​

ステップ 2：カスタムコンポーネントの開発とデバッグ

1. コンポーネントセンター >> マイコンポーネント >> デバッグしたいコンポーネントを検索 >> 開発 します（下図参照）。
2. 前述のとおり、コンポーネントはビューとプロパティで構成されます。コンポーネントを開発する際は、まずコンポーネントに必要なプロパティを抽出する必要があります。まずコンポーネントプロパティを構築しましょう。このコンポーネントに必要なのは、テキストコンテンツ用のプロパティ 1 つだけです。プロパティ設定 >> プロパティ定義 に移動し、content という名前のテキストコンテンツプロパティを追加し、プロパティタイプを Text に設定、セッターを textSetter に設定します。
3. コンポーネントプロパティの構築が完了したら、必要な YiDA 標準コンポーネントをキャンバスに追加してコンポーネントビューを構築します（本事例では 2 つの Text コンポーネントが必要で、それぞれ「Text」および「Copy」と名付けます）。基本プロパティを設定し、変数バインディングを使って Text コンポーネントのコンテンツを、先ほど構築したプロパティ props.content にバインドします。こうすることで、実行時に渡されたプロパティ値が表示されます（下図参照）。
4. Button コンポーネントにアクションを設定し、テキストコピー機能を実装します。「Copy」テキストを選択 >> アクションを作成 >> onCopyText クリック を選択します（下図参照）。
5. JS パネルにコピーロジックを記述します（下図参照）。

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('クリップボードへのコピーに成功しました');
}

6. 保存 >> コンポーネントをプレビューします。
7. 公開 >> バージョン番号と関連する備考を入力 >> 確認 します（下図参照）。
8. 公開に成功するとメッセージが表示されます（下図参照）。実際のコンポーネント開発では、保存すれば開発バージョン（0.1.0）のコンポーネントをインストールしてリアルタイムでデバッグできます。正式バージョンは、コンポーネントの開発が完了してから公開すれば十分です。

​

ステップ 3：カスタムコンポーネントのインストール

1. フォーム設計ページ >> コンポーネントライブラリ >> カスタムコンポーネント >> コンポーネント管理（下図参照）。
2. コンポーネント管理ページ >> コンポーネント一覧 >> インストールしたいカスタムコンポーネントを選択 >> インストール（下図参照）。
3. インストールバージョンとインストールスコープを選択 >> インストール（下図参照）。

​

ステップ 4：カスタムコンポーネントの使用

1. フォーム設計ページ >> コンポーネントライブラリ >> カスタムコンポーネント >> 必要なコンポーネントを選択 >> キャンバスへドラッグします（下図参照）。

​

ステップ 5：コンポーネント情報の表示または変更

1. アプリ設定 >> コンポーネント管理 >> コンポーネントセンター（下図参照）。
2. 詳細を表示または変更したいコンポーネントを選択 >> 詳細 を選択します（下図参照）。

​

カスタムコンポーネントのプロパティ

​

カスタムコンポーネントプロパティ設定のエントリ

​

カスタムコンポーネントプロパティ設定の詳細

• 両端設計：トグルスイッチです。有効にすると、PC 端とモバイル端を完全に分離して独立に設計でき、両端対応のニーズを満たせます。
• プロパティ定義（propTypes）：カスタムコンポーネントの タイトル、名前、タイプ（データ形式）、デフォルト値 などの基本プロパティをカスタマイズできます。また、Hide（コンポーネントを非表示にするかどうか） や On Change（表示値が変更されたとき） などのイベントをバインドして、さまざまな業務ニーズに対応できます。詳細はコンポーネントプロパティ設定をご覧ください。
• ライフサイクル：カスタムコンポーネントのライフサイクルには、コンポーネントレンダリング完了（componentDidMount）、コンポーネント更新完了（componentDidUpdate）、コンポーネントエラーキャッチ（componentDidCatch）、コンポーネントアンマウント前（componentWillUnmount） の 4 つのステージがあります。それぞれのライフサイクルステージに異なるロジックを記述することで、複雑な業務ニーズに対応できます。
• 固定値識別子：YiDA 標準コンポーネントと同様に、カスタムコンポーネントにもコンポーネントの一意の識別コードとして機能する固定値識別子プロパティがあります。システムにより自動生成され、通常は変更する必要はありません。YiDA バックエンドでのデータ保存やコードのバインディングなどに使用されます。