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

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

要件

各カードに画像、会社名、モデル、機能などのモバイル詳細を含むカードレイアウトを表示します。必須依存関係（パッケージや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 Code、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

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

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

フォーム	フォームリンク名	項目種別	項目名	項目リンク名
追加するモバイル	Add_Mobile	Single 折れ線グラフ	モバイル名前	Mobile_Name
		Single 折れ線グラフ	製造業者	製造業者
		ドロップダウン	ストレージ (設定 16 gb および 32 gb 選択可)	ストレージ
		ドロップダウン	OS (設定 iOS、Android、Windows 選択可)	OS
		番号	カメラ	カメラ
		Multi 折れ線グラフ	説明	説明
		通貨	価格	価格
		画像	Small 画像	Small_Image
		画像	Large 画像	Large_Image
順番	順番	Single 折れ線グラフ	選択済み 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 の形式である必要があります。
権限を使用して、モバイル追加コンポーネントを顧客から隠すことができます。