1. ターミナルを開きます。
2. 以下のコマンドを実行して新しいプロジェクトを作成します：
   
   $ zet init
3. Zohoサービスの一覧が表示されます。
4. Zoho Creatorを必須サービスとして選択します。
   

   

5. プロジェクト名を入力します。サンプルプロジェクトが該当のフォルダディレクトリに作成されます。
6. 次のコマンドを実行してプロジェクトフォルダを開きます。
   
   $ cd {Project_name}

   

7. プロジェクトフォルダ内のappフォルダを開きます。
   

   
   

8. ウィジェット用のmanifest.jsonファイルを設定するには、以下の手順に従ってください。

1. プロジェクト用のフォルダを作成した後、次のコマンドを実行してプロジェクトフォルダを開きます。
   $ cd {Project_name}　プロジェクトフォルダ内のAppフォルダを開きます。

2. このフォルダ内でplugin-manifest.jsonファイルを探します。
   

3. アプリケーションコンポーネント（アプリケーション、フォーム、レポート）で使用されるように、名前項目と種類項目を設定します。
   

9. フォルダ内でWidget.htmlファイルを探します。Widget.htmlファイルにコードを入力してください。Widget.htmlファイルにはウィジェットの構造、デザイン、コンポーネントが含まれます。Zoho Creator APIをウィジェット内で利用するには、JS SDKライブラリで提供されているAPIヘルパーの利用が可能です。
   

   

10. 次のコマンドを実行してアプリケーションを認証します。
    
    $ zet 認証
11. これによりアプリのパッケージが認証され、違反がある場合は特定されます。違反が見つかった場合は、開発者コンソールで郵便番号を更新する前に修正してください。
12. 以下のコマンドを実行してプロジェクトをパッキングします。
    
    $ zet pack

    

13. アプリケーションの郵便番号ファイルが、プロジェクトディレクトリのdistフォルダーに作成されます。
    

    

14. ウィジェットを埋め込む必要があるアプリの設定ページに移動し、Widgetsを選択します。
15. 作成ボタンをクリックします。
    

    

16. 新規 Widgetウィンドウが表示されます。
    

    

17. Widgetの名前を入力してください。
18. HostingのドロップダウンリストでInternalオプションを選択します。
19. Widget File項目のdistフォルダーから梱包済みの郵便番号ファイルをアップロードします。
20. /widget.html を Index File項目に入力します。/widget.htmlファイルがインデックスファイルとなり、このファイルがページのウィジェットとして組み込まれます。
    メモ：
1. widget 郵便番号 フォルダーには、App フォルダー内にwidget。htmlファイルが初期設定で含まれています。
   
2. もし App フォルダー内に新たなフォルダーを作成し、widget。html ファイルを新規フォルダーに移動した場合、インデックスファイル名を以下の形式で指定する必要があります：
   / / .html
   
21. 作成をクリックします。作成したウィジェットがWidgetsページに追加されます。
22. このウィジェットは、アプリケーション内のすべてのページのPage Builderでドラッグ＆ドロップ要素として表示されます。
    

上記の手順はウィジェットの内部ホスティング（つまり、Creator内でのホスティング）に関するものです。別の方法として、ウィジェットは外部にホストし、Creatorと連携させることも可能です。

ウィジェットを外部ホスティングする手順は以下の通りです：

1. Application 設定ページに移動します。その後、Widgetsオプションをクリックします。
2. 次に、Widgetsページで新規 Widgetボタンをクリックします。新規Widgetペインが表示されます。
   

   

3. Widgetの名前を入力してください。
4. HostingドロップダウンリストでExternalオプションを選択します。
5. Index File項目に、外部ホストされたWidgetのIndexページURLを入力します。
   

   

6. 作成をクリックします。作成したWidgetがWidgetsページに追加されます。
7. このWidgetは、アプリケーション内のすべてのページのPage builderでドラッグ＆ドロップ要素として表示されます。
   

UIキットでサポートされているコンポーネント一覧についての詳細は、こちらをクリックしてください。

関連トピック

• ウィジェットの概要
• CLIのインストール
• ページにwidgetを追加
• JS APIドキュメント
• サンプルwidget