> ## 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. はじめに

**カスタムページのコンポーネントは、フォームページのコンポーネントよりも豊富で柔軟な設定属性を備えています。コンポーネントの利用例については、**[**開発者センター**](/ja/open/yida/index)**を参照してください。**

カスタムページのコンポーネントは、\[レイアウト]、\[ベーシック]、\[フォーム]、\[プレミアム]、\[その他]のカテゴリに分類されます。

### 1.1 カスタムページのコンポーネントと用途

| **コンポーネント名**                                                | **用途**                                                                                                |
| ----------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
| [テキスト](/ja/open/yida/components/basic/text)                 | テキストコンテンツを表示します。                                                                                      |
| [画像](/ja/open/yida/components/basic/image)                  | 画像コンテンツを表示します。                                                                                        |
| [アイコン](/ja/open/yida/components/basic/icon)                 | 複数のアイコンスタイルから選択できます。                                                                                  |
| [リンク](/ja/open/yida/components/basic/link)                  | URLを追加し、クリック時に該当ページへ遷移させます。                                                                           |
| [リンクブロック](/ja/open/yida/components/basic/linkBlock)         | 内部の任意の要素をクリックすると遷移をトリガーするコンテナコンポーネントです。                                                               |
| [ボタン](/ja/open/yida/components/basic/button)                | ボタンイベントによってアクションをトリガーします。例：ボタンをクリックして現在時刻を取得。                                                         |
| [動画プレーヤー](/ja/open/yida/components/basic/video)             | 複数の再生オプションを備えた動画をページ上で再生します。                                                                          |
| [ダイアログ](/ja/open/yida/components/basic/dialog)              | 次のような場面で使用します。<br />• ユーザーへの通知の表示<br />• ユーザーによる操作の確認<br />• 画面遷移を伴わずに作業フローを中断させずタスクを完了させたい場合         |
| [ドロワー](/ja/open/yida/components/basic/drawer)               | 次のような場面で使用します。<br />• ユーザーへの通知の表示<br />• ユーザーによる操作の確認<br />• 画面遷移を伴わずに作業フローを中断させずタスクを完了させたい場合         |
| [スプレッドシート](/ja/open/yida/components/advanced/table)         | フォームまたはワークフローフォームのデータをテーブル形式で表示します。                                                                   |
| [HTML](/ja/open/yida/components/advanced/HTML)              | カスタム機能の開発を可能にします。ページ設計にはフロントエンドの知識が必要で、少なくともHTML、CSS、JSの実用的な理解が求められます。                                |
| [JSX](/ja/open/yida/components/advanced/JSX)                | JSXコードを使用して完全にカスタマイズされたコンポーネントをレンダリングします。通常、表示専用の用途で使用します。                                            |
| [カルーセル](/ja/open/yida/components/advanced/slider)           | 複数の画像をループ表示で切り替えます。                                                                                   |
| [バルーンツールチップ](/ja/open/yida/components/advanced/balloon)     | カスタムページ上でデータをループ表示する際、長いコンテンツが省略される場合があります。バルーンツールチップを使うと、ホバー時に全文を表示できます。                             |
| 折り畳みパネル                                                     | ページ上のコンポーネントが多すぎる場合、折り畳みパネルを使ってコンポーネントを折り畳み、視覚的な煩雑さを軽減します。                                            |
| [ボトムバナー](/ja/open/yida/components/advanced/bannerContainer) | ページ下部にページ幅全体に広がる固定コンテンツを追加します。                                                                        |
| [Iframe](/ja/open/yida/components/advanced/Iframe)          | 現在のデザイナーページに別のWebページのコンテンツを埋め込みます。通常、表示専用の用途で使用します。                                                   |
| [進捗インジケーター](/ja/open/yida/components/advanced/progress)     | プロジェクトの進捗を表示します。                                                                                      |
| [ページネーション](/ja/open/yida/components/advanced/pagination)    | カスタムページに表示するデータのページ分割に使用します。                                                                          |
| [検索](/ja/open/yida/components/advanced/search)              | カスタムページでスプレッドシートコンポーネントを使用する際、検索コンポーネントで特定のレコードを検索します。                                                |
| [フィルター](/ja/open/yida/components/advanced/filter)           | カスタムテーブルでデータを表示する際、上部バーの検索では1列のみしかフィルタリングできません。フィルターコンポーネントを使うと、複数列にわたって検索できます。                       |
| [メニュー](/ja/open/yida/components/advanced/menu)              | カスタムページを目次として使用し、メニュー項目から他のページへ遷移させます。                                                                |
| [ツリー](/ja/open/yida/components/advanced/tree)               | ツリーコンポーネントを使ってカテゴリとサブカテゴリを閲覧します。                                                                      |
| [タイムライン](/ja/open/yida/components/advanced/timeLine)        | 通常、企業の沿革やプロジェクトのマイルストーンを表示するために使用します。                                                                 |
| [ステップ](/ja/open/yida/components/advanced/steps)             | カスタムページ用のステップインジケーターコンポーネントです。従業員のオンボーディングデータ入力やアカウント登録など、複数ステップのフローに適しており、基本情報の入力に対する進捗リマインダーを提供します。 |