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

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

要件

各カードに画像、会社名、モデル、特徴などのモバイル詳細を含むカードレイアウトを表示します。必須依存関係（パッケージやCDN URLなど）が含まれていれば、サードパーティの言語も利用可能です。ユーザーはカードをクリックして、選択した電話番号を購入できます。

使用ケース

モバイルストアが自社商品のオンライン購入を有効化したいと考えています。ウィジェット機能を利用し、商品の表示に必要なカスタマイズを施したカードレイアウトを作成します。

動作方法を見る

手順

1. Node.jsの元データコードをこのリンクからダウンロードし、インストールします：https://nodejs.org/en/download/

2. 以下のコマンドを実行し、インストールが正常に行われたか確認します。コマンドを実行すると、パッケージのバージョンが表示されます。

メモ: コマンド入力時、ドル記号（$）を入力する必要はありません。初期設定ですでに含まれています。コマンドはMac OSではターミナル、Windowsではコマンドプロンプトで実行してください。

$ 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. cd <プロジェクト/フォルダー名>と入力し、Enterキーを押してプロジェクトディレクトリに移動します。

9. 以下のコマンドを実行します。

$ zet run

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

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 コード、Eclipse などのサードパーティアプリを使って、htmlファイルのコードを追加・修正できます。widget。htmlファイルにはウィジェットの構造、デザイン、コンポーネントが含まれています。ウィジェットでZoho CreatorのAPIを利用するには、JS SDK ライブラリで提供されているAPIヘルパーをご利用いただけます。

このチュートリアルの最後に用意されている添付ファイルを利用して、アプリケーションを作成できます。添付されたwidget。htmlファイルの内容をコピーし、ご自身のwidget。htmlファイルに貼り付けてください。ファイルはご自身のマシン上に作成されます。CSSおよびJSファイルもプロジェクト（親フォルダ）のアプリフォルダにコピー＆ペーストしてください。各ファイルには固有の用途があります。たとえば、CSSファイルはカードのデザインに関するコードが含まれており、JSファイルにはカード内の要素を定義するコードが含まれています。

メモ: JSファイル（Widgets-> App-> Assets-> JS）内で、creatorapp.Zoho.com/<app_owner>/を検索し、プレースホルダーを実際のアプリ担当者名およびアプリケーションリンク名に置き換えてください。同様に、レポート名も正確に記載されていることを確認してください。

xlsレポートおよび画像は、後でアプリにデータをインポートする際に使用します（手順14）。

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

メモ: 直前のコマンドによりプロジェクトディレクトリから抜けている場合があります。その場合はプロジェクトディレクトリに戻り、下記のコマンドを実行してください。

$ zet 認証

13. 次に、以下のコマンドを実行してください:

$ zet pack

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

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

フォーム	フォームリンク名	項目種別	項目名	項目リンク名
追加するモバイル	Add_Mobile	Single 折れ線グラフ	モバイル名前	Mobile_Name
		Single 折れ線グラフ	製造業者	製造業者
		ドロップダウン	ストレージ (設定 16 gb および 32 gb)	ストレージ
		ドロップダウン	OS (設定 iOS、Android、Windows)	OS
		番号	カメラ	カメラ
		Multi 折れ線グラフ	説明	説明
		通貨	価格	価格
		画像	小画像	Small_Image
		画像	大画像	Large_Image
順番	順番	単一折れ線グラフ	選択済みModel	Selected_Model
順番	順番	名前	名前	名前
		住所	住所	住所
		電話番号	電話番号	Phone_Number

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

データのインポートは、添付のxlsファイルから行います。各データのインポート後に画像を個別に挿入できます。

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

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

17. ウィジェット詳細を入力し、作成をクリックします。

メモ: 郵便番号ファイルは、プロジェクトディレクトリのdistフォルダ内にあります。これは手順13で前述されています。

18. 次に、ウィジェットをページビルダー上にドラッグ＆ドロップします。

動作方法を見る

注意事項

コマンドを入力する際、ドル記号（$）は初期設定ですでに含まれているため、明示的に入力する必要はありません。
画像項目がリストレポートのクイックビューで表示されていることを確認してください。
nodeとnpmは、zet - Zoho Extension Toolkit を実行するために使用される定義済みパッケージマネージャーです。
widget.htmlファイルがSublimeまたはVisual Studioで開かない場合は、他のアクセス可能なフォルダに移動してください。
インデックスファイルは、形式/ .html である必要があります。
権限を使用して、モバイルの追加コンポーネントを顧客から非表示にすることができます。