どこでも誰でも簡単入力！書式も統一！ブランドリストアプリ

みなさんこんにちは。めろんうゆです🍈🥛

初めての挑戦ではいつも使用しているブランドリストから
すばやく情報を呼び出すbotをつくりました。
(LINE botを作ったQiita記事は[こちら](https://qiita.com/junwooseishun/items/35f4f10305f57079c772)✈)


今回はそもそも、このリストづくりにかかるもろもろの負担を軽減できないか？
と思いスタートしたアプリ作成記事でございます📗

# 作成経緯🖊一人でやるメリットとデメリットの狭間
ブランドリストとは、準備しているECサイトに出店いただく候補となっているブランドの基本情報や商談状況等を記載しチームで共有しているもの。

最初は各自で入力していたのですが、書き方に統一性がなくなり、フィルタがうまくかからなくなるなどの問題が発生。誤りを見つけて直す作業の方が時間がかかるため、
ぼくが代表してチーム全員分を入力するようになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810257/20e2bb7f-bbf2-bd50-75b0-85ab2d7bb838.png)


各自が簡単に必要な情報を入力でき、それでいて入力したものに差異が少なくなればこの負担が軽減できるのに・・・と考えていたのですが
<font color="Red">Appsheetで作成したアプリから情報を登録するとその内容をスプレッドシートに自動記載させられる</font>とわかり、ブランドリストをアプリ化してみることにしました。

:::note info
目的
・外出先でもスマホから簡単にブランド情報を入力できるようにする
・入力した情報をスプレッドシートに転記し書式が統一されたリストを作成する
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810257/1399c1dc-85f7-b3e3-e551-0611265b2143.png)

# 完成品はこちら
https://x.com/junwooseishun/status/1820747392611975390

# 使用ツール🧰
Googleスプレッドシート
Appsheet

# Appsheet活用📝1_スプレッドシートの準備
Appsheetでアプリを作成する前に
スプレッドシートを準備しあらかじめ以下の項目を作成しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810257/e4d75aae-dd99-520b-fa64-abaacfb2c904.png)
<dl>
  <dt>・A列/商談日時</dt>
  <dd>商談した日を記載する項目</dd>
  <dt>・B列/名前</dt>
  <dd>企業名を記載する項目</dd>
<dt>・C列/タイプ</dt>
<dd>商談状況を選択する項目</dd>
    <dt>・D列/担当</dt>
<dd>担当者名を選択する項目</dd>
<dt>・E列/コメント</dt>
  <dd>商談内容等を記載する項目</dd>
<dt>・F列/画像</dt>
  <dd>ブランドロゴ等を追加する項目</dd>
 <dt>・H列/SHOP URL</dt>
<dd>ブランドHPのURLを記載する項目</dd>
</dl>

次に別シートを用意し、担当者名簿を別に作成しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810257/462bbb83-de46-5138-06b9-e8ce41faf957.png)


下準備ができたら【拡張機能】＞【AppSheet】＞【アプリを作成】を押してスタート！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810257/fc544bdf-a4cc-3455-2bd6-39de7c9f2ee8.png)

# Appsheet活用📝2_AppSheetの各種設定
スプレッドシートのデータを読み込ませると、下準備で書き入れた項目が反映されます。

今回は手軽に入力できること・入力内容に統一感を出すことが重要！
ということで【タイプ】と【担当】は選択制にします。そのための設定方法は以下の通り。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810257/8475596b-772d-ac4e-c25e-c27e56242d64.png)

まずは【タイプ】

左側の✏マークを押し編集開始。
TypeはEnumを選択し、Values欄に商談状況の選択肢を入れていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810257/df148c58-a243-a14c-def0-b5798422b55a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810257/3e7ad7c8-748a-1100-bb79-9c9da943b492.png)

ステータスは
商談中・中止・保留・契約済み の4つを作成しました。
Input modeはどのように選択させるかを設定できます。
今回はDropdownをチョイス。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810257/ace4b097-839f-4916-b3f4-a3cbb67bdda6.png)
新規登録画面で【タイプ】の入力時4つの商談状況から選択が可能になりました。

次に【担当】
同じように左側の✏マークを押し編集。
TypeをRefにしType DetailsのSource Tableを下準備で作成した担当者名シートに設定します。
Input modeはタイプと異なりButtonsで選択させるようにしました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810257/b68e081c-bcac-2999-3608-72486d3f7b7f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810257/e2593141-d565-2642-da0e-abf72c34b194.png)

設定が完了すると、アプリ上ではこのように担当を選べるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810257/f3328455-1345-960f-7a72-c4b292cebe52.png)


# Appsheet活用📝3_自動記入されていくリストの設定
これが最後の設定パート。
アプリで登録した情報で自動作成されていくリストが
今まで使っていたリストと変わらないビジュアルだったらなおよいですよね。
どうせつくるなら使い慣れたこの見た目に近づけたい！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810257/ee695898-3b5f-8653-3428-015537ee29d0.png)


アプリで追加したイメージをスプレッドシート上に表示する設定はないか
探したところ以下の記事が見つかったので試してみることに。

:::note info
参考資料
[Appsheetアプリにて読み込んだ画像をSpreadsheetで表示する方法](https://www.appsheet-japan-community.com/forumclosed/atupusito-huoramu/appsheetapurinitedu-miip-ndahua-xiang-wospreadsheetdebiao-shi-surufang-fa-gafen-karimasen)

:::

IMGURLの項目を追加しFORMULAに『=TEXT([画像])』と入力。
スプレッドシートのG列に画像のURLが転記されるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810257/3536b88d-5b04-f343-784c-c33872b22bd3.png)

あとはI列に“=IMAGE(G1)”の関数を入れると…


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810257/2fc29096-60c7-4914-8e72-dfb68cd67bfa.png)

I列に画像が表示されるようになりました。


でもなんだか思ってたのと違う。。。🤔
画像がとても小さくてイメージを見ても
『あ～、あのブランドね！』とはならないですよね。
見やすさを重視したリストにするにはもう少し研究が必要です。


# 使用感インタビュー🎤
今回も前回に引き続き実際に使用してもらい、その感想をインタビューしました💡
<details><summary>りんごさん編🍎
【GOOD👍:<font color="Red">入力がしやすい</font>】【BAD👎:<font color="blue">リストが見にくい】</summary>
🍈使ってみてどうでしたか？

🍎とにかく簡単に入力ができてびっくりしました。
デザインがシンプルすぎるので内輪向け感は強いですが(笑)
肝心の中身は十分私たちが情報共有するものの1つとして機能してくれるものだと思います。
いつもめろんうゆさんに新たなブランドを見つけてリストに入れてもらう作業を依頼する際
「今日は忙しそうだし申し訳ないな」と思うときがある反面、変に人に触られるより自分で
入れたほうがきっと楽なんだろうな、と理解ができる部分もあったので
このアプリを経由して情報を入れていけば、めろんうゆさんの目指すリストの統一感が保たれて一石二鳥なのではないかと思いました。
ただいつものリストと比べるとちょっと見にくいですね。いつものリストが見やすさを重視してつくってもらったものなので自動でできるものと比べてはいけないんでしょうけど、
ブランドロゴも小さいし。。この自動でできたリストを単独で見やすい完成度の高いものにするにはもう少し設定とかを練る必要があると思います。
</details>

<details><summary>たこやきさん編🐙【GOOD👍:<font color="Red">入力項目の選択制導入</font>】【BAD👎:<font color="blue">選択肢の網羅性が低い</font>】</summary>
🍈使ってみてどうでしたか？

🐙使いやすかった。担当者は自分の名前を選ぶだけ、今のブランドとのお付き合いの状況も選べばいいので自分で入れる部分が少ないのは楽。ほんとに申し訳ないけど、自由に書くことができるものだとどうしても差が出てしまうんよね。例えば昨日は苗字と名前の間にスペースを入れたけどなぜか今日はスペースを入れずに書いてしまってた、とか。几帳面な人はそんなことないのかもしれないけど、急いで入れた時なんかはこういうことが起こりやすいのでそうした心配がなくなるのもよい。URLの部分がスキップできたのもありがたい。名前と商談日時など自分しか入れられないものは自分で先に入れておき、誰でもわかる情報は残して、手が空いている人にお願いすることもできる。
ただブランドとの関係性を示すステータスがすでに決められた枠から必ず選ばなければならないところに若干迷いが出て困るときがあるなと思ったかな～。どれでもないけどとりあえずこのステータス、で選ぶとTOP画面ではそこにくくられてグループとして表示されてしまうので、見る人によって伝わり方が変わり誤解を生むみたいなことがありそう。
</details>

# つくってみて🍈
今回のAppsheetを用いたアプリづくりはとにかく簡単！
あっという間にそれっぽい入力画面が完成したことに加え、その内容がスプレッドシートに書き込まれていく様子に感動しました。

ですがインタビューをしてチームメンバーから指摘があった部分は自分も反省せざるを得ないものばかり。特にスプレッドシートに画像を表示させる部分は一番時間がかかった部分にも関わらず不完全燃焼の状態でお披露目となり、案の定指摘をいただき悔いが残る結果に。

多々改善が必要なアプリではありますが、発案自体は悪くないと言ってもらえている！とプラスにとらえて、精進していきます。

それではまた👋