『シバコロ』のモックが完成したよ！Glideでアプリ製作した話

# お久しぶりです、芝生好きの者です。
どうもこんばんは。芝生を偏愛し、暇さえあれば芝生に出かけている者です。
先日は秘境の芝生を発見するためフィールドワークをしていました。

https://twitter.com/atoms50/status/1588043101163393024?s=20&t=Bk1bCb_1gfFeU9WPxTBGDw

# 過去に製作した芝生プロダクト
あまりに芝生が好きすぎるので、どんどん人にも芝生の良さを知って欲しいと思うようになってきました。
僕のガチおすすめ芝生をリコメンドするLINEbotを過去に製作しています。

https://qiita.com/atoms50/items/f1d8fdba1fc018f7e227

とはいえ、このプロダクトに限界も感じていました。以下が主な悩みです。
- 僕個人の力ではおすすめできる芝生の数に限りがある
- 僕個人の力では芝生のコンディションを管理しきれない

# よし、『シバコロ』を作ろう。
僕個人の力には限界があることを知り、コンセプトを変更しました。  
もっとみんなが芝生を身近なものとして楽しめる。
そして、みんなの力で芝生のコンディションを管理し、便利にしていく。
名付けて『シバコロ』を製作することにしました
 
プロダクトに込めた想いや、必要な機能をまとめた記事はこちらです。是非ご覧ください

https://note.com/atoms50/n/n9ba14e653282

# 『シバコロ』のコア機能

**①場所ベースの検索**
- 登録された芝生をマップで一覧確認できること
- ユーザの現在位置から近い芝生をリコメンドすること


**②芝生の詳細情報の確認**
- 登録された芝生の詳細情報をユーザが閲覧できること


**③芝生の登録・更新**
- ユーザが新規の芝生を登録することができる
- 登録された既存芝生の情報を更新することができる

# 製作環境
### [Glide](https://www.glideapps.com/)
ノーコードでアプリケーションを開発できるツール。
今回は「City Guide」というテンプレートをもとに作成した。

# 『シバコロ』爆誕
**①場所ベースの検索**
「スポット」タブでは、マップ上に登録芝生がピンとして表示される
現在位置を表示することも可能。近場の芝生を視覚的に選択できる
ちなみに現在、４０箇所以上の芝生が登録されている
<img width="600" alt="070c414a2f29531c514b7f994e89cb94.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281755/e14a8b1d-f808-dfe7-b1b2-009c6335f0e7.png">


「リスト検索」タブでは、登録された芝生をリスト形式で表示することができる。
距離フィルターをかけると現在位置から近い順にソートすることができる。
コンディションフィルターをかけると、質の高い芝生順にソートすることができる。
<img width="600" alt="bd34f305ae7cab53f14992ab511101f3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281755/03982272-5ac2-5819-8f77-6483ea106df1.png">
 
**②芝生の詳細情報の確認**
「スポット」または「リスト検索」から芝生選択すると詳細ページへ遷移する。
表示項目は「距離」「営業時間」「特徴」「URL」「似ている芝生」
<img width="600" alt="b918132f27da2f7d1f25b9a8eca08b3d.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281755/26364a71-1d26-403d-0d96-3d4235399b18.png">

**③芝生の登録・更新**
登録はスポットタブから、更新は芝生詳細ページから遷移。
各項目を記載の上「追加」「完了」を選択するとデータベースの値が更新される。
<img width="600" alt="699b25a1050797531a1b2254f8382ec1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281755/290374bf-1051-c207-d140-ebf21c11bcb4.png">

# お試しユーザからのFB
**①場所検索について**

:::note info
**感想**
- 「スポット」タブは、位置情報で近場の芝生を探すというよりも、遠方の芝生を見るのが楽しい。近くはないが、出張や旅行をした時に訪れてみたい芝生が見つかった。
- 「リスト検索」は、距離検索ができるので近くの芝生を見つけたいときに便利だった。ユースケースとしては今すぐアクセスできる芝生を発見したいときに使いたいので、距離に加えて「営業時間」がわかるともっと便利だと思った。

:::
 
FBを受けて：
- 近くの芝生をクイックに見つけて欲しい、という想いに加えて、休日に遠征してみたい芝生も見つけて欲しいと考えていた。今回のモックで「スポット」「リスト検索」を使い分けて両者のユースケースが実現していたのは嬉しく思う。
- 一方で、「近場の芝生を見つける」ユースケースに関しては、「コンディション」よりも「開いているか」がユーザにとって重要であることがわかった。こちらは表示項目を変更したい。


**②詳細情報の確認**

:::note info
**感想**
- 現在の項目に加えて「混み具合」が欲しい。混んでいる芝生は避けたい
- 芝生の写真はもっとたくさん見て判断したい。複数写真表示できるようにして欲しい。
- 芝生のアメニティ詳細も欲しい（BBQ場があるとか）ファミリーや学生にとってはBBQ場があるか知りたいだろうし、逆に私はBBQ場がある芝生はうるさそうだからBBQ場がない芝生を選ぶ。自然とユーザのすみ分けが行われると思う。
- 投稿ページに対して、ユーザの口コミが見たい。芝生に咲いてる花の情報であったり、深夜に襲われたりしないかとか、現地の人だけが知っている情報が蓄積されると嬉しい。
- 「コンディション度」はもっと客観的なものが良い。私が良いと思っている芝生のコンディションが低く表示されていたりして悲しい

:::

FBを受けて：
- 「混雑度合い」「アメニティ」情報はあると便利だと感じる。ある程度こちらで選択肢を用意しておいて、選択追加型にすると便利そうだ。
- BBQ場の情報があると、ファミリーも嬉しいし、単独芝活派にも嬉しいというのは目から鱗だった。単独芝生派をメインユーザと置いていたが、あらゆる層にとって同じ情報でも違う利便性があるのだと知った。
- 口コミに関しては早急に追加したい。今回のテンプレートではそれができなかったので、解決方法を模索したい。
- コンディション度に関しては、定量的に計測するのが難しいため、Google Mapの星みたいな算出方法が良いのかもしれない
 

**③芝生の登録・更新**

:::note info
**感想**
- 登録はめちゃくちゃめんどくさいと第一印象感じた。（特に位置情報の貼り付け作業）
- 一方で、特徴を書いていると過去の思い出が蘇ってだんだん楽しくなり、たくさん登録して日記として管理したい欲求が出てきた。

:::

FBを受けて：
- 僕自身も登録はめんどくさいなーと思っている。位置情報や写真登録等、ある程度自動化できるところは積極的に行っていきたい。
- 一方で、登録するにつれて楽しみが生まれたという感想はありがたかった。人生で芝生を振り返る経験がないだけで、実際に振り返ってみると、ライトユーザでも楽しみを見出すことができることがわかった。新規ユーザの障壁を懸念していたが意外といけるのかもしれない

# ユーザに使ってもらったら僕が楽しかった話
『芝生ポータル』モックを製作し、実際に3人のユーザに試しに使ってもらった。
結果として、開発者の僕自身にもたくさんの素敵な体験があった。
 
未知の芝生に出会えたらいいなあという想いがあったのだが、早速南端の芝生が追加されて満たされた。

https://twitter.com/atoms50/status/1589652183167176704?s=20&t=Bk1bCb_1gfFeU9WPxTBGDw

加えて、芝生の情報を巡って議論が勃発したりした。そうこれ、他人ともっと芝生について語りたかったのだ。

https://twitter.com/atoms50/status/1589652979497721856?s=20&t=Bk1bCb_1gfFeU9WPxTBGDw

# 最後に
シバコロはTwitterでも芝生情報を発信しています！
こちらも是非チェックしてみてください。

https://twitter.com/shibacoro111/status/1592463076288516096?s=20&t=9WmDgnvfgquVEQELHRBulw