ウィジェットを理解する

ウィジェットを理解する

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

Notesこのヘルプページは、Creator 6 のユーザー向けです。旧バージョン（Creator 5）をご利用の場合は、こちらをクリックしてください。ご自身のCreator バージョンを確認してください。
ウィジェットは、Zoho Creator アプリケーションの機能を拡張するために使用され、標準機能では対応できないタスクの実行を可能にします。アプリのフロントエンド機能を強化する追加機能を提供します。

ウィジェットの機能

ウィジェットを利用することで、次のことが可能です。

  • アプリに特化した機能の作成およびカスタマイズ
  • アプリケーションと顧客とのやり取り方法の再定義
  • フロントエンドデザインの完全なコントロール
  • Creator アプリに対応した他社アプリの組み込み

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

Zoho Creator には、アプリケーション全体を構築するための多くの機能が用意されています。しかし、要件にぴったり合う解決策が見つからない場合もあります。そうしたマイナーアップデートや課題の解決にウィジェットが役立ちます。機能を作成し、それをウィジェットとして設定、ページに追加することで、求めている使いやすさを実現できます。


Creator でウィジェットを作成・追加する方法は、2通りあります。
  1. ウィジェットファイルをアップロードする
  2. Figma からインポートする

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

ウィジェットの外観や操作感をカスタマイズし、ウィジェットファイルをアップロードできます。そのためには、JavaScriptコードをウィジェットファイルに直接挿入し、必要なインタラクティブ機能やカスタマイズ機能を組み込んでください。Creatorでは、ローカルデバイスからウィジェットファイルをアップロードでき、さらにページビルダーでドラッグ＆ドロップ機能もサポートしています。
Info
ウィジェットスクリプトやその要素（例：CSSやJSファイル）に直接変更を加えた場合は、ウィジェットが正常に動作するために更新済みファイルを再アップロードする必要があります。
ウィジェットファイルを作成する前に考慮すべきポイントをいくつかご紹介します。
  1. アップロードするファイル内でウィジェットの挙動をどのようにするか定義します。例えば、特定の処理をトリガーしたり、特定のデータを表示したりすることが考えられます。
  2. CSSスタイルを適用して、ウィジェットがアプリケーション全体のデザインに合うように、視覚的に魅力的に仕上げます。
  3. ウィジェットをテストし、さまざまなファイルをアップロードしてエラーがないか、期待通りに動作するか確認します。
Idea
ファイルをアップロードしてウィジェットを作成する方法については、こちらをクリックしてご参照ください。

Figmaからのインポート

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

利用ケース

ケース1: ウィジェットファイルのアップロード

例えば、あなたが自動車ディーラーであり、月間営業データ用のダッシュボードアプリケーションを持っているとします。このダッシュボードには、販売した交通手段の数、先月の営業との比較、販売モデルのランキング、営業チームごとの個人成績、顧客フィードバックフォームの詳細が含まれます。フィードバックマトリクスタイプのフォームを表示する必要があります。このフォームをページ上のウィジェットとして設定できます。JavaScript、CSS、HTMLを使用してこのフォームを作成し、Creatorにアップロードし、必要なページにウィジェットとして組み込むことが可能です。Creator APIを使って、このレポートのデータを追加、更新、編集、削除することもできます。

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

例えば、Creatorで連絡先管理アプリケーションを作成したとします。このアプリケーションには、顧客が必須情報を入力する連絡先詳細フォームがあります。従来のフォームスタイルでは、要件の正確な深さや文脈を伝えきれない場合があります。しかし、タブを追加したり、ドロップダウンメニューを変更したり、FigmaのUIキットを利用してウィザード形式でフォームを構築し、カスタマイズしたデザインをウィジェットとしてCreatorにインポートすることができます。これにより、フォームの目的や文脈を迅速かつ効果的に伝え、ユーザー体験を向上させることが可能です。

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

ウィジェットを活用することで、アプリケーションのフロントエンドデザインを自在にコントロールできます。ご自身の要件やブランド独自の特徴を反映したアプリを、自由に再設計することが可能です。これにより、アプリと顧客とのインタラクション方法を大きく変革できます。
たとえば、アプリケーションのランディングページをページ機能でデザインしている場合でも、他の設定でインターフェースを設計したい場合はウィジェットが役立ちます。アプリ内に長いフォームがある場合、1ページに全て表示するとユーザーにとって負担が大きくなります。JavaScript、CSS、HTMLを使って、フォーム項目をセクションごとにまとめ、順番に表示するプログレッシブフォームを作成し、それをCreatorにウィジェットとしてアップロードしてページにドラッグ＆ドロップできます。これにより、カスタムページがアプリケーション内で利用可能となります。

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

ウィジェット内でパラメーターを定義し、動的な値に対応させてアプリケーションの項目にマッピングできます。詳細はウィジェット設定セクションをご覧ください。これらのウィジェットパラメーターはmanifest.jsonファイル（このファイルはアプリケーションの起動方法を指定します）に記述するスクリプトでウィジェット作成時に指定できます。この機能によりウィジェットパラメーターのカスタマイズを柔軟に制御でき、アプリケーションインターフェイスへのシームレスな統合とより高いパーソナライズを実現します。

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

可能なキー値

 値のデータ種類

文字数制限
ウィジェットパラメーターの編集
ウィジェットパラメーターの削除

名前

 文字列
50

不可
不可

種類

 下記参照

-

 不可 不可

defaultValue

 文字列

40
可
可

差し込み項目

 文字列

-
はい
可

ヘルプ

 文字列

140

 可 可

必須

 ブール値

-

 可 可
キー「種類」の設定で使用中のコンポーネントおよびデータ値には、application（アプリケーション）、form（フォーム）、レポート、項目、string、integer、float、booleanが含まれます。
Notesメモ: 
- 上記で言及されている '名前' および '種類' キーは大文字と小文字を区別します。
- '名前' 変数は 50 文字以内で、英大文字、英小文字、数字、アンダースコア、または スペースのみ使用できます。
- '名前' および '種類' キーは頻度設定に必須です。これらは ウィジェットを更新する際に編集または削除しないでください。
- '名前' キーの値は一意である必要があります。 
- Application、Form、レポート種類はそれぞれ1回のみ存在可能です。 項目種類は、Formまたはレポート種類がない場合は存在できません。 
- 設定の合計数は 20 を超えてはいけません。 
ウィジェットをページに追加する際、アプリケーションの編集方法でウィジェット設定メニューが右側からスライド表示され、マッピング可能な項目が表示されます。これにより、ウィジェットをニーズに合わせてカスタマイズできます。

Creatorで2つのアプリケーションを作成したと仮定します。1つは従業員 Managementアプリケーション、もう1つはHR Managementアプリケーションです。従業員が組織にチェックインまたは出力するたびに、両方のアプリケーションのダッシュボードでデータを維持・更新することが重要です。このプロセスを効率化するために、統合ウィジェットを作成し、manifest.jsonファイルを使ってその項目を動的に設定できます。このウィジェットは2つのアプリケーション間で利用でき、ユーザーは各アプリケーションの要件に応じて項目の値をカスタマイズすることが可能です。ウィジェット設定ペインは、ウィジェットをページに追加すると表示され、各アプリケーションに関連する値を割り当てる柔軟性を提供します。これにより、Creatorで作成したアプリケーションの機能性と使いやすさが向上します。以下は、前述のアプリケーションで使用できるmanifest.jsonスクリプトの例です。
  1. {
  2. 'サービス': 'CREATOR',
  3. 'cspDomains': {
  4. '接続-src': []
  5. }
  6. 'config':
  7. [
  8. {'名前':'welcomeText','種類':'string','defaultValue':'ようこそ'},
  9. {'名前':'appName','種類':'アプリケーション'},
  10. {'名前':'formName','種類':'フォーム','ヘルプ':'従業員フォームの詳細を入力してください'}
  11. {'名前':'reportName','種類':'レポート'},
  12. {'名前':'fieldName1','種類':'項目'},
  13. {'名前':'fieldName2','種類':'項目'},
  14. {'名前':'intVal','種類':'整数','mandatory':真},
  15. {'名前':'boolval','種類':'ブール値'},
  16. {'名前':'floatval','種類':'浮動小数点'}
  17. ]
  18. }

ウィジェットパラメーターでConfigを取得するJS API

Zoho.CREATOR。init().then(function(){
const widgetParams = Zoho.CREATOR。UTIL。getWidgetParams();
});

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

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

注意点

  • JS APIを利用したウィジェットは公開済みページ上では動作しません。
  • widget 郵便番号フォルダには、初期設定で widget。html ファイルがAppフォルダ内に含まれています。これはインデックスファイル、つまりこのファイルがウィジェットとしてページに組み込まれます。
  • Appフォルダ内に新たなフォルダを作成し、widget。htmlファイルを新規フォルダに移動した場合は、インデックスファイル名を次の形式で指定する必要があります。
    / / .html
  • ​1アカウントあたり追加できるウィジェットの最大数は50です。
  • アカウント単位でのウィジェット利用状況はユーザーの詳細ページから確認できます。
  • Zoho Creatorのウィジェット内で使用されるAPIは、アカウントのプランに適用されるAPI制限の対象外です。
  • ​内部ホスティングの場合、
    1. widget 郵便番号ファイルの最大サイズは10 MBまでです。
    2. widget 郵便番号ファイル内のファイル数は250までです。
    3. widget 郵便番号ファイル内の各ファイルの最大サイズは5 MBまでです。
  1. widget 郵便番号ファイル名は100文字以内で、英数字 (A-Z, a-z, +10、-10-9), _, \, $, ., -を使用できます。
  2. ウィジェット 郵便番号 ファイル内のファイル名は、50文字以内である必要があり、英数字 (A-Z, a-z, +10、-10-9)、_, ., $, -を使用できます。
  3. ウィジェット 郵便番号 ファイル内のフォルダー名には、英数字 (A-Z, a-z, +10、-10-9)、_, $, - が使用できます。
  4. 対応ファイル形式には、.txt、.md、.XML、.dre、.jpg、.jpeg、.png、.gif、.css、.js、.HTML、.json、.mp3、.svg、.woff、.ttf、.eot、.otf、.woff2、.webm、.mp4などがあります。

    Zoho CRM 管理者向けトレーニング

    「導入したばかりで基本操作や設定に不安がある」、「短期間で集中的に運用開始できる状態にしたい」、「運用を開始しているが再度学び直したい」 といった課題を抱えられているユーザーさまに向けた少人数制のオンライントレーニングです。

    日々の営業活動を効率的に管理し、導入効果を高めるための方法を学びましょう。

    Zoho CRM Training



              Zoho Campaigns Resources

                Zoho WorkDrive Resources




                  • Desk Community Learning Series


                  • Digest


                  • Functions


                  • Meetups


                  • Kbase


                  • Resources


                  • Glossary


                  • Desk Marketplace


                  • MVP Corner


                  • Word of the Day


                  • Ask the Experts






                          Latest Feature Updates



                                  • Related Articles

                                  • 「サンプルウィジェット」を活用する方法

                                    お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 このヘルプページはCreator 6のユーザー向けです。古いバージョン（Creator 5）の場合は、 こちらをクリックしてください。Creatorの バージョンを確認してください。 サンプルウィジェット：遊び場 ...

                                  • ページにウィジェットを追加する

                                    お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 このヘルプページは、Creator 6のユーザー向けです。以前のバージョン（Creator 5）をご利用の場合は、 こちらをクリックしてください。Creatorのバージョンを確認することができます。 ウィジェットをページに追加する方法： ...

                                  • 「コマンドラインインターフェースのインストール」

                                    お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 このヘルプページはCreator 6ユーザー向けです。古いバージョン（Creator 5）をお使いの場合は、こちらをクリックしてください。Creatorのバージョンをご確認ください。 Zetは、Zoho ...

                                  Resources

                                  Videos

                                  Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                  eBooks

                                  Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                  Webinars

                                  Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                  CRM Tips

                                  Make the most of Zoho CRM with these useful tips.