ウィジェットの概要
お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。
このヘルプページは Creator 6 をご利用のユーザー向けです。旧バージョン（Creator 5）をご利用の場合は、こちらをクリックしてください。ご利用中のCreator のバージョンもご確認ください。
ウィジェットは、Zoho Creator アプリケーションの機能を拡張し、標準機能だけでは実行できないタスクを行えるようにするために使用します。アプリのフロントエンド機能を強化するための追加機能を提供します。
ウィジェットでできること
ウィジェットを使用すると、次のことが可能になります。
- アプリ固有の機能を作成してカスタマイズする
- アプリケーションと顧客とのやり取りの方法を再定義する
- フロントエンドデザインを完全にコントロールする
- Creator アプリに対応したサードパーティアプリを組み込む
機能の作成とカスタマイズ
Zoho Creator には、アプリケーションを構成するための多くの機能があります。しかし、要件にぴったり合う解決策が見つからない場合もあります。ウィジェットを使用すると、そのような細かな要件による行き詰まりを解消できます。必要な機能を作成し、それをウィジェットとして設定してページに追加することで、求める使い勝手を実現できます。
Creator でウィジェットを作成して追加する方法は 2 通りあります。
ウィジェットファイルをアップロードする
ウィジェットの見た目や操作感をカスタマイズしてから、ウィジェットファイルをアップロードできます。その際、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 キットを使用してタブを追加したり、ドロップダウンメニューを変更したり、ウィザード形式でフォームを構成したりして、カスタマイズしたデザインを作成し、それをウィジェットとして Creator にインポートできます。これにより、フォームの目的と背景を、より優れたユーザーエクスペリエンスとともに、迅速かつ効果的に伝えられます。
アプリインターフェイスの再定義
ウィジェットを使用すると、アプリケーションのフロントエンドデザインに対するコントロール性が高まります。要件に合わせてアプリ全体を再設計し、自社ブランドの独自性を反映させることができます。これにより、アプリが顧客とやり取りする方法を変える仕組みを得られます。
アプリケーションのランディングページをページ機能で作成しているとします。インターフェイスのデザインに別のオプションを試したい場合、ウィジェットが役立ちます。アプリ内に長いフォームがある場合、1 ページにすべて表示するとユーザーにとって負担が大きくなることがあります。JavaScript、CSS、HTML を使用して、フォーム項目をセクションに分けて順番に表示する段階的なフォームを作成し、それを Creator にウィジェットとしてアップロードしてページにドラッグ＆ドロップできます。こうして作成したカスタムページは、アプリケーション内で利用可能になります。
ウィジェットパラメーターの設定
ウィジェット内にパラメーターを定義して動的な値を受け取り、Widget Configuration セクションでアプリケーションの項目にマッピングできます。これらのウィジェットパラメーターは、ウィジェット作成時に、manifest.json（アプリケーションの起動方法を定義するファイル）内のスクリプトで指定します。この機能により、ウィジェットパラメーターのカスタマイズ性を高め、ウィジェットとアプリケーションインターフェイスとのシームレスな統合を実現し、パーソナライズを強化できます。
ここでは、manifest.jsonファイルを簡単に編集して、件名（名前）やアプリコンポーネントの種類を指定できます。
|
指定可能なキー値 |
値のデータ型 |
文字数制限 |
ウィジェットパラメーターの編集
|
ウィジェットパラメーターの削除
|
|
名前 |
string | 50 |
不可
|
不可 |
|
種類 |
以下を参照 |
- |
不可 | 不可 |
|
defaultValue |
string |
40 |
可
|
可 |
|
差し込み項目 |
string |
- |
はい
|
可 |
|
ヘルプ |
string |
140 |
可 | 可 |
|
mandatory |
boolean |
- |
可 | 可 |
メモ: - 上記の「名前」と「種類」キーはすべて大文字・小文字を区別します。
- 「名前」変数は50文字を超えてはならず、英大文字、英小文字、数字、アンダースコア、スペースのみを含めることができます。
- 「名前」キーと「種類」キーは頻度設定に必須です。これらは ウィジェットを更新する際に編集や削除を行わないでください。
- 「名前」キーの値は一意である必要があります。
- Application、Form、レポート種類は、それぞれ 1 回のみ定義してください。 項目の種類は、Form または レポート種類がない状態では定義しないでください。
- 設定の合計数は20を超えないようにしてください。
ウィジェットをページに追加し、アプリケーションの編集モードで開くと、ウィジェット設定メニューが右側からスライド表示され、マッピング可能な項目が表示されます。これにより、ニーズに合わせてウィジェットを柔軟にカスタマイズできます。
たとえば、Creator で従業員管理アプリケーションと人事管理アプリケーションの 2 つを作成しているとします。従業員が組織に出勤または退勤するたびに、両方のアプリケーションのダッシュボードでデータを維持・更新することが重要です。この作業を効率化するために、共通のウィジェットを 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'}
- ]
- }
ウィジェットパラメーター内の設定を取得する JS API
Zoho。CREATOR。init().then(function(){
const widgetParams = Zoho。CREATOR。UTIL。getWidgetParams();
});
サードパーティアプリを組み込む
Creator アプリの要件を満たすサードパーティアプリは、ウィジェットとしてページに組み込むことができます。ここでは、提供しているオンラインコース用のアプリケーションがあるとします。このアプリには、登録情報、連絡先情報、コース情報、ウェビナーのスケジュールがあります。ページには、コース情報、登録フォーム、今後のウェビナーが含まれています。登録済みユーザーがログインしている場合、そのユーザーに関連するウェビナーの開始までのカウントダウンタイマーを表示する必要があります。このタイマーは、サードパーティサービスやサードパーティの JavaScript プラグインからウィジェットとして Creator アプリケーションに組み込むことができます。
注意事項
- JS API を使用するウィジェットは、公開ページでは動作しません。
- ウィジェット ZIP フォルダーには、App フォルダー内に widget。html ファイルが 既定で含まれています。これはインデックスファイル、つまり、このファイルがページ内のウィジェットとして組み込まれます。
- App フォルダー内に別のフォルダーを作成し、widget。html ファイルを新しいフォルダー内に移動した場合は、次の形式でインデックスファイル名を指定する必要があります。
/<folder-name>/<filename>.html -
1 アカウントあたりに追加できるウィジェットの最大数は 200 です。
- アカウントレベルでのウィジェット使用状況は、ユーザー詳細ページから確認できます。
- ウィジェット内で使用される 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 があります。