カスタムページコンポーネント

カスタムページのコンポーネント

YiDAのカスタムページで利用できるコンポーネントの設定属性・用途・高度な使い方を解説。テキスト、画像、アイコン、リンク、ボタンなどの基本コンポーネントから、カルーセル、バルーンツールチップ、折り畳みパネルといった高度なコンポーネントまで、業務要件に応じたページ構築方法を紹介します。

機能	Freeプラン	ベーシック版	プロフェッショナル版	専用版
カスタムページ	非対応	非対応	対応	対応

1. はじめに

カスタムページのコンポーネントは、フォームページのコンポーネントよりも豊富で柔軟な設定属性を備えています。コンポーネントの利用例については、開発者センターを参照してください。 カスタムページのコンポーネントは、[レイアウト]、[ベーシック]、[フォーム]、[プレミアム]、[その他]のカテゴリに分類されます。

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

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