「ウィジェットを使ってオンラインモバイルストアを作成する」

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

要件

表示されるカードレイアウトには、イメージ、会社、モデル、機能などの携帯電話の詳細が含まれています。必要な依存関係（パッケージ、CDN URLなど）を含めることができます。ユーザーは、選択した携帯電話を購入するためにカードをクリックすることができます。

ケースの使用

モバイルストアがオンラインでの製品購入を可能にしたいと考えています。ウィジェット機能を使用して、必要なカスタマイズを行って製品を表示するカードレイアウトを作成できます。

どのように動作するかを見てみましょう

手順

1. このリンクからNode.js ソースコードをダウンロードしてインストールしてくださいhttps://nodejs.org/en/download/

2. インストールが成功していることを確認するために、次のコマンドを実行します。これらのコマンドはパッケージのバージョンを返します。

注意：コマンドを入力する際は、ドル記号（$）を明示的に入力する必要はありません。コマンドは、Mac OSではTerminal、WindowsではCommand Promptで実行できます。

$ node -v
$ npm -v

$ node -v
$ npm -v

3. 次のコマンドを実行して、zapps cli node パッケージをインストールします。

注意:

パスワードを入力するとき、文字が表示されません。

sudo npm install -g zoho-extension-toolkitをインストールしてください。

4. 正常にインストールが完了したことを確認するために、以下のコマンドを実行します。このコマンドはパッケージのバージョンを返します。

$ zet -v

5. 次に、以下のコマンドを使ってプロジェクトを作成します。

$ zet init

メモ：権限の問題が発生した場合は、次のコマンドを使用してください：

sudo zet init

6. Zoho Creatorを選択してください。

7. プロジェクト名を指定し、Enterを押してください。

注意：

このプロジェクトは、ウィジェットをレンダリングするために必要なファイルを格納するフォルダです。プロジェクト名には、英数字とアンダースコアのみを含めることができます。

8. プロジェクト/フォルダ名を入力してEnterキーを押して、プロジェクトディレクトリに移動します。

9. 次のコマンドを実行してください。

$ zet 実行

注意: これにより、ローカルマシンのHTTPサーバーがポート番号5000で起動します。サーバーを開始する前に、このポートに他のプロセスが割り当てられていないことを確認してください。上記コマンドの実行結果として関連する注意が表示される場合があります。

10. サーバーの起動が正常に行われたかどうかを確認するには、widget.htmlファイルに移動して、ブラウザーで開いてください。widget.htmlファイルは、先に作成したフォルダ（プロジェクト）にあります。

注意：

デフォルトでは、widget.htmlファイルはAppフォルダーにあります。
以下の手順に従ってwidget.htmlファイルにアクセスすることもできます：

新しいタブでローカルホストURL（https://127.0.0.1:5000)を開き、詳細オプション->127.0.0.1に進むをクリックして接続を承認します。
ローカルホストURLに/app/widget.htmlを追加する：https://127.0.0.1:5000/app/widget.html

次の画面が表示されます：

11. widget.html ファイルにコードを入力します。Sublime、VS Code、Eclipseなどのサードパーティーアプリを使用して、htmlファイルにコードを追加または変更することができます。 widget.html ファイルには、ウィジェットの構造、デザイン、コンポーネントが含まれています。ウィジェットで Zoho Creator API を使用するには、 JS SDK ライブラリで提供されている API ヘルパーを使用できます。

このチュートリアルの最後に添付されている添付ファイルを使用してアプリケーションを構築することができます。 widget.htmlファイルからコンテンツをコピーし、マシン上に作成された widget.htmlファイルに貼り付けます。 CSSおよびJSファイルをプロジェクトのappフォルダ（親フォルダ）にコピーして貼り付けます。各ファイルには特定の用途があります。たとえば、CSSファイルにはカードのデザインに関するコードが含まれており、JSファイルにはカード内の要素を定義するコードが含まれています。

注意：JSファイル（ウィジェット-> アプリ-> アセット-> JS）で、creatorapp.zoho.com/<app_owner>/を検索し、プレースホルダーを実際のアプリ所有者名とアプリリンク名で置き換えます。同様に、レポート名が正しく記載されていることを確認してください。

xlsレポートと画像は後でアプリにデータをインポートするために使用されます（ステップ14）。

12. プロジェクトディレクトリ内にあることを確認して、ターミナルで以下のコマンドを実行してください。

注意：上記のコマンドにより、プロジェクトディレクトリから退出します。プロジェクトディレクトリに戻り、次のコマンドを実行する必要があります。

$ zet 検証する

13. 次に、次のコマンドを実行します。

$ zet パック

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

14. 次の詳細を持つ2つのフォームを作成してください：

フォーム	フォームリンク名	フィールドタイプ	フィールド名	フィールドリンク名
モバイルを追加	Add_Mobile	単一行	モバイル名	Mobile_Name
		単行	メーカー	メーカー
		ドロップダウン	ストレージ (オプション 16 GB と 32 GB)	ストレージ
		ドロップダウン	OS （iOS、Android、Windowsのオプションがあります）	OS
		番号	カメラ	カメラ
		複数行	説明	詳細
		通貨	価格	値段
		画像	小さな画像	Small_Image
		画像	大きな画像	大きな_画像
注文	注文	単行	選択されたモデル	選択モデル
注文	注文	名前	名前	名前
		住所	住所	住所
		電話	電話	電話番号

「モバイルを追加」フォームは、販売対象の商品を追加するために会社が使用します。このフォームからデータが取得され、ウィジェットに表示されます。そのためのコードは添付されたJSファイルに書かれています。「注文」フォームは、お客様が必要な商品を購入するためのものです。

データをインポートして、添付されたxlsファイルからインポートしてください。インポート後に、レコードごとに画像を別途挿入することができます。

15. ページを作成し、モバイルストアという名前を付けます。

16. ウィジェットを追加するには、ウィジェット > ウィジェットの作成をクリックします。

17. ウィジェットの詳細を入力し、作成をクリックしてください。

注意: zipファイルはプロジェクトディレクトリのdistフォルダーにあります。これは前のステップ13で言及されています。

18. これで、Page builder上にウィジェットをドラッグ&ドロップします。

どのように動作するかを見てみましょう

注意点

コマンドを入力する際、ドル記号（$）を明示的に入力する必要はありません。デフォルトで既に表示されています。
「リスト」レポートのクイックビューに画像フィールドが表示されるようにしてください。
node と npm は、zet（zoho extension toolkit）を実行するための既定のパッケージマネージャーです。
「widget.html」ファイルがSublimeやVisual Studioで開かない場合は、別のアクセス可能なフォルダーに移動してください。
インデックスファイルの形式は/<widgetfilename>.htmlである必要があります。
顧客から「モバイル追加」コンポーネントを隠すために権限を使用できます。