AppSheet実践編シリーズ㉑～営業ツール！gallery型でカタログアプリを作ろう！
はじめに
こんにちは。ソシオネットの髭晩酌です。
皆さんゴールデンウイークはいかがお過ごしでしたか？私は諸事情あって旅行などが出来なかったので、家の周りを散歩していました。
「ｘｘｘ（最寄駅名） 散歩」で検索して出てくる散歩コースを制覇したり、家の近所の庚申塚や神社や史跡などをひたすら巡るプチお遍路さん？ひとりオリエンテーリング？のようなことをしていました。家から徒歩圏内を離れたくらいまで行くと、こんな場所があったんだ、、というような発見もあり、脳みそのリフレッシュになりました！
さて今回の話題ですが、ビュータイプ「gallery」を使ってカタログアプリを作ってみよう、という内容です。「gallary」は画像がメインのデータを一覧で表示するのに向いているビュータイプですね。今までの弊社のブログの中だと、ちょっとマニアックな使い方ですがアプリのトップメニューを作るときに使いました。詳しくは以下のブログをどうぞ。
このトップメニューとしての使い方は一旦脇に置いておいて、今回のブログでは、ビュータイプ「gallery」を本来(？)の使い方で使うとどんな感じになるのか、をサンプルアプリを通じて見ていこうと思います。
なお、本ブログの画面説明は「improved editor」モードにて説明していきます。
作成するサンプルアプリの紹介
今回紹介するサンプルアプリは「カタログアプリ」です。対面商談時にタブレットでお客さんに取り扱い商品を見せながらお話するツールをイメージしてください。なお取り扱う商材は自動車にしてみました（業務的な理由ではなく、単に自動車のフリー画像素材がたくさんあっただけ笑）。
では早速、アプリの完成イメージをご紹介します。
上記のうち、上の図で示した商品一覧画面がビュータイプ「gallery」を使った画面です。このような感じで画像を扱うデータを並べて表示することができます。
では、早速作ってみましょう！Let's go！
早速アプリを作ってみよう
データの取り込み
まずは以下の自動車テーブルを、AppSheetのトップ画面＞Create＞App＞Start with existing dataから取り込みます。
今回のアプリはデータを見せることが目的のアプリなので最初からデータが存在するテーブルを用意しました。
Webサイト列は業務的な意味合いとしてはメーカ―の公式サイトなどのURLにすべきと思いますが、今回はサンプルなので弊社のHPのURLを一律で入れています。
またimage列については、今回の10件程度のサンプルデータなので、アプリ作成後に手で画像をアップロードする想定でブランクとしています。※データが大量にある場合は、この段階でGoogleドライブ内の画像ファイルへのパスを入れてあげたほうが楽かもしれません。
Data設定
さて上記のテーブルをAppSheetに取り込んだら、今度はDataメニューの設定です。左側のDataメニューから自動車テーブルに対して以下の通りに設定していきます。
年式とメーカーは、ユーザに手入力させると入力値に「ゆらぎ」が生じるため、Enumでプルダウンに値を表示させるようにしました。
また表示用車名は、車名と年式の両方を商品一覧画面に表示したいので、これらを文字列結合した列を仮想カラムとして作成し、Labelにチェックを入れました。
なお仮想カラムの作成は「Add Virtual Column」から行います。設定の際、Formulaには以下の数式を設定しました。
[車名] & "(" & [年式] &"年式)" 次にDataメニューで設定する最後の内容として、更新権限設定を行います。自動車テーブル設定画面の上部にあるTable settings(ドラム缶のようなボタン)から更新権限の設定をしていきます。
このアプリの利用用途としては事前に登録されたデータを表示するだけという想定ですので、「Updates」「Adds」「Deletes」のいずれの権限も不要です。よって「Read-Only」にのみチェックを入れました。
※実際には前述の通り、image列の画像データはアプリ作成後に手で画像をアップロードする想定のため、アプリ完成後、一瞬「Updates」をONにして画像ファイルをアップロードした後で「Read-Only」に戻す感じになります。
View設定
ここからは商品一覧画面の設定を行います。左側のViewメニューを開き、PRIMARY NAVIGATIONの中にある自動車ビューの設定画面を開いて設定していきます。
と言ってもここで設定することは実はほとんどありません。ViewTypeを「gallery」にするだけで、ギャラリー形式で商品一覧画面が表示されます。
続いて、詳細画面の設定を行います。PRIMARY NAVIGATIONからずーっと下を見ていくと、SYSTEM GENERATEDというセクションがあります。
SYSTEM GENERATEDを一言でいうと、テーブルを取り込んだ際にAppSheetが自動的に作成した画面となりまして、詳細画面もこれに該当します。ということで、SYSTEM GENERATED＞自動車＞自動車_Detailを選択し、以下の図の通りに設定してください。
以前に別のブログでも書きましたが、Column orderは項目の表示順を制御する設定項目ですが、どちらかというと項目ごとの表示/非表示を制御できるという側面もあります。よって、もし詳細画面に表示したくない項目があれば、ここで選択しないようにしてしまいましょう。
これで今回ご紹介するアプリの設定は全て完了です。
出来上がったアプリの確認
では早速アプリの出来上がりの姿を確認します。まずは商品一覧画面を見てみましょう。
想定通りギャラリー形式で商品一覧画面が表示されています。更新権限を「Read-Only」にしているので、一覧画面の右下に新規追加ボタン（「＋」マークのボタン）は表示されていません。
また画像の下の文字列は、前述の設定でLabelにチェックを入れた仮想カラム「表示用車名」が表示されていることが確認できます。
次に詳細画面です。
画面上部には自動車_Detail設定画面のMain imageで選択した項目のデータが表示されています。下にスクロールしていくと、自動車の詳細情報がColumn orderで設定した順に表示されます。なお、Display modeをSide-by-sideに設定しているので、項目名が左、実際のデータが右、という形式で表示されます。
なお、更新権限を「Read-Only」にしているため、この画面でもデータの更新ボタンや削除ボタンは非表示となりました。
以上で、アプリが正しく作成できていることが確認できました。
（補足）一般公開向けサイトとしても使えるの？？
ここからは補足です。
今回のアプリは冒頭に書いた通り、対面商談時に使う営業ツールを想定していました。これを自社サイトの１コンテンツとして使えないか？という話を以下の２つの論点で話をしていきます。
・ドメイン
・コスト
ドメイン
このアプリに限らずですが、AppSheetで作ったアプリをブラウザで開くと以下のようにURLのドメインに「appsheet」という文字列が入ります。
別に問題ないよ～、という方はスルーしていただければOKですが、もしドメインを変えたいという方はDNS設定でCNAMEレコード追加すればできるかもしれません。
※正直試していないのでわかりません。。試した方は是非ご連絡ください！
コスト
自社サイトの１コンテンツとして使う場合は、不特定多数のユーザがアクセスすることになるため、サインイン不要のアプリとする必要があります。以下のブログに詳しく記載しておりますが、このような使い方をする場合は、パブリッシャーPROライセンスが必要となるので、コスト的には見合わないかもしれません。。。
終わりに
本ブログでは、ビュータイプ「gallery」を使って営業さんが対面商談時に活用するカタログアプリを開発しました。
今回の商材は自動車としましたが、商品一覧という用途だけではなく、例えばリフォーム業における内装やインテリア工事などの実績を画像を含めて一覧化して商談時にお客様に紹介するアプリなどにも使えると思います。
このようなアプリをうまく使えば、真夏の炎天下の中、重たいカタログを営業さんが持ち歩く、、というようなことも少しは減るかもしれませんね。
ということで、今回のブログは以上となります。ではまた次回ブログでお会いしましょう！ルネッサーンス！！
AppSheet勉強会を開催しております
弊社主催のAppSheet勉強会を毎月開催しております。
→弊社都合のため、当面AppSheet勉強会の開催は中止とさせていただきます。大変申し訳ございません。
IT内製化支援、Salesforceの運用・導入、DX化推進に関するご相談をお待ちしております
弊社では、ノーコード開発ツールを用いたIT内製化支援、Salesforceの運用・導入、および、DX化推進に関するご相談を承っております。お気軽に弊社お問い合わせサイトよりご相談などをお寄せいただければと思います。
ソシオネットHP：http://www.socionet.co.jp/
対話型定額制アプリ開発サービス「DXデビュー」：https://socionet.co.jp/dxdebut/
IT内製化支援支援サービス「DXオープンラボ」：https://socionet.co.jp/insourcing-support-service/
IT運用とDX化のワンストップサポートサービス「DXサポーターズ」：https://socionet.co.jp/dx-supporters/
Salesforce最適化支援サービス：https://socionet.co.jp/salesforce-service/
お問い合わせ：https://socionet.co.jp/contact/
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか？