このキットは、既存の Figma デザインを利用して Zoho Creator でウィジェットを作成する際に役立つよう設計されています。Creator ウィジェットでサポートされているコンポーネントと、手順ごとの操作方法が含まれています。初めてこのキットを使用する場合は、その機能とコンポーネントについて事前に確認してください。

デザインが完了したら、デザイン内のフレーム URL と、Figma アカウント設定から取得したアクセストークンをコピーし、Creator のウィジェットビルダーに貼り付けることで、そのデザインファイルをウィジェットとして利用できます。Figma ファイルから直接ウィジェットを作成できるため、デザインと開発のギャップを埋め、最小限の手間で効率的なウィジェットをすばやく作成できます。

必要な詳細は注意事項（セクション 4）で確認でき、サポートされているコンポーネントの一覧については（セクション 6）で詳しく確認できます。

このキットは、Figma を使ったデザインの経験が十分にあり、自分でカスタマイズしたデザインをウィジェットとして利用したいユーザー向けです。

前提条件は次のとおりです:

ここからは Figma 上での操作になります。

1. キットをダウンロードしたら、Figma にインポートします。

2. Figma アイコンをクリックしてメインメニューを開きます。

3. 左上のAssetsタブ内の Playground セクションを選択します。

4. Zoho Creator - Widgets キットを選択します。これでサポートされているコンポーネントの一覧を表示できます。

また、All Libraries ドロップダウンをクリックしてコンポーネントを表示することもできます。

5. 必要なコンポーネントを展開し、フレーム内にドラッグ＆ドロップします。

1. コンポーネントをフレームに追加する前に、デザインページにフレームを追加する方法については、こちらをクリックして確認してください。
   
2. コンポーネントを選択し、Insert instance ボタンをクリックすると、そのコンポーネントをフレームに追加できます。
   

6. 右側の Design パネルにあるプロパティを使ってコンポーネントをカスタマイズします。

ここから再び Figma に戻り、フレームのリンクとアクセストークンを取得します。これらを Creator に貼り付けることで、Figma デザインからウィジェットを作成できるようになります。

フレーム URLを取得するには、Figma で次の操作を行います:

次に、Creator が Figma デザインを取得できるようにするため、Figma からパーソナルアクセストークンを取得します（読み取り専用アクセス）。

Creator は、お客様のパーソナルアクセストークンを使用して、閲覧権限（読み取り専用）で Figma のフレームに接続し、Figma ファイル内の内容を変更することはありません。

トークンをコピーしたら、Creator に戻り、以下の手順に従って貼り付けます。

メモ: 以下の手順は、手順 3: 確認してウィジェットに変換するの続きです。

9. フレーム URLと Figma のアクセストークンを貼り付けます。

10. 作成をクリックします。作成されたウィジェットはカスタムタブに一覧表示されます。

11. ウィジェットをビルダーのエリアにドラッグ＆ドロップします。

12. 完了をクリックしてビルダーを終了します。

13. アプリケーションを実行モードで開き、ウィジェットページを選択します。ここからデータの追加を開始できます。

6. UI キットでサポートされるコンポーネント

1. フォームコンテナ
2. 評価フィールド
3. 選択フィールド
4. テキストボックス
5. タブ
6. ボタン

6。1 フォームコンテナ

1. 'zc_formcontainer' は、フォームコンポーネントを識別するために使用されます。
2. 'formlinkname' はフォームコンポーネントの必須パラメーターです。データを送信する Creator フォームのリンク名を、構文の右側に指定してください。

1. この構文は、レイヤーをグループ化する際に使用できます（例: フレーム単位やグループ単位）。
2. これにより、フォーム内の他のフィールドのコントロールが、'formlinkname' を介して指定したフォームに一意に関連付けられます。
   

6。2 評価

1. 'zc_ratingcontainer' は、評価コンポーネントを識別するために使用されます。
2. 'zc_ratingoption' は、評価コンポーネントの各選択肢を識別するために使用されます。
3. 'linkname' は Creator フォーム内のフィールドの linkname であり、フォーム送信時にデータを関連付けるために使用されます。
4. 値 は各星に対応する個別の値です。たとえば、値=1 の場合、選択された値は 1 つ星を意味します。値=happy の場合、その星の値は happy として記録されます。
5. '状態' は 選択済み または idle の 2 つのみを取る識別子です。これにより、そのオプションがユーザーにより選択されたときに、該当レイヤーの UI をどのように表示するかを制御できます。たとえば、状態=選択済み と指定し、評価コンポーネントを青い背景のレイヤーで使用している場合、ユーザーがこのコンポーネントのいずれかのオプションを選択すると、その背景が青で表示されます。

6。3 スライダー

1. 'zc_selectedvalue' は、スライダーコンポーネントで選択された値を表示するために使用されます。
   
2. ウィジェットを正しく動作させるには、スライダーコンポーネントと選択値の構文の両方で、同じ 'fieldlinkname' を使用する必要があります。

1. 'zc_slider' の構文は、後続のコンポーネント群をまとめてラベル付けするためだけに使用されます。
2. 'zc_knob' は、スライダーのつまみを識別するために使用されます。
3. 'zc_progress' は、スライダーの進捗バーを識別するために使用されます。
4. 'zc_track' は、スライダーのつまみが移動する全体のトラックを識別するために使用されます。
   

6。4 選択フィールド

1. チェックボックス
2. ラジオボタン
3. ドロップダウン
4. 複数選択

これらのフィールドは必ず「zc_formcontainer」レイヤー内に配置し、指定したフォームに値が送信されるようにしてください。

1. 'zc_selectcontainer' は、選択フィールドコンポーネントを識別するために使用します。
2. '種類' は、使用する選択フィールドの種類（radio、drop down、multi select、checkbox）を示します。
3. 'linkname' は Creator フォーム内のフィールドリンク名で、フォーム送信時にデータを関連付ける先を指定します。
4. 'zc_option' は、選択フィールドコンポーネントの設定を行うための識別子として使用します。
5. '値' は、各選択肢に対応する個々の値です。
6. 必要な場所にチェックボックスのインジケーターを配置し、その名前を 'zc_checkbox' にします。

1. 'zc_selectcontainer' は、選択フィールドコンポーネントを識別するために使用します。
2. '種類' は、使用する選択フィールドの種類（radio、drop down、multi select、checkbox）を示します。
3. 'linkname' は Creator フォーム内のフィールドリンク名で、フォーム送信時にデータを関連付ける先を指定します。
4. 'zc_option' は、選択フィールドコンポーネントの設定を行うための識別子として使用します。
5. '値' は、各選択肢に対応する個々の値です。
6. 必要な場所にラジオボタンのインジケーターを配置し、その名前を 'zc_radio' にします。

1. 'zc_selectedvalue' は、マルチ選択コンポーネントから選択された値を表示するために使用します。
   
2. 正しく動作させて選択肢を表示するには、マルチ選択コンポーネントと 'selectedvalue' パラメーターの両方で、同じ 'fieldlinkname' を使用する必要があります。

1. 'zc_selectcontainer' は、選択フィールドコンポーネントを識別するために使用します。
2. '種類' は、使用する選択フィールドの種類（radio、drop down、multi select、checkbox）を示します。
3. 'linkname' は Creator フォーム内のフィールドリンク名で、フォーム送信時にデータを関連付ける先を指定します。
4. 'zc_option' は、選択フィールドコンポーネントの設定を行うための識別子として使用します。
5. '値' は、各選択肢に対応する個々の値です。

1. 'zc_selectedvalue' は、ドロップダウンコンポーネントから選択された値を表示するために使用します。
   
2. ウィジェットを意図どおりに動作させて選択肢を表示するには、マルチ選択コンポーネントと 'selectedvalue' パラメーターの両方で、同じ 'fieldlinkname' を使用する必要があります。

1. 'zc_selectcontainer' は、選択フィールドコンポーネントを識別するために使用します。
2. '種類' は、使用する選択フィールドの種類（radio、ドロップダウン、multiselect、checkbox）を示します。
3. 'linkname' は Creator フォーム内のリンク名で、フォーム送信時にデータを関連付ける先を指定します。
4. 'zc_option' は、選択フィールドコンポーネントの設定を行うための識別子として使用します。
5. '値' は、各選択肢に対応する個々の値です。

6。5 テキストボックス

このフィールドの値を指定したフォームに送信するには、必ずこのフィールドを「zc_formcontainer」レイヤーの下に配置してください。

1. 'linkname' は Creator フォーム内のlinknameで、フォーム送信時にデータを関連付ける先を指定します。

6。6 タブ

このフィールドの値を指定したフォームに送信するには、必ずこのフィールドを「zc_formcontainer」レイヤーの下に配置してください。

1. 'tabgroup' は、個々のタブを保持・管理する親タブコンポーネントを指します。値は A、B、C などと指定できます。
2. 'tabcontainer' は、グループ化されたタブコンテナー内の個々のタブを指します。
3. 'tabid' は、各タブに対応する id を指します。ここでは、1、2、3 などの値を指定できます。
4. 'tabcontainer' と 'tabid' は、タブコンポーネントに必須のパラメーターです。

6。7 ボタン

このフィールドの値を指定したフォームに送信するには、必ずこのフィールドを「zc_formcontainer」レイヤーの下に配置してください。

1. zc_button?操作=switchtab&名前=<tabname>&id=<tabid>&状態=<選択済み/idle>

1. 'zc_button' は、ボタンコンポーネントを識別するために使用します。
2. '操作' は、ボタンに実行させたい操作の種類を示します。
3. 'formlinkname' はフォームコンポーネントを補完する必須パラメーターです。ここには、データを送信する Creator フォームのリンク名を、構文の右側に指定する必要があります。
4. 'url' は、ユーザーがボタンをクリックした後に開きたいリンクを示します。
5. '名前' は、タブコンポーネントの名前を示します。
6. 'id' は、各タブに固有の id を示します。
7. '状態' は、選択済み または idle の 2 つの値のみを持つ識別子です。これにより、そのオプションがユーザーにより選択されている場合に、そのレイヤーの UI をどのように表示するかを制御できます。