【実践】ノーコードで店舗アプリを作る方法｜商品管理・店舗検索・マイページ（後編）

本記事でわかること

• カメラ機能を活用し、特定の商品データへ即座にアクセスするQRコードスキャン設定方法
• 位置情報を利用して、店舗一覧を地図上に可視化するマップエレメントの実装手順
• ボタン操作からモーダル表示へつなげる、ユーザー導線の作り方
• ユーザー情報を表示し、アプリのセッションを管理する基本設定

前編では、アプリの基本となるデータベースの準備や、ホーム画面・お知らせ・クーポン機能の作成方法について解説しました。

【実践】ノーコードで店舗アプリを作る方法｜ホーム・クーポン・基本機能（前編）

前編では、アプリの基本となるデータベースの準備や、ホーム画面・お知らせ・クーポン機能の作成方法についてご紹介しています。

多店舗運営では、「商品がどこにあるか分からない」「近くの店舗をすぐ確認できない」といった課題が発生しがちです。

後編では、こうした現場の課題を解決する機能を実装していきます。

各機能がどのようにデータベースと連携し、実際の画面として形になっていくのか、その具体的な設定手順を見ていきましょう。

実際の開発手順

以下のステップで店舗アプリを構築していきます。

• Step1：商品一覧・詳細ページ
• Step2：店舗検索
• Step3：マイページ

Step1. 商品一覧・詳細ページ

商品を「すぐ探せる」ことは、現場で使われるための最も重要なポイントです。Step1ではその中枢となる商品一覧、商品詳細のページを作成していきます。

＜データベースの準備＞

「商品」テーブルを新規で作成します。下記の型の列を追加していきます。

• 画像：画像
• テキスト：説明
• 数値：在庫
• 数値：価格

＜アプリ画面の編集＞

商品一覧

1. ヘッダーとフッターのついた新規ページを用意し、ページ名を「商品一覧」にします。
2. アイコンエレメントを配置し、「barcode-scan」に設定します。アクションタブに移行し、「アクションを追加する＞その他＞QRコード読み取り」に設定します。
3. カスタムエレメントを貼り付け、データベースを「商品」に設定します。右パネルエレメントタブ「＋OR」からカスタムフィルターを追加します。上から、「Record ID」「含む」「QRコード読み取り」を指定します。これでQRコードを読み取って商品を検索することが可能になりました。
4. カスタムエレメントの列数を2にします。画像エレメントを貼り付け、画像ソースに「商品＞画像」を指定します。
5. また2つあるテキストエレメントのうち、1つを商品のNameにします。もう1つについて「変数を追加＞カスタム関数」を選択し、「計算式の挿入＞Current商品＞値段」「カンマ区切り」を選択し、値段を表示します。
6. フッターのアクティブタブを2番目に指定します。全てのページのフッターの2番目を商品一覧に遷移するようにアクションを設定します。

商品詳細

1. ヘッダーとフッターのついた新規ページを用意し、ページ名を「商品詳細」にします。
2. 商品一覧ページのカスタムエレメントから、商品詳細に遷移するアクションを設定します。「アクションを追加する＞ページ移動＞作成済みページから選択」「商品詳細」を選択します。
3. 画像エレメントを貼り付けます。画像ソースは「データベース＞Current商品＞画像」を選択して下さい。
4. テキストエレメントを4つ配置します。上から2つには変数を追加し、「Current商品＞Name」、「Current商品＞説明」を設定します。3つ目には「在庫数：」と入力した後変数で「Current商品＞在庫数」と設定します。4つ目には「在庫なし」を入力します。「在庫なし」についてはスタイルタブでtextColorをシステムカラーの「Red」に変更します。
5. 在庫数についてのテキストエレメントに条件を付与します。「在庫数：」の方にはエレメントタブの表示設定から「条件により表示」を選択し、上から「Current商品＞在庫数」「１」「～以上」を設定します。「在庫なし」についても「条件により表示」を選択し、上から「Current商品＞在庫数」「0」「～以下」を設定します。これによって在庫数か在庫なし、どちらかのテキストが表示されるようになりますので、2つのテキストエレメントを上下に重ねておきます。
6. ボタン1エレメントを配置します。アイコンを消し、テキストを「購入する」に変更して下さい。

Step2. 店舗検索

多店舗展開では、「どの店舗にあるか分からない」ことが機会損失につながります。

地図で可視化することで、顧客・スタッフ双方の判断が一瞬でできるようになります。
Step2ではその地図と店舗一覧のページを作成していきましょう。

＜データベースの準備＞

「テーブルを追加」から「店舗情報」テーブルを新規作成します。デフォルトで用意されているName列を「店舗名」に変更します。更に下記の型の列を追加します。

• テキスト：住所
• 数値：緯度
• 数値：経度
• テキスト：URL
• テキスト：営業時間

＜アプリ画面の編集＞

店舗検索

1. ヘッダーとフッターのついた新規ページを用意し、ページ名を「店舗検索」に設定します。「外部連携」カテゴリにあるマップエレメントを配置し、Google Maps APIキーを入力します。ピンの数を「複数個」に設定し、データには「店舗情報」を選択します。
2. エレメントタブ下部の「ピン」の設定をします。ピンの入力を「緯度経度選択」に設定し、緯度には「Current店舗情報＞緯度」、経度には「Current店舗情報＞経度」の変数を設定します。「現在地の表示」にチェックを入れます。

3. カスタムエレメントを地図の下に貼り付け、データベースには「店舗情報」を選択します。テキストエレメントを1つ追加し、「Current店舗＞店舗名」「Current店舗＞住所」「Current店舗＞営業時間」の変数を追加します。住所の行数は1行に設定しておきます。
4. アイコンエレメントを2個用意します。「map-marker-radius」「clock」に設定し、それぞれテキストエレメントの住所、営業時間の隣に配置します。

5. フッターの3番目のタブをアクティブにします。全てのページのフッターの3番目を店舗検索に遷移するようにアクションを設定します。

店舗詳細

店舗情報をクリックしたときに出す店舗情報はモーダルで実装します。

1. 「ページを追加する」から新しいモーダルを作成し、ページ名を「店舗詳細」に設定します。
2. 店舗検索ページから遷移のアクションを設定します。店舗検索ページのカスタムエレメントを選択し、「ページ移動＞作成済みページから選択＞店舗詳細」を選択します。
3. デフォルトで用意されているチェックマークを消します。テキストエレメントが2つ用意されていますので、大きい方は消し、小さい方には「Current店舗情報＞店舗名」を入力します。
4. 店舗検索ページの住所、営業時間、及びアイコンエレメントをコピーし、店舗詳細モーダルにペーストします。住所の行数を複数行に設定します。住所のテキストを「Current店舗情報＞住所」、営業時間のテキストを「Current店舗情報＞営業時間」に設定し直します。
5. 「OK」ボタンのテキストを「戻る」に編集します。ボタンのタイプを枠付きボタンに設定します。

Step3. マイページ

マイページは、ユーザーごとの情報をまとめ、アプリを継続的に使ってもらうための重要な機能です。
さっそく作ってみましょう。

＜アプリ画面の編集＞

1. ヘッダーとフッターのついた新規ページを用意し、ページ名を「マイページ」に設定します。
2. まず、画面上部に表示する情報を整備します。テキストエレメントを3つ用意します。上から2つ目までは「Logged In User＞UserName」「Email」と変数を追加します。3つ目には「ID：」とテキストで入力し、変数の「Logged In User＞会員番号」を追記します。全てのテキストエレメントをスタイルタブから中央寄せにします。
3. 線エレメントを4本等間隔に配置します。
4. 次に下に並べるリンクを用意します。テキストエレメントを3つ配置します。上から、「会員情報を変更する」「利用規約」「ログアウト」と入力します。
5. アイコンエレメントを配置し、「chevron-right」に設定します。2つコピー＆ペーストして、リンク用のテキスト1つにつき1つずつ横に配置します。
6. ログアウトのテキストとアイコンエレメントをグループ化して、アクションを設定します。グループを選択した上で、アクションタブから「アクションを追加する＞その他＞ログイン＞ログアウト」を指定します。会員情報の変更ページや利用規約への遷移を追加して、マイページが完成しました。
7. フッターのアクティブタブを5番目に指定します。全てのページのフッターの2番目をマイページに遷移するようにアクションを設定します。

後編のまとめ：実用的な店舗アプリの完成

後編では、QRコードスキャンや地図連携、マイページの実装を行い、全18画面の家具店舗向けアプリが完成しました。今回の後半部分の作成には約2日掛かっています。

これら全ての機能を、プログラミングコードを一行も書くことなく、コンポーネントの配置とデータベースの紐付けといった簡単な操作だけで構築しました。特に「店頭での商品検索」や「店舗の確認」といった動的な機能が、これほどスピーディーに実装できる点はPlatio Canvasならではの大きな利点です。

アプリの基本形が完成した後は、実際の運用に合わせて現場の作業者がバナーを差し替えたり、新しいクーポン施策を追加したりといったメンテナンスを容易に行えます。

本記事を通じて、ノーコードでの店舗DXが、決してハードルの高いものではないと感じていただければ幸いです。今回のようなアプリは、Platio Canvasで数日あれば構築可能です。自社のサービスをより身近にする第一歩として、ぜひPlatio Canvasの無料トライアルで、実際に作ってみてはいかがでしょう。