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. これによりアプリパッケージが認証され、違反がないか検証されます。検出された問題は、開発者コンソールで ZIP を更新する前に修正する必要があります。
12. 次のコマンドを実行してプロジェクトをパッケージ化します。
    
    $ zet pack

    

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

    

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

    

16. 「新規 Widget」ペインが表示されます。
    

    

17. ウィジェットの名前を入力します。
18. Hosting ドロップダウンリストで Internal オプションを選択します。
19. Widget File 項目で、dist フォルダ内のパッケージ済み ZIP ファイルをアップロードします。
20. /widget.html と Index File 項目に入力します。/widget.html ファイルがインデックスファイル、つまりページに組み込まれるウィジェット本体となるファイルです。
    メモ:
1. ウィジェット ZIP フォルダには、初期設定で App フォルダ内に widget.html ファイルが含まれています。
   
2. App フォルダ内に別のフォルダを作成し、widget.html ファイルをその新しいフォルダに移動した場合は、インデックスファイル名を次の形式で指定する必要があります。
   /<folder-name>/<filename>.html
   
21. 作成をクリックします。作成したウィジェットが Widgets ページに追加されます。
22. このウィジェットは、アプリケーション内のすべてのページに対して、ページビルダー上のドラッグ＆ドロップ要素として表示されます。
    

上記の手順は、ウィジェットを Creator 内部でホストする（つまり、Creator 上でホストする）場合の手順です。代わりに、ウィジェットを外部でホストし、Creator と連携させることもできます。

ウィジェットを外部ホスティングする場合の手順は次のとおりです。

1. アプリケーション設定 ページに移動し、ウィジェット オプションをクリックします。
2. ウィジェットページで 新規ウィジェット ボタンをクリックします。新規ウィジェットペインが表示されます。
   

   

3. ウィジェットの名前を入力します。
4. Hosting ドロップダウンリストで External オプションを選択します。
5. Index File 項目に、外部ホスティングしているウィジェットのインデックスページ URL を入力します。
   

   

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

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

関連トピック

• ウィジェットについて
• CLI のインストール
• ページへのウィジェットの追加
• JS API ドキュメント
• サンプルウィジェット