> ## 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で作成できる3種類のカード（メッセージ通知カード、インタラクティブカード、グループピン留めカード）の作成方法と、カードデザイナー（アウトラインツリー、ブロックコンポーネントライブラリ、プリセットテンプレート、データソース）の使い方を詳しく解説します。

## 1. カードの概要

* YiDAクールアプリの主要な表示形式であるカードは、軽量な構成と最小限の設定によって業務処理の経路を短縮し、ユーザーが本来の業務に集中できるように設計されています。
* YiDAカードには、メッセージ通知カード、グループピン留めカード、インタラクティブカードの3種類があります。それぞれの作成手順を以下に説明します。

### 1.1 メッセージ通知カードの作成

メッセージ通知カードには以下の種類があります。

* フォームメッセージ通知：フォームデザイン >> ページ設定 >> メッセージ通知 に移動し、フォームメッセージ通知を作成します。フォームの作成・編集・コメント・削除が発生した際に、指定のユーザーまたはチャットへメッセージが自動送信されます。詳細は「フォームメッセージ通知」を参照してください。
* 作業フロークイック承認カード：作業フロー送信時に承認者へ通知するオプションを選択し、作業フロー承認リマインダーを有効化します。

### 1.2 インタラクティブカードの作成

統合と自動化でカードノードを設定します。フォームがトリガー条件を満たすと、フォームデータがインタラクティブカードとして指定のグループチャットへプッシュされます。

#### 1.2.1 手順

**パス**：管理者ページ >> 統合と自動化 >> 統合と自動化の作成 >> 「カード送信」ノード >> インタラクティブカードタイプを選択

### 1.3 グループピン留めカードの作成

統合と自動化でカードノードを設定します。フォームがトリガー条件を満たすと、フォームデータがグループピン留めカードとして指定のグループチャットへプッシュされます。

#### 1.2.2 手順

**パス**：管理者ページ >> 統合と自動化 >> 統合と自動化の作成 >> 「カード送信」ノード >> グループピン留めカードタイプを選択

## 2. ユースケース

カードデザインページでは、コンポーネントをドラッグ&ドロップしてカードをカスタマイズしたり、YiDAのカードテンプレートを編集して業務ニーズに合わせて調整したりできます。

## 3. カードデザイナーの概要

カードデザイナーの概要

### 3.1 左側ツールバー

左側ツールバーには、アウトラインツリー、ブロックコンポーネントライブラリ、プリセットテンプレート、データソースが含まれます。

#### 3.1.1 アウトラインツリー

カード上のコンポーネントの構造と配置をツリー表示で確認できます。

* アウトライン内でコンポーネントをドラッグして、カード上の位置を変更します。
* コンポーネント名の右側にある表示/非表示ボタンをクリックし、キャンバス上の対応するコンポーネントを表示または非表示にします。

カードデザイナー — アウトラインツリー

#### 3.1.2 ブロックコンポーネントライブラリ

カードコンポーネントライブラリには17種類のコンポーネントが用意されています。コンポーネントをカードキャンバスへドラッグ&ドロップし、適切に組み合わせるだけで、洗練されたカードを容易に構築できます。

**各コンポーネントの説明は以下のとおりです。**

| **コンポーネント名** | **説明**                                                                            |
| ------------ | --------------------------------------------------------------------------------- |
| **カードヘッダー**  | カードの上部に配置し、カードタイトルを設定します。                                                         |
| **複数画像**     | カードに複数の画像が必要なシーンに対応します。                                                           |
| **カルーセル**    | カードに画像カルーセルを追加します。                                                                |
| **動画**       | カードに動画を追加します。                                                                     |
| **テキスト**     | カードにテキストコンテンツを追加します。                                                              |
| **リッチテキスト**  | 複雑なテキストと画像のレイアウトを表示します。                                                           |
| **画像**       | カードに1枚の画像を表示します。                                                                  |
| **区切り線**     | カードコンテンツ内に区切り線を追加します。                                                             |
| **リンク**      | カードにリンクURLを追加します。                                                                 |
| **2列テキスト**   | 2列レイアウトでテキストを追加します。各列にコンテンツまたはバインド変数を個別に設定できます。                                   |
| **指標**       | 重要なデータを表示します。指標名と指標値の変数を基礎データにバインドします。                                            |
| **メンバーリスト**  | 特定のタスクにバインドされたメンバーをオブジェクトの配列として表示します。抽選、食事注文、タスク割り当てなど、メンバーとアイテムを関連付けるシーンに適しています。 |
| **ボタン**      | カードにボタンを追加します。クリックイベントハンドラーを記述し、さまざまな業務ニーズに対応します。                                 |

#### 3.1.3 プリセットテンプレート

7種類のカードテンプレートが利用可能です。テンプレートを有効化することで、迅速にカードを構築できます。

| **インタラクティブカードテンプレート** | 保留中チケットテンプレート    | チケット完了テンプレート   | 食事注文テンプレート     | 抽選テンプレート |
| --------------------- | ---------------- | -------------- | -------------- | -------- |
| **グループピン留めカードテンプレート** | チケット情報ピン留めテンプレート | 食事注文ピン留めテンプレート | 抽選結果ピン留めテンプレート | --       |

#### 3.1.4 データソース

コンポーネントにバインドできるプリセット変数を提供し、コンポーネントデータの動的表示を実現します。カードデータソースパネルには、変数リストとモックデータが含まれます。

##### 変数リスト

プリセット変数を表示します。変数をクリックすると、説明、タイプ、プライベート属性の有無など、関連情報を確認できます。

* 変数の編集（標準変数の編集）：既存の変数の名前、タイプ、説明を編集します。「変数を追加」をクリックすると、新しい変数を作成します。

##### モックデータ

カードデータソースにはフロントエンドのモックデータの概念が導入されており、デザイナーが設計段階でJSONコードによりデータをシミュレートできます。これにより、実データを読み込まずにカードの効果をプレビューし、調整できます。

### 3.2 上部プレビューオプション

**プレビューモード**：プレビューを有効にするかどうかを制御します。

* オン：カード全体の効果のみを確認でき、コンポーネントのプロパティは変更できません。
* オフ：コンポーネントをクリックして選択し、右側のプロパティパネルでプロパティをデザインできます。

**シミュレーションオプション：**

* シミュレーション環境：DingTalkデスクトップ、Android、iOSを選択し、さまざまな環境でのカード表示を確認できます。
* シミュレーションバージョン：DingTalkのバージョンを切り替え、複数バージョンでカードをプレビューすることで、社内の業務慣習により適合させることができます。
* シミュレーション言語：プレビューモードでカードコンテンツの言語を設定します。簡体字中国語、繁体字中国語、英語、日本語、ベトナム語、タイ語、インドネシア語の7言語に対応しています。

**ダーク/ライトモード**：DingTalkの外観設定のダークモードに対応します。設計段階でカードスタイルを確認・変更できます。

### 3.3 右側プロパティパネル

カードまたはカードコンポーネントのプロパティ（スタイルや実行ロジックを含む）を、要件に合わせて設定します。

カードプロパティの定義

## 4. FAQ

**Q1：カードを素早く作成して送信/更新するには、どこで行いますか？**

A：統合と自動化、または新しいシンプル作業フローデザイナーで「カード送信/更新」ノードを追加します。公式カードテンプレート、またはカスタムのインタラクティブカード/グループピン留めカードを選択し、カードデザインを行います。

**Q2：統合と自動化でカード送信/更新ノードを設定し、ログではカードの送信が成功したと表示されていますが、受信できません。**

**A：カード送信失敗の主な原因は以下の3つです。**

**1. クールアプリが組織のカスタムアプリセンターに公開されていません。まずアプリをカスタムアプリセンターに公開してください。**

**2. クールアプリが内部グループまたは部門グループのよく使う機能（「その他 > クールアプリマーケットプレイス」）で有効化されていません。まずカスタムクールアプリを有効化してください。**

**3. フォームがチャット内から起動されていません（チャットコンテキストが存在しません）。例えば「定時的トリガー + 現在のチャットへカードを送信」はこの場合サポートされません。「定時的トリガー + 指定のチャットへカードを送信」の場合は、指定のチャット内からフォームを起動することでフォームコンテキストが提供され、カードの送信に成功します。**

**Q3：カスタムカードデザイナーでカードを再デザインした後、DingTalkで送信されたカードに変更が反映されません。**

カードを更新した後は、送信または更新を再度トリガーしなければ新しいカードが送信・更新されません。また、アプリ内キャッシュの影響で、再トリガー後もカードスタイルが更新されない場合があります。この場合は、**設定** > **ストレージ** > **キャッシュデータ** > **クリーンアップ** に移動し、**メッセージカード、Webキャッシュ** を選択してキャッシュをクリアしてください。

**Q4：カード内でユーザーを@メンションするにはどうすればよいですか？**

**A：カード設計時にユーザー変数を追加し、統合と自動化のカードノードでユーザーデータをマッピングします。**

<Steps>
  <Step title="ステップ1">
    カードデザイナー > データソースで、変数タイプを「ユーザー情報」に設定した標準変数を追加し、必要に応じてモックデータを定義します。リッチテキストコンポーネントをドラッグし、コンポーネントセッターパネルで名前付き変数を@メンションします。
  </Step>

  <Step title="ステップ2">
    統合と自動化、または新しいシンプル作業フローデザイナーでカード送信/更新ノードを追加します。カードコンテンツの設定でカードデータソースをバインドし、メンバーフィールドを「ユーザー情報」変数にマッピングして、@メンション効果を有効化します。
  </Step>
</Steps>

**Q5：クールダッシュボードのように、カード上に指標やプログレスバーなどのデータインジケーターを表示するにはどうすればよいですか？**

1. 全体的な設定フローについては、2022年8月16日リリースノート — YiDAクールダッシュボード（データサービス + クールデータカード） を参照してください。
2. カード上でのレポートチャートコンポーネントのレンダリングは、現在サポートされていません。
3. 業務シーンや表示する指標の数に応じて、異なる設計アプローチを推奨します。

**Q6：カード上の指標データがデフォルトで小数として表示されます。パーセンテージで表示するにはどうすればよいですか？**

データファクトリー > データサービス > 数式フィールドの作成 に移動し、数式を使用してパーセンテージに変換します。以下の設定を参考にしてください。詳細については、2022年8月16日リリースノート — YiDAクールダッシュボード（データサービス + クールデータカード） を参照してください。

**Q7：カード上のボタンなどの要素を条件によって表示/非表示にするにはどうすればよいですか？**

「グループ食事注文」シーンを例に説明します。食事が売り切れた場合、「売り切れ」ボタンを表示し、「注文」ボタンを非表示にします。

<Steps>
  <Step title="カードデザイナーで、条件用の標準変数（例：「売り切れ」）を定義し、変数タイプを「真偽値」に設定してモックデータを構成します。" />

  <Step title="ステップ2">
    表示/非表示を切り替える必要があるすべてのボタンをキャンバスデザイナーにドラッグします。ボタンセッターパネルで「表示」プロパティを設定し、条件を定義してステップ1で定義した変数にバインドします。真偽値がtrueの場合はコンポーネントが表示され、それ以外の場合は非表示になります。
  </Step>

  <Step title="統合と自動化でカードノードを設定し、作業フローコンテキストデータをカードデータソース変数にマッピングします。" />
</Steps>

**Q8：アプリの複数のページを、複数のエントリとしてよく使う機能に配置できますか？**

はい、可能です。**1つのクールアプリで、よく使う機能に複数のクイックエントリを配置できるようになりました。** 展開表示に対応していますが、折りたたみ表示には対応していません。

**Q9：カスタムページからフォームページへリダイレクトする際に、現在のチャットIDパラメータを渡すにはどうすればよいですか？**

**デフォルトでは、クールアプリはよく使う機能から最初に開いたページにのみ「チャットID（conversationId）」を渡します。追加のパラメータを渡すには、URLに含める必要があります。**

よく使う機能のエントリに **カスタムページ** が設定されており、**カスタムページ上のボタンやリンクをクリックしてフォームページへリダイレクトする** ケースを想定します。この場合、フォームページはチャットIDを取得する必要があり、これにより送信後に対応するチャットへカードを送信できます。

!!!**注意：本ケースは、カスタムページからデータ管理ページへのリダイレクトには適用されません。**

**手順：**

カスタムページ上でリンクブロックを使用し、フォームページへリダイレクトします。リンクブロックに「内部ページ」を設定した場合、「チャットID」パラメータは自動的に渡されます。

リンクブロックに「外部リンク」を設定した場合は、「チャットID」パラメータを手動で渡します。

コード：

`(this.state.urlParams || {}).conversationId`

フォームに **一行テキスト** コンポーネントを追加します。**タイトル** を **「チャットID」** に設定し、**状態** を **非表示** に、**データ送信** を **常に送信** に設定します。

!!!**重要：デフォルトを、URLからパラメータを読み取る変数にバインドして「チャットID」を入力してください。**

コード：

`decodeURIComponent((this.state.urlParams || {}).conversationId)`

最後に、チャットへ送信する際に、「現在のチャット」または「チャットID」で識別されるチャットのいずれかを選択できます。