ウィジェットの概要

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

このヘルプページは Creator 6 をご利用のユーザー向けです。旧バージョン（Creator 5）をご利用の場合は、こちらをクリックしてください。ご利用中のCreator のバージョンもご確認ください。

ウィジェットは、Zoho Creator アプリケーションの機能を拡張し、標準機能だけでは実行できないタスクを行えるようにするために使用します。アプリのフロントエンド機能を強化するための追加機能を提供します。

ウィジェットの機能

ウィジェットを使用すると、次のことが可能になります。

アプリ固有の機能を作成・カスタマイズする
アプリケーションと顧客とのやり取りの方法を再定義する
フロントエンドデザインを完全にコントロールする
Creator アプリに対応したサードパーティアプリを組み込む

機能の作成とカスタマイズ

Zoho Creator には、アプリケーションを構成するための多くの機能があります。しかし、要件に対する完全な解決策が見つからない場合もあります。ウィジェットを使用すると、そのような細かな要件による行き詰まりを解消できます。必要な機能を作成し、それをウィジェットとして設定してページに追加することで、求める使い勝手を実現できます。

Creator でウィジェットを作成して追加する方法は 2 通りあります。

ウィジェットファイルをアップロードする
Figma からインポートする

ウィジェットファイルをアップロードする

ウィジェットの見た目や操作感をカスタマイズしてから、ウィジェットファイルをアップロードできます。この際、JavaScriptコードをウィジェットファイルに直接記述し、必要なインタラクティブかつカスタマイズされた機能を組み込めます。Creator では、ローカルデバイスからのウィジェットファイルのアップロードに対応しており、ドラッグ＆ドロップでの操作もページビルダー上でサポートしています。

ウィジェットのスクリプトやその要素（例：CSS や JS ファイル）を直接変更した場合は、ウィジェットが想定どおり動作するよう、更新後のファイルを再度アップロードする必要があります。

ウィジェットファイルを作成する前に、次の点を検討してください。

アップロードするファイル内で、ウィジェットの動作をどのようにするか定義します。たとえば、特定の処理をトリガーしたり、特定のデータを表示したりできます。
CSS スタイルを適用して、ウィジェットを視覚的に魅力的にし、アプリケーション全体のデザインになじませます。
さまざまなファイルをアップロードしてウィジェットをテストし、期待どおりに動作するかを確認します。

ファイルをアップロードしてウィジェットを作成する方法については、こちらをクリックしてご確認ください。

Figma からインポートする

Figma UI Kit の既存の Figma デザインをインポートして、Creator でウィジェットを作成することもできます。このキットには、Creator ウィジェット向けの詳細な利用手順と対応コンポーネントが含まれています。デザインのフレーム URLとアクセストークンをコピーし、Creator のウィジェットビルダーに貼り付けることで、デザインした画面をウィジェットとして利用できます。Figma ファイルから直接ウィジェットを作成できるこの機能により、デザインと開発のギャップを埋め、最小限の手間で効率的なウィジェットをすばやく作成できます。

Figma デザインファイルをインポートしてウィジェットを作成する方法については、こちらをクリックしてご確認ください。

利用ケース

ケース 1：ウィジェットファイルをアップロードする

自動車販売店で、月次の売上関連データを表示するアプリケーションダッシュボードがあるとします。このダッシュボードには、販売台数の詳細、前月の売上との比較、販売された車種のランキング、営業チームごとの個人パフォーマンススコア、顧客フィードバックフォームが含まれています。ここで、フィードバックマトリックス形式のフォームを表示する必要があるとします。このフォームをページ内のウィジェットとして設定できます。JavaScript、CSS、HTML を使用してこのフォームを作成し、Creator にアップロードして、必要なページにウィジェットとして配置します。Creator API を使用して、このレポートからデータの追加、更新、編集、削除を行うこともできます。

ケース 2：Figma デザインファイルを Creator にインポートする

Creator で連絡先管理アプリケーションを作成したとします。このアプリケーションには、利用者が必要なデータを入力する連絡先詳細フォームがあります。従来のフォーム形式では、要件の意図や背景を十分に伝えられない場合があります。そのような場合は、Figma の UI Kit を使用してタブを追加したり、ドロップダウンメニューを変更したり、ウィザード形式のフォームを構成したりし、そのカスタマイズしたデザインをウィジェットとして Creator にインポートできます。これにより、ユーザーエクスペリエンスを向上させつつ、フォームの目的と背景を迅速かつ効果的に伝えられます。

アプリインターフェイスの再定義

ウィジェットを使用すると、アプリケーションのフロントエンドデザインに対するコントロール性が高まります。要件に合わせてアプリ全体を再設計し、自社ブランドの独自性を反映させることができます。これにより、アプリが顧客とやり取りする方法を変える仕組みを得られます。

アプリケーションのランディングページをページ機能で作成しているとします。さらに別の設定でインターフェイスデザインを検討したい場合、ウィジェットが役立ちます。アプリ内に長いフォームがある場合、1 ページにすべてを表示するとユーザーにとって負担が大きくなることがあります。JavaScript、CSS、HTML を使用して、フォーム項目をセクションごとにグループ化し、線形に 1 つずつ表示するプログレッシブフォームを作成できます。その後、それを Creator にウィジェットとしてアップロードし、ページにドラッグ＆ドロップします。こうして作成したカスタムページは、アプリケーション内で利用可能になります。

ウィジェットパラメーターの設定

ウィジェット内にパラメーターを定義して動的な値を受け取り、Widget Configuration セクションでアプリケーションの項目にマッピングできます。これらのウィジェットパラメーターは、ウィジェット作成時に、manifest.json ファイル（アプリケーションの起動方法を定義するファイル）内のスクリプトで指定します。この機能により、ウィジェットパラメーターのカスタマイズ性を高め、ウィジェットとアプリケーションインターフェイスとのシームレスな統合を実現し、パーソナライズを強化できます。

ここでは、manifest.jsonファイルを簡単に編集して、件名（名前）やアプリコンポーネントの種類を指定できます。

指定可能なキー値	値のデータ型	文字数制限	ウィジェットパラメーターの編集	ウィジェットパラメーターの削除
名前	string	50	不可	不可
種類	下記のとおり	-	不可	不可
defaultValue	string	40	可	可
差し込み項目	string	-	はい	可
ヘルプ	string	140	可	可
mandatory	boolean	-	可	可

キー「種類」の設定に使用できるコンポーネントとデータ型は、次のとおりです：application、form、レポート、項目、string、integer、float、booleanです。

メモ:
- 上記の「名前」と「種類」キーはすべて大文字・小文字を区別します。
- 「名前」変数は50文字を超えてはならず、英大文字、英小文字、数字、アンダースコア、スペースのみを含めることができます。
- 「名前」キーと「種類」キーは頻度設定に必須です。これらはウィジェットを更新する際に編集や削除を行わないでください。
- 「名前」キーの値は一意である必要があります。
- Application、Form、レポートの種類は、それぞれ 1 回のみ定義してください。また、項目の種類は、Form または レポートの種類がない状態で定義しないでください。
- 設定の合計数は20を超えないようにしてください。

アプリケーションの編集モードでページにウィジェットを追加すると、ウィジェット設定メニューが右側からスライド表示され、マッピング可能な項目が表示されます。これにより、ニーズに合わせてウィジェットを柔軟にカスタマイズできます。

たとえば、Creator で 2 つのアプリケーション、従業員管理アプリケーションとHR 管理アプリケーションを作成しているとします。従業員が組織に出勤または退勤するたびに、両方のアプリケーションのダッシュボードでデータを維持・更新することが重要です。この作業を効率化するために、共通のウィジェットを 1 つ作成し、その項目を manifest.json ファイルを使用して動的に設定できます。この 1 つのウィジェットを 2 つのアプリケーション間で共用し、各アプリケーションの要件に応じてユーザーが項目の値をカスタマイズできるようにします。ウィジェット設定ペインは、ウィジェットをページに追加した際に表示され、各アプリケーションに関連する値を割り当てる柔軟性を提供します。これにより、Creator 内で作成したアプリケーションの機能性と利便性が向上します。以下は、上記のアプリケーションで使用できる例としての manifest.json スクリプトです。

{
'サービス': 'CREATOR',
'cspDomains': {
'接続-src': []
}
'config':
[
{'名前':'welcomeText','種類':'string','defaultValue':'Welcome'},
{'名前':'appName','種類':'Application'},
{'名前':'formName','種類':'Form','ヘルプ':'従業員フォームの詳細を指定してください'}
{'名前':'reportName','種類':'レポート'},
{'名前':'fieldName1','種類':'項目'},
{'名前':'fieldName2','種類':'項目'},
{'名前':'intVal','種類':'integer','mandatory':真},
{'名前':'boolval','種類':'boolean'},
{'名前':'floatval','種類':'float'}
]
}

ウィジェットパラメーター内のConfigを取得するための JS API

Zoho。CREATOR。init().then(function(){

const widgetParams = Zoho。CREATOR。UTIL。getWidgetParams();

});

サードパーティアプリを組み込む

Creator アプリの要件を満たすサードパーティアプリは、ウィジェットとしてページに組み込むことができます。ここでは、提供しているオンラインコース用のアプリケーションがあるとします。このアプリには、登録情報、連絡先情報、コース情報、ウェビナーのスケジュールがあります。ページには、コース情報、登録フォーム、今後のウェビナーが含まれています。登録済みユーザーがログインしている場合、そのユーザーに関連するウェビナーの開始までのカウントダウンタイマーを表示する必要があります。このタイマーは、サードパーティサービスまたはサードパーティの JavaScript プラグインからウィジェットとして Creator アプリケーションに組み込むことができます。

注意事項

JS API を使用するウィジェットは、公開済みページでは動作しません。
ウィジェット ZIP フォルダーには、初期設定で widget。html ファイルが App フォルダー内に含まれています。これはインデックスファイル、つまり、このファイルがページ内のウィジェットとして組み込まれます。
App フォルダー内に別のフォルダーを作成し、その中に widget。html ファイルを移動した場合は、次の形式でインデックスファイル名を指定する必要があります。
/<folder-name>/<filename>.html
1 アカウントあたり追加できるウィジェットの最大数は 50 です。
アカウントレベルでのウィジェット使用状況は、ユーザー詳細ページから確認できます。
ウィジェット内で使用される Zoho Creator API は、アカウントのプランに適用される API 制限の対象外です。
内部ホスティングの場合、

ウィジェット ZIP ファイルの最大サイズは 10 MB を超えてはいけません。
ウィジェット ZIP ファイル内のファイル数は 250 を超えてはいけません。
ウィジェット ZIP ファイル内の 1 ファイルあたりの最大サイズは 5 MB を超えてはいけません。

ウィジェット ZIP ファイル名は 100 文字 を超えてはいけません。また、英数字 (A-Z, a-z, 0-9), _, \, $, ., - を使用できます。
ウィジェット ZIP ファイル内の ファイル名は 50 文字 を超えてはいけません。また、英数字 (A-Z, a-z, 0-9), _, ., $, - を使用できます。
ウィジェット ZIP ファイル内の フォルダー名には、英数字 (A-Z, a-z, 0-9), _, $, - を使用できます。
サポートされるファイルタイプには、.txt、.md、.xml、.dre、.jpg、.jpeg、.png、.gif、.css、.js、.html、.json、.mp3、.svg、.woff、.ttf、.eot、.otf、.woff2、.webm、.mp4 があります。