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

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

0:: 要件

1:: 各カードに2:: 画像3:: 、4:: 会社名5:: 、6:: モデル7:: 、8:: 機能9:: などのモバイルの詳細を含むカードレイアウトを表示します。10:: 必須の依存関係11:: である12:: パッケージ13:: や14:: CDN URL15:: などを含めていれば、任意のサードパーティ言語も使用できます。ユーザーはカードをクリックして、選択した電話を購入できます。

16:: 使用するケース

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

20:: 動作を確認する

21:: 手順

22:: 1. 23:: Node.js24:: をこのリンクからダウンロードしてインストールします：25:: https://nodejs.org/en/download/

26:: 2. 次のコマンドを実行して、インストールが正常に完了したことを確認します。これらのコマンドはパッケージのバージョンを返します。

27:: メモ28:: : コマンドを入力する際、29:: ドル記号30:: ($) を明示的に入力する必要はありません。デフォルトですでに表示されています。コマンドは、Mac OS では31:: Terminal32:: 、Windows では33:: コマンドプロンプト34:: で実行できます。

35:: $ node -v
36:: $ npm -v

37:: 3. 次のコマンドを実行して、38:: zapps CLI の Node パッケージ39:: をインストールします。

40:: メモ41:: :

42:: システムのパスワード入力を求められます。パスワードを入力しても、文字は画面に表示されません。

43:: sudo npm install -g Zoho-extension-toolkit

44:: 4. 次のコマンドを実行して、インストールが正常に完了したことを確認します。パッケージのバージョンが返されます。

45:: $ zet -v

46:: 5. 次のコマンドを使用して、プロジェクトを作成します。

47:: $ zet init

48:: メモ49:: : 権限に関する問題が発生した場合は、次のコマンドを使用してください。

50:: sudo zet init

51:: 6. 52:: Zoho Creator53:: を選択します。

54:: 7. 55:: プロジェクト名56:: を指定し、57:: Enter キー58:: を押します。

59:: メモ:

60:: プロジェクトとは、ウィジェットのレンダリングに必要なファイルを保存するためのフォルダーです。プロジェクト名には、61:: 英数字62:: と63:: アンダースコア64:: のみ使用できます。

65:: 8. 66:: cd <project/folder_name>67:: と入力し、68:: Enter キー69:: を押してプロジェクトディレクトリに移動します。

70:: 9. 次のコマンドを実行します。

71:: $ zet run

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

76:: 10. サーバーが正常に起動したかどうかを確認するには、77:: widget.html78:: ファ79:: イル80:: に移動し、ブラウザーで開きます。81:: widget.html82:: ファイル83:: は、先ほど作成したフォルダー（プロジェクト）の中にあります。

84:: メモ:

85:: デフォルトでは、86:: widget.html87:: ファイルは88:: App89:: フォルダー内にあります。
90:: 次の手順に従って、91:: widget.html92:: ファイルにアクセスすることもできます。

93:: ローカルホスト URL（94:: https://127.0.0.1:5000)95:: を新しいタブで開き、96:: 詳細97:: ->98:: 127.0.0.1 に進む99:: をクリックして接続を許可します。
100:: ローカルホスト URL の末尾に /app/widget.html を追加します（例：101:: https://127.0.0.1:5000/app/widget.html）。

102:: 次の画面が表示されます。

103:: 11. 104:: widget.html105:: ファイルにコードを入力します。Sublime、VS Code、Eclipse など、任意のサードパーティアプリを使用して、HTML ファイル内のコードを追加または編集できます。106:: widget.html107:: ファイルには、ウィジェットの構造、デザイン、コンポーネントが含まれます。ウィジェットで Zoho Creator API を使用するには、108:: JS SDK ライブラリ109:: で提供されている API ヘルパーを使用できます。

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

115:: メモ116:: : JS ファイル（117:: Widgets118:: -> 119:: App120:: -> 121:: Assets122:: -> 123:: JS124:: ）内で、125:: creatorapp.zoho.com/<app_owner>/126:: を検索し、プレースホルダーを実際のアプリ所有者名とアプリケーションのリンク名に置き換えてください。同様に、レポート名も正しく指定されていることを確認します。

127:: 128:: xls レポート129:: と130:: 画像131:: は、後でアプリ（132:: 手順 14133:: ）にデータをインポートする際に使用します。

134:: 12. プロジェクトディレクトリ内にいることを確認し、ターミナルで次のコマンドを実行します。

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

137:: $ zet authenticate

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

139:: $ zet pack

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

143:: 14. 次の詳細でフォームを 2 つ作成します。

144:: フォーム	145:: フォームリンク名	146:: 項目タイプ	147:: 項目名	148:: 項目リンク名
149:: モバイルを追加	150:: Add_Mobile	151:: 単一行	152:: モバイル名	153:: Mobile_Name
		154:: 単一行	155:: メーカー	156:: メーカー
		157:: ドロップダウン	158:: ストレージ 159:: （16 GB と 160:: 32 GB の設定）	161:: ストレージ
		162:: ドロップダウン	163:: OS 164:: （iOS、Android、Windows の設定）	165:: OS
		166:: 数値	167:: カメラ	168:: カメラ
		169:: 複数行	170:: 説明	171:: 説明
		172:: 通貨	173:: 価格	174:: 価格
		175:: 画像	176:: 小サイズ画像	177:: Small_Image
		178:: 画像	179:: 大サイズ画像	180:: Large_Image
181:: 順序	182:: 順序	183:: 単一行	184:: 選択済みモデル	185:: Selected_Model
181:: 順序	182:: 順序	186:: 名前	187:: 名前	188:: 名前
		189:: 住所	190:: 住所	191:: 住所
		192:: 電話番号	193:: 電話番号	194:: Phone_Number

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

200:: データをインポート201:: して、添付の xls ファイルから取り込みます。画像は、インポート後に各データごとに個別に挿入できます。

202:: 15.203:: ページを作成204:: し、205:: モバイル Store206:: という名前を付けます。

207:: 16. ページで210:: Widgets211:: > 212:: Create Widget213:: をクリックして、208:: ウィジェットを追加209:: します。

214:: 17. 215:: ウィジェットの詳細216:: を入力し、217:: 作成218:: をクリックします。

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

221:: 18. ここで、222:: ページビルダー223:: 上にウィジェットをドラッグ＆ドロップします。

224:: 動作を確認する

225:: 注意事項

226:: コマンドを入力する際、227:: ドル記号228:: ($) を明示的に入力する必要はありません。既定で表示されています。
229:: 232:: 一覧233:: レポートのクイックビューで、画像項目が230:: 表示231:: されるようにしてください。
234:: node235:: と 236:: npm237:: は、238:: zet239:: - Zoho extension toolkit を実行するために使用される、あらかじめ定義されたパッケージマネージャーです。
240:: 241:: widget。html242:: ファイルが 243:: Sublime244:: や 245:: Visual Studio,246:: で開かない場合は、アクセス可能な別のフォルダーに移動してください。
247:: インデックスファイルは、248:: /<widgetfilename>.html249:: の形式である必要があります。
250:: 251:: 権限252:: を使用して、顧客から 253:: モバイルを追加 254:: コンポーネントを非表示にすることができます。